diff --git a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap index ef3dd8e71..8739be77f 100644 --- a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap +++ b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap @@ -3947,27 +3947,35 @@ button.bx--dropdown-text:focus { } } -.bx--dropdown__wrapper, -.bx--dropdown__wrapper * { - box-sizing: border-box; +.bx--list-box__wrapper--inline { + display: inline-grid; + align-items: center; + grid-template: auto auto / auto auto; + grid-gap: 0.25rem; } -.bx--overflow-menu, -.bx--overflow-menu__trigger { - box-sizing: border-box; +.bx--list-box__wrapper--inline .bx--label { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; +} + +.bx--list-box__wrapper--inline .bx--label, +.bx--list-box__wrapper--inline .bx--form__helper-text, +.bx--list-box__wrapper--inline .bx--form-requirement { margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - width: 100%; +} + +.bx--list-box__wrapper--inline .bx--form__helper-text { + max-width: none; +} + +.bx--list-box__wrapper--inline .bx--form-requirement { + grid-column: 2; +} + +.bx--list-box { box-sizing: border-box; margin: 0; padding: 0; @@ -3975,1153 +3983,1024 @@ button.bx--dropdown-text:focus { font-size: 100%; font-family: inherit; vertical-align: baseline; - outline: 2px solid transparent; - outline-offset: -2px; position: relative; - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; + width: 100%; + height: 2.5rem; + max-height: 2.5rem; + background-color: var(--field-01, #262626); + border: none; + border-bottom: 1px solid var(--ui-04, #6f6f6f); cursor: pointer; - transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); + color: var(--text-01, #f4f4f4); + transition: all 70ms cubic-bezier(0.2, 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 { +.bx--list-box *, +.bx--list-box *:before, +.bx--list-box *:after { box-sizing: inherit; } -.bx--overflow-menu::-moz-focus-inner, -.bx--overflow-menu__trigger::-moz-focus-inner { - border: 0; +.bx--list-box:hover { + background-color: var(--hover-ui, #353535); } -.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--list-box--xl { + height: 3rem; + max-height: 3rem; } -.bx--overflow-menu:focus, -.bx--overflow-menu__trigger:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--list-box--sm { + height: 2rem; + max-height: 2rem; } -.bx--overflow-menu:hover, -.bx--overflow-menu__trigger:hover { - background-color: var(--hover-ui, #353535); +.bx--list-box--expanded { + border-bottom-color: var(--ui-03, #393939); } -.bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--list-box--expanded:hover { + background-color: var(--field-01, #262626); } -.bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg { - outline: none; +.bx--list-box--expanded:hover.bx--list-box--light:hover { + background-color: var(--field-02, #393939); } -.bx--overflow-menu.bx--overflow-menu--open, -.bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - background-color: var(--field-01, #262626); - transition: none; +.bx--list-box .bx--text-input { + height: 100%; } -.bx--overflow-menu--light.bx--overflow-menu--open, -.bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger { - background-color: var(--field-02, #393939); +.bx--list-box__invalid-icon { + position: absolute; + top: 50%; + right: 2.5rem; + fill: var(--support-01, #fa4d56); + transform: translateY(-50%); } -.bx--overflow-menu__icon { - height: 1rem; - width: 1rem; - fill: var(--icon-01, #f4f4f4); +.bx--list-box[data-invalid] .bx--list-box__field { + border-bottom: 0; + padding-right: 4rem; } -.bx--overflow-menu-options { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - display: none; - flex-direction: column; - align-items: flex-start; - position: absolute; - z-index: 10000; - background-color: var(--field-01, #262626); - width: 10rem; - list-style: none; - top: 32px; - left: 0; +.bx--list-box[data-invalid].bx--list-box--inline .bx--list-box__field { + padding-right: 3.5rem; } -.bx--overflow-menu-options *, -.bx--overflow-menu-options *:before, -.bx--overflow-menu-options *:after { - box-sizing: inherit; +.bx--list-box--light { + background-color: var(--field-02, #393939); } -.bx--overflow-menu-options::after { - content: \\"\\"; - position: absolute; - display: block; - background-color: var(--field-01, #262626); - transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); +.bx--list-box--light .bx--list-box__menu { + background: var(--field-02, #393939); } -.bx--overflow-menu.bx--overflow-menu--open:hover { - background-color: var(--field-01, #262626); +.bx--list-box--light .bx--list-box__menu-item__option { + border-top-color: var(--decorative-01, #525252); } -.bx--overflow-menu-options--light { - background-color: var(--field-02, #393939); +.bx--list-box--light.bx--list-box--expanded { + border-bottom-color: var(--decorative-01, #525252); } -.bx--overflow-menu-options--light::after { - background-color: var(--field-02, #393939); +.bx--list-box--disabled:hover { + background-color: var(--field-01, #262626); } -.bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover { +.bx--list-box--light.bx--list-box--disabled { background-color: var(--field-02, #393939); } -.bx--overflow-menu-options[data-floating-menu-direction=\\"bottom\\"]::after { - top: -0.1875rem; - left: 0; - width: 2rem; - height: 0.1875rem; +.bx--list-box--disabled, +.bx--list-box--disabled .bx--list-box__field, +.bx--list-box--disabled .bx--list-box__field:focus { + border-bottom-width: 0; + outline: none; } -.bx--overflow-menu-options[data-floating-menu-direction=\\"top\\"]::after { - bottom: -0.5rem; - left: 0; - width: 2rem; - height: 0.5rem; +.bx--list-box--disabled .bx--list-box__label, +.bx--list-box--disabled.bx--list-box--inline .bx--list-box__label { + color: var(--disabled-02, #525252); } -.bx--overflow-menu-options[data-floating-menu-direction=\\"left\\"]::after { - right: -0.375rem; - top: 0; - height: 2rem; - width: 0.375rem; +.bx--list-box--disabled .bx--list-box__menu-icon > svg { + fill: var(--disabled-02, #525252); } -.bx--overflow-menu-options[data-floating-menu-direction=\\"right\\"]::after { - top: 0; - left: -0.375rem; - height: 2rem; - width: 0.375rem; +.bx--list-box--disabled, +.bx--list-box--disabled .bx--list-box__field, +.bx--list-box--disabled .bx--list-box__menu-icon { + cursor: not-allowed; } -.bx--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 { - left: auto; - right: 0; +.bx--list-box--disabled .bx--list-box__menu-item, +.bx--list-box--disabled .bx--list-box__menu-item:hover, +.bx--list-box--disabled .bx--list-box__menu-item--highlighted { + color: var(--disabled-02, #525252); + text-decoration: none; } -.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: 0; +.bx--list-box--disabled .bx--list-box__selection:hover { + cursor: not-allowed; } -.bx--overflow-menu-options--open { - display: flex; +.bx--list-box--disabled.bx--list-box[data-invalid] .bx--list-box__field { + padding-right: 3rem; } -.bx--overflow-menu-options__content { - width: 100%; +.bx--list-box--disabled.bx--list-box[data-invalid].bx--list-box--inline .bx--list-box__field { + padding-right: 2rem; } -.bx--overflow-menu-options__option { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: flex; +.bx--list-box.bx--list-box--inline { background-color: transparent; - align-items: center; - width: 100%; - height: 2.5rem; - padding: 0; - transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); + border-width: 0; } -.bx--overflow-menu-options__option *, -.bx--overflow-menu-options__option *:before, -.bx--overflow-menu-options__option *:after { - box-sizing: inherit; +.bx--list-box.bx--list-box--inline:hover { + background-color: var(--hover-ui, #353535); } -.bx--overflow-menu--divider { - border-top: 1px solid var(--ui-03, #393939); -} - -.bx--overflow-menu--light .bx--overflow-menu--divider { - border-top: 1px solid var(--decorative-01, #525252); +.bx--list-box.bx--list-box--inline.bx--list-box--expanded { + border-bottom-width: 0; } -a.bx--overflow-menu-options__btn::before { - content: \\"\\"; - height: 100%; - vertical-align: middle; - display: inline-block; +.bx--list-box.bx--list-box--inline.bx--list-box--expanded .bx--list-box__field[aria-expanded=\\"true\\"] { + border-width: 0; } -.bx--overflow-menu-options__btn { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - outline: 2px solid transparent; - outline-offset: -2px; - font-weight: 400; - width: 100%; - height: 100%; - border: none; - display: inline-flex; - align-items: center; +.bx--list-box.bx--list-box--inline.bx--list-box--disabled:hover { background-color: transparent; - text-align: left; - padding: 0 1rem; - cursor: pointer; - color: var(--text-02, #c6c6c6); - max-width: 11.25rem; - transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.bx--overflow-menu-options__btn:hover { - color: var(--text-01, #f4f4f4); +.bx--list-box.bx--list-box--inline.bx--list-box--expanded:hover { + background-color: var(--field-02, #393939); } -.bx--overflow-menu-options__btn:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--list-box.bx--list-box--inline .bx--list-box__field { + padding: 0 2rem 0 0.5rem; } -.bx--overflow-menu-options__btn::-moz-focus-inner { - border: none; +.bx--list-box.bx--list-box--inline .bx--list-box__menu-icon { + right: 0.5rem; } -.bx--overflow-menu-options__btn svg { - fill: var(--icon-02, #c6c6c6); +.bx--list-box.bx--list-box--inline .bx--list-box__invalid-icon { + right: 2rem; } -.bx--overflow-menu-options__btn:hover svg { - fill: var(--icon-01, #f4f4f4); +.bx--list-box--inline .bx--list-box__label { + color: var(--text-01, #f4f4f4); } -.bx--overflow-menu-options__option-content { +.bx--list-box__field { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + width: 100%; + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + height: calc(100% + 1px); + padding: 0 3rem 0 1rem; + cursor: pointer; + outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.bx--overflow-menu-options__option:hover { - background-color: var(--hover-ui, #353535); -} - -.bx--overflow-menu-options__option--danger { - border-top: 1px solid var(--ui-03, #393939); -} - -.bx--overflow-menu--light .bx--overflow-menu-options__option--danger { - border-top: 1px solid var(--decorative-01, #525252); +.bx--list-box__field *, +.bx--list-box__field *:before, +.bx--list-box__field *:after { + box-sizing: inherit; } -.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover, -.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus { - color: var(--text-04, #ffffff); - background-color: var(--support-01, #fa4d56); +.bx--list-box__field::-moz-focus-inner { + border: 0; } -.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: var(--text-04, #ffffff); +.bx--list-box__field:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--overflow-menu-options__option--disabled:hover { - background-color: var(--ui-01, #262626); - cursor: not-allowed; +.bx--list-box__field[disabled] { + outline: none; + color: var(--disabled-02, #525252); } -.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn { - color: var(--disabled-02, #525252); - pointer-events: none; +.bx--list-box__field .bx--text-input { + padding-right: 4.5rem; } -.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: 2px solid transparent; - outline-offset: -2px; - background-color: var(--ui-01, #262626); +.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input { + padding-right: 6.125rem; } -.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg { - fill: var(--disabled-02, #525252); +.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input + .bx--list-box__invalid-icon { + right: 4.125rem; } -.bx--overflow-menu--flip { - left: -140px; +.bx--list-box__field .bx--text-input--empty { + padding-right: 3rem; } -.bx--overflow-menu--flip:before { - left: 145px; +.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input--empty { + padding-right: 4.5rem; } -.security--combo-button { - display: inline-flex; - position: relative; +.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input--empty + .bx--list-box__invalid-icon { + right: 2.5rem; } -.security--combo-button .security--combo-button--primary { - display: block; - overflow-x: hidden; +.bx--list-box__label { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + color: var(--text-01, #f4f4f4); + user-select: none; text-overflow: ellipsis; + overflow: hidden; white-space: nowrap; - display: flex; - flex: 1; } -.security--combo-button__group { +.bx--list-box__menu-icon { + position: absolute; + top: 0; + right: 1rem; + height: 100%; display: flex; - justify-content: flex-end; - width: 100%; -} - -.security--combo-button__icon { - fill: var(--icon-03, #ffffff); - pointer-events: none; + align-items: center; + transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9); + cursor: pointer; } -.security--combo-button .security--combo-button__overflow-menu { - width: 3rem; - background-color: var(--interactive-01, #0f62fe); - margin-left: 1px; +.bx--list-box__menu-icon > svg { + fill: var(--icon-01, #f4f4f4); + height: 100%; } -.security--combo-button .security--combo-button__overflow-menu:hover, .security--combo-button .security--combo-button__overflow-menu.bx--overflow-menu--open { - background-color: var(--hover-primary, #0353e9); +.bx--list-box__menu-icon--open { + transform: rotate(180deg); } -.security--combo-button .security--combo-button__overflow-menu:active { - background-color: var(--active-primary, #002d9c); +.bx--list-box__selection { + position: absolute; + right: 2.0625rem; + top: 50%; + transform: translateY(-50%); + display: flex; + justify-content: center; + align-items: center; + height: 1.875rem; + width: 1.875rem; + cursor: pointer; + user-select: none; + transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.security--combo-button .bx--overflow-menu-options { - display: grid; - width: 100%; - background-color: var(--ui-02, #393939); - outline: unset; +.bx--list-box__selection:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.security--combo-button .bx--overflow-menu-options__option { - display: inherit; +.bx--list-box__selection--multi { + top: auto; + transform: none; } -.security--combo-button .bx--overflow-menu-options__option:hover { - background-color: var(--hover-selected-ui, #4c4c4c); +.bx--list-box__selection > svg { + fill: var(--icon-02, #c6c6c6); } -.security--combo-button .bx--overflow-menu-options__option:first-child .security--combo-button-item__wrapper { - border-top-color: transparent; +.bx--list-box--disabled .bx--list-box__selection:focus { + outline: none; } -.security--combo-button .bx--overflow-menu-options::after { - display: none; +.bx--list-box--disabled .bx--list-box__selection > svg { + fill: var(--disabled-02, #525252); } -.security--combo-button-item { - width: 100%; +.bx--list-box__selection--multi { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + position: static; display: flex; + align-items: center; justify-content: space-between; -} - -.security--combo-button .security--combo-button-item__wrapper { - display: block; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - outline: unset; padding: 0; - margin: 0 1rem; - border-top: 1px solid var(--active-ui, #525252); - border-bottom: 1px solid transparent; - display: flex; - width: unset; - max-width: unset; - justify-content: space-between; + background-color: var(--inverse-02, #f4f4f4); + height: 1.5rem; + width: auto; + color: var(--inverse-01, #161616); + line-height: 0; + padding: 0.5rem; + padding-right: 0.125rem; + margin-right: 0.625rem; + border-radius: 0.75rem; } -.security--combo-button .security--combo-button-item__wrapper:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; - margin: 0; - padding: 0 1rem; - border-color: transparent; -} - -.security--combo-button .security--combo-button-item__wrapper:hover { - color: var(--text-01, #f4f4f4); - background-color: unset; -} - -.security--combo-button .security--combo-button-item__wrapper > span + svg { - margin-left: 0.5rem; - flex-shrink: 0; +.bx--list-box__selection--multi > svg { + fill: var(--inverse-01, #161616); + margin-left: 0.25rem; + width: 1.25rem; + height: 1.25rem; + padding: 0.125rem; } -.security--combo-button .security--combo-button-item__wrapper:disabled, .security--combo-button .security--combo-button-item__wrapper:disabled:hover { - color: var(--text-03, #6f6f6f); +.bx--list-box__selection--multi > svg:hover { + border-radius: 50%; + background-color: var(--hover-secondary, #606060); } -.security--combo-button .security--combo-button-item__wrapper:disabled svg, .security--combo-button .security--combo-button-item__wrapper:disabled:hover svg { - fill: var(--text-03, #6f6f6f); +.bx--list-box__selection--multi:focus, +.bx--list-box__selection--multi:hover { + outline: none; } -.security--button--icon { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; +.bx--list-box__menu { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + position: absolute; + left: 0; + right: 0; width: 100%; - width: 2.5rem; - height: 2.5rem; - display: flex; - position: relative; - padding-top: 0; - padding-right: 0; - padding-left: 0; - color: var(--icon-01, #f4f4f4); - background-color: inherit; - align-items: center; - border: 0; - fill: currentColor; - justify-content: center; - transition: 0.2s cubic-bezier(0.2, 0, 0.38, 0.9) background-color; + background-color: var(--ui-01, #262626); + transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9); + overflow-y: auto; + z-index: 9100; } -.security--button--icon *, -.security--button--icon *:before, -.security--button--icon *:after { - box-sizing: inherit; +.bx--list-box .bx--list-box__field[aria-expanded=\\"false\\"] + .bx--list-box__menu { + max-height: 0; } -.security--button--icon::-moz-focus-inner { - border: 0; +.bx--list-box--expanded .bx--list-box__menu { + max-height: 8.75rem; } -.security--button--icon + .security--button--icon__tooltip::before { - left: 1.25rem; +.bx--list-box__menu-item { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + height: 2.5rem; + color: var(--text-02, #c6c6c6); + cursor: pointer; + user-select: none; + position: relative; + transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.security--button--icon:hover, .security--button--icon:focus { +.bx--list-box__menu-item:hover { background-color: var(--hover-ui, #353535); } -.security--button--icon:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; - border-width: 0; -} - -.security--button--icon:disabled { - fill: var(--disabled-03, #8d8d8d); - cursor: not-allowed; +.bx--list-box__menu-item:active { + background-color: var(--selected-ui, #393939); } -.security--button--icon:disabled, .security--button--icon:disabled:hover, .security--button--icon:disabled:focus { - background-color: var(--disabled-01, #262626); +.bx--list-box--sm .bx--list-box__menu-item { + height: 2rem; } -.security--button--icon:disabled:focus { - outline-width: 0; +.bx--list-box--xl .bx--list-box__menu-item { + height: 3rem; } -.security--button--icon--lg { - width: 3rem; - height: 3rem; +.bx--list-box--disabled .bx--list-box__menu-item:hover { + background-color: transparent; } -.security--button--icon--lg + .security--button--icon__tooltip::before { - left: 1.5rem; +.bx--list-box--light .bx--list-box__menu-item:active { + background-color: var(--selected-light-ui, #525252); } -.security--button--icon--sm { - width: 2rem; - height: 2rem; +.bx--list-box--disabled .bx--list-box__menu-item__option:hover { + border-top-color: var(--ui-03, #393939); } -.security--button--icon--sm + .security--button--icon__tooltip::before { - left: 1rem; +.bx--list-box__menu-item:first-of-type .bx--list-box__menu-item__option { + border-top-color: transparent; } -.security--button--icon--xl { - width: 4rem; - height: 4rem; +.bx--list-box__menu-item:hover .bx--list-box__menu-item__option { + color: var(--text-01, #f4f4f4); } -.security--button--icon--xl + .security--button--icon__tooltip::before { - left: 2rem; +.bx--list-box__menu-item:hover + .bx--list-box__menu-item .bx--list-box__menu-item__option { + border-top-color: transparent; } -.security--button--icon--tooltip::before, .security--button--icon--tooltip::after { - z-index: 10000; +.bx--list-box--disabled .bx--list-box__menu-item:hover + .bx--list-box__menu-item .bx--list-box__menu-item__option { + border-top-color: var(--ui-03, #393939); } -.security--button--icon--tooltip::before { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - display: flex; - position: absolute; - padding: 0.125rem 1rem; - color: var(--inverse-01, #161616); - background-color: var(--inverse-02, #f4f4f4); - align-items: center; - border-radius: 0.125rem; - opacity: 0; - pointer-events: none; - transition-duration: 0.1s; - transition-property: opacity; +.bx--list-box__menu-item__option { + outline: 2px solid transparent; + outline-offset: -2px; + display: block; + height: 2.5rem; + color: var(--text-02, #c6c6c6); + text-decoration: none; + font-weight: normal; + line-height: 1rem; + padding: 0.6875rem 0; + margin: 0 1rem; + padding-right: 1.5rem; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + border-top-color: var(--ui-03, #393939); + text-overflow: ellipsis; + overflow: hidden; white-space: nowrap; - content: attr(aria-label); + transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.security--button--icon--tooltip::after { - position: absolute; - display: inline-block; +.bx--list-box__menu-item__option:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; + margin: 0; + padding: 0.6875rem 1rem; border-color: transparent; - border-style: solid; - border-width: 0.25rem; - transition-duration: 0.1s; - transition-property: opacity; - opacity: 1; - content: \\"\\"; - opacity: 0; } -.security--button--icon--tooltip:focus::before, .security--button--icon--tooltip:focus::after, .security--button--icon--tooltip:hover::before, .security--button--icon--tooltip:hover::after { - opacity: 1; +.bx--list-box__menu-item__option:hover { + color: var(--text-01, #f4f4f4); + border-color: transparent; } -.security--button--icon--tooltip--top::before, .security--button--icon--tooltip--top::after, .security--button--icon--tooltip--bottom::before, .security--button--icon--tooltip--bottom::after { - left: 50%; +.bx--list-box--sm .bx--list-box__menu-item__option { + padding-top: 0.4375rem; + padding-bottom: 0.4375rem; + height: 2rem; } -.security--button--icon--tooltip--left::before, .security--button--icon--tooltip--left::after, .security--button--icon--tooltip--right::before, .security--button--icon--tooltip--right::after { - top: 50%; +.bx--list-box--xl .bx--list-box__menu-item__option { + padding-top: 0.9375rem; + padding-bottom: 0.9375rem; + height: 3rem; } -.security--button--icon--tooltip--top::before, .security--button--icon--tooltip--top::after { - bottom: calc( 100% + 0.25rem); +.bx--list-box--disabled .bx--list-box__menu-item:hover .bx--list-box__menu-item__option, +.bx--list-box--disabled .bx--list-box__menu-item__option { + color: var(--disabled-02, #525252); } -.security--button--icon--tooltip--top::before { - transform: translate(-50%, -0.25rem); +.bx--list-box.bx--list-box--inline .bx--list-box__menu-item__option { + margin: 0 0.5rem; } -.security--button--icon--tooltip--top::after { - border-top-color: var(--inverse-02, #f4f4f4); - transform: translate(-50%, 0.25rem); +.bx--list-box.bx--list-box--inline .bx--list-box__menu-item__option:focus { + margin: 0; + padding-left: 0.5rem; + padding-right: 0.5rem; } -.security--button--icon--tooltip--right::before, .security--button--icon--tooltip--right::after { - left: calc( 100% + 0.25rem); +.bx--list-box__menu-item--highlighted { + background-color: var(--hover-ui, #353535); + color: var(--text-01, #f4f4f4); + border-color: transparent; } -.security--button--icon--tooltip--right::before { - transform: translate(0.25rem, -50%); +.bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option, +.bx--list-box__menu-item--highlighted + .bx--list-box__menu-item .bx--list-box__menu-item__option { + border-top-color: transparent; } -.security--button--icon--tooltip--right::after { - border-right-color: var(--inverse-02, #f4f4f4); - transform: translate(-0.25rem, -50%); +.bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option { + color: var(--text-01, #f4f4f4); } -.security--button--icon--tooltip--bottom::before, .security--button--icon--tooltip--bottom::after { - top: calc( 100% + 0.25rem); +.bx--list-box__menu-item--active { + color: var(--text-01, #f4f4f4); + background-color: var(--selected-ui, #393939); + border-bottom-color: var(--selected-ui, #393939); } -.security--button--icon--tooltip--bottom::before { - transform: translate(-50%, 0.25rem); +.bx--list-box--light .bx--list-box__menu-item--active { + background-color: var(--selected-light-ui, #525252); + border-bottom-color: var(--selected-light-ui, #525252); } -.security--button--icon--tooltip--bottom::after { - border-bottom-color: var(--inverse-02, #f4f4f4); - transform: translate(-50%, -0.25rem); +.bx--list-box__menu-item--active:hover { + background-color: var(--hover-ui, #353535); + border-bottom-color: var(--hover-ui, #353535); } -.security--button--icon--tooltip--left::before, .security--button--icon--tooltip--left::after { - right: calc( 100% + 0.25rem); +.bx--list-box__menu-item--active .bx--list-box__menu-item__option { + color: var(--text-01, #f4f4f4); } -.security--button--icon--tooltip--left::before { - transform: translate(-0.25rem, -50%); +.bx--list-box__menu-item--active + .bx--list-box__menu-item > .bx--list-box__menu-item__option { + border-top-color: transparent; } -.security--button--icon--tooltip--left::after { - border-left-color: var(--inverse-02, #f4f4f4); - transform: translate(0.25rem, -50%); +.bx--list-box__menu-item__selected-icon { + display: none; + position: absolute; + top: 50%; + right: 1rem; + transform: translateY(-50%); + fill: var(--icon-01, #f4f4f4); } -.security--panel--v2 { - display: flex; - position: fixed; - top: 0; - right: 0; - height: 100%; - width: 20rem; - color: var(--text-01, #f4f4f4); - background-color: var(--ui-01, #262626); - flex-direction: column; - justify-content: space-between; - z-index: 10000; - outline: none; +.bx--list-box--inline .bx--list-box__menu-item__selected-icon { + right: 0.5rem; } -.security--theme--cg10 .security--panel--v2 { - --interactive-01: #0f62fe; - --interactive-02: #697077; - --interactive-03: #ffffff; - --interactive-04: #4589ff; - --ui-background: #121619; - --ui-01: #21272a; - --ui-02: #343a3f; - --ui-03: #343a3f; - --ui-04: #697077; - --ui-05: #f2f4f8; - --text-01: #f2f4f8; - --text-02: #c1c7cd; - --text-03: #697077; - --text-04: #ffffff; - --text-05: #878d96; - --text-error: #ff8389; - --icon-01: #f2f4f8; - --icon-02: #c1c7cd; - --icon-03: #ffffff; - --link-01: #78a9ff; - --inverse-link: #0f62fe; - --field-01: #21272a; - --field-02: #343a3f; - --inverse-01: #121619; - --inverse-02: #f2f4f8; - --support-01: #fa4d56; - --support-02: #42be65; - --support-03: #f1c21b; - --support-04: #4589ff; - --inverse-support-01: #da1e28; - --inverse-support-02: #24a148; - --inverse-support-03: #f1c21b; - --inverse-support-04: #0f62fe; - --overlay-01: rgba(22, 22, 22, 0.7); - --danger: #da1e28; - --focus: #ffffff; - --inverse-focus-ui: #0f62fe; - --hover-primary: #0353e9; - --active-primary: #002d9c; - --hover-primary-text: #a6c8ff; - --hover-secondary: #5a6066; - --active-secondary: #343a3f; - --hover-tertiary: #f2f4f8; - --active-tertiary: #c1c7cd; - --hover-ui: #2f353a; - --active-ui: #4d5358; - --selected-ui: #343a3f; - --selected-light-ui: #4d5358; - --inverse-hover-ui: #e0e4ea; - --hover-selected-ui: #464c51; - --hover-danger: #b81921; - --active-danger: #750e13; - --hover-row: #2f353a; - --visited-link: #be95ff; - --disabled-01: #21272a; - --disabled-02: #4d5358; - --disabled-03: #878d96; - --highlight: #002d9c; - --decorative-01: #4d5358; - --skeleton-01: #2f353a; - --skeleton-02: #343a3f; - --brand-01: #0f62fe; - --brand-02: #697077; - --brand-03: #ffffff; - --active-01: #4d5358; - --hover-field: #2f353a; +.bx--list-box__menu-item--active .bx--list-box__menu-item__selected-icon { + display: block; } -.security--panel--v2[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--panel--v2 { - right: unset; - left: 0; +.bx--list-box__menu-item .bx--checkbox-label { + width: 100%; } -.security--panel--v2__container .security--header__container { - width: calc( 100% - 3rem - 20rem); +.bx--list-box__menu-item .bx--checkbox-label-text { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } -.security--panel--v2__container .security--header__container > .security--header { - width: inherit; +.bx--list-box--up .bx--list-box__menu { + bottom: 2.5rem; } -.security--panel--v2__button--close:only-child { - margin-left: auto; +.bx--list-box--up.bx--dropdown--sm .bx--list-box__menu, +.bx--list-box--up.bx--list-box--sm .bx--list-box__menu { + bottom: 2rem; } -.security--panel--v2__button--close:only-child[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--panel--v2__button--close:only-child { - margin-right: auto; - margin-left: unset; +.bx--list-box--up.bx--dropdown--xl .bx--list-box__menu, +.bx--list-box--up.bx--list-box--xl .bx--list-box__menu { + bottom: 3rem; } -.security--panel--v2__header { - display: flex; - position: fixed; - top: 0; - width: 18rem; - padding-top: 1rem; - padding-bottom: 1rem; - margin-right: 1rem; - margin-left: 1rem; - box-sizing: border-box; - flex-direction: row-reverse; - justify-content: space-between; - border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); +.bx--list-box input[role=\\"combobox\\"] { + background-color: inherit; + min-width: 0; } -.security--panel--v2__header__container--title { - width: 14.5rem; +.bx--overflow-menu, +.bx--overflow-menu__trigger { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + width: 100%; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + outline: 2px solid transparent; + outline-offset: -2px; + position: relative; + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.security--panel--v2__header--title, .security--panel--v2__header--subtitle { - color: var(--text-01, #f4f4f4); - word-break: break-word; +.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; } -.security--panel--v2__header--title { - font-size: 1.25rem; - font-weight: 400; - line-height: 1.625rem; - letter-spacing: 0; - display: block; - margin-bottom: 0.75rem; +.bx--overflow-menu::-moz-focus-inner, +.bx--overflow-menu__trigger::-moz-focus-inner { + border: 0; } -.security--panel--v2__header--subtitle { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.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; } -.security--panel--v2__body { - margin-top: 5.5rem; - flex-grow: 1; - overflow-y: auto; +.bx--overflow-menu:focus, +.bx--overflow-menu__trigger:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.security--panel--v2__body--content { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - padding-top: 1rem; - padding-bottom: 1rem; - border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); +.bx--overflow-menu:hover, +.bx--overflow-menu__trigger:hover { + background-color: var(--hover-ui, #353535); } -.security--panel--v2__body--content:last-child { - border-bottom: none; +.bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.security--panel--v2__body--footer { - margin-bottom: 3rem; +.bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg { + outline: none; } -.security--panel--v2__footer { - display: flex; - position: fixed; - bottom: 0; - width: 20rem; +.bx--overflow-menu.bx--overflow-menu--open, +.bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + background-color: var(--field-01, #262626); + transition: none; } -.security--panel--v2__footer .security--button:not(.security--combo-button__overflow-menu) { - max-width: 20rem; - flex-grow: 1; +.bx--overflow-menu--light.bx--overflow-menu--open, +.bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger { + background-color: var(--field-02, #393939); } -.security--panel--v2__transition--appear, .security--panel--v2__transition--enter { - transform: translate3d(20rem, 0, 0); - opacity: 0; +.bx--overflow-menu__icon { + height: 1rem; + width: 1rem; + fill: var(--icon-01, #f4f4f4); } -.security--panel--v2__transition--appear--active, .security--panel--v2__transition--enter--active { - transform: translate3d(0, 0, 0); - transition: all 240ms; - transition-timing-function: cubic-bezier(0, 0, 0.3, 1); - opacity: 1; +.bx--overflow-menu-options { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + display: none; + flex-direction: column; + align-items: flex-start; + position: absolute; + z-index: 10000; + background-color: var(--field-01, #262626); + width: 10rem; + list-style: none; + top: 32px; + left: 0; } -.security--panel--v2__transition--leave { - transform: translate3d(0, 0, 0); - opacity: 1; +.bx--overflow-menu-options *, +.bx--overflow-menu-options *:before, +.bx--overflow-menu-options *:after { + box-sizing: inherit; } -.security--panel--v2__transition--leave--active { - transform: translate3d(20rem, 0, 0); - transition: all 240ms; - transition-timing-function: cubic-bezier(0.4, 0.14, 1, 1); - opacity: 0; +.bx--overflow-menu-options::after { + content: \\"\\"; + position: absolute; + display: block; + background-color: var(--field-01, #262626); + transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.security--decorator { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - display: inline-flex; - box-sizing: border-box; - font-family: \\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif; - height: 1.625rem; - background-color: var(--hover-ui, #353535); - font-style: normal; - font-stretch: normal; - text-align: left; - text-transform: none; - max-width: 100%; - padding: unset; - border: unset; - vertical-align: middle; - color: var(--text-02, #c6c6c6); - text-decoration: none; +.bx--overflow-menu.bx--overflow-menu--open:hover { + background-color: var(--field-01, #262626); } -.security--decorator__icon { - padding-left: 0.5rem; +.bx--overflow-menu-options--light { + background-color: var(--field-02, #393939); } -.security--decorator__type, .security--decorator__value { - padding-right: 0.5rem; - padding-left: 0.5rem; +.bx--overflow-menu-options--light::after { + background-color: var(--field-02, #393939); } -.security--decorator--interactive:not(.security--decorator--active) .security--decorator__type { - color: var(--text-02, #c6c6c6); +.bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover { + background-color: var(--field-02, #393939); } -.security--decorator--interactive:not(.security--decorator--active) .security--decorator__value { - color: var(--hover-primary-text, #a6c8ff); +.bx--overflow-menu-options[data-floating-menu-direction=\\"bottom\\"]::after { + top: -0.1875rem; + left: 0; + width: 2rem; + height: 0.1875rem; } -.security--decorator--interactive:not(.security--decorator--active):visited .security--decorator__value { - color: var(--visited-link, #be95ff); +.bx--overflow-menu-options[data-floating-menu-direction=\\"top\\"]::after { + bottom: -0.5rem; + left: 0; + width: 2rem; + height: 0.5rem; } -.security--decorator.security--decorator--interactive:hover { - cursor: pointer; - background-color: var(--active-ui, #525252); +.bx--overflow-menu-options[data-floating-menu-direction=\\"left\\"]::after { + right: -0.375rem; + top: 0; + height: 2rem; + width: 0.375rem; } -.security--decorator.security--decorator--interactive:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--overflow-menu-options[data-floating-menu-direction=\\"right\\"]::after { + top: 0; + left: -0.375rem; + height: 2rem; + width: 0.375rem; } -.security--decorator.security--decorator--interactive:active, .security--decorator.security--decorator--interactive:focus, .security--decorator.security--decorator--interactive:hover, .security--decorator.security--decorator--interactive:focus:active { - text-decoration: none; - box-shadow: none; +.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 { + left: auto; + right: 0; } -.security--decorator.security--decorator--interactive:active .security--decorator__value, .security--decorator.security--decorator--interactive:focus .security--decorator__value, .security--decorator.security--decorator--interactive:hover .security--decorator__value, .security--decorator.security--decorator--interactive:focus:active .security--decorator__value { - text-decoration: underline; +.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: 0; } -.security--decorator.security--decorator--active, .security--decorator.security--decorator--active:hover, .security--decorator.security--decorator:focus:active { - background-color: var(--ui-05, #f4f4f4); - color: var(--active-ui, #525252); +.bx--overflow-menu-options--open { + display: flex; } -.security--decorator.security--decorator--active:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; - outline-color: var(--inverse-focus-ui, #0f62fe); +.bx--overflow-menu-options__content { + width: 100%; } -.security--decorator__icon, .security--decorator__type, .security--decorator__value { - display: inherit; - height: inherit; +.bx--overflow-menu-options__option { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: flex; + background-color: transparent; align-items: center; - transition-duration: 0.2s; - transition-property: background-color; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + width: 100%; + height: 2.5rem; + padding: 0; + transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.security--decorator.security--decorator--inline { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - height: 1.25rem; - vertical-align: middle; +.bx--overflow-menu-options__option *, +.bx--overflow-menu-options__option *:before, +.bx--overflow-menu-options__option *:after { + box-sizing: inherit; } -.security--decorator.security--decorator--inline > .security--decorator__icon { - padding-left: 0.25rem; +.bx--overflow-menu--divider { + border-top: 1px solid var(--ui-03, #393939); } -.security--decorator.security--decorator--inline > .security--decorator__type, .security--decorator.security--decorator--inline > .security--decorator__value { - padding-right: 0.25rem; - padding-left: 0.25rem; +.bx--overflow-menu--light .bx--overflow-menu--divider { + border-top: 1px solid var(--decorative-01, #525252); } -.security--decorator.security--decorator--inline > .security--decorator__type, .security--decorator.security--decorator--inline > .security--decorator__value { - line-height: 1.25rem; +a.bx--overflow-menu-options__btn::before { + content: \\"\\"; + height: 100%; + vertical-align: middle; + display: inline-block; } -.security--decorator--unknown .security--decorator__icon, .security--decorator__icon--unknown { - fill: var(--icon-02, #c6c6c6); +.bx--overflow-menu-options__btn { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + outline: 2px solid transparent; + outline-offset: -2px; + font-weight: 400; + width: 100%; + height: 100%; + border: none; + display: inline-flex; + align-items: center; + background-color: transparent; + text-align: left; + padding: 0 1rem; + cursor: pointer; + color: var(--text-02, #c6c6c6); + max-width: 11.25rem; + transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.security--decorator--low .security--decorator__icon, .security--decorator__icon--low { - fill: var(--support-03, #f1c21b); +.bx--overflow-menu-options__btn:hover { + color: var(--text-01, #f4f4f4); } -.security--decorator--medium .security--decorator__icon, .security--decorator__icon--medium { - fill: #ff832b; +.bx--overflow-menu-options__btn:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.security--decorator__icon--high, .security--decorator__icon--critical { - fill: var(--support-01, #fa4d56); +.bx--overflow-menu-options__btn::-moz-focus-inner { + border: none; } -.security--decorator--high .security--decorator__icon, .security--decorator--critical .security--decorator__icon { - fill: var(--support-01, #fa4d56); +.bx--overflow-menu-options__btn svg { + fill: var(--icon-02, #c6c6c6); } -.security--decorator--high--active .security--decorator__icon, .security--decorator--high:focus:active .security--decorator__icon, .security--decorator--critical--active .security--decorator__icon, .security--decorator--critical:focus:active .security--decorator__icon { - fill: var(--hover-danger, #b81921); +.bx--overflow-menu-options__btn:hover svg { + fill: var(--icon-01, #f4f4f4); } -.security--decorator__type { - border-right: 1px solid var(--ui-01, #262626); +.bx--overflow-menu-options__option-content { white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.security--decorator--active .security--decorator__type { - border-right: 1px solid var(--ui-04, #6f6f6f); +.bx--overflow-menu-options__option:hover { + background-color: var(--hover-ui, #353535); } -.security--decorator__value { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: inline; - line-height: 1.625rem; +.bx--overflow-menu-options__option--danger { + border-top: 1px solid var(--ui-03, #393939); } -.bx--table-toolbar { - background: var(--ui-01, #262626); - display: flex; - height: 3rem; - overflow: hidden; - position: relative; - width: 100%; +.bx--overflow-menu--light .bx--overflow-menu-options__option--danger { + border-top: 1px solid var(--decorative-01, #525252); } -.bx--toolbar-content { - display: flex; - height: 3rem; - width: 100%; - justify-content: flex-end; - transform: translate3d(0, 0, 0); - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover, +.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus { + color: var(--text-04, #ffffff); + background-color: var(--support-01, #fa4d56); } -.bx--batch-actions ~ .bx--toolbar-content { - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); +.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: var(--text-04, #ffffff); } -.bx--toolbar-content .bx--search .bx--search-input { - background-color: transparent; +.bx--overflow-menu-options__option--disabled:hover { + background-color: var(--ui-01, #262626); + cursor: not-allowed; } -.bx--batch-actions ~ .bx--toolbar-search-container { - opacity: 1; - transition: opacity 110ms; - display: flex; - align-items: center; +.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn { + color: var(--disabled-02, #525252); + pointer-events: none; } -.bx--toolbar-search-container-expandable { - height: 3rem; - width: 3rem; - position: relative; - transition: flex 240ms cubic-bezier(0.2, 0, 0.38, 0.9); - box-shadow: 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: 2px solid transparent; + outline-offset: -2px; + background-color: var(--ui-01, #262626); } -.bx--toolbar-search-container-expandable .bx--search { - width: 3rem; - height: 100%; - position: initial; +.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg { + fill: var(--disabled-02, #525252); } -.bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier { - height: 3rem; - width: 3rem; - padding: 1rem; - left: 0; - cursor: pointer; - pointer-events: all; - transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); +.bx--overflow-menu--flip { + left: -140px; } -.bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--overflow-menu--flip:before { + left: 145px; } -.bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier:hover { - background: var(--hover-field, #353535); +.security--combo-button { + display: inline-flex; + position: relative; } -.bx--toolbar-search-container-expandable .bx--search .bx--label { - visibility: hidden; +.security--combo-button .security--combo-button--primary { + display: block; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + flex: 1; } -.bx--toolbar-search-container-expandable .bx--search .bx--search-input { - border: none; - height: 100%; - visibility: hidden; - padding: 0; - background-color: transparent; +.security--combo-button__group { + display: flex; + justify-content: flex-end; + width: 100%; } -.bx--toolbar-search-container-expandable .bx--search .bx--search-close { - height: 3rem; - width: 3rem; +.security--combo-button__icon { + fill: var(--icon-03, #ffffff); + pointer-events: none; } -.bx--toolbar-search-container-expandable .bx--search .bx--search-close:before { - top: 2px; - height: calc(100% - 4px); - background-color: var(--hover-ui, #353535); +.security--combo-button .security--combo-button__overflow-menu { + width: 3rem; + background-color: var(--interactive-01, #0f62fe); + margin-left: 1px; } -.bx--toolbar-search-container-expandable .bx--search .bx--search-close:focus::before { - background-color: var(--focus, #ffffff); +.security--combo-button .security--combo-button__overflow-menu:hover, .security--combo-button .security--combo-button__overflow-menu.bx--overflow-menu--open { + background-color: var(--hover-primary, #0353e9); } -.bx--toolbar-search-container-active { - flex: auto; - transition: flex 150ms cubic-bezier(0.2, 0, 0.38, 0.9); +.security--combo-button .security--combo-button__overflow-menu:active { + background-color: var(--active-primary, #002d9c); } -.bx--toolbar-search-container-active .bx--search { +.security--combo-button .bx--overflow-menu-options { + display: grid; width: 100%; + background-color: var(--ui-02, #393939); + outline: unset; } -.bx--toolbar-search-container-active .bx--search .bx--label, -.bx--toolbar-search-container-active .bx--search .bx--search-input { - padding: 0 3rem; - visibility: inherit; +.security--combo-button .bx--overflow-menu-options__option { + display: inherit; } -.bx--toolbar-search-container-active .bx--search .bx--search-input:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.security--combo-button .bx--overflow-menu-options__option:hover { + background-color: var(--hover-selected-ui, #4c4c4c); } -.bx--toolbar-search-container-active .bx--search .bx--search-input:focus + .bx--search-close { - border: none; - box-shadow: none; - outline: none; +.security--combo-button .bx--overflow-menu-options__option:first-child .security--combo-button-item__wrapper { + border-top-color: transparent; } -.bx--toolbar-search-container-active .bx--search .bx--search-input:not(:placeholder-shown) { - background: var(--hover-field, #353535); - border: none; +.security--combo-button .bx--overflow-menu-options::after { + display: none; } -.bx--toolbar-search-container-active .bx--search .bx--search-magnifier:focus, -.bx--toolbar-search-container-active .bx--search .bx--search-magnifier:active, -.bx--toolbar-search-container-active .bx--search .bx--search-magnifier:hover { - outline: none; - border: none; - background: transparent; +.security--combo-button-item { + width: 100%; + display: flex; + justify-content: space-between; } -.bx--toolbar-search-container-persistent .bx--search-close, -.bx--toolbar-search-container-persistent .bx--search-close:hover, -.bx--toolbar-search-container-active .bx--search .bx--search-close, -.bx--toolbar-search-container-active .bx--search .bx--search-close:hover { - border: none; - background-color: transparent; +.security--combo-button .security--combo-button-item__wrapper { + display: block; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + outline: unset; + padding: 0; + margin: 0 1rem; + border-top: 1px solid var(--active-ui, #525252); + border-bottom: 1px solid transparent; + display: flex; + width: unset; + max-width: unset; + justify-content: space-between; } -.bx--toolbar-search-container-persistent .bx--search-close::before { - display: none; +.security--combo-button .security--combo-button-item__wrapper:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; + margin: 0; + padding: 0 1rem; + border-color: transparent; } -.bx--overflow-menu.bx--toolbar-action { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - width: 100%; - display: flex; - cursor: pointer; - height: 3rem; - width: 3rem; - padding: 1rem; - transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); +.security--combo-button .security--combo-button-item__wrapper:hover { + color: var(--text-01, #f4f4f4); + background-color: unset; } -.bx--overflow-menu.bx--toolbar-action *, -.bx--overflow-menu.bx--toolbar-action *:before, -.bx--overflow-menu.bx--toolbar-action *:after { - box-sizing: inherit; +.security--combo-button .security--combo-button-item__wrapper > span + svg { + margin-left: 0.5rem; + flex-shrink: 0; } -.bx--overflow-menu.bx--toolbar-action::-moz-focus-inner { - border: 0; +.security--combo-button .security--combo-button-item__wrapper:disabled, .security--combo-button .security--combo-button-item__wrapper:disabled:hover { + color: var(--text-03, #6f6f6f); } -.bx--toolbar-action { +.security--combo-button .security--combo-button-item__wrapper:disabled svg, .security--combo-button .security--combo-button-item__wrapper:disabled:hover svg { + fill: var(--text-03, #6f6f6f); +} + +.security--button--icon { box-sizing: border-box; margin: 0; padding: 0; @@ -5136,1860 +5015,1766 @@ a.bx--overflow-menu-options__btn::before { padding: 0; cursor: pointer; width: 100%; + width: 2.5rem; + height: 2.5rem; display: flex; - cursor: pointer; - height: 3rem; - width: 3rem; - transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); + position: relative; + padding-top: 0; + padding-right: 0; + padding-left: 0; + color: var(--icon-01, #f4f4f4); + background-color: inherit; + align-items: center; + border: 0; + fill: currentColor; + justify-content: center; + transition: 0.2s cubic-bezier(0.2, 0, 0.38, 0.9) background-color; } -.bx--toolbar-action *, -.bx--toolbar-action *:before, -.bx--toolbar-action *:after { +.security--button--icon *, +.security--button--icon *:before, +.security--button--icon *:after { box-sizing: inherit; } -.bx--toolbar-action::-moz-focus-inner { +.security--button--icon::-moz-focus-inner { border: 0; } -.bx--toolbar-action:hover:not([disabled]) { - background: var(--hover-field, #353535); +.security--button--icon + .security--button--icon__tooltip::before { + left: 1.25rem; } -.bx--toolbar-action:hover[aria-expanded=\\"true\\"] { - background: var(--ui-01, #262626); +.security--button--icon:hover, .security--button--icon:focus { + background-color: var(--hover-ui, #353535); } -.bx--toolbar-action[disabled] { - cursor: not-allowed; +.security--button--icon:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; + border-width: 0; } -.bx--toolbar-action[disabled] .bx--toolbar-action__icon { - fill: var(--disabled-02, #525252); +.security--button--icon:disabled { + fill: var(--disabled-03, #8d8d8d); cursor: not-allowed; } -.bx--toolbar-action:focus:not([disabled]), -.bx--toolbar-action:active:not([disabled]) { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; -} - -.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 { - margin: 0; - max-width: none; - white-space: nowrap; -} - -.bx--overflow-menu--data-table { - height: 3rem; +.security--button--icon:disabled, .security--button--icon:disabled:hover, .security--button--icon:disabled:focus { + background-color: var(--disabled-01, #262626); } -.bx--toolbar-action__icon { - height: 1rem; - width: auto; - max-width: 1rem; - fill: var(--icon-01, #f4f4f4); +.security--button--icon:disabled:focus { + outline-width: 0; } -.bx--toolbar-search-container-persistent { - width: 100%; +.security--button--icon--lg { + width: 3rem; height: 3rem; - opacity: 1; - position: relative; } -.bx--toolbar-search-container-persistent + .bx--toolbar-content { - position: relative; - width: auto; +.security--button--icon--lg + .security--button--icon__tooltip::before { + left: 1.5rem; } -.bx--toolbar-search-container-persistent .bx--search { - position: initial; +.security--button--icon--sm { + width: 2rem; + height: 2rem; } -.bx--toolbar-search-container-persistent .bx--search .bx--search-magnifier { +.security--button--icon--sm + .security--button--icon__tooltip::before { left: 1rem; } -.bx--toolbar-search-container-persistent .bx--search .bx--search-input { - height: 3rem; - padding: 0 3rem; - border: none; -} - -.bx--toolbar-search-container-persistent .bx--search .bx--search-input:focus:not([disabled]) { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; -} - -.bx--toolbar-search-container-persistent .bx--search .bx--search-input:hover:not([disabled]) { - background: var(--hover-field, #353535); -} - -.bx--toolbar-search-container-persistent .bx--search .bx--search-input:active:not([disabled]), -.bx--toolbar-search-container-persistent .bx--search .bx--search-input:not(:placeholder-shown) { - background: var(--hover-field, #353535); +.security--button--icon--xl { + width: 4rem; + height: 4rem; } -.bx--toolbar-search-container-persistent .bx--search .bx--search-close { - height: 3rem; - width: 3rem; +.security--button--icon--xl + .security--button--icon__tooltip::before { + left: 2rem; } -.bx--batch-actions--active ~ .bx--toolbar-search-container, -.bx--batch-actions--active ~ .bx--toolbar-content { - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - transform: translate3d(0, 48px, 0); - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.security--button--icon--tooltip::before, .security--button--icon--tooltip::after { + z-index: 10000; } -.bx--batch-actions { +.security--button--icon--tooltip::before { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; display: flex; position: absolute; - top: 0; - left: 0; + padding: 0.125rem 1rem; + color: var(--inverse-01, #161616); + background-color: var(--inverse-02, #f4f4f4); align-items: center; - padding-left: 1.5rem; - padding-right: 1.5rem; - width: 100%; - height: 100%; + border-radius: 0.125rem; + opacity: 0; pointer-events: none; - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - will-change: transform; - background-color: var(--interactive-01, #0f62fe); - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - transform: translate3d(0, 48px, 0); -} - -.bx--batch-actions:focus { - outline: 1px solid var(--focus, #ffffff); -} - -.bx--batch-actions--active { - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); - pointer-events: all; - transform: translate3d(0, 0, 0); + transition-duration: 0.1s; + transition-property: opacity; + white-space: nowrap; + content: attr(aria-label); } -.bx--action-list { +.security--button--icon--tooltip::after { position: absolute; - top: 0; - right: 0; - display: flex; -} - -.bx--action-list .bx--btn { - color: var(--text-04, #ffffff); - padding: calc(0.875rem - 3px) 12px; -} - -.bx--action-list .bx--btn .bx--btn__icon { - fill: var(--icon-03, #ffffff); - position: static; - margin-left: 0.5rem; + display: inline-block; + border-color: transparent; + border-style: solid; + border-width: 0.25rem; + transition-duration: 0.1s; + transition-property: opacity; + opacity: 1; + content: \\"\\"; + opacity: 0; } -.bx--action-list .bx--btn .bx--btn__icon .st0 { - fill: none; +.security--button--icon--tooltip:focus::before, .security--button--icon--tooltip:focus::after, .security--button--icon--tooltip:hover::before, .security--button--icon--tooltip:hover::after { + opacity: 1; } -.bx--batch-download { - padding: 0.0625rem; +.security--button--icon--tooltip--top::before, .security--button--icon--tooltip--top::after, .security--button--icon--tooltip--bottom::before, .security--button--icon--tooltip--bottom::after { + left: 50%; } -.bx--action-list .bx--btn--primary:focus::before, -.bx--action-list .bx--btn--primary:focus::before, -.bx--action-list .bx--btn--primary::before, -.bx--action-list .bx--btn--primary::before, -.bx--action-list .bx--btn--primary:focus::after, -.bx--action-list .bx--btn--primary:focus::after, -.bx--action-list .bx--btn--primary::after, -.bx--action-list .bx--btn--primary::after { - display: none; +.security--button--icon--tooltip--left::before, .security--button--icon--tooltip--left::after, .security--button--icon--tooltip--right::before, .security--button--icon--tooltip--right::after { + top: 50%; } -.bx--action-list .bx--btn--primary:focus { - outline: 2px solid var(--ui-01, #262626); - outline-offset: -0.125rem; +.security--button--icon--tooltip--top::before, .security--button--icon--tooltip--top::after { + bottom: calc( 100% + 0.25rem); } -.bx--action-list .bx--btn { - min-width: 0; +.security--button--icon--tooltip--top::before { + transform: translate(-50%, -0.25rem); } -.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; +.security--button--icon--tooltip--top::after { + border-top-color: var(--inverse-02, #f4f4f4); + transform: translate(-50%, 0.25rem); } -.bx--btn--primary.bx--batch-summary__cancel::before { - display: block; - position: absolute; - opacity: 1; - top: 0.9375rem; - left: 0; - height: 1rem; - width: 0.0625rem; - content: \\"\\"; - background-color: var(--text-04, #ffffff); - border: none; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.security--button--icon--tooltip--right::before, .security--button--icon--tooltip--right::after { + left: calc( 100% + 0.25rem); } -.bx--btn--primary.bx--batch-summary__cancel:hover::before { - opacity: 0; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.security--button--icon--tooltip--right::before { + transform: translate(0.25rem, -50%); } -.bx--batch-summary__cancel { - padding-right: 1rem; - position: relative; +.security--button--icon--tooltip--right::after { + border-right-color: var(--inverse-02, #f4f4f4); + transform: translate(-0.25rem, -50%); } -.bx--batch-summary { - position: absolute; - left: 0; - margin-left: 1rem; - display: flex; - align-items: center; - color: var(--text-04, #ffffff); +.security--button--icon--tooltip--bottom::before, .security--button--icon--tooltip--bottom::after { + top: calc( 100% + 0.25rem); } -.bx--batch-summary__para { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.security--button--icon--tooltip--bottom::before { + transform: translate(-50%, 0.25rem); } -.bx--table-toolbar--small { - height: 2rem; +.security--button--icon--tooltip--bottom::after { + border-bottom-color: var(--inverse-02, #f4f4f4); + transform: translate(-50%, -0.25rem); } -.bx--table-toolbar--small .bx--toolbar-search-container-expandable, -.bx--table-toolbar--small .bx--toolbar-search-container-persistent { - height: 2rem; +.security--button--icon--tooltip--left::before, .security--button--icon--tooltip--left::after { + right: calc( 100% + 0.25rem); } -.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-input, -.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search .bx--search-input { - height: 2rem; +.security--button--icon--tooltip--left::before { + transform: translate(-0.25rem, -50%); } -.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-close, -.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search .bx--search-close { - height: 2rem; - width: 2rem; +.security--button--icon--tooltip--left::after { + border-left-color: var(--inverse-02, #f4f4f4); + transform: translate(0.25rem, -50%); } -.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier, -.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search .bx--search-magnifier { - height: 2rem; - width: 2rem; - padding: 0.5rem; +.security--panel--v2 { + display: flex; + position: fixed; + top: 0; + right: 0; + height: 100%; + width: 20rem; + color: var(--text-01, #f4f4f4); + background-color: var(--ui-01, #262626); + flex-direction: column; + justify-content: space-between; + z-index: 10000; + outline: none; } -.bx--table-toolbar--small .bx--toolbar-search-container-expandable { - width: 2rem; -} - -.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-input { - padding: 0 3rem; -} - -.bx--table-toolbar--small .bx--toolbar-search-container-active { - flex: auto; - transition: flex 175ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input { - visibility: inherit; -} - -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; - background: var(--hover-field, #353535); -} - -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input:active, -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input:not(:placeholder-shown) { - background: var(--hover-field, #353535); +.security--theme--cg10 .security--panel--v2 { + --interactive-01: #0f62fe; + --interactive-02: #697077; + --interactive-03: #ffffff; + --interactive-04: #4589ff; + --ui-background: #121619; + --ui-01: #21272a; + --ui-02: #343a3f; + --ui-03: #343a3f; + --ui-04: #697077; + --ui-05: #f2f4f8; + --text-01: #f2f4f8; + --text-02: #c1c7cd; + --text-03: #697077; + --text-04: #ffffff; + --text-05: #878d96; + --text-error: #ff8389; + --icon-01: #f2f4f8; + --icon-02: #c1c7cd; + --icon-03: #ffffff; + --link-01: #78a9ff; + --inverse-link: #0f62fe; + --field-01: #21272a; + --field-02: #343a3f; + --inverse-01: #121619; + --inverse-02: #f2f4f8; + --support-01: #fa4d56; + --support-02: #42be65; + --support-03: #f1c21b; + --support-04: #4589ff; + --inverse-support-01: #da1e28; + --inverse-support-02: #24a148; + --inverse-support-03: #f1c21b; + --inverse-support-04: #0f62fe; + --overlay-01: rgba(22, 22, 22, 0.7); + --danger: #da1e28; + --focus: #ffffff; + --inverse-focus-ui: #0f62fe; + --hover-primary: #0353e9; + --active-primary: #002d9c; + --hover-primary-text: #a6c8ff; + --hover-secondary: #5a6066; + --active-secondary: #343a3f; + --hover-tertiary: #f2f4f8; + --active-tertiary: #c1c7cd; + --hover-ui: #2f353a; + --active-ui: #4d5358; + --selected-ui: #343a3f; + --selected-light-ui: #4d5358; + --inverse-hover-ui: #e0e4ea; + --hover-selected-ui: #464c51; + --hover-danger: #b81921; + --active-danger: #750e13; + --hover-row: #2f353a; + --visited-link: #be95ff; + --disabled-01: #21272a; + --disabled-02: #4d5358; + --disabled-03: #878d96; + --highlight: #002d9c; + --decorative-01: #4d5358; + --skeleton-01: #2f353a; + --skeleton-02: #343a3f; + --brand-01: #0f62fe; + --brand-02: #697077; + --brand-03: #ffffff; + --active-01: #4d5358; + --hover-field: #2f353a; } -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-magnifier:focus, -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-magnifier:active, -.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-magnifier:hover { - outline: 2px solid transparent; - outline-offset: -2px; - background: transparent; +.security--panel--v2[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--panel--v2 { + right: unset; + left: 0; } -.bx--table-toolbar--small .bx--batch-actions .bx--action-list { - height: 2rem; +.security--panel--v2__container .security--header__container { + width: calc( 100% - 3rem - 20rem); } -.bx--table-toolbar--small .bx--toolbar-action { - height: 2rem; - width: 2rem; - padding: 0.5rem 0; +.security--panel--v2__container .security--header__container > .security--header { + width: inherit; } -.bx--table-toolbar--small .bx--btn--primary { - padding-top: calc(0.375rem - 3px); - padding-bottom: calc(0.375rem - 3px); - height: 2rem; - min-height: auto; +.security--panel--v2__button--close:only-child { + margin-left: auto; } -.bx--table-toolbar--small .bx--btn--primary.bx--batch-summary__cancel::before { - top: 0.5rem; +.security--panel--v2__button--close:only-child[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--panel--v2__button--close:only-child { + margin-right: auto; + margin-left: unset; } -.bx--table-toolbar--small .bx--toolbar-action ~ .bx--btn { - height: 2rem; - overflow: hidden; +.security--panel--v2__header { + display: flex; + position: fixed; + top: 0; + width: 18rem; + padding-top: 1rem; + padding-bottom: 1rem; + margin-right: 1rem; + margin-left: 1rem; + box-sizing: border-box; + flex-direction: row-reverse; + justify-content: space-between; + border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); } -.bx--data-table-container { - min-width: 31.25rem; - overflow-x: auto; - padding-top: 0.125rem; +.security--panel--v2__header__container--title { + width: 14.5rem; } -.bx--data-table-header { - background: var(--ui-01, #262626); - padding: 1rem 0 1.5rem 1rem; +.security--panel--v2__header--title, .security--panel--v2__header--subtitle { + color: var(--text-01, #f4f4f4); + word-break: break-word; } -.bx--data-table-header__title { +.security--panel--v2__header--title { font-size: 1.25rem; font-weight: 400; line-height: 1.625rem; letter-spacing: 0; - color: var(--text-01, #f4f4f4); + display: block; + margin-bottom: 0.75rem; } -.bx--data-table-header__description { +.security--panel--v2__header--subtitle { font-size: 0.875rem; font-weight: 400; line-height: 1.125rem; letter-spacing: 0.16px; - color: var(--text-02, #c6c6c6); -} - -.bx--data-table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; } -.bx--data-table thead { - font-size: 0.875rem; - font-weight: 600; - line-height: 1.125rem; - letter-spacing: 0.16px; - background-color: var(--ui-03, #393939); +.security--panel--v2__body { + margin-top: 5.5rem; + flex-grow: 1; + overflow-y: auto; } -.bx--data-table tbody { - font-size: 0.875rem; +.security--panel--v2__body--content { + font-size: 0.75rem; font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - background-color: var(--ui-01, #262626); - width: 100%; -} - -.bx--data-table tr { - border: none; - height: 3rem; - width: 100%; + line-height: 1rem; + letter-spacing: 0.32px; + padding-top: 1rem; + padding-bottom: 1rem; + border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); } -.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); +.security--panel--v2__body--content:last-child { + border-bottom: none; } -.bx--data-table tbody tr:hover { - background: var(--hover-field, #353535); +.security--panel--v2__body--footer { + margin-bottom: 3rem; } -.bx--data-table tbody tr:hover td, -.bx--data-table tbody tr:hover th { - color: var(--text-01, #f4f4f4); - background: var(--hover-field, #353535); - border-bottom: 1px solid var(--hover-field, #353535); - border-top: 1px solid var(--hover-field, #353535); +.security--panel--v2__footer { + display: flex; + position: fixed; + bottom: 0; + width: 20rem; } -.bx--data-table th, -.bx--data-table td { - padding-left: 1rem; - padding-right: 1rem; - vertical-align: top; - text-align: left; +.security--panel--v2__footer .security--button:not(.security--combo-button__overflow-menu) { + max-width: 20rem; + flex-grow: 1; } -.bx--data-table th { - color: var(--text-01, #f4f4f4); - background-color: var(--ui-03, #393939); +.security--panel--v2__transition--appear, .security--panel--v2__transition--enter { + transform: translate3d(20rem, 0, 0); + opacity: 0; } -.bx--data-table th:first-of-type:not(.bx--table-expand) { - padding-left: 1rem; +.security--panel--v2__transition--appear--active, .security--panel--v2__transition--enter--active { + transform: translate3d(0, 0, 0); + transition: all 240ms; + transition-timing-function: cubic-bezier(0, 0, 0.3, 1); + opacity: 1; } -.bx--data-table th:last-of-type { - position: static; - width: auto; +.security--panel--v2__transition--leave { + transform: translate3d(0, 0, 0); + opacity: 1; } -.bx--data-table .bx--table-header-label { - display: block; - padding: 0.875rem 0; - text-align: left; +.security--panel--v2__transition--leave--active { + transform: translate3d(20rem, 0, 0); + transition: all 240ms; + transition-timing-function: cubic-bezier(0.4, 0.14, 1, 1); + opacity: 0; } -.bx--data-table td, -.bx--data-table tbody th { - background: var(--ui-01, #262626); - color: var(--text-02, #c6c6c6); - border-top: 1px solid var(--ui-01, #262626); - border-bottom: 1px solid var(--ui-03, #393939); - padding: 0.875rem 1rem; - padding-bottom: 0.8125rem; +.security--decorator { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + display: inline-flex; + box-sizing: border-box; + font-family: \\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif; + height: 1.625rem; + background-color: var(--hover-ui, #353535); + font-style: normal; + font-stretch: normal; + text-align: left; + text-transform: none; + max-width: 100%; + padding: unset; + border: unset; + vertical-align: middle; + color: var(--text-02, #c6c6c6); + text-decoration: none; } -.bx--data-table td + td:first-of-type, -.bx--data-table tbody th + td:first-of-type { - padding-left: 0.75rem; +.security--decorator__icon { + padding-left: 0.5rem; } -@supports (-moz-appearance: none) { - .bx--data-table td { - background-clip: padding-box; - } +.security--decorator__type, .security--decorator__value { + padding-right: 0.5rem; + padding-left: 0.5rem; } -.bx--data-table td:first-of-type { - padding-left: 1rem; +.security--decorator--interactive:not(.security--decorator--active) .security--decorator__type { + color: var(--text-02, #c6c6c6); } -.bx--data-table td:last-of-type { - padding-right: 1rem; +.security--decorator--interactive:not(.security--decorator--active) .security--decorator__value { + color: var(--hover-primary-text, #a6c8ff); } -.bx--data-table td button.bx--overflow-menu { - margin: -0.4375rem 0 -0.5rem; +.security--decorator--interactive:not(.security--decorator--active):visited .security--decorator__value { + color: var(--visited-link, #be95ff); } -.bx--data-table.bx--data-table--compact td .bx--overflow-menu { - margin: 0; +.security--decorator.security--decorator--interactive:hover { + cursor: pointer; + background-color: var(--active-ui, #525252); } -.bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded=\\"false\\"]:focus { +.security--decorator.security--decorator--interactive:focus { outline: 2px solid var(--focus, #ffffff); outline-offset: -2px; } -.bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded=\\"true\\"]:focus { - outline: none; +.security--decorator.security--decorator--interactive:active, .security--decorator.security--decorator--interactive:focus, .security--decorator.security--decorator--interactive:hover, .security--decorator.security--decorator--interactive:focus:active { + text-decoration: none; + box-shadow: 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; - } +.security--decorator.security--decorator--interactive:active .security--decorator__value, .security--decorator.security--decorator--interactive:focus .security--decorator__value, .security--decorator.security--decorator--interactive:hover .security--decorator__value, .security--decorator.security--decorator--interactive:focus:active .security--decorator__value { + text-decoration: underline; } -.bx--data-table td.bx--table-column-menu .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__icon { - opacity: 1; +.security--decorator.security--decorator--active, .security--decorator.security--decorator--active:hover, .security--decorator.security--decorator:focus:active { + background-color: var(--ui-05, #f4f4f4); + color: var(--active-ui, #525252); } -.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; +.security--decorator.security--decorator--active:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; + outline-color: var(--inverse-focus-ui, #0f62fe); } -.bx--table-row--menu-option .bx--overflow-menu-options__btn .bx--overflow-menu-options__option-content svg { - margin-right: 0.5rem; - position: relative; - top: 0.1875rem; +.security--decorator__icon, .security--decorator__type, .security--decorator__value { + display: inherit; + height: inherit; + align-items: center; + transition-duration: 0.2s; + transition-property: background-color; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--data-table .bx--overflow-menu:hover, -.bx--data-table .bx--overflow-menu__trigger:hover { - background-color: var(--hover-selected-ui, #4c4c4c); +.security--decorator.security--decorator--inline { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + height: 1.25rem; + vertical-align: middle; } -.bx--data-table--selected .bx--overflow-menu:hover, -.bx--data-table--selected .bx--overflow-menu__trigger:hover { - background-color: var(--hover-field, #353535); +.security--decorator.security--decorator--inline > .security--decorator__icon { + padding-left: 0.25rem; } -.bx--data-table--zebra tbody tr:nth-child(even) td { - border-bottom: 1px solid var(--ui-01, #262626); +.security--decorator.security--decorator--inline > .security--decorator__type, .security--decorator.security--decorator--inline > .security--decorator__value { + padding-right: 0.25rem; + padding-left: 0.25rem; } -.bx--data-table--zebra tbody tr:nth-child(odd) td { - background-color: var(--ui-02, #393939); - border-bottom: 1px solid var(--ui-02, #393939); - border-top: 1px solid var(--ui-02, #393939); +.security--decorator.security--decorator--inline > .security--decorator__type, .security--decorator.security--decorator--inline > .security--decorator__value { + line-height: 1.25rem; } -.bx--data-table--zebra tbody tr:hover td { - background-color: var(--hover-field, #353535); - border-bottom: 1px solid var(--hover-field, #353535); - border-top: 1px solid var(--hover-field, #353535); +.security--decorator--unknown .security--decorator__icon, .security--decorator__icon--unknown { + fill: var(--icon-02, #c6c6c6); } -.bx--table-column-checkbox .bx--checkbox-label { - padding-left: 1rem; +.security--decorator--low .security--decorator__icon, .security--decorator__icon--low { + fill: var(--support-03, #f1c21b); } -.bx--data-table th.bx--table-column-checkbox { - position: static; - background: var(--ui-03, #393939); - padding: 0.75rem 0.5rem 0 1rem; - width: 2.75rem; - transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); +.security--decorator--medium .security--decorator__icon, .security--decorator__icon--medium { + fill: #ff832b; } -.bx--data-table td.bx--table-column-checkbox { - padding-top: 0.6875rem; - padding-bottom: 0; +.security--decorator__icon--high, .security--decorator__icon--critical { + fill: var(--support-01, #fa4d56); } -.bx--date-table tbody th.bx--table-column-checkbox:hover { - background: var(--hover-selected-ui, #4c4c4c); +.security--decorator--high .security--decorator__icon, .security--decorator--critical .security--decorator__icon { + fill: var(--support-01, #fa4d56); } -.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected td, -tr.bx--data-table--selected td { - color: var(--text-01, #f4f4f4); - background-color: var(--selected-ui, #393939); - border-top: 1px solid var(--selected-ui, #393939); - border-bottom: 1px solid var(--active-ui, #525252); +.security--decorator--high--active .security--decorator__icon, .security--decorator--high:focus:active .security--decorator__icon, .security--decorator--critical--active .security--decorator__icon, .security--decorator--critical:focus:active .security--decorator__icon { + fill: var(--hover-danger, #b81921); } -.bx--data-table--zebra tbody tr:first-of-type:nth-child(odd).bx--data-table--selected td, -tr.bx--data-table--selected:first-of-type td { - border-top: 1px solid var(--active-ui, #525252); +.security--decorator__type { + border-right: 1px solid var(--ui-01, #262626); + white-space: nowrap; } -.bx--data-table--zebra tbody tr:last-of-type:nth-child(odd).bx--data-table--selected td, -.bx--data-table--zebra tbody tr:last-of-type:nth-child(even).bx--data-table--selected td, -tr.bx--data-table--selected:last-of-type td { - border-top: 1px solid var(--selected-ui, #393939); - border-bottom: 1px solid var(--selected-ui, #393939); +.security--decorator--active .security--decorator__type { + border-right: 1px solid var(--ui-04, #6f6f6f); } -.bx--data-table--zebra tbody tr:nth-child(even).bx--data-table--selected td { - border-bottom: 1px solid var(--active-ui, #525252); +.security--decorator__value { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: inline; + line-height: 1.625rem; } -.bx--data-table--zebra tbody tr:nth-child(even).bx--data-table--selected:hover td { - border-bottom: 1px solid var(--hover-selected-ui, #4c4c4c); +.bx--table-toolbar { + background: var(--ui-01, #262626); + display: flex; + height: 3rem; + overflow: hidden; + position: relative; + width: 100%; } -.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected:hover td, -.bx--data-table tbody .bx--data-table--selected:hover td { - color: var(--text-01, #f4f4f4); - background: var(--hover-selected-ui, #4c4c4c); - border-top: 1px solid var(--hover-selected-ui, #4c4c4c); - border-bottom: 1px solid var(--hover-selected-ui, #4c4c4c); +.bx--toolbar-content { + display: flex; + height: 3rem; + width: 100%; + justify-content: flex-end; + transform: translate3d(0, 0, 0); + transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--data-table--selected .bx--overflow-menu .bx--overflow-menu__icon { - opacity: 1; +.bx--batch-actions ~ .bx--toolbar-content { + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } -.bx--data-table--compact thead tr, -.bx--data-table--compact tbody tr, -.bx--data-table--compact tbody tr th { - height: 1.5rem; +.bx--toolbar-content .bx--search .bx--search-input { + background-color: transparent; } -.bx--data-table--compact .bx--table-header-label { - padding: 0.125rem 0; +.bx--batch-actions ~ .bx--toolbar-search-container { + opacity: 1; + transition: opacity 110ms; + display: flex; + align-items: center; } -.bx--data-table--compact td, -.bx--data-table--compact tbody tr th { - padding-top: 0.125rem; - padding-bottom: 0.125rem; +.bx--toolbar-search-container-expandable { + height: 3rem; + width: 3rem; + position: relative; + transition: flex 240ms cubic-bezier(0.2, 0, 0.38, 0.9); + box-shadow: none; } -.bx--data-table--compact .bx--overflow-menu { - width: 2rem; - height: 1.4375rem; +.bx--toolbar-search-container-expandable .bx--search { + width: 3rem; + height: 100%; + position: initial; } -.bx--data-table.bx--data-table--compact .bx--table-column-checkbox { - padding-top: 0; - padding-bottom: 0; +.bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier { + height: 3rem; + width: 3rem; + padding: 1rem; + left: 0; + cursor: pointer; + pointer-events: all; + transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.bx--data-table.bx--data-table--compact .bx--table-column-checkbox .bx--checkbox-label { - min-height: 1.4375rem; - height: 1.4375rem; +.bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--data-table--short thead tr, -.bx--data-table--short tbody tr, -.bx--data-table--short tbody tr th { - height: 2rem; +.bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier:hover { + background: var(--hover-field, #353535); } -.bx--data-table--short .bx--table-header-label { - padding: 0.4375rem 0; +.bx--toolbar-search-container-expandable .bx--search .bx--label { + visibility: hidden; } -.bx--data-table--short td, -.bx--data-table--short tbody tr th { - padding-top: 0.4375rem; - padding-bottom: 0.375rem; +.bx--toolbar-search-container-expandable .bx--search .bx--search-input { + border: none; + height: 100%; + visibility: hidden; + padding: 0; + background-color: transparent; } -.bx--data-table--short .bx--overflow-menu { - height: 1.9375rem; +.bx--toolbar-search-container-expandable .bx--search .bx--search-close { + height: 3rem; + width: 3rem; } -.bx--data-table.bx--data-table--short .bx--table-column-checkbox { - padding-top: 0.1875rem; - padding-bottom: 0.1875rem; +.bx--toolbar-search-container-expandable .bx--search .bx--search-close:before { + top: 2px; + height: calc(100% - 4px); + background-color: var(--hover-ui, #353535); } -.bx--data-table--tall thead tr, -.bx--data-table--tall tbody tr, -.bx--data-table--tall tbody tr th { - height: 4rem; +.bx--toolbar-search-container-expandable .bx--search .bx--search-close:focus::before { + background-color: var(--focus, #ffffff); } -.bx--data-table--tall .bx--table-header-label { - padding: 1rem 0; +.bx--toolbar-search-container-active { + flex: auto; + transition: flex 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--data-table--tall td, -.bx--data-table--tall tbody tr th { - padding-top: 1rem; +.bx--toolbar-search-container-active .bx--search { + width: 100%; } -.bx--data-table--cell-secondary-text { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; +.bx--toolbar-search-container-active .bx--search .bx--label, +.bx--toolbar-search-container-active .bx--search .bx--search-input { + padding: 0 3rem; + visibility: inherit; } -.bx--data-table.bx--data-table--tall .bx--table-column-checkbox { - padding-top: 0.75rem; +.bx--toolbar-search-container-active .bx--search .bx--search-input:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--data-table--static { - width: auto; +.bx--toolbar-search-container-active .bx--search .bx--search-input:focus + .bx--search-close { + border: none; + box-shadow: none; + outline: none; } -.bx--data-table_inner-container { - background-color: var(--ui-03, #393939); - transform: translateZ(0); +.bx--toolbar-search-container-active .bx--search .bx--search-input:not(:placeholder-shown) { + background: var(--hover-field, #353535); + border: none; } -.bx--data-table--sticky-header { - display: block; - overflow-y: scroll; +.bx--toolbar-search-container-active .bx--search .bx--search-magnifier:focus, +.bx--toolbar-search-container-active .bx--search .bx--search-magnifier:active, +.bx--toolbar-search-container-active .bx--search .bx--search-magnifier:hover { + outline: none; + border: none; + background: transparent; } -.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--toolbar-search-container-persistent .bx--search-close, +.bx--toolbar-search-container-persistent .bx--search-close:hover, +.bx--toolbar-search-container-active .bx--search .bx--search-close, +.bx--toolbar-search-container-active .bx--search .bx--search-close:hover { + border: none; + background-color: transparent; } -.bx--data-table--sticky-header thead { - position: sticky; - z-index: 1; - top: 0; - width: 100%; - overflow: scroll; - -ms-overflow-style: none; - will-change: transform; +.bx--toolbar-search-container-persistent .bx--search-close::before { + display: none; } -.bx--data-table--sticky-header thead tr th { - border-bottom: 1px solid var(--active-ui, #525252); +.bx--overflow-menu.bx--toolbar-action { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + width: 100%; + display: flex; + cursor: pointer; + height: 3rem; + width: 3rem; + padding: 1rem; + transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.bx--data-table--sticky-header tbody { - flex-direction: column; - overflow-x: scroll; - -ms-overflow-style: none; - will-change: transform; +.bx--overflow-menu.bx--toolbar-action *, +.bx--overflow-menu.bx--toolbar-action *:before, +.bx--overflow-menu.bx--toolbar-action *:after { + box-sizing: inherit; } -.bx--data-table--sticky-header tr { - min-height: 3rem; - height: auto; +.bx--overflow-menu.bx--toolbar-action::-moz-focus-inner { + border: 0; } -.bx--data-table--sticky-header tr.bx--data-table--selected:first-of-type td { - border-top: none; +.bx--toolbar-action { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + width: 100%; + display: flex; + cursor: pointer; + height: 3rem; + width: 3rem; + transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9); } -.bx--data-table--sticky-header thead::-webkit-scrollbar, -.bx--data-table--sticky-header tbody::-webkit-scrollbar { - display: none; +.bx--toolbar-action *, +.bx--toolbar-action *:before, +.bx--toolbar-action *:after { + box-sizing: inherit; } -@-moz-document url-prefix() { - .bx--data-table--sticky-header thead, - .bx--data-table--sticky-header tbody { - scrollbar-width: none; - } +.bx--toolbar-action::-moz-focus-inner { + border: 0; } -.bx--data-table--sticky-header tbody tr:last-of-type { - border-bottom: 0; +.bx--toolbar-action:hover:not([disabled]) { + background: var(--hover-field, #353535); } -.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: 0; +.bx--toolbar-action:hover[aria-expanded=\\"true\\"] { + background: var(--ui-01, #262626); } -.bx--data-table--sticky-header .bx--table-header-label { - max-width: calc(100% - 10px); - display: block; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.bx--toolbar-action[disabled] { + cursor: not-allowed; } -.bx--data-table--max-width { - max-width: 100%; +.bx--toolbar-action[disabled] .bx--toolbar-action__icon { + fill: var(--disabled-02, #525252); + cursor: not-allowed; } -.bx--data-table--sticky-header { - max-height: 18.75rem; +.bx--toolbar-action:focus:not([disabled]), +.bx--toolbar-action:active:not([disabled]) { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--data-table tr.bx--parent-row:first-of-type td { - border-top: 1px solid var(--ui-03, #393939); +.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--expandable-row--hidden td { - border-top: 0; - width: auto; - padding: 1rem; +.bx--toolbar-action ~ .bx--btn { + margin: 0; + max-width: none; + white-space: nowrap; } -tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] { - height: 0; - transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--overflow-menu--data-table { + height: 3rem; } -tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] td { - padding-top: 0; - padding-bottom: 0; - border: 0; - background-color: var(--hover-ui, #353535); - transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--toolbar-action__icon { + height: 1rem; + width: auto; + max-width: 1rem; + fill: var(--icon-01, #f4f4f4); } -tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] td .bx--child-row-inner-container { - overflow: hidden; - max-height: 0; +.bx--toolbar-search-container-persistent { + width: 100%; + height: 3rem; + opacity: 1; + position: relative; } -tr.bx--parent-row.bx--expandable-row + tr[data-child-row] { - transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--toolbar-search-container-persistent + .bx--toolbar-content { + position: relative; + width: auto; } -tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td { - border-bottom: 1px solid var(--ui-03, #393939); +.bx--toolbar-search-container-persistent .bx--search { + position: initial; } -tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td .bx--child-row-inner-container { - max-height: 100%; +.bx--toolbar-search-container-persistent .bx--search .bx--search-magnifier { + left: 1rem; } -.bx--parent-row.bx--expandable-row > td, -.bx--parent-row.bx--expandable-row + tr[data-child-row] > td { - border-bottom: 1px solid var(--ui-03, #393939); - box-shadow: 0 1px var(--ui-03, #393939); +.bx--toolbar-search-container-persistent .bx--search .bx--search-input { + height: 3rem; + padding: 0 3rem; + border: none; } -.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] > td { - box-shadow: none; +.bx--toolbar-search-container-persistent .bx--search .bx--search-input:focus:not([disabled]) { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--parent-row.bx--expandable-row > td:first-of-type { - box-shadow: none; +.bx--toolbar-search-container-persistent .bx--search .bx--search-input:hover:not([disabled]) { + background: var(--hover-field, #353535); } -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 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--toolbar-search-container-persistent .bx--search .bx--search-input:active:not([disabled]), +.bx--toolbar-search-container-persistent .bx--search .bx--search-input:not(:placeholder-shown) { + background: var(--hover-field, #353535); } -tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td { - transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--toolbar-search-container-persistent .bx--search .bx--search-close { + height: 3rem; + width: 3rem; } -tr.bx--parent-row:not(.bx--expandable-row):first-of-type:hover td { - border-top: 1px solid var(--ui-03, #393939); - border-bottom: 1px solid var(--ui-03, #393939); +.bx--batch-actions--active ~ .bx--toolbar-search-container, +.bx--batch-actions--active ~ .bx--toolbar-content { + clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); + transform: translate3d(0, 48px, 0); + transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -tr.bx--parent-row.bx--expandable-row:hover td { - background-color: var(--hover-ui, #353535); - border-top: 1px solid var(--ui-03, #393939); - border-bottom: 1px solid var(--ui-03, #393939); - color: var(--text-01, #f4f4f4); +.bx--batch-actions { + display: flex; + position: absolute; + top: 0; + left: 0; + align-items: center; + padding-left: 1.5rem; + padding-right: 1.5rem; + width: 100%; + height: 100%; + pointer-events: none; + clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); + will-change: transform; + background-color: var(--interactive-01, #0f62fe); + transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); + transform: translate3d(0, 48px, 0); } -tr.bx--parent-row.bx--expandable-row:hover td:first-of-type { - border-bottom: 1px solid transparent; +.bx--batch-actions:focus { + outline: 1px solid var(--focus, #ffffff); } -tr.bx--parent-row.bx--expandable-row:hover + tr[data-child-row] td { - background-color: var(--hover-ui, #353535); - color: var(--text-01, #f4f4f4); - border-bottom: 1px solid var(--ui-03, #393939); +.bx--batch-actions--active { + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + pointer-events: all; + transform: translate3d(0, 0, 0); } -tr.bx--expandable-row--hover + tr[data-child-row] td { - border-bottom: 1px solid var(--ui-03, #393939); +.bx--action-list { + position: absolute; + top: 0; + right: 0; + display: flex; } -tr.bx--expandable-row--hover { - background-color: var(--hover-ui, #353535); +.bx--action-list .bx--btn { + color: var(--text-04, #ffffff); + padding: calc(0.875rem - 3px) 12px; } -tr.bx--expandable-row--hover td { - background-color: var(--hover-ui, #353535); - border-bottom: 1px solid var(--ui-03, #393939); - border-top: 1px solid var(--ui-03, #393939); - color: var(--text-01, #f4f4f4); +.bx--action-list .bx--btn .bx--btn__icon { + fill: var(--icon-03, #ffffff); + position: static; + margin-left: 0.5rem; } -tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type { - border-bottom: 1px solid transparent; +.bx--action-list .bx--btn .bx--btn__icon .st0 { + fill: none; } -.bx--data-table td.bx--table-expand { - width: 2.5rem; - min-width: 2.5rem; - height: 3rem; - vertical-align: top; - padding: 0; - border-bottom: 1px solid var(--ui-03, #393939); +.bx--batch-download { + padding: 0.0625rem; } -.bx--data-table td.bx--table-expand[data-previous-value=\\"collapsed\\"] { - border-bottom: 1px solid transparent; +.bx--action-list .bx--btn--primary:focus::before, +.bx--action-list .bx--btn--primary:focus::before, +.bx--action-list .bx--btn--primary::before, +.bx--action-list .bx--btn--primary::before, +.bx--action-list .bx--btn--primary:focus::after, +.bx--action-list .bx--btn--primary:focus::after, +.bx--action-list .bx--btn--primary::after, +.bx--action-list .bx--btn--primary::after { + display: none; } -.bx--table-expand[data-previous-value=\\"collapsed\\"] .bx--table-expand__svg { - transform: rotate(270deg); - transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--action-list .bx--btn--primary:focus { + outline: 2px solid var(--ui-01, #262626); + outline-offset: -0.125rem; } -.bx--table-expand__button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; +.bx--action-list .bx--btn { + min-width: 0; } -.bx--table-expand__button *, -.bx--table-expand__button *:before, -.bx--table-expand__button *:after { - box-sizing: inherit; +.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--table-expand__button::-moz-focus-inner { - border: 0; +.bx--btn--primary.bx--batch-summary__cancel::before { + display: block; + position: absolute; + opacity: 1; + top: 0.9375rem; + left: 0; + height: 1rem; + width: 0.0625rem; + content: \\"\\"; + background-color: var(--text-04, #ffffff); + border: none; + transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--data-table--short .bx--table-expand__button { - height: auto; +.bx--btn--primary.bx--batch-summary__cancel:hover::before { + opacity: 0; + transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--table-expand__button:focus { - outline: 1px solid transparent; +.bx--batch-summary__cancel { + padding-right: 1rem; + position: relative; } -.bx--table-expand__button:focus .bx--table-expand__svg { - box-shadow: inset 0px 0px 0px 1px var(--focus, #ffffff); +.bx--batch-summary { + position: absolute; + left: 0; + margin-left: 1rem; + display: flex; + align-items: center; + color: var(--text-04, #ffffff); } -.bx--table-expand__svg { - fill: var(--ui-05, #f4f4f4); - transform: rotate(90deg); - transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--batch-summary__para { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; } -th.bx--table-expand { - position: relative; - vertical-align: middle; +.bx--table-toolbar--small { + height: 2rem; } -th.bx--table-expand + th.bx--table-column-checkbox { - padding-left: 0.5rem; +.bx--table-toolbar--small .bx--toolbar-search-container-expandable, +.bx--table-toolbar--small .bx--toolbar-search-container-persistent { + height: 2rem; } -tr.bx--parent-row.bx--expandable-row td.bx--table-expand + td::after { - position: absolute; - content: \\"\\"; - left: 0; - bottom: -0.0625rem; - height: 0.0625rem; - width: 0.5rem; - background: var(--ui-03, #393939); +.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-input, +.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search .bx--search-input { + height: 2rem; } -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: var(--hover-ui, #353535); +.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-close, +.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search .bx--search-close { + height: 2rem; + width: 2rem; } -tr.bx--parent-row.bx--data-table--selected td.bx--table-expand + td::after { - display: none; +.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-magnifier, +.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search .bx--search-magnifier { + height: 2rem; + width: 2rem; + padding: 0.5rem; } -tr.bx--parent-row.bx--data-table--selected:first-of-type td { - background: var(--selected-ui, #393939); - border-top: 1px solid var(--active-ui, #525252); - border-bottom: 1px solid var(--ui-03, #393939); - box-shadow: 0 1px var(--active-ui, #525252); +.bx--table-toolbar--small .bx--toolbar-search-container-expandable { + width: 2rem; } -tr.bx--parent-row.bx--data-table--selected td { - background: var(--selected-ui, #393939); - color: var(--text-01, #f4f4f4); - border-bottom: 1px solid transparent; - box-shadow: 0 1px var(--active-ui, #525252); +.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-input { + padding: 0 3rem; } -tr.bx--parent-row.bx--data-table--selected:last-of-type td { - background: var(--selected-ui, #393939); - border-bottom: 1px solid transparent; - box-shadow: 0 1px var(--ui-03, #393939); +.bx--table-toolbar--small .bx--toolbar-search-container-active { + flex: auto; + transition: flex 175ms cubic-bezier(0.2, 0, 0.38, 0.9); } -tr.bx--parent-row.bx--data-table--selected:not(.bx--expandable-row):hover td { - background: var(--hover-selected-ui, #4c4c4c); - border-top: 1px solid var(--hover-selected-ui, #4c4c4c); - border-bottom: 1px solid var(--ui-03, #393939); - box-shadow: 0 1px var(--hover-selected-ui, #4c4c4c); +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input { + visibility: inherit; } -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: 0 1px var(--selected-ui, #393939); +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; + background: var(--hover-field, #353535); } -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 { - background: var(--hover-selected-ui, #4c4c4c); - border-top: 1px solid var(--hover-selected-ui, #4c4c4c); - border-bottom: 1px solid transparent; - box-shadow: 0 1px var(--hover-selected-ui, #4c4c4c); +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input:active, +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-input:not(:placeholder-shown) { + background: var(--hover-field, #353535); } -tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row] td { - color: var(--text-01, #f4f4f4); - background-color: var(--hover-ui, #353535); - border-bottom: 1px solid var(--ui-03, #393939); - box-shadow: 0 1px var(--active-ui, #525252); - border-top: 1px solid var(--active-ui, #525252); +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-magnifier:focus, +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-magnifier:active, +.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search .bx--search-magnifier:hover { + outline: 2px solid transparent; + outline-offset: -2px; + background: transparent; } -tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row]:last-of-type td { - box-shadow: inset 0 -1px var(--active-ui, #525252); - padding-bottom: 1.5rem; +.bx--table-toolbar--small .bx--batch-actions .bx--action-list { + height: 2rem; } -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: var(--selected-ui, #393939); +.bx--table-toolbar--small .bx--toolbar-action { + height: 2rem; + width: 2rem; + padding: 0.5rem 0; } -.bx--data-table--sort th, -.bx--data-table--sort th:first-of-type:not(.bx--table-column-checkbox):not(.bx--table-expand) { - padding: 0; +.bx--table-toolbar--small .bx--btn--primary { + padding-top: calc(0.375rem - 3px); + padding-bottom: calc(0.375rem - 3px); + height: 2rem; + min-height: auto; } -.bx--data-table--sort th { - height: 3rem; - border-top: none; - border-bottom: none; +.bx--table-toolbar--small .bx--btn--primary.bx--batch-summary__cancel::before { + top: 0.5rem; } -.bx--data-table--sort td { - padding-left: 1rem; - padding-right: 1rem; +.bx--table-toolbar--small .bx--toolbar-action ~ .bx--btn { + height: 2rem; + overflow: hidden; } -.bx--data-table--sort th:first-of-type .bx--table-sort { - padding-left: 1rem; +.bx--data-table-container { + min-width: 31.25rem; + overflow-x: auto; + padding-top: 0.125rem; } -.bx--table-sort { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - position: relative; - font: inherit; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - color: var(--text-01, #f4f4f4); - padding: 0 1rem; - height: 100%; - background-color: var(--ui-03, #393939); - transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9); +.bx--data-table-header { + background: var(--ui-01, #262626); + padding: 1rem 0 1.5rem 1rem; } -.bx--table-sort *, -.bx--table-sort *:before, -.bx--table-sort *:after { - box-sizing: inherit; +.bx--data-table-header__title { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.625rem; + letter-spacing: 0; + color: var(--text-01, #f4f4f4); } -.bx--table-sort::-moz-focus-inner { - border: 0; +.bx--data-table-header__description { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + color: var(--text-02, #c6c6c6); } -.bx--table-sort:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--data-table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; } -.bx--table-sort:hover { - background: var(--hover-selected-ui, #4c4c4c); +.bx--data-table thead { + font-size: 0.875rem; + font-weight: 600; + line-height: 1.125rem; + letter-spacing: 0.16px; + background-color: var(--ui-03, #393939); } -.bx--table-sort:focus svg, -.bx--table-sort:hover svg { - opacity: 1; +.bx--data-table tbody { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + background-color: var(--ui-01, #262626); + width: 100%; } -.bx--table-sort .bx--table-sort__icon-inactive { - display: block; +.bx--data-table tr { + border: none; + height: 3rem; + width: 100%; } -.bx--table-sort .bx--table-sort__icon { - display: 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--table-sort__icon-unsorted { - position: relative; - left: 0.125rem; - margin-left: 0.5rem; - margin-right: 0; - opacity: 0; - fill: var(--ui-05, #f4f4f4); - width: auto; - min-width: 1rem; +.bx--data-table tbody tr:hover { + background: var(--hover-field, #353535); } -.bx--table-sort.bx--table-sort--active .bx--table-sort__icon-unsorted { - display: none; +.bx--data-table tbody tr:hover td, +.bx--data-table tbody tr:hover th { + color: var(--text-01, #f4f4f4); + background: var(--hover-field, #353535); + border-bottom: 1px solid var(--hover-field, #353535); + border-top: 1px solid var(--hover-field, #353535); } -.bx--table-sort.bx--table-sort--active .bx--table-sort__icon { - display: block; - opacity: 1; +.bx--data-table th, +.bx--data-table td { + padding-left: 1rem; + padding-right: 1rem; + vertical-align: top; + text-align: left; } -.bx--table-sort--ascending .bx--table-sort__icon { - transform: rotate(180deg); +.bx--data-table th { + color: var(--text-01, #f4f4f4); + background-color: var(--ui-03, #393939); } -.bx--table-sort__icon { - position: relative; - left: 0.125rem; - margin-left: 0.5rem; - margin-right: 0; - transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - transform: rotate(0); - opacity: 0; - fill: var(--ui-05, #f4f4f4); - width: auto; - min-width: 1rem; +.bx--data-table th:first-of-type:not(.bx--table-expand) { + padding-left: 1rem; } -.bx--data-table--compact.bx--data-table--sort th { - height: 1.5rem; +.bx--data-table th:last-of-type { + position: static; + width: auto; } -.bx--data-table--compact.bx--data-table--sort th .bx--table-sort { - padding-top: 0; - padding-bottom: 0; +.bx--data-table .bx--table-header-label { + display: block; + padding: 0.875rem 0; + text-align: left; } -.bx--data-table--short.bx--data-table--sort th { - height: 2rem; +.bx--data-table td, +.bx--data-table tbody th { + background: var(--ui-01, #262626); + color: var(--text-02, #c6c6c6); + border-top: 1px solid var(--ui-01, #262626); + border-bottom: 1px solid var(--ui-03, #393939); + padding: 0.875rem 1rem; + padding-bottom: 0.8125rem; } -.bx--data-table--short.bx--data-table--sort th .bx--table-sort { - padding-top: 0; - padding-bottom: 0; +.bx--data-table td + td:first-of-type, +.bx--data-table tbody th + td:first-of-type { + padding-left: 0.75rem; } -.bx--data-table--tall.bx--data-table--sort th { - height: 4rem; +@supports (-moz-appearance: none) { + .bx--data-table td { + background-clip: padding-box; + } } -.bx--data-table--tall.bx--data-table--sort th .bx--table-sort { - padding-top: 0; - padding-bottom: 0; +.bx--data-table td:first-of-type { + padding-left: 1rem; } -.bx--data-table--tall.bx--data-table--sort th .bx--table-sort svg { - align-self: flex-start; - top: 0.5rem; +.bx--data-table td:last-of-type { + padding-right: 1rem; } -.bx--data-table--tall.bx--data-table--sort th .bx--table-sort .bx--table-header-label { - align-self: flex-start; - position: relative; - top: -0.5rem; - max-height: 3rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; +.bx--data-table td button.bx--overflow-menu { + margin: -0.4375rem 0 -0.5rem; } -.bx--inline-edit-label { - display: flex; - justify-content: space-between; - align-items: center; +.bx--data-table.bx--data-table--compact td .bx--overflow-menu { + margin: 0; } -.bx--inline-edit-label:hover .bx--inline-edit-label__icon { - opacity: 1; +.bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded=\\"false\\"]:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--inline-edit-label--inactive { - display: none; +.bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded=\\"true\\"]:focus { + outline: none; } -.bx--inline-edit-label__action { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; +@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--inline-edit-label__action *, -.bx--inline-edit-label__action *:before, -.bx--inline-edit-label__action *:after { - box-sizing: inherit; +.bx--data-table td.bx--table-column-menu .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__icon { + opacity: 1; } -.bx--inline-edit-label__action::-moz-focus-inner { - border: 0; +.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--inline-edit-label__action:hover { - cursor: pointer; +.bx--table-row--menu-option .bx--overflow-menu-options__btn .bx--overflow-menu-options__option-content svg { + margin-right: 0.5rem; + position: relative; + top: 0.1875rem; } -.bx--inline-edit-label__action:focus { - outline: 1px solid var(--focus, #ffffff); - padding: 0.125rem; +.bx--data-table .bx--overflow-menu:hover, +.bx--data-table .bx--overflow-menu__trigger:hover { + background-color: var(--hover-selected-ui, #4c4c4c); } -.bx--inline-edit-label__action:focus .bx--inline-edit-label__icon { - width: auto; - opacity: 1; +.bx--data-table--selected .bx--overflow-menu:hover, +.bx--data-table--selected .bx--overflow-menu__trigger:hover { + background-color: var(--hover-field, #353535); } -.bx--inline-edit-label__icon { - fill: var(--ui-05, #f4f4f4); - opacity: 0; +.bx--data-table--zebra tbody tr:nth-child(even) td { + border-bottom: 1px solid var(--ui-01, #262626); } -.bx--inline-edit-input { - display: none; +.bx--data-table--zebra tbody tr:nth-child(odd) td { + background-color: var(--ui-02, #393939); + border-bottom: 1px solid var(--ui-02, #393939); + border-top: 1px solid var(--ui-02, #393939); } -.bx--inline-edit-input--active { - display: block; - margin-left: -0.75rem; +.bx--data-table--zebra tbody tr:hover td { + background-color: var(--hover-field, #353535); + border-bottom: 1px solid var(--hover-field, #353535); + border-top: 1px solid var(--hover-field, #353535); } -.bx--inline-edit-input--active input { - padding-left: 0.75rem; +.bx--table-column-checkbox .bx--checkbox-label { + padding-left: 1rem; } -.bx--data-table--short input { - height: 2rem; +.bx--data-table th.bx--table-column-checkbox { + position: static; + background: var(--ui-03, #393939); + padding: 0.75rem 0.5rem 0 1rem; + width: 2.75rem; + transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); } -.bx--data-table--short select { - padding: 0.45rem 2.75rem 0.45rem 1rem; +.bx--data-table td.bx--table-column-checkbox { + padding-top: 0.6875rem; + padding-bottom: 0; } -.bx--data-table--short .bx--select__arrow { - top: 0.875rem; +.bx--date-table tbody th.bx--table-column-checkbox:hover { + background: var(--hover-selected-ui, #4c4c4c); } -.bx--data-table.bx--skeleton th { - vertical-align: middle; +.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected td, +tr.bx--data-table--selected td { + color: var(--text-01, #f4f4f4); + background-color: var(--selected-ui, #393939); + border-top: 1px solid var(--selected-ui, #393939); + border-bottom: 1px solid var(--active-ui, #525252); } -.bx--data-table.bx--skeleton th span, -.bx--data-table.bx--skeleton td span { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - width: 4rem; - height: 1rem; - display: block; +.bx--data-table--zebra tbody tr:first-of-type:nth-child(odd).bx--data-table--selected td, +tr.bx--data-table--selected:first-of-type td { + border-top: 1px solid var(--active-ui, #525252); } -.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; - outline: none; - cursor: default; +.bx--data-table--zebra tbody tr:last-of-type:nth-child(odd).bx--data-table--selected td, +.bx--data-table--zebra tbody tr:last-of-type:nth-child(even).bx--data-table--selected td, +tr.bx--data-table--selected:last-of-type td { + border-top: 1px solid var(--selected-ui, #393939); + border-bottom: 1px solid var(--selected-ui, #393939); } -.bx--data-table.bx--skeleton th span:before, -.bx--data-table.bx--skeleton td span:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.bx--data-table--zebra tbody tr:nth-child(even).bx--data-table--selected td { + border-bottom: 1px solid var(--active-ui, #525252); } -@media (prefers-reduced-motion: reduce) { - .bx--data-table.bx--skeleton th span:before, - .bx--data-table.bx--skeleton td span:before { - animation: none; - } +.bx--data-table--zebra tbody tr:nth-child(even).bx--data-table--selected:hover td { + border-bottom: 1px solid var(--hover-selected-ui, #4c4c4c); } -.bx--data-table.bx--skeleton tr:hover td { - border-color: var(--ui-03, #393939); - background: transparent; +.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected:hover td, +.bx--data-table tbody .bx--data-table--selected:hover td { + color: var(--text-01, #f4f4f4); + background: var(--hover-selected-ui, #4c4c4c); + border-top: 1px solid var(--hover-selected-ui, #4c4c4c); + border-bottom: 1px solid var(--hover-selected-ui, #4c4c4c); } -.bx--data-table.bx--skeleton tr:hover td:first-of-type, .bx--data-table.bx--skeleton tr:hover td:last-of-type { - border-color: var(--ui-03, #393939); +.bx--data-table--selected .bx--overflow-menu .bx--overflow-menu__icon { + opacity: 1; } -.bx--data-table.bx--skeleton .bx--table-sort-v2 { - pointer-events: none; +.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.bx--skeleton th span { - background: var(--skeleton-02, #393939); +.bx--data-table--compact .bx--table-header-label { + padding: 0.125rem 0; } -.bx--data-table.bx--skeleton th span::before { - background: var(--skeleton-01, #353535); +.bx--data-table--compact td, +.bx--data-table--compact tbody tr th { + padding-top: 0.125rem; + padding-bottom: 0.125rem; } -.bx--data-table-container.bx--skeleton .bx--data-table-header__title { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - width: 7.5rem; - height: 1.5rem; +.bx--data-table--compact .bx--overflow-menu { + width: 2rem; + height: 1.4375rem; } -.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; - outline: none; - cursor: default; +.bx--data-table.bx--data-table--compact .bx--table-column-checkbox { + padding-top: 0; + padding-bottom: 0; } -.bx--data-table-container.bx--skeleton .bx--data-table-header__title:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.bx--data-table.bx--data-table--compact .bx--table-column-checkbox .bx--checkbox-label { + min-height: 1.4375rem; + height: 1.4375rem; } -@media (prefers-reduced-motion: reduce) { - .bx--data-table-container.bx--skeleton .bx--data-table-header__title:before { - animation: none; - } +.bx--data-table--short thead tr, +.bx--data-table--short tbody tr, +.bx--data-table--short tbody tr th { + height: 2rem; } -.bx--data-table-container.bx--skeleton .bx--data-table-header__description { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - margin-top: 0.5rem; - width: 10rem; - height: 1rem; +.bx--data-table--short .bx--table-header-label { + padding: 0.4375rem 0; } -.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; - outline: none; - cursor: default; +.bx--data-table--short td, +.bx--data-table--short tbody tr th { + padding-top: 0.4375rem; + padding-bottom: 0.375rem; } -.bx--data-table-container.bx--skeleton .bx--data-table-header__description:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.bx--data-table--short .bx--overflow-menu { + height: 1.9375rem; } -@media (prefers-reduced-motion: reduce) { - .bx--data-table-container.bx--skeleton .bx--data-table-header__description:before { - animation: none; - } +.bx--data-table.bx--data-table--short .bx--table-column-checkbox { + padding-top: 0.1875rem; + padding-bottom: 0.1875rem; } -.bx--fieldset { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - margin-bottom: 2rem; +.bx--data-table--tall thead tr, +.bx--data-table--tall tbody tr, +.bx--data-table--tall tbody tr th { + height: 4rem; } -.bx--fieldset *, -.bx--fieldset *:before, -.bx--fieldset *:after { - box-sizing: inherit; +.bx--data-table--tall .bx--table-header-label { + padding: 1rem 0; } -.bx--form-item { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - display: flex; - flex-direction: column; - flex: 1 1 auto; - align-items: flex-start; +.bx--data-table--tall td, +.bx--data-table--tall tbody tr th { + padding-top: 1rem; } -.bx--label { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; +.bx--data-table--cell-secondary-text { font-size: 0.75rem; font-weight: 400; line-height: 1rem; letter-spacing: 0.32px; - color: var(--text-02, #c6c6c6); - font-weight: 400; - display: inline-block; - vertical-align: baseline; - margin-bottom: 0.5rem; - line-height: 1rem; } -.bx--label *, -.bx--label *:before, -.bx--label *:after { - box-sizing: inherit; +.bx--data-table.bx--data-table--tall .bx--table-column-checkbox { + padding-top: 0.75rem; } -.bx--label .bx--tooltip__trigger { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; +.bx--data-table--static { + width: auto; } -.bx--label.bx--skeleton { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - width: 4.6875rem; - height: 0.875rem; +.bx--data-table_inner-container { + background-color: var(--ui-03, #393939); + transform: translateZ(0); } -.bx--label.bx--skeleton:hover, .bx--label.bx--skeleton:focus, .bx--label.bx--skeleton:active { - border: none; - outline: none; - cursor: default; +.bx--data-table--sticky-header { + display: block; + overflow-y: scroll; } -.bx--label.bx--skeleton:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; +.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: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; + width: 100%; + overflow: scroll; + -ms-overflow-style: none; + will-change: transform; } -@media (prefers-reduced-motion: reduce) { - .bx--label.bx--skeleton:before { - animation: none; +.bx--data-table--sticky-header thead tr th { + border-bottom: 1px solid var(--active-ui, #525252); +} + +.bx--data-table--sticky-header tbody { + flex-direction: column; + overflow-x: scroll; + -ms-overflow-style: none; + will-change: transform; +} + +.bx--data-table--sticky-header tr { + min-height: 3rem; + height: auto; +} + +.bx--data-table--sticky-header tr.bx--data-table--selected:first-of-type td { + border-top: none; +} + +.bx--data-table--sticky-header thead::-webkit-scrollbar, +.bx--data-table--sticky-header tbody::-webkit-scrollbar { + display: none; +} + +@-moz-document url-prefix() { + .bx--data-table--sticky-header thead, + .bx--data-table--sticky-header tbody { + scrollbar-width: none; } } -input[type=\\"number\\"] { - font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace; +.bx--data-table--sticky-header tbody tr:last-of-type { + border-bottom: 0; } -input[data-invalid], -.bx--text-input__field-wrapper[data-invalid], -.bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid, -.bx--select-input__wrapper[data-invalid], -.bx--list-box[data-invalid], -.bx--combo-box[data-invalid] .bx--text-input { - outline: 2px solid var(--support-01, #fa4d56); - outline-offset: -2px; +.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: 0; } -input[data-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 { - max-height: 12.5rem; +.bx--data-table--sticky-header .bx--table-header-label { + max-width: calc(100% - 10px); display: block; - color: var(--text-error, #ff8389); + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.bx--form--fluid .bx--text-input__field-wrapper[data-invalid] { - display: block; +.bx--data-table--max-width { + max-width: 100%; } -.bx--form--fluid .bx--fieldset { - margin: 0; +.bx--data-table--sticky-header { + max-height: 18.75rem; } -.bx--form--fluid input[data-invalid] { - outline: none; +.bx--data-table tr.bx--parent-row:first-of-type td { + border-top: 1px solid var(--ui-03, #393939); } -.bx--form--fluid .bx--form-requirement { - margin: 0; - padding: 0.5rem 2.5rem 0.5rem 1rem; +.bx--expandable-row--hidden td { + border-top: 0; + width: auto; + padding: 1rem; } -input:not(output):not([data-invalid]):-moz-ui-invalid { - box-shadow: none; +tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] { + height: 0; + transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--form-requirement { - box-sizing: border-box; - margin: 0; - padding: 0; +tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] td { + padding-top: 0; + padding-bottom: 0; border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - margin: 0.25rem 0 0; - max-height: 0; + background-color: var(--hover-ui, #353535); + transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 150ms 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; - line-height: 1.5; - display: none; + max-height: 0; } -.bx--form-requirement *, -.bx--form-requirement *:before, -.bx--form-requirement *:after { - box-sizing: inherit; +tr.bx--parent-row.bx--expandable-row + tr[data-child-row] { + transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--label + .bx--form__helper-text { - margin-top: -0.375rem; +tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td { + border-bottom: 1px solid var(--ui-03, #393939); } -.bx--form__helper-text { - font-size: 0.75rem; - line-height: 1rem; - letter-spacing: 0.32px; - color: var(--text-05, #8d8d8d); - z-index: 0; - opacity: 1; - margin-bottom: 0.5rem; - max-width: 75%; +tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td .bx--child-row-inner-container { + max-height: 100%; } -.bx--label--disabled, -.bx--form__helper-text--disabled { - color: var(--disabled-02, #525252); +.bx--parent-row.bx--expandable-row > td, +.bx--parent-row.bx--expandable-row + tr[data-child-row] > td { + border-bottom: 1px solid var(--ui-03, #393939); + box-shadow: 0 1px var(--ui-03, #393939); } -.bx--form-item.bx--checkbox-wrapper { - margin-bottom: 0.25rem; +.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] > td { + box-shadow: none; } -.bx--form-item.bx--checkbox-wrapper:first-of-type { - margin-top: 0.1875rem; +.bx--parent-row.bx--expandable-row > td:first-of-type { + box-shadow: none; } -.bx--label + .bx--form-item.bx--checkbox-wrapper { - margin-top: -0.125rem; +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 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--form-item.bx--checkbox-wrapper:last-of-type { - margin-bottom: 0.1875rem; +tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td { + transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--checkbox { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - visibility: inherit; - white-space: nowrap; -} - -.bx--checkbox-label { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - line-height: 1.5rem; - position: relative; - display: flex; - cursor: pointer; - min-height: 1.5rem; - user-select: none; - padding-left: 1.25rem; -} - -.bx--checkbox-label *, -.bx--checkbox-label *:before, -.bx--checkbox-label *:after { - box-sizing: inherit; +tr.bx--parent-row:not(.bx--expandable-row):first-of-type:hover td { + border-top: 1px solid var(--ui-03, #393939); + border-bottom: 1px solid var(--ui-03, #393939); } -.bx--checkbox-label-text { - padding-left: 0.375rem; +tr.bx--parent-row.bx--expandable-row:hover td { + background-color: var(--hover-ui, #353535); + border-top: 1px solid var(--ui-03, #393939); + border-bottom: 1px solid var(--ui-03, #393939); + color: var(--text-01, #f4f4f4); } -.bx--checkbox-label::before, -.bx--checkbox-label::after { - box-sizing: border-box; +tr.bx--parent-row.bx--expandable-row:hover td:first-of-type { + border-bottom: 1px solid transparent; } -.bx--checkbox-label::before { - content: \\"\\"; - width: 1rem; - height: 1rem; - margin: 0.125rem; - position: absolute; - left: 0; - top: 0.125rem; - background-color: transparent; - border: 1px solid var(--ui-05, #f4f4f4); - border-radius: 1px; +tr.bx--parent-row.bx--expandable-row:hover + tr[data-child-row] td { + background-color: var(--hover-ui, #353535); + color: var(--text-01, #f4f4f4); + border-bottom: 1px solid var(--ui-03, #393939); } -.bx--checkbox-label::after { - content: \\"\\"; - position: absolute; - left: 0.375rem; - top: 0.5rem; - width: 0.5625rem; - height: 0.3125rem; - background: none; - border-left: 2px solid var(--inverse-01, #161616); - border-bottom: 2px solid var(--inverse-01, #161616); - transform: scale(0) rotate(-45deg); - transform-origin: bottom right; - margin-top: -0.1875rem; +tr.bx--expandable-row--hover + tr[data-child-row] td { + border-bottom: 1px solid var(--ui-03, #393939); } -.bx--checkbox:checked + .bx--checkbox-label::before, -.bx--checkbox:indeterminate + .bx--checkbox-label::before, -.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"]::before, -.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"]::before { - background-color: var(--ui-05, #f4f4f4); - border-color: var(--ui-05, #f4f4f4); - border-width: 1px; +tr.bx--expandable-row--hover { + background-color: var(--hover-ui, #353535); } -.bx--checkbox:checked + .bx--checkbox-label::after, -.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"]::after { - transform: scale(1) rotate(-45deg); +tr.bx--expandable-row--hover td { + background-color: var(--hover-ui, #353535); + border-bottom: 1px solid var(--ui-03, #393939); + border-top: 1px solid var(--ui-03, #393939); + color: var(--text-01, #f4f4f4); } -.bx--checkbox:indeterminate + .bx--checkbox-label::after, -.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"]::after { - transform: scale(1) rotate(0deg); - border-left: 0 solid var(--inverse-01, #161616); - border-bottom: 2px solid var(--inverse-01, #161616); - width: 0.5rem; - top: 0.6875rem; +tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type { + border-bottom: 1px solid transparent; } -.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 { - border-color: var(--focus, #ffffff); - border-width: 3px; - width: 1.25rem; - height: 1.25rem; - left: -2px; - top: 0; +.bx--data-table td.bx--table-expand { + width: 2.5rem; + min-width: 2.5rem; + height: 3rem; + vertical-align: top; + padding: 0; + border-bottom: 1px solid var(--ui-03, #393939); } -[disabled] ~ _ { - font-size: inherit; +.bx--data-table td.bx--table-expand[data-previous-value=\\"collapsed\\"] { + border-bottom: 1px solid transparent; } -.bx--checkbox:disabled + .bx--checkbox-label, -.bx--checkbox-label[data-contained-checkbox-disabled=\\"true\\"] { - cursor: not-allowed; - color: var(--disabled-02, #525252); +.bx--table-expand[data-previous-value=\\"collapsed\\"] .bx--table-expand__svg { + transform: rotate(270deg); + transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--checkbox:disabled + .bx--checkbox-label::before, -.bx--checkbox-label[data-contained-checkbox-disabled=\\"true\\"]::before { - border-color: var(--disabled-02, #525252); +.bx--table-expand__button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; } -.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: var(--disabled-02, #525252); +.bx--table-expand__button *, +.bx--table-expand__button *:before, +.bx--table-expand__button *:after { + box-sizing: inherit; } -.bx--checkbox-label-text.bx--skeleton { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - width: 6.25rem; - height: 1rem; - margin: auto 0 auto 0.375rem; +.bx--table-expand__button::-moz-focus-inner { + border: 0; } -.bx--checkbox-label-text.bx--skeleton:hover, .bx--checkbox-label-text.bx--skeleton:focus, .bx--checkbox-label-text.bx--skeleton:active { - border: none; - outline: none; - cursor: default; +.bx--data-table--short .bx--table-expand__button { + height: auto; } -.bx--checkbox-label-text.bx--skeleton:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.bx--table-expand__button:focus { + outline: 1px solid transparent; } -@media (prefers-reduced-motion: reduce) { - .bx--checkbox-label-text.bx--skeleton:before { - animation: none; - } +.bx--table-expand__button:focus .bx--table-expand__svg { + box-shadow: inset 0px 0px 0px 1px var(--focus, #ffffff); } -.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 { - border-color: var(--interactive-04, #4589ff); +.bx--table-expand__svg { + fill: var(--ui-05, #f4f4f4); + transform: rotate(90deg); + transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.security--scroll-gradient { - width: inherit; - height: inherit; +th.bx--table-expand { position: relative; - display: flex; - justify-content: stretch; - align-items: stretch; + vertical-align: middle; } -.security--scroll-gradient__content { - overflow: auto; - height: inherit; - width: 100%; +th.bx--table-expand + th.bx--table-column-checkbox { + padding-left: 0.5rem; } -.security--scroll-gradient__before, .security--scroll-gradient__after { - display: block; +tr.bx--parent-row.bx--expandable-row td.bx--table-expand + td::after { position: absolute; - opacity: 0; - pointer-events: none; - z-index: 1; + content: \\"\\"; + left: 0; + bottom: -0.0625rem; + height: 0.0625rem; + width: 0.5rem; + background: var(--ui-03, #393939); } -.security--scroll-gradient--x .security--scroll-gradient__before, -.security--scroll-gradient--x .security--scroll-gradient__after { - top: 0; - width: 3rem; - height: 100%; +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: var(--hover-ui, #353535); } -.security--scroll-gradient--x .security--scroll-gradient__before { - left: 0; +tr.bx--parent-row.bx--data-table--selected td.bx--table-expand + td::after { + display: none; } -.security--scroll-gradient--x .security--scroll-gradient__after { - right: 0; +tr.bx--parent-row.bx--data-table--selected:first-of-type td { + background: var(--selected-ui, #393939); + border-top: 1px solid var(--active-ui, #525252); + border-bottom: 1px solid var(--ui-03, #393939); + box-shadow: 0 1px var(--active-ui, #525252); } -.security--scroll-gradient--y .security--scroll-gradient__before, -.security--scroll-gradient--y .security--scroll-gradient__after { - left: 0; - height: 3rem; - width: 100%; +tr.bx--parent-row.bx--data-table--selected td { + background: var(--selected-ui, #393939); + color: var(--text-01, #f4f4f4); + border-bottom: 1px solid transparent; + box-shadow: 0 1px var(--active-ui, #525252); } -.security--scroll-gradient--y .security--scroll-gradient__before { - top: 0; +tr.bx--parent-row.bx--data-table--selected:last-of-type td { + background: var(--selected-ui, #393939); + border-bottom: 1px solid transparent; + box-shadow: 0 1px var(--ui-03, #393939); } -.security--scroll-gradient--y .security--scroll-gradient__after { - bottom: 0; +tr.bx--parent-row.bx--data-table--selected:not(.bx--expandable-row):hover td { + background: var(--hover-selected-ui, #4c4c4c); + border-top: 1px solid var(--hover-selected-ui, #4c4c4c); + border-bottom: 1px solid var(--ui-03, #393939); + box-shadow: 0 1px var(--hover-selected-ui, #4c4c4c); } -.security--scroll-gradient--initial > .security--scroll-gradient__after, .security--scroll-gradient--started > .security--scroll-gradient__after { - opacity: 1; +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: 0 1px var(--selected-ui, #393939); } -.security--scroll-gradient--end > .security--scroll-gradient__before, .security--scroll-gradient--started > .security--scroll-gradient__before { - opacity: 1; +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 { + background: var(--hover-selected-ui, #4c4c4c); + border-top: 1px solid var(--hover-selected-ui, #4c4c4c); + border-bottom: 1px solid transparent; + box-shadow: 0 1px var(--hover-selected-ui, #4c4c4c); } -.bx--search { - display: flex; - align-items: center; - position: relative; - width: 100%; +tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row] td { + color: var(--text-01, #f4f4f4); + background-color: var(--hover-ui, #353535); + border-bottom: 1px solid var(--ui-03, #393939); + box-shadow: 0 1px var(--active-ui, #525252); + border-top: 1px solid var(--active-ui, #525252); } -.bx--search .bx--label { - position: absolute; - width: 1px; - height: 1px; +tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row]:last-of-type td { + box-shadow: inset 0 -1px var(--active-ui, #525252); + padding-bottom: 1.5rem; +} + +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: var(--selected-ui, #393939); +} + +.bx--data-table--sort th, +.bx--data-table--sort th:first-of-type:not(.bx--table-column-checkbox):not(.bx--table-expand) { padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - visibility: inherit; - white-space: nowrap; } -.bx--search-input { +.bx--data-table--sort th { + height: 3rem; + border-top: none; + border-bottom: none; +} + +.bx--data-table--sort td { + padding-left: 1rem; + padding-right: 1rem; +} + +.bx--data-table--sort th:first-of-type .bx--table-sort { + padding-left: 1rem; +} + +.bx--table-sort { box-sizing: border-box; margin: 0; padding: 0; @@ -6997,264 +6782,248 @@ input:not(output):not([data-invalid]):-moz-ui-invalid { font-size: 100%; font-family: inherit; vertical-align: baseline; - font-size: 1rem; - font-weight: 400; - line-height: 1.375rem; - letter-spacing: 0; - outline: 2px solid transparent; - outline-offset: -2px; + display: inline-block; + background: none; appearance: none; - border: none; - background-color: var(--field-01, #262626); - color: var(--text-01, #f4f4f4); - padding: 0 2.5rem; - text-overflow: ellipsis; + border: 0; + padding: 0; + cursor: pointer; + position: relative; + font: inherit; + display: flex; + align-items: center; + justify-content: space-between; width: 100%; - order: 1; - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - border-bottom: 1px solid var(--ui-04, #6f6f6f); + color: var(--text-01, #f4f4f4); + padding: 0 1rem; + height: 100%; + background-color: var(--ui-03, #393939); + transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9); } -.bx--search-input *, -.bx--search-input *:before, -.bx--search-input *:after { +.bx--table-sort *, +.bx--table-sort *:before, +.bx--table-sort *:after { box-sizing: inherit; } -.bx--search-input:focus { +.bx--table-sort::-moz-focus-inner { + border: 0; +} + +.bx--table-sort:focus { outline: 2px solid var(--focus, #ffffff); outline-offset: -2px; } -.bx--search-input::placeholder { - color: var(--text-05, #8d8d8d); - font-weight: 400; +.bx--table-sort:hover { + background: var(--hover-selected-ui, #4c4c4c); } -.bx--search-input::-ms-clear { - display: none; +.bx--table-sort:focus svg, +.bx--table-sort:hover svg { + opacity: 1; } -.bx--search-input[disabled] { - color: var(--disabled-02, #525252); - background-color: var(--disabled-01, #262626); - border-bottom: 1px solid transparent; - cursor: not-allowed; +.bx--table-sort .bx--table-sort__icon-inactive { + display: block; } -.bx--search-input[disabled]::placeholder { - color: var(--disabled-02, #525252); - font-weight: 400; +.bx--table-sort .bx--table-sort__icon { + display: none; } -.bx--search-input[disabled] ~ .bx--search-magnifier { - fill: var(--disabled-02, #525252); +.bx--table-sort__icon-unsorted { + position: relative; + left: 0.125rem; + margin-left: 0.5rem; + margin-right: 0; + opacity: 0; + fill: var(--ui-05, #f4f4f4); + width: auto; + min-width: 1rem; } -.bx--search--light .bx--search-input { - background: var(--field-02, #393939); +.bx--table-sort.bx--table-sort--active .bx--table-sort__icon-unsorted { + display: none; } -.bx--search--sm .bx--search-input { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - height: 2rem; +.bx--table-sort.bx--table-sort--active .bx--table-sort__icon { + display: block; + opacity: 1; } -.bx--search--lg .bx--search-input { - font-size: 1rem; - font-weight: 400; - line-height: 1.375rem; - letter-spacing: 0; - height: 2.5rem; +.bx--table-sort--ascending .bx--table-sort__icon { + transform: rotate(180deg); } -.bx--search--xl .bx--search-input { - font-size: 1rem; - font-weight: 400; - line-height: 1.375rem; - letter-spacing: 0; - height: 3rem; - padding: 0 4rem 0 3rem; +.bx--table-sort__icon { + position: relative; + left: 0.125rem; + margin-left: 0.5rem; + margin-right: 0; + transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9); + transform: rotate(0); + opacity: 0; + fill: var(--ui-05, #f4f4f4); + width: auto; + min-width: 1rem; } -.bx--search-magnifier { - left: 0.75rem; - z-index: 2; - position: absolute; - height: 1rem; - width: 1rem; - top: 50%; - transform: translateY(-50%); - fill: var(--icon-02, #c6c6c6); - pointer-events: none; +.bx--data-table--compact.bx--data-table--sort th { + height: 1.5rem; } -.bx--search--xl .bx--search-magnifier { - height: 1.25rem; - width: 1.25rem; - left: 1.5rem; - transform: translate(-50%, -50%); +.bx--data-table--compact.bx--data-table--sort th .bx--table-sort { + padding-top: 0; + padding-bottom: 0; } -.bx--search-close { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - right: 0; +.bx--data-table--short.bx--data-table--sort th { + height: 2rem; } -.bx--search-close *, -.bx--search-close *:before, -.bx--search-close *:after { - box-sizing: inherit; +.bx--data-table--short.bx--data-table--sort th .bx--table-sort { + padding-top: 0; + padding-bottom: 0; } -.bx--search-close::-moz-focus-inner { - border: 0; +.bx--data-table--tall.bx--data-table--sort th { + height: 4rem; } -.bx--search-close::before { - content: \\"\\"; - display: block; - position: absolute; - left: 0; - top: 0.0625rem; - height: calc(100% - 2px); - width: 2px; - background-color: var(--field-01, #262626); - transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); -} - -.bx--search-close:hover { - border-bottom: 1px solid var(--ui-04, #6f6f6f); +.bx--data-table--tall.bx--data-table--sort th .bx--table-sort { + padding-top: 0; + padding-bottom: 0; } -.bx--search-button { - flex-shrink: 0; - margin-left: 0.125rem; - background-color: var(--field-01, #262626); +.bx--data-table--tall.bx--data-table--sort th .bx--table-sort svg { + align-self: flex-start; + top: 0.5rem; } -.bx--search-button svg { - vertical-align: middle; - fill: currentColor; +.bx--data-table--tall.bx--data-table--sort th .bx--table-sort .bx--table-header-label { + align-self: flex-start; + position: relative; + top: -0.5rem; + max-height: 3rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } -.bx--search-close, -.bx--search-button { +.bx--inline-edit-label { display: flex; + justify-content: space-between; align-items: center; - justify-content: center; - transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - cursor: pointer; - visibility: inherit; +} + +.bx--inline-edit-label:hover .bx--inline-edit-label__icon { opacity: 1; - height: 2.5rem; - width: 2.5rem; - fill: var(--icon-01, #f4f4f4); - border-style: solid; - border-color: transparent; - border-width: 1px 0; } -.bx--search-close:hover, -.bx--search-button:hover { - background-color: var(--hover-field, #353535); +.bx--inline-edit-label--inactive { + display: none; } -.bx--search-close:focus, -.bx--search-button:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--inline-edit-label__action { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; } -.bx--search-close:active, -.bx--search-button:active { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; - background-color: var(--selected-ui, #393939); +.bx--inline-edit-label__action *, +.bx--inline-edit-label__action *:before, +.bx--inline-edit-label__action *:after { + box-sizing: inherit; } -.bx--search-close:hover::before { - background-color: var(--hover-field, #353535); +.bx--inline-edit-label__action::-moz-focus-inner { + border: 0; } -.bx--search-close:focus::before, -.bx--search-close:active::before { - background-color: var(--focus, #ffffff); +.bx--inline-edit-label__action:hover { + cursor: pointer; } -.bx--search-input:focus ~ .bx--search-close:hover { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--inline-edit-label__action:focus { + outline: 1px solid var(--focus, #ffffff); + padding: 0.125rem; } -.bx--search--sm .bx--search-close, -.bx--search--sm ~ .bx--search-button { +.bx--inline-edit-label__action:focus .bx--inline-edit-label__icon { + width: auto; + opacity: 1; +} + +.bx--inline-edit-label__icon { + fill: var(--ui-05, #f4f4f4); + 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--short input { height: 2rem; - width: 2rem; } -.bx--search--lg .bx--search-close, -.bx--search--lg ~ .bx--search-button { - height: 2.5rem; - width: 2.5rem; +.bx--data-table--short select { + padding: 0.45rem 2.75rem 0.45rem 1rem; } -.bx--search--xl .bx--search-close, -.bx--search--xl ~ .bx--search-button { - height: 3rem; - width: 3rem; +.bx--data-table--short .bx--select__arrow { + top: 0.875rem; } -.bx--search-close--hidden { - visibility: hidden; - opacity: 0; +.bx--data-table.bx--skeleton th { + vertical-align: middle; } -.bx--search--xl.bx--skeleton .bx--search-input, -.bx--search--lg.bx--skeleton .bx--search-input, -.bx--search--sm.bx--skeleton .bx--search-input { +.bx--data-table.bx--skeleton th span, +.bx--data-table.bx--skeleton td span { position: relative; border: none; padding: 0; box-shadow: none; pointer-events: none; background: var(--skeleton-01, #353535); - width: 100%; + width: 4rem; + height: 1rem; + display: block; } -.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 { +.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; outline: none; cursor: default; } -.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 { +.bx--data-table.bx--skeleton th span:before, +.bx--data-table.bx--skeleton td span:before { content: \\"\\"; width: 0%; height: 100%; @@ -7266,156 +7035,103 @@ input:not(output):not([data-invalid]):-moz-ui-invalid { } @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 { + .bx--data-table.bx--skeleton th span:before, + .bx--data-table.bx--skeleton td span:before { animation: 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; -} - -.security--data-table__table-wrapper { - z-index: 0; +.bx--data-table.bx--skeleton tr:hover td { + border-color: var(--ui-03, #393939); + background: transparent; } -.security--data-table__overflow-cell .bx--overflow-menu { - z-index: 8000; +.bx--data-table.bx--skeleton tr:hover td:first-of-type, .bx--data-table.bx--skeleton tr:hover td:last-of-type { + border-color: var(--ui-03, #393939); } -.security--data-table .bx--data-table { - background-color: var(--ui-03, #393939); +.bx--data-table.bx--skeleton .bx--table-sort-v2 { + pointer-events: none; } -.security--data-table .bx--data-table.bx--skeleton th { - border-bottom-width: 0; +.bx--data-table.bx--skeleton th span { + background: var(--skeleton-02, #393939); } -.security--delimited-list { - display: flex; +.bx--data-table.bx--skeleton th span::before { + background: var(--skeleton-01, #353535); } -.security--delimited-list__value--truncated { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +.bx--data-table-container.bx--skeleton .bx--data-table-header__title { + position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); + width: 7.5rem; + height: 1.5rem; } -.security--error-page { - display: flex; - min-height: 12.5rem; - margin-bottom: 3rem; - flex-direction: row; - justify-content: space-between; - background-repeat: no-repeat; +.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; + outline: none; + cursor: default; } -.security--error-page__title { - font-size: 2rem; - font-weight: 400; - line-height: 2.5rem; - letter-spacing: 0; - margin-top: 0.75rem; - margin-bottom: 3rem; +.bx--data-table-container.bx--skeleton .bx--data-table-header__title:before { + content: \\"\\"; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.security--error-page__sub-title, .security--error-page__description { - margin-top: 0; +@media (prefers-reduced-motion: reduce) { + .bx--data-table-container.bx--skeleton .bx--data-table-header__title:before { + animation: none; + } } -.security--error-page__sub-title { - font-size: 1.25rem; - font-weight: 400; - line-height: 1.625rem; - letter-spacing: 0; - margin-bottom: 1rem; +.bx--data-table-container.bx--skeleton .bx--data-table-header__description { + position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); + margin-top: 0.5rem; + width: 10rem; + height: 1rem; } -.security--error-page__description { - font-size: 1rem; - font-weight: 600; - line-height: 1.375rem; - letter-spacing: 0; - margin-bottom: 2rem; -} - -.security--error-page__content-wrapper { - display: flex; - padding: 6rem 2rem; - flex-direction: column; - justify-content: space-between; -} - -.security--error-page__content { - display: flex; - max-width: 25rem; - flex-direction: column; - justify-content: flex-start; -} - -.security--error-page__link__icon { - width: 1.25rem; - height: 1.25rem; - padding-right: 0.5rem; -} - -.security--link--external { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - position: relative; - box-shadow: none; - word-wrap: break-word; -} - -.security--link--external__title { - margin-right: 0.25rem; - word-wrap: break-word; -} - -.security--link--external__title[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--link--external__title { - margin-right: unset; - margin-left: 0.25rem; -} - -.security--link--external__icon { - fill: currentColor; - vertical-align: middle; +.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; + outline: none; + cursor: default; } -@keyframes collapse-accordion { - 0% { - height: 100%; - visibility: inherit; - opacity: 1; - } - 100% { - height: 0; - visibility: hidden; - opacity: 0; - } +.bx--data-table-container.bx--skeleton .bx--data-table-header__description:before { + content: \\"\\"; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -@keyframes expand-accordion { - 0% { - height: 0; - visibility: hidden; - opacity: 0; - } - 100% { - height: 100%; - visibility: inherit; - opacity: 1; +@media (prefers-reduced-motion: reduce) { + .bx--data-table-container.bx--skeleton .bx--data-table-header__description:before { + animation: none; } } -.bx--accordion { +.bx--fieldset { box-sizing: border-box; margin: 0; padding: 0; @@ -7423,27 +7139,27 @@ input:not(output):not([data-invalid]):-moz-ui-invalid { font-size: 100%; font-family: inherit; vertical-align: baseline; - list-style: none; - width: 100%; + margin-bottom: 2rem; } -.bx--accordion *, -.bx--accordion *:before, -.bx--accordion *:after { +.bx--fieldset *, +.bx--fieldset *:before, +.bx--fieldset *:after { box-sizing: inherit; } -.bx--accordion__item { - transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - border-top: 1px solid var(--ui-03, #393939); - overflow: visible; -} - -.bx--accordion__item:last-child { - border-bottom: 1px solid var(--ui-03, #393939); +.bx--form-item { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + display: flex; + flex-direction: column; + flex: 1 1 auto; + align-items: flex-start; } -.bx--accordion__heading { +.bx--label { box-sizing: border-box; margin: 0; padding: 0; @@ -7451,3952 +7167,4070 @@ input:not(output):not([data-invalid]):-moz-ui-invalid { font-size: 100%; font-family: inherit; vertical-align: baseline; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + color: var(--text-02, #c6c6c6); + font-weight: 400; display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - width: 100%; - color: var(--text-01, #f4f4f4); - display: flex; - align-items: flex-start; - justify-content: flex-start; - cursor: pointer; - padding: 0.375rem 0; - flex-direction: row-reverse; - position: relative; - height: 2.5rem; - width: 100%; - margin: 0; - transition: background-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; + vertical-align: baseline; + margin-bottom: 0.5rem; + line-height: 1rem; } -.bx--accordion__heading *, -.bx--accordion__heading *:before, -.bx--accordion__heading *:after { +.bx--label *, +.bx--label *:before, +.bx--label *:after { box-sizing: inherit; } -.bx--accordion__heading::-moz-focus-inner { - border: 0; +.bx--label .bx--tooltip__trigger { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; } -.bx--accordion__heading:hover::before, .bx--accordion__heading:focus::before { +.bx--label.bx--skeleton { + position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); + width: 4.6875rem; + height: 0.875rem; +} + +.bx--label.bx--skeleton:hover, .bx--label.bx--skeleton:focus, .bx--label.bx--skeleton:active { + border: none; + outline: none; + cursor: default; +} + +.bx--label.bx--skeleton:before { content: \\"\\"; + width: 0%; + height: 100%; position: absolute; - top: -1px; + top: 0; left: 0; - width: 100%; - height: calc(100% + 2px); + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.bx--accordion__heading:hover::before { - background-color: var(--hover-ui, #353535); +@media (prefers-reduced-motion: reduce) { + .bx--label.bx--skeleton:before { + animation: none; + } } -.bx--accordion__heading:focus { - outline: none; +input[type=\\"number\\"] { + font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace; } -.bx--accordion__heading:focus:before { - border: 2px solid var(--focus, #ffffff); - box-sizing: border-box; +input[data-invalid], +.bx--text-input__field-wrapper[data-invalid], +.bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid, +.bx--select-input__wrapper[data-invalid], +.bx--list-box[data-invalid], +.bx--combo-box[data-invalid] .bx--text-input { + outline: 2px solid var(--support-01, #fa4d56); + outline-offset: -2px; } -.bx--accordion__arrow { - outline: 2px solid transparent; - outline-offset: -2px; - flex: 0 0 1rem; - width: 1rem; - height: 1rem; - margin: 2px 1rem 0 0; - fill: var(--ui-05, #f4f4f4); - transform: rotate(90deg); - transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +input[data-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 { + max-height: 12.5rem; + display: block; + color: var(--text-error, #ff8389); } -.bx--accordion__title { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.25rem; - letter-spacing: 0.16px; - margin: 0 0 0 1rem; - width: 100%; - text-align: left; - z-index: 1; +.bx--form--fluid .bx--text-input__field-wrapper[data-invalid] { + display: block; } -.bx--accordion__content { - display: none; - transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; - padding-left: 1rem; - padding-right: 1rem; +.bx--form--fluid .bx--fieldset { + margin: 0; } -@media (min-width: 480px) { - .bx--accordion__content { - padding-right: 3rem; - } +.bx--form--fluid input[data-invalid] { + outline: none; } -@media (min-width: 640px) { - .bx--accordion__content { - padding-right: 25%; - } +.bx--form--fluid .bx--form-requirement { + margin: 0; + padding: 0.5rem 2.5rem 0.5rem 1rem; } -.bx--accordion__content > p { - font-size: 0.875rem; +input:not(output):not([data-invalid]):-moz-ui-invalid { + box-shadow: none; +} + +.bx--form-requirement { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + font-size: 0.75rem; font-weight: 400; - line-height: 1.25rem; - letter-spacing: 0.16px; + line-height: 1rem; + letter-spacing: 0.32px; + margin: 0.25rem 0 0; + max-height: 0; + overflow: hidden; + line-height: 1.5; + display: none; } -.bx--accordion--start .bx--accordion__heading { - flex-direction: row; +.bx--form-requirement *, +.bx--form-requirement *:before, +.bx--form-requirement *:after { + box-sizing: inherit; } -.bx--accordion--start .bx--accordion__arrow { - margin: 2px 0 0 0.5rem; +.bx--label + .bx--form__helper-text { + margin-top: -0.375rem; } -.bx--accordion--start .bx--accordion__content { - margin-left: 1.5rem; +.bx--form__helper-text { + font-size: 0.75rem; + line-height: 1rem; + letter-spacing: 0.32px; + color: var(--text-05, #8d8d8d); + z-index: 0; + opacity: 1; + margin-bottom: 0.5rem; + max-width: 75%; } -.bx--accordion__item--collapsing .bx--accordion__content, -.bx--accordion__item--expanding .bx--accordion__content { - display: block; +.bx--label--disabled, +.bx--form__helper-text--disabled { + color: var(--disabled-02, #525252); } -.bx--accordion__item--collapsing .bx--accordion__content { - animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) collapse-accordion; +.bx--form-item.bx--checkbox-wrapper { + margin-bottom: 0.25rem; } -.bx--accordion__item--expanding .bx--accordion__content { - animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) expand-accordion; +.bx--form-item.bx--checkbox-wrapper:first-of-type { + margin-top: 0.1875rem; } -.bx--accordion__item--active { - overflow: visible; +.bx--label + .bx--form-item.bx--checkbox-wrapper { + margin-top: -0.125rem; } -.bx--accordion__item--active .bx--accordion__content { - display: block; - padding-bottom: 1.5rem; - padding-top: 0.5rem; - transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms; +.bx--form-item.bx--checkbox-wrapper:last-of-type { + margin-bottom: 0.1875rem; } -.bx--accordion__item--active .bx--accordion__arrow { - /*rtl:ignore*/ - transform: rotate(-90deg); - fill: var(--ui-05, #f4f4f4); +.bx--checkbox { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + visibility: inherit; + white-space: nowrap; } -.bx--accordion.bx--skeleton .bx--accordion__heading, -.bx--accordion.bx--skeleton .bx--accordion__button { - cursor: default; +.bx--checkbox-label { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + line-height: 1.5rem; + position: relative; + display: flex; + cursor: pointer; + min-height: 1.5rem; + user-select: none; + padding-left: 1.25rem; } -.bx--accordion.bx--skeleton .bx--accordion__arrow { - pointer-events: none; - fill: var(--ui-05, #f4f4f4); - cursor: default; +.bx--checkbox-label *, +.bx--checkbox-label *:before, +.bx--checkbox-label *:after { + box-sizing: inherit; } -.bx--accordion.bx--skeleton .bx--accordion__arrow:hover, .bx--accordion.bx--skeleton .bx--accordion__arrow:focus, .bx--accordion.bx--skeleton .bx--accordion__arrow:active { - border: none; - outline: none; - cursor: default; +.bx--checkbox-label-text { + padding-left: 0.375rem; } -.bx--accordion.bx--skeleton .bx--accordion__heading:hover::before { - background-color: transparent; +.bx--checkbox-label::before, +.bx--checkbox-label::after { + box-sizing: border-box; } -.bx--accordion--end.bx--skeleton .bx--accordion__arrow { - margin-left: 1rem; +.bx--checkbox-label::before { + content: \\"\\"; + width: 1rem; + height: 1rem; + margin: 0.125rem; + position: absolute; + left: 0; + top: 0.125rem; + background-color: transparent; + border: 1px solid var(--ui-05, #f4f4f4); + border-radius: 1px; } -.bx--skeleton .bx--accordion__heading:focus .bx--accordion__arrow { - border: none; - outline: none; - cursor: default; +.bx--checkbox-label::after { + content: \\"\\"; + position: absolute; + left: 0.375rem; + top: 0.5rem; + width: 0.5625rem; + height: 0.3125rem; + background: none; + border-left: 2px solid var(--inverse-01, #161616); + border-bottom: 2px solid var(--inverse-01, #161616); + transform: scale(0) rotate(-45deg); + transform-origin: bottom right; + margin-top: -0.1875rem; } -.bx--accordion__title.bx--skeleton__text { - margin-bottom: 0; +.bx--checkbox:checked + .bx--checkbox-label::before, +.bx--checkbox:indeterminate + .bx--checkbox-label::before, +.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"]::before, +.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"]::before { + background-color: var(--ui-05, #f4f4f4); + border-color: var(--ui-05, #f4f4f4); + border-width: 1px; } -.bx--accordion.bx--accordion--start .bx--accordion__heading { - align-items: center; +.bx--checkbox:checked + .bx--checkbox-label::after, +.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"]::after { + transform: scale(1) rotate(-45deg); } -.bx--accordion__item--active .bx--accordion__title { - font-weight: 600; +.bx--checkbox:indeterminate + .bx--checkbox-label::after, +.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"]::after { + transform: scale(1) rotate(0deg); + border-left: 0 solid var(--inverse-01, #161616); + border-bottom: 2px solid var(--inverse-01, #161616); + width: 0.5rem; + top: 0.6875rem; } -.bx--accordion__content > *:first-child { - margin-top: 0; +.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 { + border-color: var(--focus, #ffffff); + border-width: 3px; + width: 1.25rem; + height: 1.25rem; + left: -2px; + top: 0; } -.bx--accordion__content > *:last-child { - margin-bottom: 0; +[disabled] ~ _ { + font-size: inherit; } -.security--filter-category { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - border-top: 0.0625rem solid var(--ui-03, #393939); +.bx--checkbox:disabled + .bx--checkbox-label, +.bx--checkbox-label[data-contained-checkbox-disabled=\\"true\\"] { + cursor: not-allowed; + color: var(--disabled-02, #525252); } -.security--filter-category__title { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - font-weight: 600; - display: flex; - margin-bottom: 1rem; - justify-content: space-between; +.bx--checkbox:disabled + .bx--checkbox-label::before, +.bx--checkbox-label[data-contained-checkbox-disabled=\\"true\\"]::before { + border-color: var(--disabled-02, #525252); } -.security--filter-category__count { - font-weight: 400; - color: var(--text-02, #c6c6c6); +.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: var(--disabled-02, #525252); } -.security--filter-search { +.bx--checkbox-label-text.bx--skeleton { position: relative; - margin-bottom: 1rem; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); + width: 6.25rem; + height: 1rem; + margin: auto 0 auto 0.375rem; } -.security--filter-search__results { - position: absolute; - top: 100%; - left: 0; - width: 100%; - max-height: 19rem; - padding: 0.5rem; - background-color: var(--ui-01, #262626); - box-sizing: border-box; - overflow-y: auto; - z-index: 9100; +.bx--checkbox-label-text.bx--skeleton:hover, .bx--checkbox-label-text.bx--skeleton:focus, .bx--checkbox-label-text.bx--skeleton:active { + border: none; + outline: none; + cursor: default; } -.security--filter-search__list { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; -} - -.security--filter-search__subcategory { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - border-top: 0.0625rem solid var(--ui-04, #6f6f6f); -} - -.security--filter-search__subcategory__title { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - margin-top: 0; - margin-bottom: 0.5rem; +.bx--checkbox-label-text.bx--skeleton:before { + content: \\"\\"; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.security--filter-search__results--none { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; +@media (prefers-reduced-motion: reduce) { + .bx--checkbox-label-text.bx--skeleton:before { + animation: none; + } } -.security--filter-search__results--visible { - max-height: 19rem; - overflow-y: auto; +.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 { + border-color: var(--interactive-04, #4589ff); } -.security--filter-selector { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.security--scroll-gradient { + width: inherit; + height: inherit; + position: relative; display: flex; + justify-content: stretch; + align-items: stretch; } -.security--filter-selector__checkbox-wrapper { - max-width: 100%; -} - -.security--filter-selector__checkbox, -.security--filter-selector__checkbox > span { +.security--scroll-gradient__content { + overflow: auto; + height: inherit; width: 100%; } -.security--filter-selector__checkbox > span { - display: flex; - align-items: center; -} - -.security--filter-selector__count { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - margin-left: 0.75rem; - color: var(--text-02, #c6c6c6); +.security--scroll-gradient__before, .security--scroll-gradient__after { + display: block; + position: absolute; + opacity: 0; + pointer-events: none; + z-index: 1; } -.security--filter-selector__label { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.security--scroll-gradient--x .security--scroll-gradient__before, +.security--scroll-gradient--x .security--scroll-gradient__after { + top: 0; + width: 3rem; + height: 100%; } -.security--filter-subcategory { - border-top-width: 0; +.security--scroll-gradient--x .security--scroll-gradient__before { + left: 0; } -.security--filter-subcategory:last-child { - border-bottom-width: 0; +.security--scroll-gradient--x .security--scroll-gradient__after { + right: 0; } -.security--filter-subcategory__filter-list { - width: calc(100% + 0.5rem); - padding-left: 0; +.security--scroll-gradient--y .security--scroll-gradient__before, +.security--scroll-gradient--y .security--scroll-gradient__after { + left: 0; + height: 3rem; + width: 100%; } -.security--filter-subcategory__scroller { - transition-duration: 0.2s; - transition-property: height; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); - padding-right: 1rem; +.security--scroll-gradient--y .security--scroll-gradient__before { + top: 0; } -.security--filter-subcategory > .bx--accordion__heading { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - height: 2rem; - color: var(--text-02, #c6c6c6); +.security--scroll-gradient--y .security--scroll-gradient__after { + bottom: 0; } -.security--filter-subcategory > .bx--accordion__content { - padding: 0 0 0 1rem; +.security--scroll-gradient--initial > .security--scroll-gradient__after, .security--scroll-gradient--started > .security--scroll-gradient__after { + opacity: 1; } -.security--filter-subcategory.bx--accordion__item--active > .bx--accordion__heading { - color: var(--text-01, #f4f4f4); +.security--scroll-gradient--end > .security--scroll-gradient__before, .security--scroll-gradient--started > .security--scroll-gradient__before { + opacity: 1; } -.security--filter-subcategory__button--toggle { +.bx--search { + display: flex; + align-items: center; position: relative; - left: -0.25rem; width: 100%; - min-height: auto; - padding: 0.25rem; - justify-content: start; } -.security--filter-subcategory__button--toggle.bx--btn, .security--filter-subcategory__button--toggle.bx--btn:active, .security--filter-subcategory__button--toggle.bx--btn:hover { - color: var(--text-02, #c6c6c6); +.bx--search .bx--label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + visibility: inherit; + white-space: nowrap; } -.security--filter-subcategory__button--toggle.bx--btn > .bx--btn__icon, .security--filter-subcategory__button--toggle.bx--btn:hover > .bx--btn__icon { - fill: currentColor; +.bx--search-input { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + font-size: 1rem; + font-weight: 400; + line-height: 1.375rem; + letter-spacing: 0; + outline: 2px solid transparent; + outline-offset: -2px; + appearance: none; + border: none; + background-color: var(--field-01, #262626); + color: var(--text-01, #f4f4f4); + padding: 0 2.5rem; + text-overflow: ellipsis; + width: 100%; + order: 1; + transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9); + border-bottom: 1px solid var(--ui-04, #6f6f6f); } -.security--filter-subcategory__button--toggle.bx--btn > .bx--btn__icon { - margin-right: 0.5rem; - margin-left: 0; - order: -1; +.bx--search-input *, +.bx--search-input *:before, +.bx--search-input *:after { + box-sizing: inherit; } -.security--filter-panel-label { - display: flex; - align-items: center; - width: 100%; +.bx--search-input:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.security--filter-panel-label__text { - flex: 1 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.bx--search-input::placeholder { + color: var(--text-05, #8d8d8d); + font-weight: 400; } -.security--filter-panel-label__count { - margin-left: 0.75rem; - color: var(--text-02, #c6c6c6); +.bx--search-input::-ms-clear { + display: none; } -.security--filter-panel-group { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - border-top: 1px solid var(--ui-03, #393939); +.bx--search-input[disabled] { + color: var(--disabled-02, #525252); + background-color: var(--disabled-01, #262626); + border-bottom: 1px solid transparent; + cursor: not-allowed; } -.security--filter-panel-group__title { - font-size: 0.75rem; +.bx--search-input[disabled]::placeholder { + color: var(--disabled-02, #525252); font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - font-weight: 600; - margin-top: 0; - margin-bottom: 1rem; } -@keyframes collapse-accordion { - 0% { - height: 100%; - visibility: inherit; - opacity: 1; - } - 100% { - height: 0; - visibility: hidden; - opacity: 0; - } +.bx--search-input[disabled] ~ .bx--search-magnifier { + fill: var(--disabled-02, #525252); } -@keyframes expand-accordion { - 0% { - height: 0; - visibility: hidden; - opacity: 0; - } - 100% { - height: 100%; - visibility: inherit; - opacity: 1; - } +.bx--search--light .bx--search-input { + background: var(--field-02, #393939); } -.security--filter-panel-accordion__title { - margin-top: 0.5rem; - margin-bottom: 1rem; +.bx--search--sm .bx--search-input { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + height: 2rem; } -.security--truncated-list { - margin: 0; +.bx--search--lg .bx--search-input { + font-size: 1rem; + font-weight: 400; + line-height: 1.375rem; + letter-spacing: 0; + height: 2.5rem; } -.security--truncated-list__scroller-container { - height: auto; +.bx--search--xl .bx--search-input { + font-size: 1rem; + font-weight: 400; + line-height: 1.375rem; + letter-spacing: 0; + height: 3rem; + padding: 0 4rem 0 3rem; } -.security--truncated-list__scroller { - transition-duration: 0.2s; - transition-property: height; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--search-magnifier { + left: 0.75rem; + z-index: 2; + position: absolute; + height: 1rem; + width: 1rem; + top: 50%; + transform: translateY(-50%); + fill: var(--icon-02, #c6c6c6); + pointer-events: none; } -.security--truncated-list__expand-button { - width: 100%; - max-width: none; - min-height: auto; +.bx--search--xl .bx--search-magnifier { + height: 1.25rem; + width: 1.25rem; + left: 1.5rem; + transform: translate(-50%, -50%); +} + +.bx--search-close { + box-sizing: border-box; + margin: 0; padding: 0; - border: none; - background: transparent; - color: var(--link-01, #78a9ff); - margin-top: 1px; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + outline: 2px solid transparent; + outline-offset: -2px; + position: absolute; + right: 0; } -.security--truncated-list__expand-button:hover { - background: transparent; - color: var(--link-01, #78a9ff); +.bx--search-close *, +.bx--search-close *:before, +.bx--search-close *:after { + box-sizing: inherit; } -.security--truncated-list__expand-button:active { - background: transparent; - color: var(--text-01, #f4f4f4); +.bx--search-close::-moz-focus-inner { + border: 0; } -.security--filter-panel-accordion-item { - border-top-width: 0; +.bx--search-close::before { + content: \\"\\"; + display: block; + position: absolute; + left: 0; + top: 0.0625rem; + height: calc(100% - 2px); + width: 2px; + background-color: var(--field-01, #262626); + transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.security--filter-panel-accordion-item:last-child { - border-bottom-width: 0; +.bx--search-close:hover { + border-bottom: 1px solid var(--ui-04, #6f6f6f); } -.security--filter-panel-accordion-item__count { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; +.bx--search-button { + flex-shrink: 0; + margin-left: 0.125rem; + background-color: var(--field-01, #262626); } -.security--filter-panel-accordion-item__list { - list-style: none; - padding-left: 0; - margin: 0; +.bx--search-button svg { + vertical-align: middle; + fill: currentColor; } -.security--filter-panel-accordion-item > .bx--accordion__heading { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - height: 2rem; - color: var(--text-02, #c6c6c6); - border: 2px solid transparent; +.bx--search-close, +.bx--search-button { + display: flex; + align-items: center; + justify-content: center; + transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border 110ms cubic-bezier(0.2, 0, 0.38, 0.9); + cursor: pointer; + visibility: inherit; + opacity: 1; + height: 2.5rem; + width: 2.5rem; + fill: var(--icon-01, #f4f4f4); + border-style: solid; + border-color: transparent; + border-width: 1px 0; } -.security--filter-panel-accordion-item > .bx--accordion__heading::before { - left: -0.125rem; - width: calc(100% + 0.5rem); +.bx--search-close:hover, +.bx--search-button:hover { + background-color: var(--hover-field, #353535); } -.security--filter-panel-accordion-item > .bx--accordion__heading:focus::before { +.bx--search-close:focus, +.bx--search-button:focus { outline: 2px solid var(--focus, #ffffff); outline-offset: -2px; - border: none; } -.security--filter-panel-accordion-item > .bx--accordion__content { - padding: 0 0 0 1rem; +.bx--search-close:active, +.bx--search-button:active { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; + background-color: var(--selected-ui, #393939); } -.security--filter-panel-accordion-item .bx--accordion__title { - width: calc(100% - 2.8em); +.bx--search-close:hover::before { + background-color: var(--hover-field, #353535); } -.security--filter-panel-accordion-item.bx--accordion__item--active > .bx--accordion__heading { - color: var(--text-01, #f4f4f4); +.bx--search-close:focus::before, +.bx--search-close:active::before { + background-color: var(--focus, #ffffff); } -.security--filter-panel-checkbox__wrapper { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - display: flex; - max-width: 100%; +.bx--search-input:focus ~ .bx--search-close:hover { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.security--filter-panel-checkbox__wrapper.bx--checkbox-wrapper, .security--filter-panel-checkbox__wrapper.bx--checkbox-wrapper:first-of-type, .security--filter-panel-checkbox__wrapper.bx--checkbox-wrapper:last-of-type { - margin: 0; +.bx--search--sm .bx--search-close, +.bx--search--sm ~ .bx--search-button { + height: 2rem; + width: 2rem; } -.security--filter-panel-checkbox__count { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; +.bx--search--lg .bx--search-close, +.bx--search--lg ~ .bx--search-button { + height: 2.5rem; + width: 2.5rem; } -.security--filter-panel-checkbox__count::before { - content: \\"(\\"; +.bx--search--xl .bx--search-close, +.bx--search--xl ~ .bx--search-button { + height: 3rem; + width: 3rem; } -.security--filter-panel-checkbox__count::after { - content: \\")\\"; +.bx--search-close--hidden { + visibility: hidden; + opacity: 0; } -.security--filter-panel-checkbox, -.security--filter-panel-checkbox > span { +.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; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); width: 100%; } -.security--filter-panel-checkbox > span { - display: flex; - align-items: center; +.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; + outline: none; + cursor: default; } -.security--filter-panel-checkbox-with-overflow-menu { - display: flex; - align-items: center; - position: relative; +.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 { + content: \\"\\"; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.security--filter-panel-checkbox-with-overflow-menu--open, .security--filter-panel-checkbox-with-overflow-menu:hover, .security--filter-panel-checkbox-with-overflow-menu:focus-within { - background-color: var(--field-01, #262626); +@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: none; + } } -.security--filter-panel-checkbox-with-overflow-menu__overflow-button { - position: absolute; - top: 0; - right: 0; - background-color: var(--field-01, #262626); - height: 1.5rem; - width: 1.5rem; +.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; } -.security--filter-panel-checkbox-with-overflow-menu__overflow-options { - width: auto; +.security--data-table__table-wrapper { + z-index: 0; } -.security--filter-panel-checkbox-with-overflow-menu__overflow-options .bx--overflow-menu-options__option { - height: 1.5rem; +.security--data-table__overflow-cell .bx--overflow-menu { + z-index: 8000; } -.security--filter-panel-checkbox-with-overflow-menu__overflow-options .bx--overflow-menu-options__btn { - max-width: none; - justify-content: flex-end; -} - -.security--filter-panel-search { - position: relative; - margin-bottom: 1rem; -} - -.security--filter-panel-search__results { - position: absolute; - top: 100%; - left: 0; - width: 100%; - max-height: 19rem; - padding: 0.5rem; - background-color: var(--ui-01, #262626); - box-sizing: border-box; - overflow-y: auto; - z-index: 9100; +.security--data-table .bx--data-table { + background-color: var(--ui-03, #393939); } -.security--filter-panel__title { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.security--data-table .bx--data-table.bx--skeleton th { + border-bottom-width: 0; } -.security--filter-panel__search { - margin-bottom: 1rem; +.security--delimited-list { + display: flex; } -.security--ica-skeleton { - width: 4rem; +.security--delimited-list__value--truncated { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.security--ica-skeleton .security--ica-skeleton__label, -.security--ica-skeleton .security--ica-skeleton__value { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); +.security--error-page { + display: flex; + min-height: 12.5rem; + margin-bottom: 3rem; + flex-direction: row; + justify-content: space-between; + background-repeat: no-repeat; } -.security--ica-skeleton .security--ica-skeleton__label:hover, .security--ica-skeleton .security--ica-skeleton__label:focus, .security--ica-skeleton .security--ica-skeleton__label:active, -.security--ica-skeleton .security--ica-skeleton__value:hover, -.security--ica-skeleton .security--ica-skeleton__value:focus, -.security--ica-skeleton .security--ica-skeleton__value:active { - border: none; - outline: none; - cursor: default; +.security--error-page__title { + font-size: 2rem; + font-weight: 400; + line-height: 2.5rem; + letter-spacing: 0; + margin-top: 0.75rem; + margin-bottom: 3rem; } -.security--ica-skeleton .security--ica-skeleton__label:before, -.security--ica-skeleton .security--ica-skeleton__value:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.security--error-page__sub-title, .security--error-page__description { + margin-top: 0; } -@media (prefers-reduced-motion: reduce) { - .security--ica-skeleton .security--ica-skeleton__label:before, - .security--ica-skeleton .security--ica-skeleton__value:before { - animation: none; - } +.security--error-page__sub-title { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.625rem; + letter-spacing: 0; + margin-bottom: 1rem; } -.security--ica-skeleton .security--ica-skeleton__label { - height: 0.75rem; - margin-top: 0; - margin-bottom: 0.5rem; +.security--error-page__description { + font-size: 1rem; + font-weight: 600; + line-height: 1.375rem; + letter-spacing: 0; + margin-bottom: 2rem; } -.security--ica-skeleton .security--ica-skeleton__value { - height: 2rem; - margin: 0; +.security--error-page__content-wrapper { + display: flex; + padding: 6rem 2rem; + flex-direction: column; + justify-content: space-between; } -.security--ica .security--ica__label { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - display: block; - color: var(--text-02, #c6c6c6); - margin: 0; +.security--error-page__content { + display: flex; + max-width: 25rem; + flex-direction: column; + justify-content: flex-start; } -.security--ica .security--ica__value { - font-size: 1.75rem; - font-weight: 400; - line-height: 2.25rem; - letter-spacing: 0; - margin-bottom: 0; +.security--error-page__link__icon { + width: 1.25rem; + height: 1.25rem; + padding-right: 0.5rem; } -.security--ica .security--ica__total { +.security--link--external { font-size: 0.875rem; font-weight: 400; line-height: 1.125rem; letter-spacing: 0.16px; - margin-bottom: 0; + position: relative; + box-shadow: none; + word-wrap: break-word; } -.security--ica .security--ica__percentage { - font-size: 1.75rem; - font-weight: 400; - line-height: 2.25rem; - letter-spacing: 0; +.security--link--external__title { + margin-right: 0.25rem; + word-wrap: break-word; } -.security--ica .security--ica__percentage-mark { - font-size: 1.25rem; - font-weight: 400; - line-height: 1.625rem; - letter-spacing: 0; +.security--link--external__title[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--link--external__title { + margin-right: unset; + margin-left: 0.25rem; } -.security--icon-button-bar { - display: flex; - overflow: none; +.security--link--external__icon { + fill: currentColor; + vertical-align: middle; } -.security--icon-button-bar--sm { - min-width: 2rem; +@keyframes collapse-accordion { + 0% { + height: 100%; + visibility: inherit; + opacity: 1; + } + 100% { + height: 0; + visibility: hidden; + opacity: 0; + } } -.security--icon-button-bar--sm .security--icon-button-bar__overflow-menu { - height: 2rem; - width: 2rem; +@keyframes expand-accordion { + 0% { + height: 0; + visibility: hidden; + opacity: 0; + } + 100% { + height: 100%; + visibility: inherit; + opacity: 1; + } } -.security--icon-button-bar__overflow-menu-options--sm.bx--overflow-menu-options::after { - width: 2rem; +.bx--accordion { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + list-style: none; + width: 100%; } -.security--icon-button-bar--md { - min-width: 2.5rem; +.bx--accordion *, +.bx--accordion *:before, +.bx--accordion *:after { + box-sizing: inherit; } -.security--icon-button-bar--md .security--icon-button-bar__overflow-menu { - height: 2.5rem; - width: 2.5rem; +.bx--accordion__item { + transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); + border-top: 1px solid var(--ui-03, #393939); + overflow: visible; } -.security--icon-button-bar__overflow-menu-options--md.bx--overflow-menu-options::after { - width: 2.5rem; +.bx--accordion__item:last-child { + border-bottom: 1px solid var(--ui-03, #393939); } -.security--icon-button-bar--lg { - min-width: 3rem; +.bx--accordion__heading { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + width: 100%; + color: var(--text-01, #f4f4f4); + display: flex; + align-items: flex-start; + justify-content: flex-start; + cursor: pointer; + padding: 0.375rem 0; + flex-direction: row-reverse; + position: relative; + height: 2.5rem; + width: 100%; + margin: 0; + transition: background-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; } -.security--icon-button-bar--lg .security--icon-button-bar__overflow-menu { - height: 3rem; - width: 3rem; +.bx--accordion__heading *, +.bx--accordion__heading *:before, +.bx--accordion__heading *:after { + box-sizing: inherit; } -.security--icon-button-bar__overflow-menu-options--lg.bx--overflow-menu-options::after { - width: 3rem; +.bx--accordion__heading::-moz-focus-inner { + border: 0; } -.security--icon-button-bar--xl { - min-width: 4rem; +.bx--accordion__heading:hover::before, .bx--accordion__heading:focus::before { + content: \\"\\"; + position: absolute; + top: -1px; + left: 0; + width: 100%; + height: calc(100% + 2px); } -.security--icon-button-bar--xl .security--icon-button-bar__overflow-menu { - height: 4rem; - width: 4rem; +.bx--accordion__heading:hover::before { + background-color: var(--hover-ui, #353535); } -.security--icon-button-bar__overflow-menu-options--xl.bx--overflow-menu-options::after { - width: 4rem; +.bx--accordion__heading:focus { + outline: none; } -.security--icon-button-bar__divider { - width: 3px; - display: flex; - justify-content: center; +.bx--accordion__heading:focus:before { + border: 2px solid var(--focus, #ffffff); + box-sizing: border-box; } -.security--icon-button-bar__divider__inner { - background-color: var(--ui-03, #393939); - width: 1px; +.bx--accordion__arrow { + outline: 2px solid transparent; + outline-offset: -2px; + flex: 0 0 1rem; + width: 1rem; + height: 1rem; + margin: 2px 1rem 0 0; + fill: var(--ui-05, #f4f4f4); + transform: rotate(90deg); + transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -@keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } +.bx--accordion__title { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.16px; + margin: 0 0 0 1rem; + width: 100%; + text-align: left; + z-index: 1; } -@keyframes rotate-end-p1 { - 100% { - transform: rotate(360deg); - } +.bx--accordion__content { + display: none; + transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms; + padding-left: 1rem; + padding-right: 1rem; } -@keyframes rotate-end-p2 { - 100% { - transform: rotate(-360deg); +@media (min-width: 480px) { + .bx--accordion__content { + padding-right: 3rem; } } -/* Stroke animations */ -@keyframes init-stroke { - 0% { - stroke-dashoffset: 240; - } - 100% { - stroke-dashoffset: 40; +@media (min-width: 640px) { + .bx--accordion__content { + padding-right: 25%; } } -@keyframes stroke-end { - 0% { - stroke-dashoffset: 40; - } - 100% { - stroke-dashoffset: 240; - } +.bx--accordion__content > p { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.16px; } -.bx--loading { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - animation-name: rotate; - animation-duration: 690ms; - animation-timing-function: linear; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - width: 10.5rem; - height: 10.5rem; +.bx--accordion--start .bx--accordion__heading { + flex-direction: row; } -.bx--loading *, -.bx--loading *:before, -.bx--loading *:after { - box-sizing: inherit; +.bx--accordion--start .bx--accordion__arrow { + margin: 2px 0 0 0.5rem; } -.bx--loading svg circle { - animation-name: init-stroke; - animation-duration: 10ms; - animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--accordion--start .bx--accordion__content { + margin-left: 1.5rem; } -.bx--loading__svg { - fill: transparent; +.bx--accordion__item--collapsing .bx--accordion__content, +.bx--accordion__item--expanding .bx--accordion__content { + display: block; } -.bx--loading__svg circle { - stroke-width: 8; - stroke-linecap: butt; - stroke-dasharray: 240; +.bx--accordion__item--collapsing .bx--accordion__content { + animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) collapse-accordion; } -.bx--loading__stroke { - stroke: var(--interactive-04, #4589ff); - stroke-dashoffset: 40; +.bx--accordion__item--expanding .bx--accordion__content { + animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) expand-accordion; } -.bx--loading--small .bx--loading__stroke { - stroke-dashoffset: 99; +.bx--accordion__item--active { + overflow: visible; } -.bx--loading--stop { - animation: rotate-end-p1 700ms cubic-bezier(0.2, 0, 1, 0.9) forwards, rotate-end-p2 700ms cubic-bezier(0.2, 0, 1, 0.9) 700ms forwards; +.bx--accordion__item--active .bx--accordion__content { + display: block; + padding-bottom: 1.5rem; + padding-top: 0.5rem; + transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms; } -.bx--loading--stop svg circle { - animation-name: stroke-end; - animation-duration: 700ms; - animation-timing-function: cubic-bezier(0.2, 0, 1, 0.9); - animation-delay: 700ms; - animation-fill-mode: forwards; +.bx--accordion__item--active .bx--accordion__arrow { + /*rtl:ignore*/ + transform: rotate(-90deg); + fill: var(--ui-05, #f4f4f4); } -.bx--loading--small { - width: 2rem; - height: 2rem; +.bx--accordion.bx--skeleton .bx--accordion__heading, +.bx--accordion.bx--skeleton .bx--accordion__button { + cursor: default; } -.bx--loading--small circle { - stroke-width: 12; +.bx--accordion.bx--skeleton .bx--accordion__arrow { + pointer-events: none; + fill: var(--ui-05, #f4f4f4); + cursor: default; } -.bx--loading--small .bx--loading__svg { - stroke: var(--interactive-04, #4589ff); +.bx--accordion.bx--skeleton .bx--accordion__arrow:hover, .bx--accordion.bx--skeleton .bx--accordion__arrow:focus, .bx--accordion.bx--skeleton .bx--accordion__arrow:active { + border: none; + outline: none; + cursor: default; } -.bx--loading__background { - stroke: var(--ui-03, #393939); - stroke-dashoffset: 0; +.bx--accordion.bx--skeleton .bx--accordion__heading:hover::before { + background-color: transparent; } -.bx--loading-overlay { - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: rgba(var(--ui-02, #393939), 0.6); - display: flex; - justify-content: center; - align-items: center; - transition: background-color 720ms cubic-bezier(0.4, 0.14, 0.3, 1); - z-index: 8000; +.bx--accordion--end.bx--skeleton .bx--accordion__arrow { + margin-left: 1rem; } -.bx--loading-overlay--stop { - display: none; +.bx--skeleton .bx--accordion__heading:focus .bx--accordion__arrow { + border: none; + outline: none; + cursor: default; } -@keyframes stroke { - 100% { - stroke-dashoffset: 0; - } +.bx--accordion__title.bx--skeleton__text { + margin-bottom: 0; } -.bx--inline-loading { - display: flex; - width: 100%; - min-height: 2rem; +.bx--accordion.bx--accordion--start .bx--accordion__heading { align-items: center; } -.bx--inline-loading .bx--loading__svg circle { - stroke-width: 12; +.bx--accordion__item--active .bx--accordion__title { + font-weight: 600; } -.bx--inline-loading .bx--loading__stroke { - stroke-dashoffset: 99; +.bx--accordion__content > *:first-child { + margin-top: 0; } -.bx--inline-loading__text { +.bx--accordion__content > *:last-child { + margin-bottom: 0; +} + +.security--filter-category { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-top: 0.0625rem solid var(--ui-03, #393939); +} + +.security--filter-category__title { font-size: 0.75rem; font-weight: 400; line-height: 1rem; letter-spacing: 0.32px; - color: var(--text-02, #c6c6c6); + font-weight: 600; + display: flex; + margin-bottom: 1rem; + justify-content: space-between; } -.bx--inline-loading__animation { - position: relative; - width: 2rem; - height: 2rem; - display: flex; - justify-content: center; - align-items: center; +.security--filter-category__count { + font-weight: 400; + color: var(--text-02, #c6c6c6); } -.bx--inline-loading__checkmark-container { - fill: var(--interactive-04, #4589ff); +.security--filter-search { + position: relative; + margin-bottom: 1rem; } -.bx--inline-loading__checkmark-container.bx--inline-loading__svg { - width: 0.75rem; +.security--filter-search__results { position: absolute; - top: 0.75rem; -} - -.bx--inline-loading__checkmark-container[hidden] { - display: none; -} - -.bx--inline-loading__checkmark { - fill: none; - stroke: var(--interactive-04, #4589ff); - transform-origin: 50% 50%; - stroke-width: 1.8; - stroke-dasharray: 12; - stroke-dashoffset: 12; - animation-name: stroke; - animation-duration: 0.25s; - animation-fill-mode: forwards; -} - -.bx--inline-loading--error { - fill: var(--support-01, #fa4d56); - width: 1rem; - height: 1rem; -} - -.bx--inline-loading--error[hidden] { - display: none; + top: 100%; + left: 0; + width: 100%; + max-height: 19rem; + padding: 0.5rem; + background-color: var(--ui-01, #262626); + box-sizing: border-box; + overflow-y: auto; + z-index: 9100; } -.bx--loading--small .bx--inline-loading__svg { - stroke: var(--interactive-04, #4589ff); +.security--filter-search__list { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; } -/* If IE11 Don\\"t show check animation */ -@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .bx--inline-loading__checkmark-container { - top: 1px; - right: 0.5rem; - } - .bx--inline-loading__checkmark { - animation: none; - stroke-dashoffset: 0; - stroke-dasharray: 0; - } +.security--filter-search__subcategory { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-top: 0.0625rem solid var(--ui-04, #6f6f6f); } -.bx--tag { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; +.security--filter-search__subcategory__title { font-size: 0.75rem; font-weight: 400; line-height: 1rem; letter-spacing: 0.32px; - background-color: #e0e0e0; - color: #525252; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 0.5rem; - height: 1.5rem; - max-width: 100%; - min-width: 2rem; - margin: 0.25rem; - border-radius: 0.9375rem; - cursor: default; + margin-top: 0; + margin-bottom: 0.5rem; } -.bx--tag *, -.bx--tag *:before, -.bx--tag *:after { - box-sizing: inherit; +.security--filter-search__results--none { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; } -.bx--tag::-moz-focus-inner { - border: 0; +.security--filter-search__results--visible { + max-height: 19rem; + overflow-y: auto; } -.bx--tag .bx--tag__close-icon:hover { - background-color: #c6c6c6; +.security--filter-selector { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + display: flex; } -.bx--tag:not(:first-child) { - margin-left: 0; +.security--filter-selector__checkbox-wrapper { + max-width: 100%; } -.bx--tag.bx--skeleton { - background-color: var(--ui-03, #393939); - color: var(--text-01, #f4f4f4); +.security--filter-selector__checkbox, +.security--filter-selector__checkbox > span { + width: 100%; } -.bx--tag.bx--skeleton .bx--tag__close-icon:hover { - background-color: var(--ui-03, #393939); +.security--filter-selector__checkbox > span { + display: flex; + align-items: center; } -.bx--tag--red { - background-color: #ffd7d9; - color: #a2191f; +.security--filter-selector__count { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + margin-left: 0.75rem; + color: var(--text-02, #c6c6c6); } -.bx--tag--red .bx--tag__close-icon:hover { - background-color: #ffb3b8; +.security--filter-selector__label { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.bx--tag--magenta { - background-color: #ffd6e8; - color: #9f1853; +.security--filter-subcategory { + border-top-width: 0; } -.bx--tag--magenta .bx--tag__close-icon:hover { - background-color: #ffafd2; +.security--filter-subcategory:last-child { + border-bottom-width: 0; } -.bx--tag--purple { - background-color: #e8daff; - color: #6929c4; +.security--filter-subcategory__filter-list { + width: calc(100% + 0.5rem); + padding-left: 0; } -.bx--tag--purple .bx--tag__close-icon:hover { - background-color: #d4bbff; +.security--filter-subcategory__scroller { + transition-duration: 0.2s; + transition-property: height; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + padding-right: 1rem; } -.bx--tag--blue { - background-color: #d0e2ff; - color: #0043ce; +.security--filter-subcategory > .bx--accordion__heading { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + height: 2rem; + color: var(--text-02, #c6c6c6); } -.bx--tag--blue .bx--tag__close-icon:hover { - background-color: #a6c8ff; +.security--filter-subcategory > .bx--accordion__content { + padding: 0 0 0 1rem; } -.bx--tag--cyan { - background-color: #bae6ff; - color: #00539a; +.security--filter-subcategory.bx--accordion__item--active > .bx--accordion__heading { + color: var(--text-01, #f4f4f4); } -.bx--tag--cyan .bx--tag__close-icon:hover { - background-color: #82cfff; +.security--filter-subcategory__button--toggle { + position: relative; + left: -0.25rem; + width: 100%; + min-height: auto; + padding: 0.25rem; + justify-content: start; } -.bx--tag--teal { - background-color: #9ef0f0; - color: #005d5d; +.security--filter-subcategory__button--toggle.bx--btn, .security--filter-subcategory__button--toggle.bx--btn:active, .security--filter-subcategory__button--toggle.bx--btn:hover { + color: var(--text-02, #c6c6c6); } -.bx--tag--teal .bx--tag__close-icon:hover { - background-color: #3ddbd9; +.security--filter-subcategory__button--toggle.bx--btn > .bx--btn__icon, .security--filter-subcategory__button--toggle.bx--btn:hover > .bx--btn__icon { + fill: currentColor; } -.bx--tag--green { - background-color: #a7f0ba; - color: #0e6027; +.security--filter-subcategory__button--toggle.bx--btn > .bx--btn__icon { + margin-right: 0.5rem; + margin-left: 0; + order: -1; } -.bx--tag--green .bx--tag__close-icon:hover { - background-color: #6fdc8c; +.security--filter-panel-label { + display: flex; + align-items: center; + width: 100%; } -.bx--tag--gray { - background-color: #e0e0e0; - color: #525252; +.security--filter-panel-label__text { + flex: 1 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.bx--tag--gray .bx--tag__close-icon:hover { - background-color: #c6c6c6; +.security--filter-panel-label__count { + margin-left: 0.75rem; + color: var(--text-02, #c6c6c6); } -.bx--tag--cool-gray { - background-color: #dde1e6; - color: #4d5358; +.security--filter-panel-group { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-top: 1px solid var(--ui-03, #393939); } -.bx--tag--cool-gray .bx--tag__close-icon:hover { - background-color: #c1c7cd; +.security--filter-panel-group__title { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + font-weight: 600; + margin-top: 0; + margin-bottom: 1rem; } -.bx--tag--warm-gray { - background-color: #e5e0df; - color: #565151; +@keyframes collapse-accordion { + 0% { + height: 100%; + visibility: inherit; + opacity: 1; + } + 100% { + height: 0; + visibility: hidden; + opacity: 0; + } } -.bx--tag--warm-gray .bx--tag__close-icon:hover { - background-color: #cac5c4; -} - -.bx--tag--high-contrast { - background-color: var(--inverse-02, #f4f4f4); - color: var(--inverse-01, #161616); -} - -.bx--tag--high-contrast .bx--tag__close-icon:hover { - background-color: var(--inverse-hover-ui, #e5e5e5); +@keyframes expand-accordion { + 0% { + height: 0; + visibility: hidden; + opacity: 0; + } + 100% { + height: 100%; + visibility: inherit; + opacity: 1; + } } -.bx--tag--disabled, -.bx--tag--filter.bx--tag--disabled { - background-color: var(--disabled-01, #262626); - color: var(--disabled-02, #525252); +.security--filter-panel-accordion__title { + margin-top: 0.5rem; + margin-bottom: 1rem; } -.bx--tag--disabled .bx--tag__close-icon:hover, -.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover { - background-color: var(--disabled-01, #262626); +.security--truncated-list { + margin: 0; } -.bx--tag--disabled:hover, -.bx--tag--filter.bx--tag--disabled:hover { - cursor: not-allowed; +.security--truncated-list__scroller-container { + height: auto; } -.bx--tag__label { - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; +.security--truncated-list__scroller { + transition-duration: 0.2s; + transition-property: height; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--tag--filter { - cursor: pointer; - padding-right: 0.125rem; +.security--truncated-list__expand-button { + width: 100%; + max-width: none; + min-height: auto; + padding: 0; + border: none; + background: transparent; + color: var(--link-01, #78a9ff); + margin-top: 1px; } -.bx--tag--filter:focus, .bx--tag--filter:hover { - outline: none; +.security--truncated-list__expand-button:hover { + background: transparent; + color: var(--link-01, #78a9ff); } -.bx--tag__close-icon { - flex-shrink: 0; - width: 1.25rem; - height: 1.25rem; - margin: 0 0 0 0.25rem; - padding: 0.125rem; - border: 0; - background-color: transparent; - border-radius: 50%; - color: currentColor; - cursor: pointer; +.security--truncated-list__expand-button:active { + background: transparent; + color: var(--text-01, #f4f4f4); } -.bx--tag__close-icon svg { - fill: currentColor; +.security--filter-panel-accordion-item { + border-top-width: 0; } -.bx--tag--disabled .bx--tag__close-icon { - cursor: not-allowed; +.security--filter-panel-accordion-item:last-child { + border-bottom-width: 0; } -.bx--tag__close-icon:focus { - outline: none; - box-shadow: inset 0 0 0 2px var(--focus, #ffffff); - border-radius: 50%; +.security--filter-panel-accordion-item__count { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; } -.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover { - background-color: transparent; +.security--filter-panel-accordion-item__list { + list-style: none; + padding-left: 0; + margin: 0; } -.bx--tag--filter.bx--tag--disabled svg { - fill: var(--disabled-02, #525252); +.security--filter-panel-accordion-item > .bx--accordion__heading { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + height: 2rem; + color: var(--text-02, #c6c6c6); + border: 2px solid transparent; } -.bx--tag.bx--skeleton { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - width: 3.75rem; - overflow: hidden; +.security--filter-panel-accordion-item > .bx--accordion__heading::before { + left: -0.125rem; + width: calc(100% + 0.5rem); } -.bx--tag.bx--skeleton:hover, .bx--tag.bx--skeleton:focus, .bx--tag.bx--skeleton:active { +.security--filter-panel-accordion-item > .bx--accordion__heading:focus::before { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; border: none; - outline: none; - cursor: default; } -.bx--tag.bx--skeleton:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.security--filter-panel-accordion-item > .bx--accordion__content { + padding: 0 0 0 1rem; } -@media (prefers-reduced-motion: reduce) { - .bx--tag.bx--skeleton:before { - animation: none; - } +.security--filter-panel-accordion-item .bx--accordion__title { + width: calc(100% - 2.8em); } -.security--tag--interactive--default { +.security--filter-panel-accordion-item.bx--accordion__item--active > .bx--accordion__heading { color: var(--text-01, #f4f4f4); - background-color: var(--active-ui, #525252); } -.security--tag--interactive--removable { - padding-right: 0.125rem; +.security--filter-panel-checkbox__wrapper { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + display: flex; + max-width: 100%; } -.security--tag--interactive__button { - box-sizing: border-box; +.security--filter-panel-checkbox__wrapper.bx--checkbox-wrapper, .security--filter-panel-checkbox__wrapper.bx--checkbox-wrapper:first-of-type, .security--filter-panel-checkbox__wrapper.bx--checkbox-wrapper:last-of-type { margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - width: 100%; - position: relative; - margin-left: 0.5rem; - height: 1.25rem; - width: 1.25rem; - color: currentColor; } -.security--tag--interactive__button *, -.security--tag--interactive__button *:before, -.security--tag--interactive__button *:after { - box-sizing: inherit; +.security--filter-panel-checkbox__count { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; } -.security--tag--interactive__button::-moz-focus-inner { - border: 0; +.security--filter-panel-checkbox__count::before { + content: \\"(\\"; } -.security--tag--interactive__button:focus, .security--tag--interactive__button:hover { - outline: none; +.security--filter-panel-checkbox__count::after { + content: \\")\\"; } -.security--tag--interactive__button:focus > .security--tag--interactive__button__icon, .security--tag--interactive__button:hover > .security--tag--interactive__button__icon { - border-color: currentColor; +.security--filter-panel-checkbox, +.security--filter-panel-checkbox > span { + width: 100%; } -.security--tag--interactive__button__icon { - transition-duration: 0.1s; - transition-property: border-color; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); - position: absolute; - top: 50%; - left: 50%; - border: 0.125rem solid transparent; - border-radius: 50%; - fill: currentColor; - transform: translate(-50%, -50%); +.security--filter-panel-checkbox > span { + display: flex; + align-items: center; } -.security--nav { +.security--filter-panel-checkbox-with-overflow-menu { + display: flex; + align-items: center; position: relative; } -.security--nav:not(:first-of-type) { - padding-top: 1rem; +.security--filter-panel-checkbox-with-overflow-menu--open, .security--filter-panel-checkbox-with-overflow-menu:hover, .security--filter-panel-checkbox-with-overflow-menu:focus-within { + background-color: var(--field-01, #262626); } -.security--nav:not(:last-of-type) { - padding-bottom: 1rem; +.security--filter-panel-checkbox-with-overflow-menu__overflow-button { + position: absolute; + top: 0; + right: 0; + background-color: var(--field-01, #262626); + height: 1.5rem; + width: 1.5rem; } -.security--nav:last-of-type { - padding-bottom: 2rem; +.security--filter-panel-checkbox-with-overflow-menu__overflow-options { + width: auto; } -.security--nav + .security--nav > .security--nav__heading { - padding-top: 0.25rem; +.security--filter-panel-checkbox-with-overflow-menu__overflow-options .bx--overflow-menu-options__option { + height: 1.5rem; } -.security--nav::before { - display: inline-block; - position: absolute; - left: 2rem; - right: 2rem; - bottom: 0; - width: auto; - border-bottom: 0.0625rem solid var(--ui-02, #393939); - content: \\"\\"; +.security--filter-panel-checkbox-with-overflow-menu__overflow-options .bx--overflow-menu-options__btn { + max-width: none; + justify-content: flex-end; } -.security--nav:last-of-type::before { - border-width: 0; +.security--filter-panel-search { + position: relative; + margin-bottom: 1rem; } -.security--nav__wrapper { - padding-left: unset; - margin-top: unset; - margin-bottom: unset; - list-style: none; -} - -.security--nav__wrapper[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--nav__wrapper { - padding-right: unset; -} - -.security--nav__heading { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - padding: 0.75rem 2rem; - margin-top: unset; - margin-bottom: unset; - color: var(--text-02, #c6c6c6); - font-weight: 400; +.security--filter-panel-search__results { + position: absolute; + top: 100%; + left: 0; + width: 100%; + max-height: 19rem; + padding: 0.5rem; + background-color: var(--ui-01, #262626); + box-sizing: border-box; + overflow-y: auto; + z-index: 9100; } -.security--nav__list { +.security--filter-panel__title { font-size: 0.875rem; font-weight: 400; line-height: 1.125rem; letter-spacing: 0.16px; - display: flex; - flex-direction: column; - list-style: none; -} - -.security--nav__list, .security--nav__list__item { - margin-bottom: 0.125rem; -} - -.security--nav__list:focus { - background-color: var(--ui-02, #393939); - outline-width: 0; -} - -.security--nav__list:focus > .security--nav__list__item__link { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; } -.security--nav__list__icon { - transition-duration: 0.2s; - transition-property: transform; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); - position: absolute; - top: 25%; - left: 1rem; - fill: var(--text-01, #f4f4f4); - transform: translate3d(-50%, 0, 0) rotate(270deg); +.security--filter-panel__search { + margin-bottom: 1rem; } -.security--nav__list__icon[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--nav__list__icon { - right: 0.25rem; - transform: translate3d(-50%, 0, 0) rotate(90deg); +.security--ica-skeleton { + width: 4rem; } -.security--nav__list__item { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.security--ica-skeleton .security--ica-skeleton__label, +.security--ica-skeleton .security--ica-skeleton__value { position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); } -.security--nav__list__item__content { - display: flex; +.security--ica-skeleton .security--ica-skeleton__label:hover, .security--ica-skeleton .security--ica-skeleton__label:focus, .security--ica-skeleton .security--ica-skeleton__label:active, +.security--ica-skeleton .security--ica-skeleton__value:hover, +.security--ica-skeleton .security--ica-skeleton__value:focus, +.security--ica-skeleton .security--ica-skeleton__value:active { + border: none; + outline: none; + cursor: default; } -.security--nav__list__item::before { - transition-duration: 0.2s; - transition-property: transform; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); - display: inline-block; +.security--ica-skeleton .security--ica-skeleton__label:before, +.security--ica-skeleton .security--ica-skeleton__value:before { + content: \\"\\"; + width: 0%; + height: 100%; position: absolute; top: 0; left: 0; - width: 0.25rem; - height: 100%; - background-color: transparent; - content: \\"\\"; - transform: translate3d(-100%, 0, 0); - z-index: 10000; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.security--nav__list__item[dir=\\"rtl\\"]::before, -[dir=\\"rtl\\"] .security--nav__list__item::before { - right: 0; - transform: translate3d(100%, 0, 0); +@media (prefers-reduced-motion: reduce) { + .security--ica-skeleton .security--ica-skeleton__label:before, + .security--ica-skeleton .security--ica-skeleton__value:before { + animation: none; + } } -.security--nav__list__item--disabled { - pointer-events: none; +.security--ica-skeleton .security--ica-skeleton__label { + height: 0.75rem; + margin-top: 0; + margin-bottom: 0.5rem; } -.security--nav__list__item--disabled > .security--nav__list__item__link { - color: var(--disabled-03, #8d8d8d); +.security--ica-skeleton .security--ica-skeleton__value { + height: 2rem; + margin: 0; } -.security--nav__list__item--active { - font-weight: 600; +.security--ica .security--ica__label { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + display: block; + color: var(--text-02, #c6c6c6); + margin: 0; } -.security--nav__list__item--active[dir=\\"rtl\\"]::before, -[dir=\\"rtl\\"] .security--nav__list__item--active::before { - transform: translate3d(0, 0, 0); +.security--ica .security--ica__value { + font-size: 1.75rem; + font-weight: 400; + line-height: 2.25rem; + letter-spacing: 0; + margin-bottom: 0; } -.security--nav__list__item--active::before { - background-color: var(--interactive-01, #0f62fe); - transform: translate3d(0, 0, 0); +.security--ica .security--ica__total { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + margin-bottom: 0; } -.security--nav__list__item__link { - transition-duration: 0.2s; - transition-property: background-color; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); - position: relative; - display: flex; - padding: 0.375rem 2rem; - color: var(--text-01, #f4f4f4); - text-decoration: none; - cursor: pointer; - justify-content: space-between; +.security--ica .security--ica__percentage { + font-size: 1.75rem; + font-weight: 400; + line-height: 2.25rem; + letter-spacing: 0; } -.security--nav__list__item__link:hover, .security--nav__list__item__link:focus { - background-color: var(--ui-02, #393939); +.security--ica .security--ica__percentage-mark { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.625rem; + letter-spacing: 0; } -.security--nav__list__item__link:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.security--icon-button-bar { + display: flex; + overflow: none; } -.security--nav__list__item__link--external .security--nav__list__item__link--external__icon { - margin-left: 0.25rem; - align-self: center; - fill: var(--text-01, #f4f4f4); - opacity: 0; - flex-shrink: 0; +.security--icon-button-bar--sm { + min-width: 2rem; } -.security--nav__list__item__link--external:hover > .security--nav__list__item__link--external__icon, .security--nav__list__item__link--external:focus > .security--nav__list__item__link--external__icon { - opacity: 1; +.security--icon-button-bar--sm .security--icon-button-bar__overflow-menu { + height: 2rem; + width: 2rem; } -.security--nav__list__item--expanded { - margin-bottom: 0.5rem; +.security--icon-button-bar__overflow-menu-options--sm.bx--overflow-menu-options::after { + width: 2rem; } -.security--nav__list__item--expanded > .security--nav__list--nested { - max-height: 20rem; - margin-top: 0.625rem; - opacity: 1; - transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9); +.security--icon-button-bar--md { + min-width: 2.5rem; } -.security--nav__list__item--expanded > .security--nav__list__item__link > .security--nav__list__icon { - transform: translate3d(-50%, 0, 0) rotate(360deg); +.security--icon-button-bar--md .security--icon-button-bar__overflow-menu { + height: 2.5rem; + width: 2.5rem; } -.security--nav__list__item--expanded > .security--nav__list__item__link > .security--nav__list__icon[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--nav__list__item--expanded > .security--nav__list__item__link > .security--nav__list__icon { - transform: translate3d(-50%, 0, 0) rotate(0); +.security--icon-button-bar__overflow-menu-options--md.bx--overflow-menu-options::after { + width: 2.5rem; } -.security--nav__list--nested { - transition-duration: 0.2s; - transition-property: max-height, opacity; - transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); - max-height: 0; - margin-bottom: 0; - padding-left: 0; - opacity: 0; - overflow: hidden; +.security--icon-button-bar--lg { + min-width: 3rem; } -.security--nav__list--nested[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--nav__list--nested { - padding-right: 0; - padding-left: unset; +.security--icon-button-bar--lg .security--icon-button-bar__overflow-menu { + height: 3rem; + width: 3rem; } -.security--nav__list--nested > .security--nav__list__item:last-of-type { - margin-bottom: 0.5rem; +.security--icon-button-bar__overflow-menu-options--lg.bx--overflow-menu-options::after { + width: 3rem; } -.security--ne-section { - min-height: 12.5rem; - background-position: center right; - background-repeat: no-repeat; - background-size: contain; +.security--icon-button-bar--xl { + min-width: 4rem; } -.security--ne-section .bx--grid { - margin-right: auto; - margin-left: auto; - max-width: 99rem; - padding-left: 1rem; - padding-right: 1rem; +.security--icon-button-bar--xl .security--icon-button-bar__overflow-menu { + height: 4rem; + width: 4rem; } -@media (min-width: 42rem) { - .security--ne-section .bx--grid { - padding-left: 2rem; - padding-right: 2rem; - } +.security--icon-button-bar__overflow-menu-options--xl.bx--overflow-menu-options::after { + width: 4rem; } -@media (min-width: 99rem) { - .security--ne-section .bx--grid { - padding-left: 2.5rem; - padding-right: 2.5rem; - } +.security--icon-button-bar__divider { + width: 3px; + display: flex; + justify-content: center; } -@media (min-width: 99rem) { - .security--ne-section .bx--grid--full-width { - max-width: 100%; - } +.security--icon-button-bar__divider__inner { + background-color: var(--ui-03, #393939); + width: 1px; } -.security--ne-section .bx--row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } -.security--ne-section .bx--row-padding [class*=\\"bx--col\\"], -.security--ne-section .bx--col-padding { - padding-top: 1rem; - padding-bottom: 1rem; +@keyframes rotate-end-p1 { + 100% { + transform: rotate(360deg); + } } -.security--ne-section .bx--grid--condensed [class*=\\"bx--col\\"] { - padding-top: 0.0625rem; - padding-bottom: 0.0625rem; +@keyframes rotate-end-p2 { + 100% { + transform: rotate(-360deg); + } } -.security--ne-section .bx--col { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +/* Stroke animations */ +@keyframes init-stroke { + 0% { + stroke-dashoffset: 240; + } + 100% { + stroke-dashoffset: 40; + } } -.bx--row--condensed .security--ne-section .bx--col, -.bx--grid--condensed .security--ne-section .bx--col { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +@keyframes stroke-end { + 0% { + stroke-dashoffset: 40; + } + 100% { + stroke-dashoffset: 240; + } } -.security--ne-section .bx--col-sm-0 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + animation-name: rotate; + animation-duration: 690ms; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + width: 10.5rem; + height: 10.5rem; } -.bx--row--condensed .security--ne-section .bx--col-sm-0, -.bx--grid--condensed .security--ne-section .bx--col-sm-0 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--loading *, +.bx--loading *:before, +.bx--loading *:after { + box-sizing: inherit; } -.security--ne-section .bx--col-sm-1 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading svg circle { + animation-name: init-stroke; + animation-duration: 10ms; + animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--row--condensed .security--ne-section .bx--col-sm-1, -.bx--grid--condensed .security--ne-section .bx--col-sm-1 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--loading__svg { + fill: transparent; } -.security--ne-section .bx--col-sm-2 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading__svg circle { + stroke-width: 8; + stroke-linecap: butt; + stroke-dasharray: 240; } -.bx--row--condensed .security--ne-section .bx--col-sm-2, -.bx--grid--condensed .security--ne-section .bx--col-sm-2 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--loading__stroke { + stroke: var(--interactive-04, #4589ff); + stroke-dashoffset: 40; } -.security--ne-section .bx--col-sm-3 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading--small .bx--loading__stroke { + stroke-dashoffset: 99; } -.bx--row--condensed .security--ne-section .bx--col-sm-3, -.bx--grid--condensed .security--ne-section .bx--col-sm-3 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--loading--stop { + animation: rotate-end-p1 700ms cubic-bezier(0.2, 0, 1, 0.9) forwards, rotate-end-p2 700ms cubic-bezier(0.2, 0, 1, 0.9) 700ms forwards; } -.security--ne-section .bx--col-sm-4 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading--stop svg circle { + animation-name: stroke-end; + animation-duration: 700ms; + animation-timing-function: cubic-bezier(0.2, 0, 1, 0.9); + animation-delay: 700ms; + animation-fill-mode: forwards; } -.bx--row--condensed .security--ne-section .bx--col-sm-4, -.bx--grid--condensed .security--ne-section .bx--col-sm-4 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--loading--small { + width: 2rem; + height: 2rem; } -.security--ne-section .bx--col-sm, -.security--ne-section .bx--col-sm--auto { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading--small circle { + stroke-width: 12; } -.bx--row--condensed .security--ne-section .bx--col-sm, -.bx--grid--condensed .security--ne-section .bx--col-sm, .bx--row--condensed -.security--ne-section .bx--col-sm--auto, -.bx--grid--condensed -.security--ne-section .bx--col-sm--auto { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--loading--small .bx--loading__svg { + stroke: var(--interactive-04, #4589ff); } -.security--ne-section .bx--col, -.security--ne-section .bx--col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.bx--loading__background { + stroke: var(--ui-03, #393939); + stroke-dashoffset: 0; } -.security--ne-section .bx--col--auto, -.security--ne-section .bx--col-sm--auto { - flex: 1 0 0%; - width: auto; - max-width: 100%; +.bx--loading-overlay { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(var(--ui-02, #393939), 0.6); + display: flex; + justify-content: center; + align-items: center; + transition: background-color 720ms cubic-bezier(0.4, 0.14, 0.3, 1); + z-index: 8000; } -.security--ne-section .bx--col-sm-0 { +.bx--loading-overlay--stop { display: none; } -.security--ne-section .bx--col-sm-1 { - display: block; - flex: 0 0 25%; - max-width: 25%; +@keyframes stroke { + 100% { + stroke-dashoffset: 0; + } } -.security--ne-section .bx--col-sm-2 { - display: block; - flex: 0 0 50%; - max-width: 50%; +.bx--inline-loading { + display: flex; + width: 100%; + min-height: 2rem; + align-items: center; } -.security--ne-section .bx--col-sm-3 { - display: block; - flex: 0 0 75%; - max-width: 75%; +.bx--inline-loading .bx--loading__svg circle { + stroke-width: 12; } -.security--ne-section .bx--col-sm-4 { - display: block; - flex: 0 0 100%; - max-width: 100%; +.bx--inline-loading .bx--loading__stroke { + stroke-dashoffset: 99; } -.security--ne-section .bx--offset-sm-0 { - margin-left: 0; +.bx--inline-loading__text { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + color: var(--text-02, #c6c6c6); } -.security--ne-section .bx--offset-sm-1 { - margin-left: 25%; +.bx--inline-loading__animation { + position: relative; + width: 2rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; } -.security--ne-section .bx--offset-sm-2 { - margin-left: 50%; +.bx--inline-loading__checkmark-container { + fill: var(--interactive-04, #4589ff); } -.security--ne-section .bx--offset-sm-3 { - margin-left: 75%; +.bx--inline-loading__checkmark-container.bx--inline-loading__svg { + width: 0.75rem; + position: absolute; + top: 0.75rem; } -.security--ne-section .bx--col-md-0 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--inline-loading__checkmark-container[hidden] { + display: none; } -.bx--row--condensed .security--ne-section .bx--col-md-0, -.bx--grid--condensed .security--ne-section .bx--col-md-0 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--inline-loading__checkmark { + fill: none; + stroke: var(--interactive-04, #4589ff); + transform-origin: 50% 50%; + stroke-width: 1.8; + stroke-dasharray: 12; + stroke-dashoffset: 12; + animation-name: stroke; + animation-duration: 0.25s; + animation-fill-mode: forwards; } -.security--ne-section .bx--col-md-1 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--inline-loading--error { + fill: var(--support-01, #fa4d56); + width: 1rem; + height: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-md-1, -.bx--grid--condensed .security--ne-section .bx--col-md-1 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--inline-loading--error[hidden] { + display: none; } -.security--ne-section .bx--col-md-2 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--loading--small .bx--inline-loading__svg { + stroke: var(--interactive-04, #4589ff); } -.bx--row--condensed .security--ne-section .bx--col-md-2, -.bx--grid--condensed .security--ne-section .bx--col-md-2 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +/* If IE11 Don\\"t show check animation */ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .bx--inline-loading__checkmark-container { + top: 1px; + right: 0.5rem; + } + .bx--inline-loading__checkmark { + animation: none; + stroke-dashoffset: 0; + stroke-dasharray: 0; + } } -.security--ne-section .bx--col-md-3 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + background-color: #e0e0e0; + color: #525252; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 0.5rem; + height: 1.5rem; + max-width: 100%; + min-width: 2rem; + margin: 0.25rem; + border-radius: 0.9375rem; + cursor: default; } -.bx--row--condensed .security--ne-section .bx--col-md-3, -.bx--grid--condensed .security--ne-section .bx--col-md-3 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag *, +.bx--tag *:before, +.bx--tag *:after { + box-sizing: inherit; } -.security--ne-section .bx--col-md-4 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag::-moz-focus-inner { + border: 0; } -.bx--row--condensed .security--ne-section .bx--col-md-4, -.bx--grid--condensed .security--ne-section .bx--col-md-4 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag .bx--tag__close-icon:hover { + background-color: #c6c6c6; } -.security--ne-section .bx--col-md-5 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag:not(:first-child) { + margin-left: 0; } -.bx--row--condensed .security--ne-section .bx--col-md-5, -.bx--grid--condensed .security--ne-section .bx--col-md-5 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag.bx--skeleton { + background-color: var(--ui-03, #393939); + color: var(--text-01, #f4f4f4); } -.security--ne-section .bx--col-md-6 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag.bx--skeleton .bx--tag__close-icon:hover { + background-color: var(--ui-03, #393939); } -.bx--row--condensed .security--ne-section .bx--col-md-6, -.bx--grid--condensed .security--ne-section .bx--col-md-6 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--red { + background-color: #ffd7d9; + color: #a2191f; } -.security--ne-section .bx--col-md-7 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--red .bx--tag__close-icon:hover { + background-color: #ffb3b8; } -.bx--row--condensed .security--ne-section .bx--col-md-7, -.bx--grid--condensed .security--ne-section .bx--col-md-7 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--magenta { + background-color: #ffd6e8; + color: #9f1853; } -.security--ne-section .bx--col-md-8 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--magenta .bx--tag__close-icon:hover { + background-color: #ffafd2; } -.bx--row--condensed .security--ne-section .bx--col-md-8, -.bx--grid--condensed .security--ne-section .bx--col-md-8 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--purple { + background-color: #e8daff; + color: #6929c4; } -.security--ne-section .bx--col-md, -.security--ne-section .bx--col-md--auto { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--purple .bx--tag__close-icon:hover { + background-color: #d4bbff; } -.bx--row--condensed .security--ne-section .bx--col-md, -.bx--grid--condensed .security--ne-section .bx--col-md, .bx--row--condensed -.security--ne-section .bx--col-md--auto, -.bx--grid--condensed -.security--ne-section .bx--col-md--auto { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--blue { + background-color: #d0e2ff; + color: #0043ce; } -@media (min-width: 42rem) { - .security--ne-section .bx--col, - .security--ne-section .bx--col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .security--ne-section .bx--col--auto, - .security--ne-section .bx--col-md--auto { - flex: 1 0 0%; - width: auto; - max-width: 100%; - } - .security--ne-section .bx--col-md-0 { - display: none; - } - .security--ne-section .bx--col-md-1 { - display: block; - flex: 0 0 12.5%; - max-width: 12.5%; - } - .security--ne-section .bx--col-md-2 { - display: block; - flex: 0 0 25%; - max-width: 25%; - } - .security--ne-section .bx--col-md-3 { - display: block; - flex: 0 0 37.5%; - max-width: 37.5%; - } - .security--ne-section .bx--col-md-4 { - display: block; - flex: 0 0 50%; - max-width: 50%; - } - .security--ne-section .bx--col-md-5 { - display: block; - flex: 0 0 62.5%; - max-width: 62.5%; - } - .security--ne-section .bx--col-md-6 { - display: block; - flex: 0 0 75%; - max-width: 75%; - } - .security--ne-section .bx--col-md-7 { - display: block; - flex: 0 0 87.5%; - max-width: 87.5%; - } - .security--ne-section .bx--col-md-8 { - display: block; - flex: 0 0 100%; - max-width: 100%; - } - .security--ne-section .bx--offset-md-0 { - margin-left: 0; - } - .security--ne-section .bx--offset-md-1 { - margin-left: 12.5%; - } - .security--ne-section .bx--offset-md-2 { - margin-left: 25%; - } - .security--ne-section .bx--offset-md-3 { - margin-left: 37.5%; - } - .security--ne-section .bx--offset-md-4 { - margin-left: 50%; - } - .security--ne-section .bx--offset-md-5 { - margin-left: 62.5%; - } - .security--ne-section .bx--offset-md-6 { - margin-left: 75%; - } - .security--ne-section .bx--offset-md-7 { - margin-left: 87.5%; - } +.bx--tag--blue .bx--tag__close-icon:hover { + background-color: #a6c8ff; } -.security--ne-section .bx--col-lg-0 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--cyan { + background-color: #bae6ff; + color: #00539a; } -.bx--row--condensed .security--ne-section .bx--col-lg-0, -.bx--grid--condensed .security--ne-section .bx--col-lg-0 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--cyan .bx--tag__close-icon:hover { + background-color: #82cfff; } -.security--ne-section .bx--col-lg-1 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--teal { + background-color: #9ef0f0; + color: #005d5d; } -.bx--row--condensed .security--ne-section .bx--col-lg-1, -.bx--grid--condensed .security--ne-section .bx--col-lg-1 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--teal .bx--tag__close-icon:hover { + background-color: #3ddbd9; } -.security--ne-section .bx--col-lg-2 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--green { + background-color: #a7f0ba; + color: #0e6027; } -.bx--row--condensed .security--ne-section .bx--col-lg-2, -.bx--grid--condensed .security--ne-section .bx--col-lg-2 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--green .bx--tag__close-icon:hover { + background-color: #6fdc8c; } -.security--ne-section .bx--col-lg-3 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--gray { + background-color: #e0e0e0; + color: #525252; } -.bx--row--condensed .security--ne-section .bx--col-lg-3, -.bx--grid--condensed .security--ne-section .bx--col-lg-3 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--gray .bx--tag__close-icon:hover { + background-color: #c6c6c6; } -.security--ne-section .bx--col-lg-4 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--cool-gray { + background-color: #dde1e6; + color: #4d5358; } -.bx--row--condensed .security--ne-section .bx--col-lg-4, -.bx--grid--condensed .security--ne-section .bx--col-lg-4 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--cool-gray .bx--tag__close-icon:hover { + background-color: #c1c7cd; } -.security--ne-section .bx--col-lg-5 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--warm-gray { + background-color: #e5e0df; + color: #565151; } -.bx--row--condensed .security--ne-section .bx--col-lg-5, -.bx--grid--condensed .security--ne-section .bx--col-lg-5 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--warm-gray .bx--tag__close-icon:hover { + background-color: #cac5c4; } -.security--ne-section .bx--col-lg-6 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--high-contrast { + background-color: var(--inverse-02, #f4f4f4); + color: var(--inverse-01, #161616); } -.bx--row--condensed .security--ne-section .bx--col-lg-6, -.bx--grid--condensed .security--ne-section .bx--col-lg-6 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--high-contrast .bx--tag__close-icon:hover { + background-color: var(--inverse-hover-ui, #e5e5e5); } -.security--ne-section .bx--col-lg-7 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--disabled, +.bx--tag--filter.bx--tag--disabled { + background-color: var(--disabled-01, #262626); + color: var(--disabled-02, #525252); } -.bx--row--condensed .security--ne-section .bx--col-lg-7, -.bx--grid--condensed .security--ne-section .bx--col-lg-7 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--disabled .bx--tag__close-icon:hover, +.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover { + background-color: var(--disabled-01, #262626); } -.security--ne-section .bx--col-lg-8 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--disabled:hover, +.bx--tag--filter.bx--tag--disabled:hover { + cursor: not-allowed; } -.bx--row--condensed .security--ne-section .bx--col-lg-8, -.bx--grid--condensed .security--ne-section .bx--col-lg-8 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag__label { + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.security--ne-section .bx--col-lg-9 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--filter { + cursor: pointer; + padding-right: 0.125rem; } -.bx--row--condensed .security--ne-section .bx--col-lg-9, -.bx--grid--condensed .security--ne-section .bx--col-lg-9 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--filter:focus, .bx--tag--filter:hover { + outline: none; } -.security--ne-section .bx--col-lg-10 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag__close-icon { + flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + margin: 0 0 0 0.25rem; + padding: 0.125rem; + border: 0; + background-color: transparent; + border-radius: 50%; + color: currentColor; + cursor: pointer; } -.bx--row--condensed .security--ne-section .bx--col-lg-10, -.bx--grid--condensed .security--ne-section .bx--col-lg-10 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag__close-icon svg { + fill: currentColor; } -.security--ne-section .bx--col-lg-11 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--disabled .bx--tag__close-icon { + cursor: not-allowed; } -.bx--row--condensed .security--ne-section .bx--col-lg-11, -.bx--grid--condensed .security--ne-section .bx--col-lg-11 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag__close-icon:focus { + outline: none; + box-shadow: inset 0 0 0 2px var(--focus, #ffffff); + border-radius: 50%; } -.security--ne-section .bx--col-lg-12 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover { + background-color: transparent; } -.bx--row--condensed .security--ne-section .bx--col-lg-12, -.bx--grid--condensed .security--ne-section .bx--col-lg-12 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag--filter.bx--tag--disabled svg { + fill: var(--disabled-02, #525252); } -.security--ne-section .bx--col-lg-13 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag.bx--skeleton { + position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); + width: 3.75rem; + overflow: hidden; } -.bx--row--condensed .security--ne-section .bx--col-lg-13, -.bx--grid--condensed .security--ne-section .bx--col-lg-13 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.bx--tag.bx--skeleton:hover, .bx--tag.bx--skeleton:focus, .bx--tag.bx--skeleton:active { + border: none; + outline: none; + cursor: default; } -.security--ne-section .bx--col-lg-14 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.bx--tag.bx--skeleton:before { + content: \\"\\"; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.bx--row--condensed .security--ne-section .bx--col-lg-14, -.bx--grid--condensed .security--ne-section .bx--col-lg-14 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +@media (prefers-reduced-motion: reduce) { + .bx--tag.bx--skeleton:before { + animation: none; + } } -.security--ne-section .bx--col-lg-15 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--tag--interactive--default { + color: var(--text-01, #f4f4f4); + background-color: var(--active-ui, #525252); } -.bx--row--condensed .security--ne-section .bx--col-lg-15, -.bx--grid--condensed .security--ne-section .bx--col-lg-15 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--tag--interactive--removable { + padding-right: 0.125rem; } -.security--ne-section .bx--col-lg-16 { +.security--tag--interactive__button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; width: 100%; - padding-right: 1rem; - padding-left: 1rem; + position: relative; + margin-left: 0.5rem; + height: 1.25rem; + width: 1.25rem; + color: currentColor; } -.bx--row--condensed .security--ne-section .bx--col-lg-16, -.bx--grid--condensed .security--ne-section .bx--col-lg-16 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--tag--interactive__button *, +.security--tag--interactive__button *:before, +.security--tag--interactive__button *:after { + box-sizing: inherit; } -.security--ne-section .bx--col-lg, -.security--ne-section .bx--col-lg--auto { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--tag--interactive__button::-moz-focus-inner { + border: 0; } -.bx--row--condensed .security--ne-section .bx--col-lg, -.bx--grid--condensed .security--ne-section .bx--col-lg, .bx--row--condensed -.security--ne-section .bx--col-lg--auto, -.bx--grid--condensed -.security--ne-section .bx--col-lg--auto { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--tag--interactive__button:focus, .security--tag--interactive__button:hover { + outline: none; } -@media (min-width: 66rem) { - .security--ne-section .bx--col, - .security--ne-section .bx--col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .security--ne-section .bx--col--auto, - .security--ne-section .bx--col-lg--auto { - flex: 1 0 0%; - width: auto; - max-width: 100%; - } - .security--ne-section .bx--col-lg-0 { - display: none; - } - .security--ne-section .bx--col-lg-1 { - display: block; - flex: 0 0 6.25%; - max-width: 6.25%; - } - .security--ne-section .bx--col-lg-2 { - display: block; - flex: 0 0 12.5%; - max-width: 12.5%; - } - .security--ne-section .bx--col-lg-3 { - display: block; - flex: 0 0 18.75%; - max-width: 18.75%; - } - .security--ne-section .bx--col-lg-4 { - display: block; - flex: 0 0 25%; - max-width: 25%; - } - .security--ne-section .bx--col-lg-5 { - display: block; - flex: 0 0 31.25%; - max-width: 31.25%; - } - .security--ne-section .bx--col-lg-6 { - display: block; - flex: 0 0 37.5%; - max-width: 37.5%; - } - .security--ne-section .bx--col-lg-7 { - display: block; - flex: 0 0 43.75%; - max-width: 43.75%; - } - .security--ne-section .bx--col-lg-8 { - display: block; - flex: 0 0 50%; - max-width: 50%; - } - .security--ne-section .bx--col-lg-9 { - display: block; - flex: 0 0 56.25%; - max-width: 56.25%; - } - .security--ne-section .bx--col-lg-10 { - display: block; - flex: 0 0 62.5%; - max-width: 62.5%; - } - .security--ne-section .bx--col-lg-11 { - display: block; - flex: 0 0 68.75%; - max-width: 68.75%; - } - .security--ne-section .bx--col-lg-12 { - display: block; - flex: 0 0 75%; - max-width: 75%; - } - .security--ne-section .bx--col-lg-13 { - display: block; - flex: 0 0 81.25%; - max-width: 81.25%; - } - .security--ne-section .bx--col-lg-14 { - display: block; - flex: 0 0 87.5%; - max-width: 87.5%; - } - .security--ne-section .bx--col-lg-15 { - display: block; - flex: 0 0 93.75%; - max-width: 93.75%; - } - .security--ne-section .bx--col-lg-16 { - display: block; - flex: 0 0 100%; - max-width: 100%; - } - .security--ne-section .bx--offset-lg-0 { - margin-left: 0; - } - .security--ne-section .bx--offset-lg-1 { - margin-left: 6.25%; - } - .security--ne-section .bx--offset-lg-2 { - margin-left: 12.5%; - } - .security--ne-section .bx--offset-lg-3 { - margin-left: 18.75%; - } - .security--ne-section .bx--offset-lg-4 { - margin-left: 25%; - } - .security--ne-section .bx--offset-lg-5 { - margin-left: 31.25%; - } - .security--ne-section .bx--offset-lg-6 { - margin-left: 37.5%; - } - .security--ne-section .bx--offset-lg-7 { - margin-left: 43.75%; - } - .security--ne-section .bx--offset-lg-8 { - margin-left: 50%; - } - .security--ne-section .bx--offset-lg-9 { - margin-left: 56.25%; - } - .security--ne-section .bx--offset-lg-10 { - margin-left: 62.5%; - } - .security--ne-section .bx--offset-lg-11 { - margin-left: 68.75%; - } - .security--ne-section .bx--offset-lg-12 { - margin-left: 75%; - } - .security--ne-section .bx--offset-lg-13 { - margin-left: 81.25%; - } - .security--ne-section .bx--offset-lg-14 { - margin-left: 87.5%; - } - .security--ne-section .bx--offset-lg-15 { - margin-left: 93.75%; - } +.security--tag--interactive__button:focus > .security--tag--interactive__button__icon, .security--tag--interactive__button:hover > .security--tag--interactive__button__icon { + border-color: currentColor; } -.security--ne-section .bx--col-xlg-0 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--tag--interactive__button__icon { + transition-duration: 0.1s; + transition-property: border-color; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + position: absolute; + top: 50%; + left: 50%; + border: 0.125rem solid transparent; + border-radius: 50%; + fill: currentColor; + transform: translate(-50%, -50%); } -.bx--row--condensed .security--ne-section .bx--col-xlg-0, -.bx--grid--condensed .security--ne-section .bx--col-xlg-0 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav { + position: relative; } -.security--ne-section .bx--col-xlg-1 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav:not(:first-of-type) { + padding-top: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-xlg-1, -.bx--grid--condensed .security--ne-section .bx--col-xlg-1 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav:not(:last-of-type) { + padding-bottom: 1rem; } -.security--ne-section .bx--col-xlg-2 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav:last-of-type { + padding-bottom: 2rem; } -.bx--row--condensed .security--ne-section .bx--col-xlg-2, -.bx--grid--condensed .security--ne-section .bx--col-xlg-2 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav + .security--nav > .security--nav__heading { + padding-top: 0.25rem; } -.security--ne-section .bx--col-xlg-3 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav::before { + display: inline-block; + position: absolute; + left: 2rem; + right: 2rem; + bottom: 0; + width: auto; + border-bottom: 0.0625rem solid var(--ui-02, #393939); + content: \\"\\"; } -.bx--row--condensed .security--ne-section .bx--col-xlg-3, -.bx--grid--condensed .security--ne-section .bx--col-xlg-3 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav:last-of-type::before { + border-width: 0; } -.security--ne-section .bx--col-xlg-4 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__wrapper { + padding-left: unset; + margin-top: unset; + margin-bottom: unset; + list-style: none; } -.bx--row--condensed .security--ne-section .bx--col-xlg-4, -.bx--grid--condensed .security--ne-section .bx--col-xlg-4 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__wrapper[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--nav__wrapper { + padding-right: unset; } -.security--ne-section .bx--col-xlg-5 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__heading { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + padding: 0.75rem 2rem; + margin-top: unset; + margin-bottom: unset; + color: var(--text-02, #c6c6c6); + font-weight: 400; } -.bx--row--condensed .security--ne-section .bx--col-xlg-5, -.bx--grid--condensed .security--ne-section .bx--col-xlg-5 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + display: flex; + flex-direction: column; + list-style: none; } -.security--ne-section .bx--col-xlg-6 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list, .security--nav__list__item { + margin-bottom: 0.125rem; } -.bx--row--condensed .security--ne-section .bx--col-xlg-6, -.bx--grid--condensed .security--ne-section .bx--col-xlg-6 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list:focus { + background-color: var(--ui-02, #393939); + outline-width: 0; } -.security--ne-section .bx--col-xlg-7 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list:focus > .security--nav__list__item__link { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--row--condensed .security--ne-section .bx--col-xlg-7, -.bx--grid--condensed .security--ne-section .bx--col-xlg-7 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__icon { + transition-duration: 0.2s; + transition-property: transform; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + position: absolute; + top: 25%; + left: 1rem; + fill: var(--text-01, #f4f4f4); + transform: translate3d(-50%, 0, 0) rotate(270deg); } -.security--ne-section .bx--col-xlg-8 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__icon[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--nav__list__icon { + right: 0.25rem; + transform: translate3d(-50%, 0, 0) rotate(90deg); } -.bx--row--condensed .security--ne-section .bx--col-xlg-8, -.bx--grid--condensed .security--ne-section .bx--col-xlg-8 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + position: relative; } -.security--ne-section .bx--col-xlg-9 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item__content { + display: flex; } -.bx--row--condensed .security--ne-section .bx--col-xlg-9, -.bx--grid--condensed .security--ne-section .bx--col-xlg-9 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item::before { + transition-duration: 0.2s; + transition-property: transform; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: 0.25rem; + height: 100%; + background-color: transparent; + content: \\"\\"; + transform: translate3d(-100%, 0, 0); + z-index: 10000; } -.security--ne-section .bx--col-xlg-10 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item[dir=\\"rtl\\"]::before, +[dir=\\"rtl\\"] .security--nav__list__item::before { + right: 0; + transform: translate3d(100%, 0, 0); } -.bx--row--condensed .security--ne-section .bx--col-xlg-10, -.bx--grid--condensed .security--ne-section .bx--col-xlg-10 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item--disabled { + pointer-events: none; } -.security--ne-section .bx--col-xlg-11 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item--disabled > .security--nav__list__item__link { + color: var(--disabled-03, #8d8d8d); } -.bx--row--condensed .security--ne-section .bx--col-xlg-11, -.bx--grid--condensed .security--ne-section .bx--col-xlg-11 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item--active { + font-weight: 600; } -.security--ne-section .bx--col-xlg-12 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item--active[dir=\\"rtl\\"]::before, +[dir=\\"rtl\\"] .security--nav__list__item--active::before { + transform: translate3d(0, 0, 0); } -.bx--row--condensed .security--ne-section .bx--col-xlg-12, -.bx--grid--condensed .security--ne-section .bx--col-xlg-12 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item--active::before { + background-color: var(--interactive-01, #0f62fe); + transform: translate3d(0, 0, 0); } -.security--ne-section .bx--col-xlg-13 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item__link { + transition-duration: 0.2s; + transition-property: background-color; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + position: relative; + display: flex; + padding: 0.375rem 2rem; + color: var(--text-01, #f4f4f4); + text-decoration: none; + cursor: pointer; + justify-content: space-between; } -.bx--row--condensed .security--ne-section .bx--col-xlg-13, -.bx--grid--condensed .security--ne-section .bx--col-xlg-13 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item__link:hover, .security--nav__list__item__link:focus { + background-color: var(--ui-02, #393939); } -.security--ne-section .bx--col-xlg-14 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item__link:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--row--condensed .security--ne-section .bx--col-xlg-14, -.bx--grid--condensed .security--ne-section .bx--col-xlg-14 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item__link--external .security--nav__list__item__link--external__icon { + margin-left: 0.25rem; + align-self: center; + fill: var(--text-01, #f4f4f4); + opacity: 0; + flex-shrink: 0; } -.security--ne-section .bx--col-xlg-15 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item__link--external:hover > .security--nav__list__item__link--external__icon, .security--nav__list__item__link--external:focus > .security--nav__list__item__link--external__icon { + opacity: 1; } -.bx--row--condensed .security--ne-section .bx--col-xlg-15, -.bx--grid--condensed .security--ne-section .bx--col-xlg-15 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item--expanded { + margin-bottom: 0.5rem; } -.security--ne-section .bx--col-xlg-16 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item--expanded > .security--nav__list--nested { + max-height: 20rem; + margin-top: 0.625rem; + opacity: 1; + transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9); } -.bx--row--condensed .security--ne-section .bx--col-xlg-16, -.bx--grid--condensed .security--ne-section .bx--col-xlg-16 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list__item--expanded > .security--nav__list__item__link > .security--nav__list__icon { + transform: translate3d(-50%, 0, 0) rotate(360deg); } -.security--ne-section .bx--col-xlg, -.security--ne-section .bx--col-xlg--auto { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list__item--expanded > .security--nav__list__item__link > .security--nav__list__icon[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--nav__list__item--expanded > .security--nav__list__item__link > .security--nav__list__icon { + transform: translate3d(-50%, 0, 0) rotate(0); } -.bx--row--condensed .security--ne-section .bx--col-xlg, -.bx--grid--condensed .security--ne-section .bx--col-xlg, .bx--row--condensed -.security--ne-section .bx--col-xlg--auto, -.bx--grid--condensed -.security--ne-section .bx--col-xlg--auto { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--nav__list--nested { + transition-duration: 0.2s; + transition-property: max-height, opacity; + transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9); + max-height: 0; + margin-bottom: 0; + padding-left: 0; + opacity: 0; + overflow: hidden; } -@media (min-width: 82rem) { - .security--ne-section .bx--col, - .security--ne-section .bx--col-xlg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .security--ne-section .bx--col--auto, - .security--ne-section .bx--col-xlg--auto { - flex: 1 0 0%; - width: auto; - max-width: 100%; - } - .security--ne-section .bx--col-xlg-0 { - display: none; - } - .security--ne-section .bx--col-xlg-1 { - display: block; - flex: 0 0 6.25%; - max-width: 6.25%; - } - .security--ne-section .bx--col-xlg-2 { - display: block; - flex: 0 0 12.5%; - max-width: 12.5%; - } - .security--ne-section .bx--col-xlg-3 { - display: block; - flex: 0 0 18.75%; - max-width: 18.75%; - } - .security--ne-section .bx--col-xlg-4 { - display: block; - flex: 0 0 25%; - max-width: 25%; - } - .security--ne-section .bx--col-xlg-5 { - display: block; - flex: 0 0 31.25%; - max-width: 31.25%; - } - .security--ne-section .bx--col-xlg-6 { - display: block; - flex: 0 0 37.5%; - max-width: 37.5%; - } - .security--ne-section .bx--col-xlg-7 { - display: block; - flex: 0 0 43.75%; - max-width: 43.75%; - } - .security--ne-section .bx--col-xlg-8 { - display: block; - flex: 0 0 50%; - max-width: 50%; - } - .security--ne-section .bx--col-xlg-9 { - display: block; - flex: 0 0 56.25%; - max-width: 56.25%; - } - .security--ne-section .bx--col-xlg-10 { - display: block; - flex: 0 0 62.5%; - max-width: 62.5%; - } - .security--ne-section .bx--col-xlg-11 { - display: block; - flex: 0 0 68.75%; - max-width: 68.75%; - } - .security--ne-section .bx--col-xlg-12 { - display: block; - flex: 0 0 75%; - max-width: 75%; - } - .security--ne-section .bx--col-xlg-13 { - display: block; - flex: 0 0 81.25%; - max-width: 81.25%; - } - .security--ne-section .bx--col-xlg-14 { - display: block; - flex: 0 0 87.5%; - max-width: 87.5%; - } - .security--ne-section .bx--col-xlg-15 { - display: block; - flex: 0 0 93.75%; - max-width: 93.75%; - } - .security--ne-section .bx--col-xlg-16 { - display: block; - flex: 0 0 100%; - max-width: 100%; - } - .security--ne-section .bx--offset-xlg-0 { - margin-left: 0; - } - .security--ne-section .bx--offset-xlg-1 { - margin-left: 6.25%; - } - .security--ne-section .bx--offset-xlg-2 { - margin-left: 12.5%; - } - .security--ne-section .bx--offset-xlg-3 { - margin-left: 18.75%; - } - .security--ne-section .bx--offset-xlg-4 { - margin-left: 25%; - } - .security--ne-section .bx--offset-xlg-5 { - margin-left: 31.25%; - } - .security--ne-section .bx--offset-xlg-6 { - margin-left: 37.5%; - } - .security--ne-section .bx--offset-xlg-7 { - margin-left: 43.75%; - } - .security--ne-section .bx--offset-xlg-8 { - margin-left: 50%; - } - .security--ne-section .bx--offset-xlg-9 { - margin-left: 56.25%; - } - .security--ne-section .bx--offset-xlg-10 { - margin-left: 62.5%; - } - .security--ne-section .bx--offset-xlg-11 { - margin-left: 68.75%; - } - .security--ne-section .bx--offset-xlg-12 { - margin-left: 75%; - } - .security--ne-section .bx--offset-xlg-13 { - margin-left: 81.25%; - } - .security--ne-section .bx--offset-xlg-14 { - margin-left: 87.5%; - } - .security--ne-section .bx--offset-xlg-15 { - margin-left: 93.75%; - } +.security--nav__list--nested[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--nav__list--nested { + padding-right: 0; + padding-left: unset; } -.security--ne-section .bx--col-max-0 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--nav__list--nested > .security--nav__list__item:last-of-type { + margin-bottom: 0.5rem; } -.bx--row--condensed .security--ne-section .bx--col-max-0, -.bx--grid--condensed .security--ne-section .bx--col-max-0 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--ne-section { + min-height: 12.5rem; + background-position: center right; + background-repeat: no-repeat; + background-size: contain; } -.security--ne-section .bx--col-max-1 { - width: 100%; - padding-right: 1rem; +.security--ne-section .bx--grid { + margin-right: auto; + margin-left: auto; + max-width: 99rem; padding-left: 1rem; + padding-right: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-1, -.bx--grid--condensed .security--ne-section .bx--col-max-1 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; -} - -.security--ne-section .bx--col-max-2 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +@media (min-width: 42rem) { + .security--ne-section .bx--grid { + padding-left: 2rem; + padding-right: 2rem; + } } -.bx--row--condensed .security--ne-section .bx--col-max-2, -.bx--grid--condensed .security--ne-section .bx--col-max-2 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +@media (min-width: 99rem) { + .security--ne-section .bx--grid { + padding-left: 2.5rem; + padding-right: 2.5rem; + } } -.security--ne-section .bx--col-max-3 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +@media (min-width: 99rem) { + .security--ne-section .bx--grid--full-width { + max-width: 100%; + } } -.bx--row--condensed .security--ne-section .bx--col-max-3, -.bx--grid--condensed .security--ne-section .bx--col-max-3 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--ne-section .bx--row { + display: flex; + flex-wrap: wrap; + margin-right: -1rem; + margin-left: -1rem; } -.security--ne-section .bx--col-max-4 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--ne-section .bx--row-padding [class*=\\"bx--col\\"], +.security--ne-section .bx--col-padding { + padding-top: 1rem; + padding-bottom: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-4, -.bx--grid--condensed .security--ne-section .bx--col-max-4 { - padding-right: 0.0625rem; - padding-left: 0.0625rem; +.security--ne-section .bx--grid--condensed [class*=\\"bx--col\\"] { + padding-top: 0.0625rem; + padding-bottom: 0.0625rem; } -.security--ne-section .bx--col-max-5 { +.security--ne-section .bx--col { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-5, -.bx--grid--condensed .security--ne-section .bx--col-max-5 { +.bx--row--condensed .security--ne-section .bx--col, +.bx--grid--condensed .security--ne-section .bx--col { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-6 { +.security--ne-section .bx--col-sm-0 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-6, -.bx--grid--condensed .security--ne-section .bx--col-max-6 { +.bx--row--condensed .security--ne-section .bx--col-sm-0, +.bx--grid--condensed .security--ne-section .bx--col-sm-0 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-7 { +.security--ne-section .bx--col-sm-1 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-7, -.bx--grid--condensed .security--ne-section .bx--col-max-7 { +.bx--row--condensed .security--ne-section .bx--col-sm-1, +.bx--grid--condensed .security--ne-section .bx--col-sm-1 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-8 { +.security--ne-section .bx--col-sm-2 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-8, -.bx--grid--condensed .security--ne-section .bx--col-max-8 { +.bx--row--condensed .security--ne-section .bx--col-sm-2, +.bx--grid--condensed .security--ne-section .bx--col-sm-2 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-9 { +.security--ne-section .bx--col-sm-3 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-9, -.bx--grid--condensed .security--ne-section .bx--col-max-9 { +.bx--row--condensed .security--ne-section .bx--col-sm-3, +.bx--grid--condensed .security--ne-section .bx--col-sm-3 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-10 { +.security--ne-section .bx--col-sm-4 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-10, -.bx--grid--condensed .security--ne-section .bx--col-max-10 { +.bx--row--condensed .security--ne-section .bx--col-sm-4, +.bx--grid--condensed .security--ne-section .bx--col-sm-4 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-11 { +.security--ne-section .bx--col-sm, +.security--ne-section .bx--col-sm--auto { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-11, -.bx--grid--condensed .security--ne-section .bx--col-max-11 { +.bx--row--condensed .security--ne-section .bx--col-sm, +.bx--grid--condensed .security--ne-section .bx--col-sm, .bx--row--condensed +.security--ne-section .bx--col-sm--auto, +.bx--grid--condensed +.security--ne-section .bx--col-sm--auto { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-12 { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.security--ne-section .bx--col, +.security--ne-section .bx--col-sm { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; } -.bx--row--condensed .security--ne-section .bx--col-max-12, -.bx--grid--condensed .security--ne-section .bx--col-max-12 { +.security--ne-section .bx--col--auto, +.security--ne-section .bx--col-sm--auto { + flex: 1 0 0%; + width: auto; + max-width: 100%; +} + +.security--ne-section .bx--col-sm-0 { + display: none; +} + +.security--ne-section .bx--col-sm-1 { + display: block; + flex: 0 0 25%; + max-width: 25%; +} + +.security--ne-section .bx--col-sm-2 { + display: block; + flex: 0 0 50%; + max-width: 50%; +} + +.security--ne-section .bx--col-sm-3 { + display: block; + flex: 0 0 75%; + max-width: 75%; +} + +.security--ne-section .bx--col-sm-4 { + display: block; + flex: 0 0 100%; + max-width: 100%; +} + +.security--ne-section .bx--offset-sm-0 { + margin-left: 0; +} + +.security--ne-section .bx--offset-sm-1 { + margin-left: 25%; +} + +.security--ne-section .bx--offset-sm-2 { + margin-left: 50%; +} + +.security--ne-section .bx--offset-sm-3 { + margin-left: 75%; +} + +.security--ne-section .bx--col-md-0 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; +} + +.bx--row--condensed .security--ne-section .bx--col-md-0, +.bx--grid--condensed .security--ne-section .bx--col-md-0 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-13 { +.security--ne-section .bx--col-md-1 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-13, -.bx--grid--condensed .security--ne-section .bx--col-max-13 { +.bx--row--condensed .security--ne-section .bx--col-md-1, +.bx--grid--condensed .security--ne-section .bx--col-md-1 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-14 { +.security--ne-section .bx--col-md-2 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-14, -.bx--grid--condensed .security--ne-section .bx--col-max-14 { +.bx--row--condensed .security--ne-section .bx--col-md-2, +.bx--grid--condensed .security--ne-section .bx--col-md-2 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-15 { +.security--ne-section .bx--col-md-3 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-15, -.bx--grid--condensed .security--ne-section .bx--col-max-15 { +.bx--row--condensed .security--ne-section .bx--col-md-3, +.bx--grid--condensed .security--ne-section .bx--col-md-3 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max-16 { +.security--ne-section .bx--col-md-4 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max-16, -.bx--grid--condensed .security--ne-section .bx--col-max-16 { +.bx--row--condensed .security--ne-section .bx--col-md-4, +.bx--grid--condensed .security--ne-section .bx--col-md-4 { padding-right: 0.0625rem; padding-left: 0.0625rem; } -.security--ne-section .bx--col-max, -.security--ne-section .bx--col-max--auto { +.security--ne-section .bx--col-md-5 { width: 100%; padding-right: 1rem; padding-left: 1rem; } -.bx--row--condensed .security--ne-section .bx--col-max, -.bx--grid--condensed .security--ne-section .bx--col-max, .bx--row--condensed -.security--ne-section .bx--col-max--auto, +.bx--row--condensed .security--ne-section .bx--col-md-5, +.bx--grid--condensed .security--ne-section .bx--col-md-5 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; +} + +.security--ne-section .bx--col-md-6 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; +} + +.bx--row--condensed .security--ne-section .bx--col-md-6, +.bx--grid--condensed .security--ne-section .bx--col-md-6 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; +} + +.security--ne-section .bx--col-md-7 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; +} + +.bx--row--condensed .security--ne-section .bx--col-md-7, +.bx--grid--condensed .security--ne-section .bx--col-md-7 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; +} + +.security--ne-section .bx--col-md-8 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; +} + +.bx--row--condensed .security--ne-section .bx--col-md-8, +.bx--grid--condensed .security--ne-section .bx--col-md-8 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; +} + +.security--ne-section .bx--col-md, +.security--ne-section .bx--col-md--auto { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; +} + +.bx--row--condensed .security--ne-section .bx--col-md, +.bx--grid--condensed .security--ne-section .bx--col-md, .bx--row--condensed +.security--ne-section .bx--col-md--auto, .bx--grid--condensed -.security--ne-section .bx--col-max--auto { +.security--ne-section .bx--col-md--auto { padding-right: 0.0625rem; padding-left: 0.0625rem; } -@media (min-width: 99rem) { +@media (min-width: 42rem) { .security--ne-section .bx--col, - .security--ne-section .bx--col-max { + .security--ne-section .bx--col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .security--ne-section .bx--col--auto, - .security--ne-section .bx--col-max--auto { + .security--ne-section .bx--col-md--auto { flex: 1 0 0%; width: auto; max-width: 100%; } - .security--ne-section .bx--col-max-0 { + .security--ne-section .bx--col-md-0 { display: none; } - .security--ne-section .bx--col-max-1 { - display: block; - flex: 0 0 6.25%; - max-width: 6.25%; - } - .security--ne-section .bx--col-max-2 { + .security--ne-section .bx--col-md-1 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } - .security--ne-section .bx--col-max-3 { - display: block; - flex: 0 0 18.75%; - max-width: 18.75%; - } - .security--ne-section .bx--col-max-4 { + .security--ne-section .bx--col-md-2 { display: block; flex: 0 0 25%; max-width: 25%; } - .security--ne-section .bx--col-max-5 { - display: block; - flex: 0 0 31.25%; - max-width: 31.25%; - } - .security--ne-section .bx--col-max-6 { + .security--ne-section .bx--col-md-3 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } - .security--ne-section .bx--col-max-7 { - display: block; - flex: 0 0 43.75%; - max-width: 43.75%; - } - .security--ne-section .bx--col-max-8 { + .security--ne-section .bx--col-md-4 { display: block; flex: 0 0 50%; max-width: 50%; } - .security--ne-section .bx--col-max-9 { - display: block; - flex: 0 0 56.25%; - max-width: 56.25%; - } - .security--ne-section .bx--col-max-10 { + .security--ne-section .bx--col-md-5 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } - .security--ne-section .bx--col-max-11 { - display: block; - flex: 0 0 68.75%; - max-width: 68.75%; - } - .security--ne-section .bx--col-max-12 { + .security--ne-section .bx--col-md-6 { display: block; flex: 0 0 75%; max-width: 75%; } - .security--ne-section .bx--col-max-13 { - display: block; - flex: 0 0 81.25%; - max-width: 81.25%; - } - .security--ne-section .bx--col-max-14 { + .security--ne-section .bx--col-md-7 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } - .security--ne-section .bx--col-max-15 { - display: block; - flex: 0 0 93.75%; - max-width: 93.75%; - } - .security--ne-section .bx--col-max-16 { + .security--ne-section .bx--col-md-8 { display: block; flex: 0 0 100%; max-width: 100%; } - .security--ne-section .bx--offset-max-0 { + .security--ne-section .bx--offset-md-0 { margin-left: 0; } - .security--ne-section .bx--offset-max-1 { - margin-left: 6.25%; - } - .security--ne-section .bx--offset-max-2 { + .security--ne-section .bx--offset-md-1 { margin-left: 12.5%; } - .security--ne-section .bx--offset-max-3 { - margin-left: 18.75%; - } - .security--ne-section .bx--offset-max-4 { + .security--ne-section .bx--offset-md-2 { margin-left: 25%; } - .security--ne-section .bx--offset-max-5 { - margin-left: 31.25%; - } - .security--ne-section .bx--offset-max-6 { + .security--ne-section .bx--offset-md-3 { margin-left: 37.5%; } - .security--ne-section .bx--offset-max-7 { - margin-left: 43.75%; - } - .security--ne-section .bx--offset-max-8 { + .security--ne-section .bx--offset-md-4 { margin-left: 50%; } - .security--ne-section .bx--offset-max-9 { - margin-left: 56.25%; - } - .security--ne-section .bx--offset-max-10 { + .security--ne-section .bx--offset-md-5 { margin-left: 62.5%; } - .security--ne-section .bx--offset-max-11 { - margin-left: 68.75%; - } - .security--ne-section .bx--offset-max-12 { + .security--ne-section .bx--offset-md-6 { margin-left: 75%; } - .security--ne-section .bx--offset-max-13 { - margin-left: 81.25%; - } - .security--ne-section .bx--offset-max-14 { + .security--ne-section .bx--offset-md-7 { margin-left: 87.5%; } - .security--ne-section .bx--offset-max-15 { - margin-left: 93.75%; - } -} - -.security--ne-section .bx--no-gutter, -.security--ne-section .bx--row.bx--no-gutter [class*=\\"bx--col\\"] { - padding-left: 0; - padding-right: 0; } -.security--ne-section .bx--no-gutter--left, -.security--ne-section .bx--row.bx--no-gutter--left [class*=\\"bx--col\\"] { - padding-left: 0; +.security--ne-section .bx--col-lg-0 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section .bx--no-gutter--right, -.security--ne-section .bx--row.bx--no-gutter--right [class*=\\"bx--col\\"] { - padding-right: 0; +.bx--row--condensed .security--ne-section .bx--col-lg-0, +.bx--grid--condensed .security--ne-section .bx--col-lg-0 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--hang--left { +.security--ne-section .bx--col-lg-1 { + width: 100%; + padding-right: 1rem; padding-left: 1rem; } -.security--ne-section .bx--hang--right { - padding-right: 1rem; +.bx--row--condensed .security--ne-section .bx--col-lg-1, +.bx--grid--condensed .security--ne-section .bx--col-lg-1 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--aspect-ratio { - position: relative; +.security--ne-section .bx--col-lg-2 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section .bx--aspect-ratio::before { - content: \\"\\"; - width: 1px; - margin-left: -1px; - float: left; - height: 0; +.bx--row--condensed .security--ne-section .bx--col-lg-2, +.bx--grid--condensed .security--ne-section .bx--col-lg-2 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--aspect-ratio::after { - content: \\"\\"; - display: table; - clear: both; +.security--ne-section .bx--col-lg-3 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section .bx--aspect-ratio--16x9::before { - padding-top: 56.25%; +.bx--row--condensed .security--ne-section .bx--col-lg-3, +.bx--grid--condensed .security--ne-section .bx--col-lg-3 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--aspect-ratio--9x16::before { - padding-top: 177.77778%; +.security--ne-section .bx--col-lg-4 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section .bx--aspect-ratio--2x1::before { - padding-top: 50%; +.bx--row--condensed .security--ne-section .bx--col-lg-4, +.bx--grid--condensed .security--ne-section .bx--col-lg-4 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--aspect-ratio--1x2::before { - padding-top: 200%; +.security--ne-section .bx--col-lg-5 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section .bx--aspect-ratio--4x3::before { - padding-top: 75%; +.bx--row--condensed .security--ne-section .bx--col-lg-5, +.bx--grid--condensed .security--ne-section .bx--col-lg-5 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--aspect-ratio--3x4::before { - padding-top: 133.33333%; +.security--ne-section .bx--col-lg-6 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section .bx--aspect-ratio--1x1::before { - padding-top: 100%; +.bx--row--condensed .security--ne-section .bx--col-lg-6, +.bx--grid--condensed .security--ne-section .bx--col-lg-6 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section .bx--aspect-ratio--object { - position: absolute; - top: 0; - left: 0; +.security--ne-section .bx--col-lg-7 { width: 100%; - height: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section__content-wrapper { - padding: 6rem 2rem 3rem 2rem; +.bx--row--condensed .security--ne-section .bx--col-lg-7, +.bx--grid--condensed .security--ne-section .bx--col-lg-7 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section__title, .security--ne-section__sub-title, .security--ne-section__description { - color: var(--ui-05, #f4f4f4); - font-weight: normal; - line-height: initial; +.security--ne-section .bx--col-lg-8 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section__title { - font-size: 1.5rem; - margin: 0 0 3.25rem 0; +.bx--row--condensed .security--ne-section .bx--col-lg-8, +.bx--grid--condensed .security--ne-section .bx--col-lg-8 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section__sub-title { - font-size: 0.75rem; - margin: 0 0 0.5rem 0; +.security--ne-section .bx--col-lg-9 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section__description { - font-size: 1.125rem; - margin: 0 0 2rem 0; +.bx--row--condensed .security--ne-section .bx--col-lg-9, +.bx--grid--condensed .security--ne-section .bx--col-lg-9 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--ne-section__link { - display: inline-flex; - margin: 0 0 0.25rem 0; - padding: 0; +.security--ne-section .bx--col-lg-10 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--ne-section__link__icon { - height: 1.25rem; - width: auto; - align-self: center; - padding: 0 0.5rem 0 0; +.bx--row--condensed .security--ne-section .bx--col-lg-10, +.bx--grid--condensed .security--ne-section .bx--col-lg-10 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: flex; - flex-wrap: wrap; - position: relative; - height: auto; - min-height: 3rem; - min-width: 18rem; - max-width: 18rem; +.security--ne-section .bx--col-lg-11 { width: 100%; - color: var(--inverse-01, #161616); - margin-top: 1rem; - margin-bottom: 1rem; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification *, -.bx--inline-notification *:before, -.bx--inline-notification *:after { - box-sizing: inherit; +.bx--row--condensed .security--ne-section .bx--col-lg-11, +.bx--grid--condensed .security--ne-section .bx--col-lg-11 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -@media (min-width: 42rem) { - .bx--inline-notification { - max-width: 38rem; - flex-wrap: nowrap; - } +.security--ne-section .bx--col-lg-12 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -@media (min-width: 66rem) { - .bx--inline-notification { - max-width: 46rem; - } +.bx--row--condensed .security--ne-section .bx--col-lg-12, +.bx--grid--condensed .security--ne-section .bx--col-lg-12 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -@media (min-width: 99rem) { - .bx--inline-notification { - max-width: 52rem; - } +.security--ne-section .bx--col-lg-13 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification:not(.bx--inline-notification--low-contrast) a { - color: var(--inverse-link, #0f62fe); +.bx--row--condensed .security--ne-section .bx--col-lg-13, +.bx--grid--condensed .security--ne-section .bx--col-lg-13 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification a { - text-decoration: none; +.security--ne-section .bx--col-lg-14 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification a:hover { - text-decoration: underline; +.bx--row--condensed .security--ne-section .bx--col-lg-14, +.bx--grid--condensed .security--ne-section .bx--col-lg-14 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification a:focus { - outline: 1px solid var(--inverse-link, #0f62fe); +.security--ne-section .bx--col-lg-15 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification.bx--inline-notification--low-contrast a:focus { - outline: 1px solid var(--focus, #ffffff); +.bx--row--condensed .security--ne-section .bx--col-lg-15, +.bx--grid--condensed .security--ne-section .bx--col-lg-15 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast { - color: #161616; +.security--ne-section .bx--col-lg-16 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast::before { - content: \\"\\"; - pointer-events: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - filter: opacity(0.4); - border-style: solid; - border-width: 1px 1px 1px 0; +.bx--row--condensed .security--ne-section .bx--col-lg-16, +.bx--grid--condensed .security--ne-section .bx--col-lg-16 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--error { - border-left: 3px solid var(--inverse-support-01, #da1e28); - background: var(--inverse-02, #f4f4f4); +.security--ne-section .bx--col-lg, +.security--ne-section .bx--col-lg--auto { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--error .bx--inline-notification__icon, -.bx--inline-notification--error .bx--toast-notification__icon { - fill: var(--inverse-support-01, #da1e28); +.bx--row--condensed .security--ne-section .bx--col-lg, +.bx--grid--condensed .security--ne-section .bx--col-lg, .bx--row--condensed +.security--ne-section .bx--col-lg--auto, +.bx--grid--condensed +.security--ne-section .bx--col-lg--auto { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--error { - border-left: 3px solid var(--support-01, #fa4d56); - background: #fff1f1; +@media (min-width: 66rem) { + .security--ne-section .bx--col, + .security--ne-section .bx--col-lg { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .security--ne-section .bx--col--auto, + .security--ne-section .bx--col-lg--auto { + flex: 1 0 0%; + width: auto; + max-width: 100%; + } + .security--ne-section .bx--col-lg-0 { + display: none; + } + .security--ne-section .bx--col-lg-1 { + display: block; + flex: 0 0 6.25%; + max-width: 6.25%; + } + .security--ne-section .bx--col-lg-2 { + display: block; + flex: 0 0 12.5%; + max-width: 12.5%; + } + .security--ne-section .bx--col-lg-3 { + display: block; + flex: 0 0 18.75%; + max-width: 18.75%; + } + .security--ne-section .bx--col-lg-4 { + display: block; + flex: 0 0 25%; + max-width: 25%; + } + .security--ne-section .bx--col-lg-5 { + display: block; + flex: 0 0 31.25%; + max-width: 31.25%; + } + .security--ne-section .bx--col-lg-6 { + display: block; + flex: 0 0 37.5%; + max-width: 37.5%; + } + .security--ne-section .bx--col-lg-7 { + display: block; + flex: 0 0 43.75%; + max-width: 43.75%; + } + .security--ne-section .bx--col-lg-8 { + display: block; + flex: 0 0 50%; + max-width: 50%; + } + .security--ne-section .bx--col-lg-9 { + display: block; + flex: 0 0 56.25%; + max-width: 56.25%; + } + .security--ne-section .bx--col-lg-10 { + display: block; + flex: 0 0 62.5%; + max-width: 62.5%; + } + .security--ne-section .bx--col-lg-11 { + display: block; + flex: 0 0 68.75%; + max-width: 68.75%; + } + .security--ne-section .bx--col-lg-12 { + display: block; + flex: 0 0 75%; + max-width: 75%; + } + .security--ne-section .bx--col-lg-13 { + display: block; + flex: 0 0 81.25%; + max-width: 81.25%; + } + .security--ne-section .bx--col-lg-14 { + display: block; + flex: 0 0 87.5%; + max-width: 87.5%; + } + .security--ne-section .bx--col-lg-15 { + display: block; + flex: 0 0 93.75%; + max-width: 93.75%; + } + .security--ne-section .bx--col-lg-16 { + display: block; + flex: 0 0 100%; + max-width: 100%; + } + .security--ne-section .bx--offset-lg-0 { + margin-left: 0; + } + .security--ne-section .bx--offset-lg-1 { + margin-left: 6.25%; + } + .security--ne-section .bx--offset-lg-2 { + margin-left: 12.5%; + } + .security--ne-section .bx--offset-lg-3 { + margin-left: 18.75%; + } + .security--ne-section .bx--offset-lg-4 { + margin-left: 25%; + } + .security--ne-section .bx--offset-lg-5 { + margin-left: 31.25%; + } + .security--ne-section .bx--offset-lg-6 { + margin-left: 37.5%; + } + .security--ne-section .bx--offset-lg-7 { + margin-left: 43.75%; + } + .security--ne-section .bx--offset-lg-8 { + margin-left: 50%; + } + .security--ne-section .bx--offset-lg-9 { + margin-left: 56.25%; + } + .security--ne-section .bx--offset-lg-10 { + margin-left: 62.5%; + } + .security--ne-section .bx--offset-lg-11 { + margin-left: 68.75%; + } + .security--ne-section .bx--offset-lg-12 { + margin-left: 75%; + } + .security--ne-section .bx--offset-lg-13 { + margin-left: 81.25%; + } + .security--ne-section .bx--offset-lg-14 { + margin-left: 87.5%; + } + .security--ne-section .bx--offset-lg-15 { + margin-left: 93.75%; + } } -.bx--inline-notification--low-contrast.bx--inline-notification--error .bx--inline-notification__icon, -.bx--inline-notification--low-contrast.bx--inline-notification--error .bx--toast-notification__icon { - fill: var(--support-01, #fa4d56); +.security--ne-section .bx--col-xlg-0 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--error:before { - border-color: var(--support-01, #fa4d56); +.bx--row--condensed .security--ne-section .bx--col-xlg-0, +.bx--grid--condensed .security--ne-section .bx--col-xlg-0 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--success { - border-left: 3px solid var(--inverse-support-02, #24a148); - background: var(--inverse-02, #f4f4f4); +.security--ne-section .bx--col-xlg-1 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--success .bx--inline-notification__icon, -.bx--inline-notification--success .bx--toast-notification__icon { - fill: var(--inverse-support-02, #24a148); +.bx--row--condensed .security--ne-section .bx--col-xlg-1, +.bx--grid--condensed .security--ne-section .bx--col-xlg-1 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--success { - border-left: 3px solid var(--support-02, #42be65); - background: #defbe6; +.security--ne-section .bx--col-xlg-2 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--success .bx--inline-notification__icon, -.bx--inline-notification--low-contrast.bx--inline-notification--success .bx--toast-notification__icon { - fill: var(--support-02, #42be65); +.bx--row--condensed .security--ne-section .bx--col-xlg-2, +.bx--grid--condensed .security--ne-section .bx--col-xlg-2 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--success:before { - border-color: var(--support-02, #42be65); +.security--ne-section .bx--col-xlg-3 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--info { - border-left: 3px solid var(--inverse-support-04, #0f62fe); - background: var(--inverse-02, #f4f4f4); +.bx--row--condensed .security--ne-section .bx--col-xlg-3, +.bx--grid--condensed .security--ne-section .bx--col-xlg-3 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--info .bx--inline-notification__icon, -.bx--inline-notification--info .bx--toast-notification__icon { - fill: var(--inverse-support-04, #0f62fe); +.security--ne-section .bx--col-xlg-4 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--info { - border-left: 3px solid var(--support-04, #4589ff); - background: #edf5ff; +.bx--row--condensed .security--ne-section .bx--col-xlg-4, +.bx--grid--condensed .security--ne-section .bx--col-xlg-4 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--info .bx--inline-notification__icon, -.bx--inline-notification--low-contrast.bx--inline-notification--info .bx--toast-notification__icon { - fill: var(--support-04, #4589ff); +.security--ne-section .bx--col-xlg-5 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast.bx--inline-notification--info:before { - border-color: var(--support-04, #4589ff); +.bx--row--condensed .security--ne-section .bx--col-xlg-5, +.bx--grid--condensed .security--ne-section .bx--col-xlg-5 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--warning { - border-left: 3px solid var(--inverse-support-03, #f1c21b); - background: var(--inverse-02, #f4f4f4); +.security--ne-section .bx--col-xlg-6 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--warning .bx--inline-notification__icon, -.bx--inline-notification--warning .bx--toast-notification__icon { - fill: var(--inverse-support-03, #f1c21b); -} - -.bx--inline-notification--low-contrast.bx--inline-notification--warning { - border-left: 3px solid var(--support-03, #f1c21b); - background: #fdf6dd; -} - -.bx--inline-notification--low-contrast.bx--inline-notification--warning .bx--inline-notification__icon, -.bx--inline-notification--low-contrast.bx--inline-notification--warning .bx--toast-notification__icon { - fill: var(--support-03, #f1c21b); -} - -.bx--inline-notification--low-contrast.bx--inline-notification--warning:before { - border-color: var(--support-03, #f1c21b); -} - -.bx--inline-notification--warning .bx--inline-notification__icon path[opacity=\\"0\\"] { - fill: #000000; - opacity: 1; -} - -.bx--inline-notification__details { - display: flex; - flex-grow: 1; - margin: 0 3rem 0 1rem; -} - -@media (min-width: 42rem) { - .bx--inline-notification__details { - margin: 0 1rem; - } -} - -.bx--inline-notification__icon { - flex-shrink: 0; - margin-right: 1rem; - margin-top: 0.875rem; -} - -.bx--inline-notification__text-wrapper { - display: flex; - flex-wrap: wrap; - padding: 0.9375rem 0; +.bx--row--condensed .security--ne-section .bx--col-xlg-6, +.bx--grid--condensed .security--ne-section .bx--col-xlg-6 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification__title { - font-size: 0.875rem; - font-weight: 600; - line-height: 1.125rem; - letter-spacing: 0.16px; - margin: 0 0.25rem 0 0; +.security--ne-section .bx--col-xlg-7 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification__subtitle { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - word-break: break-word; +.bx--row--condensed .security--ne-section .bx--col-xlg-7, +.bx--grid--condensed .security--ne-section .bx--col-xlg-7 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification__action-button.bx--btn--ghost { - color: var(--inverse-link, #0f62fe); - height: 2rem; - margin-bottom: 0.5rem; - margin-left: 2.5rem; +.security--ne-section .bx--col-xlg-8 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -@media (min-width: 42rem) { - .bx--inline-notification__action-button.bx--btn--ghost { - margin: 0.5rem 0; - } +.bx--row--condensed .security--ne-section .bx--col-xlg-8, +.bx--grid--condensed .security--ne-section .bx--col-xlg-8 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost { - color: var(--link-01, #78a9ff); +.security--ne-section .bx--col-xlg-9 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification__action-button.bx--btn--ghost:active, -.bx--inline-notification__action-button.bx--btn--ghost:hover { - background-color: var(--inverse-hover-ui, #e5e5e5); +.bx--row--condensed .security--ne-section .bx--col-xlg-9, +.bx--grid--condensed .security--ne-section .bx--col-xlg-9 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:active, -.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:hover { - background-color: #ffffff; +.security--ne-section .bx--col-xlg-10 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification__action-button.bx--btn--ghost:focus { - border-color: transparent; - box-shadow: none; - outline: 2px solid var(--inverse-focus-ui, #0f62fe); - outline-offset: -2px; +.bx--row--condensed .security--ne-section .bx--col-xlg-10, +.bx--grid--condensed .security--ne-section .bx--col-xlg-10 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:focus { - outline-color: var(--focus, #ffffff); +.security--ne-section .bx--col-xlg-11 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--hide-close-button .bx--inline-notification__action-button.bx--btn--ghost { - margin-right: 0.5rem; +.bx--row--condensed .security--ne-section .bx--col-xlg-11, +.bx--grid--condensed .security--ne-section .bx--col-xlg-11 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification__close-button { - outline: 2px solid transparent; - outline-offset: -2px; - position: absolute; - top: 0; - right: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background: transparent; - border: none; - cursor: pointer; - padding: 0; - height: 3rem; - width: 3rem; - min-width: 3rem; - max-width: 3rem; - transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.security--ne-section .bx--col-xlg-12 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification__close-button:focus { - outline: 2px solid var(--inverse-focus-ui, #0f62fe); - outline-offset: -2px; +.bx--row--condensed .security--ne-section .bx--col-xlg-12, +.bx--grid--condensed .security--ne-section .bx--col-xlg-12 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification__close-button .bx--inline-notification__close-icon { - fill: var(--inverse-01, #161616); +.security--ne-section .bx--col-xlg-13 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -@media (min-width: 42rem) { - .bx--inline-notification__close-button { - position: static; - } +.bx--row--condensed .security--ne-section .bx--col-xlg-13, +.bx--grid--condensed .security--ne-section .bx--col-xlg-13 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__close-button:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.security--ne-section .bx--col-xlg-14 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__close-button .bx--inline-notification__close-icon { - fill: #161616; +.bx--row--condensed .security--ne-section .bx--col-xlg-14, +.bx--grid--condensed .security--ne-section .bx--col-xlg-14 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__action-button { - color: var(--interactive-01, #0f62fe); +.security--ne-section .bx--col-xlg-15 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__action-button:active { - color: var(--interactive-01, #0f62fe); +.bx--row--condensed .security--ne-section .bx--col-xlg-15, +.bx--grid--condensed .security--ne-section .bx--col-xlg-15 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--inline-notification--low-contrast .bx--inline-notification__action-button:active, .bx--inline-notification--low-contrast .bx--inline-notification__action-button:hover { - background-color: #ffffff; +.security--ne-section .bx--col-xlg-16 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: flex; - width: 18rem; - height: auto; - padding-left: 0.875rem; - color: var(--inverse-01, #161616); - margin-top: 0.5rem; - margin-bottom: 0.5rem; - margin-right: 1rem; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); +.bx--row--condensed .security--ne-section .bx--col-xlg-16, +.bx--grid--condensed .security--ne-section .bx--col-xlg-16 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification *, -.bx--toast-notification *:before, -.bx--toast-notification *:after { - box-sizing: inherit; +.security--ne-section .bx--col-xlg, +.security--ne-section .bx--col-xlg--auto { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification:first-child { - margin-top: 1rem; +.bx--row--condensed .security--ne-section .bx--col-xlg, +.bx--grid--condensed .security--ne-section .bx--col-xlg, .bx--row--condensed +.security--ne-section .bx--col-xlg--auto, +.bx--grid--condensed +.security--ne-section .bx--col-xlg--auto { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -@media (min-width: 99rem) { - .bx--toast-notification { - width: 22rem; +@media (min-width: 82rem) { + .security--ne-section .bx--col, + .security--ne-section .bx--col-xlg { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .security--ne-section .bx--col--auto, + .security--ne-section .bx--col-xlg--auto { + flex: 1 0 0%; + width: auto; + max-width: 100%; + } + .security--ne-section .bx--col-xlg-0 { + display: none; + } + .security--ne-section .bx--col-xlg-1 { + display: block; + flex: 0 0 6.25%; + max-width: 6.25%; + } + .security--ne-section .bx--col-xlg-2 { + display: block; + flex: 0 0 12.5%; + max-width: 12.5%; + } + .security--ne-section .bx--col-xlg-3 { + display: block; + flex: 0 0 18.75%; + max-width: 18.75%; + } + .security--ne-section .bx--col-xlg-4 { + display: block; + flex: 0 0 25%; + max-width: 25%; + } + .security--ne-section .bx--col-xlg-5 { + display: block; + flex: 0 0 31.25%; + max-width: 31.25%; + } + .security--ne-section .bx--col-xlg-6 { + display: block; + flex: 0 0 37.5%; + max-width: 37.5%; + } + .security--ne-section .bx--col-xlg-7 { + display: block; + flex: 0 0 43.75%; + max-width: 43.75%; + } + .security--ne-section .bx--col-xlg-8 { + display: block; + flex: 0 0 50%; + max-width: 50%; + } + .security--ne-section .bx--col-xlg-9 { + display: block; + flex: 0 0 56.25%; + max-width: 56.25%; + } + .security--ne-section .bx--col-xlg-10 { + display: block; + flex: 0 0 62.5%; + max-width: 62.5%; + } + .security--ne-section .bx--col-xlg-11 { + display: block; + flex: 0 0 68.75%; + max-width: 68.75%; + } + .security--ne-section .bx--col-xlg-12 { + display: block; + flex: 0 0 75%; + max-width: 75%; + } + .security--ne-section .bx--col-xlg-13 { + display: block; + flex: 0 0 81.25%; + max-width: 81.25%; + } + .security--ne-section .bx--col-xlg-14 { + display: block; + flex: 0 0 87.5%; + max-width: 87.5%; + } + .security--ne-section .bx--col-xlg-15 { + display: block; + flex: 0 0 93.75%; + max-width: 93.75%; + } + .security--ne-section .bx--col-xlg-16 { + display: block; + flex: 0 0 100%; + max-width: 100%; + } + .security--ne-section .bx--offset-xlg-0 { + margin-left: 0; + } + .security--ne-section .bx--offset-xlg-1 { + margin-left: 6.25%; + } + .security--ne-section .bx--offset-xlg-2 { + margin-left: 12.5%; + } + .security--ne-section .bx--offset-xlg-3 { + margin-left: 18.75%; + } + .security--ne-section .bx--offset-xlg-4 { + margin-left: 25%; + } + .security--ne-section .bx--offset-xlg-5 { + margin-left: 31.25%; + } + .security--ne-section .bx--offset-xlg-6 { + margin-left: 37.5%; + } + .security--ne-section .bx--offset-xlg-7 { + margin-left: 43.75%; + } + .security--ne-section .bx--offset-xlg-8 { + margin-left: 50%; + } + .security--ne-section .bx--offset-xlg-9 { + margin-left: 56.25%; + } + .security--ne-section .bx--offset-xlg-10 { + margin-left: 62.5%; + } + .security--ne-section .bx--offset-xlg-11 { + margin-left: 68.75%; + } + .security--ne-section .bx--offset-xlg-12 { + margin-left: 75%; + } + .security--ne-section .bx--offset-xlg-13 { + margin-left: 81.25%; + } + .security--ne-section .bx--offset-xlg-14 { + margin-left: 87.5%; + } + .security--ne-section .bx--offset-xlg-15 { + margin-left: 93.75%; } } -.bx--toast-notification:not(.bx--toast-notification--low-contrast) a { - color: var(--inverse-link, #0f62fe); -} - -.bx--toast-notification a { - text-decoration: none; -} - -.bx--toast-notification a:hover { - text-decoration: underline; -} - -.bx--toast-notification a:focus { - outline: 1px solid var(--inverse-link, #0f62fe); +.security--ne-section .bx--col-max-0 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification.bx--toast-notification--low-contrast a:focus { - outline: 1px solid var(--focus, #ffffff); +.bx--row--condensed .security--ne-section .bx--col-max-0, +.bx--grid--condensed .security--ne-section .bx--col-max-0 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification--low-contrast { - color: #161616; +.security--ne-section .bx--col-max-1 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--error { - border-left: 3px solid var(--inverse-support-01, #da1e28); - background: var(--inverse-02, #f4f4f4); +.bx--row--condensed .security--ne-section .bx--col-max-1, +.bx--grid--condensed .security--ne-section .bx--col-max-1 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification--error .bx--inline-notification__icon, -.bx--toast-notification--error .bx--toast-notification__icon { - fill: var(--inverse-support-01, #da1e28); +.security--ne-section .bx--col-max-2 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast.bx--toast-notification--error { - border-left: 3px solid var(--support-01, #fa4d56); - background: #fff1f1; +.bx--row--condensed .security--ne-section .bx--col-max-2, +.bx--grid--condensed .security--ne-section .bx--col-max-2 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.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 { - fill: var(--support-01, #fa4d56); +.security--ne-section .bx--col-max-3 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--success { - border-left: 3px solid var(--inverse-support-02, #24a148); - background: var(--inverse-02, #f4f4f4); +.bx--row--condensed .security--ne-section .bx--col-max-3, +.bx--grid--condensed .security--ne-section .bx--col-max-3 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification--success .bx--inline-notification__icon, -.bx--toast-notification--success .bx--toast-notification__icon { - fill: var(--inverse-support-02, #24a148); +.security--ne-section .bx--col-max-4 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast.bx--toast-notification--success { - border-left: 3px solid var(--support-02, #42be65); - background: #defbe6; +.bx--row--condensed .security--ne-section .bx--col-max-4, +.bx--grid--condensed .security--ne-section .bx--col-max-4 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.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 { - fill: var(--support-02, #42be65); +.security--ne-section .bx--col-max-5 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--info { - border-left: 3px solid var(--inverse-support-04, #0f62fe); - background: var(--inverse-02, #f4f4f4); +.bx--row--condensed .security--ne-section .bx--col-max-5, +.bx--grid--condensed .security--ne-section .bx--col-max-5 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification--info .bx--inline-notification__icon, -.bx--toast-notification--info .bx--toast-notification__icon { - fill: var(--inverse-support-04, #0f62fe); +.security--ne-section .bx--col-max-6 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast.bx--toast-notification--info { - border-left: 3px solid var(--support-04, #4589ff); - background: #edf5ff; +.bx--row--condensed .security--ne-section .bx--col-max-6, +.bx--grid--condensed .security--ne-section .bx--col-max-6 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.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 { - fill: var(--support-04, #4589ff); +.security--ne-section .bx--col-max-7 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--warning { - border-left: 3px solid var(--inverse-support-03, #f1c21b); - background: var(--inverse-02, #f4f4f4); +.bx--row--condensed .security--ne-section .bx--col-max-7, +.bx--grid--condensed .security--ne-section .bx--col-max-7 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification--warning .bx--inline-notification__icon, -.bx--toast-notification--warning .bx--toast-notification__icon { - fill: var(--inverse-support-03, #f1c21b); +.security--ne-section .bx--col-max-8 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast.bx--toast-notification--warning { - border-left: 3px solid var(--support-03, #f1c21b); - background: #fdf6dd; +.bx--row--condensed .security--ne-section .bx--col-max-8, +.bx--grid--condensed .security--ne-section .bx--col-max-8 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.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 { - fill: var(--support-03, #f1c21b); +.security--ne-section .bx--col-max-9 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--warning .bx--toast-notification__icon path[opacity=\\"0\\"] { - fill: #000000; - opacity: 1; +.bx--row--condensed .security--ne-section .bx--col-max-9, +.bx--grid--condensed .security--ne-section .bx--col-max-9 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification__icon { - flex-shrink: 0; - margin-right: 0.875rem; - margin-top: 0.875rem; +.security--ne-section .bx--col-max-10 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification__details { - margin-right: 1rem; +.bx--row--condensed .security--ne-section .bx--col-max-10, +.bx--grid--condensed .security--ne-section .bx--col-max-10 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification__close-button { - outline: 2px solid transparent; - outline-offset: -2px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: transparent; - border: none; - cursor: pointer; - margin-left: auto; - padding: 0; - height: 3rem; - width: 3rem; - min-height: 3rem; - min-width: 3rem; - transition: outline 110ms, background-color 110ms; +.security--ne-section .bx--col-max-11 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification__close-button:focus { - outline: 2px solid var(--inverse-focus-ui, #0f62fe); - outline-offset: -2px; +.bx--row--condensed .security--ne-section .bx--col-max-11, +.bx--grid--condensed .security--ne-section .bx--col-max-11 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification__close-button .bx--toast-notification__close-icon { - fill: var(--inverse-01, #161616); +.security--ne-section .bx--col-max-12 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast .bx--toast-notification__close-button:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--row--condensed .security--ne-section .bx--col-max-12, +.bx--grid--condensed .security--ne-section .bx--col-max-12 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification--low-contrast .bx--toast-notification__close-button .bx--toast-notification__close-icon { - fill: #161616; +.security--ne-section .bx--col-max-13 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification__title { - font-size: 0.875rem; - font-weight: 600; - line-height: 1.125rem; - letter-spacing: 0.16px; - font-weight: 600; - margin-top: 1rem; - word-break: break-word; +.bx--row--condensed .security--ne-section .bx--col-max-13, +.bx--grid--condensed .security--ne-section .bx--col-max-13 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification__subtitle { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - color: var(--inverse-01, #161616); - margin-top: 0; - margin-bottom: 1.5rem; - word-break: break-word; +.security--ne-section .bx--col-max-14 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast .bx--toast-notification__subtitle { - color: #161616; +.bx--row--condensed .security--ne-section .bx--col-max-14, +.bx--grid--condensed .security--ne-section .bx--col-max-14 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.bx--toast-notification__caption { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - color: var(--inverse-01, #161616); - margin-bottom: 1rem; +.security--ne-section .bx--col-max-15 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.bx--toast-notification--low-contrast .bx--toast-notification__caption { - color: #161616; +.bx--row--condensed .security--ne-section .bx--col-max-15, +.bx--grid--condensed .security--ne-section .bx--col-max-15 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--panel { - display: flex; - position: fixed; - top: 0; - right: 0; - height: 100%; - width: 20rem; - color: var(--text-01, #f4f4f4); - background-color: var(--ui-01, #262626); - flex-direction: column; - justify-content: space-between; - z-index: 10000; +.security--ne-section .bx--col-max-16 { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--theme--cg10 .security--panel { - --interactive-01: #0f62fe; - --interactive-02: #697077; - --interactive-03: #ffffff; - --interactive-04: #4589ff; - --ui-background: #121619; - --ui-01: #21272a; - --ui-02: #343a3f; - --ui-03: #343a3f; - --ui-04: #697077; - --ui-05: #f2f4f8; - --text-01: #f2f4f8; - --text-02: #c1c7cd; - --text-03: #697077; - --text-04: #ffffff; - --text-05: #878d96; - --text-error: #ff8389; - --icon-01: #f2f4f8; - --icon-02: #c1c7cd; - --icon-03: #ffffff; - --link-01: #78a9ff; - --inverse-link: #0f62fe; - --field-01: #21272a; - --field-02: #343a3f; - --inverse-01: #121619; - --inverse-02: #f2f4f8; - --support-01: #fa4d56; - --support-02: #42be65; - --support-03: #f1c21b; - --support-04: #4589ff; - --inverse-support-01: #da1e28; - --inverse-support-02: #24a148; - --inverse-support-03: #f1c21b; - --inverse-support-04: #0f62fe; - --overlay-01: rgba(22, 22, 22, 0.7); - --danger: #da1e28; - --focus: #ffffff; - --inverse-focus-ui: #0f62fe; - --hover-primary: #0353e9; - --active-primary: #002d9c; - --hover-primary-text: #a6c8ff; - --hover-secondary: #5a6066; - --active-secondary: #343a3f; - --hover-tertiary: #f2f4f8; - --active-tertiary: #c1c7cd; - --hover-ui: #2f353a; - --active-ui: #4d5358; - --selected-ui: #343a3f; - --selected-light-ui: #4d5358; - --inverse-hover-ui: #e0e4ea; - --hover-selected-ui: #464c51; - --hover-danger: #b81921; - --active-danger: #750e13; - --hover-row: #2f353a; - --visited-link: #be95ff; - --disabled-01: #21272a; - --disabled-02: #4d5358; - --disabled-03: #878d96; - --highlight: #002d9c; - --decorative-01: #4d5358; - --skeleton-01: #2f353a; - --skeleton-02: #343a3f; - --brand-01: #0f62fe; - --brand-02: #697077; - --brand-03: #ffffff; - --active-01: #4d5358; - --hover-field: #2f353a; +.bx--row--condensed .security--ne-section .bx--col-max-16, +.bx--grid--condensed .security--ne-section .bx--col-max-16 { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--panel[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--panel { - right: unset; - left: 0; +.security--ne-section .bx--col-max, +.security--ne-section .bx--col-max--auto { + width: 100%; + padding-right: 1rem; + padding-left: 1rem; } -.security--panel__container .security--header__container { - width: calc( 100% - 3rem - 20rem); +.bx--row--condensed .security--ne-section .bx--col-max, +.bx--grid--condensed .security--ne-section .bx--col-max, .bx--row--condensed +.security--ne-section .bx--col-max--auto, +.bx--grid--condensed +.security--ne-section .bx--col-max--auto { + padding-right: 0.0625rem; + padding-left: 0.0625rem; } -.security--panel__container .security--header__container > .security--header { - width: inherit; +@media (min-width: 99rem) { + .security--ne-section .bx--col, + .security--ne-section .bx--col-max { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .security--ne-section .bx--col--auto, + .security--ne-section .bx--col-max--auto { + flex: 1 0 0%; + width: auto; + max-width: 100%; + } + .security--ne-section .bx--col-max-0 { + display: none; + } + .security--ne-section .bx--col-max-1 { + display: block; + flex: 0 0 6.25%; + max-width: 6.25%; + } + .security--ne-section .bx--col-max-2 { + display: block; + flex: 0 0 12.5%; + max-width: 12.5%; + } + .security--ne-section .bx--col-max-3 { + display: block; + flex: 0 0 18.75%; + max-width: 18.75%; + } + .security--ne-section .bx--col-max-4 { + display: block; + flex: 0 0 25%; + max-width: 25%; + } + .security--ne-section .bx--col-max-5 { + display: block; + flex: 0 0 31.25%; + max-width: 31.25%; + } + .security--ne-section .bx--col-max-6 { + display: block; + flex: 0 0 37.5%; + max-width: 37.5%; + } + .security--ne-section .bx--col-max-7 { + display: block; + flex: 0 0 43.75%; + max-width: 43.75%; + } + .security--ne-section .bx--col-max-8 { + display: block; + flex: 0 0 50%; + max-width: 50%; + } + .security--ne-section .bx--col-max-9 { + display: block; + flex: 0 0 56.25%; + max-width: 56.25%; + } + .security--ne-section .bx--col-max-10 { + display: block; + flex: 0 0 62.5%; + max-width: 62.5%; + } + .security--ne-section .bx--col-max-11 { + display: block; + flex: 0 0 68.75%; + max-width: 68.75%; + } + .security--ne-section .bx--col-max-12 { + display: block; + flex: 0 0 75%; + max-width: 75%; + } + .security--ne-section .bx--col-max-13 { + display: block; + flex: 0 0 81.25%; + max-width: 81.25%; + } + .security--ne-section .bx--col-max-14 { + display: block; + flex: 0 0 87.5%; + max-width: 87.5%; + } + .security--ne-section .bx--col-max-15 { + display: block; + flex: 0 0 93.75%; + max-width: 93.75%; + } + .security--ne-section .bx--col-max-16 { + display: block; + flex: 0 0 100%; + max-width: 100%; + } + .security--ne-section .bx--offset-max-0 { + margin-left: 0; + } + .security--ne-section .bx--offset-max-1 { + margin-left: 6.25%; + } + .security--ne-section .bx--offset-max-2 { + margin-left: 12.5%; + } + .security--ne-section .bx--offset-max-3 { + margin-left: 18.75%; + } + .security--ne-section .bx--offset-max-4 { + margin-left: 25%; + } + .security--ne-section .bx--offset-max-5 { + margin-left: 31.25%; + } + .security--ne-section .bx--offset-max-6 { + margin-left: 37.5%; + } + .security--ne-section .bx--offset-max-7 { + margin-left: 43.75%; + } + .security--ne-section .bx--offset-max-8 { + margin-left: 50%; + } + .security--ne-section .bx--offset-max-9 { + margin-left: 56.25%; + } + .security--ne-section .bx--offset-max-10 { + margin-left: 62.5%; + } + .security--ne-section .bx--offset-max-11 { + margin-left: 68.75%; + } + .security--ne-section .bx--offset-max-12 { + margin-left: 75%; + } + .security--ne-section .bx--offset-max-13 { + margin-left: 81.25%; + } + .security--ne-section .bx--offset-max-14 { + margin-left: 87.5%; + } + .security--ne-section .bx--offset-max-15 { + margin-left: 93.75%; + } } -.security--panel__button--close:only-child { - margin-left: auto; +.security--ne-section .bx--no-gutter, +.security--ne-section .bx--row.bx--no-gutter [class*=\\"bx--col\\"] { + padding-left: 0; + padding-right: 0; +} + +.security--ne-section .bx--no-gutter--left, +.security--ne-section .bx--row.bx--no-gutter--left [class*=\\"bx--col\\"] { + padding-left: 0; +} + +.security--ne-section .bx--no-gutter--right, +.security--ne-section .bx--row.bx--no-gutter--right [class*=\\"bx--col\\"] { + padding-right: 0; +} + +.security--ne-section .bx--hang--left { + padding-left: 1rem; +} + +.security--ne-section .bx--hang--right { + padding-right: 1rem; +} + +.security--ne-section .bx--aspect-ratio { + position: relative; +} + +.security--ne-section .bx--aspect-ratio::before { + content: \\"\\"; + width: 1px; + margin-left: -1px; + float: left; + height: 0; } -.security--panel__button--close:only-child[dir=\\"rtl\\"], -[dir=\\"rtl\\"] .security--panel__button--close:only-child { - margin-right: auto; - margin-left: unset; +.security--ne-section .bx--aspect-ratio::after { + content: \\"\\"; + display: table; + clear: both; } -.security--panel__header { - display: flex; - position: fixed; - top: 0; - width: 18rem; - padding-top: 1rem; - padding-bottom: 1rem; - margin-right: 1rem; - margin-left: 1rem; - box-sizing: border-box; - justify-content: space-between; - border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); +.security--ne-section .bx--aspect-ratio--16x9::before { + padding-top: 56.25%; } -.security--panel__header__container--title { - width: 14.5rem; +.security--ne-section .bx--aspect-ratio--9x16::before { + padding-top: 177.77778%; } -.security--panel__header--title, .security--panel__header--subtitle { - color: var(--text-01, #f4f4f4); - word-break: break-word; +.security--ne-section .bx--aspect-ratio--2x1::before { + padding-top: 50%; } -.security--panel__header--title { - font-size: 1.25rem; - font-weight: 400; - line-height: 1.625rem; - letter-spacing: 0; - display: block; - margin-bottom: 0.75rem; +.security--ne-section .bx--aspect-ratio--1x2::before { + padding-top: 200%; } -.security--panel__header--subtitle { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.security--ne-section .bx--aspect-ratio--4x3::before { + padding-top: 75%; } -.security--panel__body { - margin-top: 5.5rem; - flex-grow: 1; - overflow-y: auto; +.security--ne-section .bx--aspect-ratio--3x4::before { + padding-top: 133.33333%; } -.security--panel__body--content { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - padding: 1rem; - border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); +.security--ne-section .bx--aspect-ratio--1x1::before { + padding-top: 100%; } -.security--panel__body--content:last-child { - border-bottom: none; +.security--ne-section .bx--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } -.security--panel__body--footer { - margin-bottom: 3rem; +.security--ne-section__content-wrapper { + padding: 6rem 2rem 3rem 2rem; } -.security--panel__footer { - display: flex; - position: fixed; - bottom: 0; - width: 20rem; +.security--ne-section__title, .security--ne-section__sub-title, .security--ne-section__description { + color: var(--ui-05, #f4f4f4); + font-weight: normal; + line-height: initial; } -.security--panel__footer__button { - max-width: 20rem; - flex-grow: 1; +.security--ne-section__title { + font-size: 1.5rem; + margin: 0 0 3.25rem 0; } -.security--pill { - border-radius: 6.25rem; - padding: 0 0.5rem; +.security--ne-section__sub-title { + font-size: 0.75rem; + margin: 0 0 0.5rem 0; } -.security--pill--inline { - border-radius: 3.125rem; - display: inline-flex; - padding: 0 0.25rem; +.security--ne-section__description { + font-size: 1.125rem; + margin: 0 0 2rem 0; } -.security--profile-image { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.security--ne-section__link { display: inline-flex; - width: 1.75rem; - height: 1.75rem; - color: var(--inverse-01, #161616); - align-items: center; - background-color: var(--icon-02, #c6c6c6); - border-radius: 50%; - justify-content: center; - object-fit: cover; - text-transform: uppercase; + margin: 0 0 0.25rem 0; + padding: 0; } -.security--profile-image--large { - font-size: 1.25rem; - font-weight: 400; - line-height: 1.625rem; - letter-spacing: 0; - width: 3.5rem; - height: 3.5rem; +.security--ne-section__link__icon { + height: 1.25rem; + width: auto; + align-self: center; + padding: 0 0.5rem 0 0; } -.bx--progress { +.bx--inline-notification { box-sizing: border-box; margin: 0; padding: 0; @@ -11405,941 +11239,1102 @@ input:not(output):not([data-invalid]):-moz-ui-invalid { font-family: inherit; vertical-align: baseline; display: flex; - list-style: none; + flex-wrap: wrap; + position: relative; + height: auto; + min-height: 3rem; + min-width: 18rem; + max-width: 18rem; + width: 100%; + color: var(--inverse-01, #161616); + margin-top: 1rem; + margin-bottom: 1rem; } -.bx--progress *, -.bx--progress *:before, -.bx--progress *:after { +.bx--inline-notification *, +.bx--inline-notification *:before, +.bx--inline-notification *:after { box-sizing: inherit; } -.bx--progress-step { - position: relative; - display: inline-flex; - flex-direction: row; - min-width: 7rem; - width: 8rem; - overflow: visible; +@media (min-width: 42rem) { + .bx--inline-notification { + max-width: 38rem; + flex-wrap: nowrap; + } } -.bx--progress-step .bx--tooltip__label { - display: block; +@media (min-width: 66rem) { + .bx--inline-notification { + max-width: 46rem; + } } -.bx--progress--space-equal .bx--progress-step { - min-width: 8rem; - flex-grow: 1; +@media (min-width: 99rem) { + .bx--inline-notification { + max-width: 52rem; + } } -.bx--progress-line { +.bx--inline-notification:not(.bx--inline-notification--low-contrast) a { + color: var(--inverse-link, #0f62fe); +} + +.bx--inline-notification a { + text-decoration: none; +} + +.bx--inline-notification a:hover { + text-decoration: underline; +} + +.bx--inline-notification a:focus { + outline: 1px solid var(--inverse-link, #0f62fe); +} + +.bx--inline-notification.bx--inline-notification--low-contrast a:focus { + outline: 1px solid var(--focus, #ffffff); +} + +.bx--inline-notification--low-contrast { + color: #161616; +} + +.bx--inline-notification--low-contrast::before { + content: \\"\\"; + pointer-events: none; position: absolute; + top: 0; left: 0; - height: 1px; - width: 8rem; - border: 1px inset transparent; + width: 100%; + height: 100%; + box-sizing: border-box; + filter: opacity(0.4); + border-style: solid; + border-width: 1px 1px 1px 0; +} + +.bx--inline-notification--error { + border-left: 3px solid var(--inverse-support-01, #da1e28); + background: var(--inverse-02, #f4f4f4); +} + +.bx--inline-notification--error .bx--inline-notification__icon, +.bx--inline-notification--error .bx--toast-notification__icon { + fill: var(--inverse-support-01, #da1e28); +} + +.bx--inline-notification--low-contrast.bx--inline-notification--error { + border-left: 3px solid var(--support-01, #fa4d56); + background: #fff1f1; +} + +.bx--inline-notification--low-contrast.bx--inline-notification--error .bx--inline-notification__icon, +.bx--inline-notification--low-contrast.bx--inline-notification--error .bx--toast-notification__icon { + fill: var(--support-01, #fa4d56); +} + +.bx--inline-notification--low-contrast.bx--inline-notification--error:before { + border-color: var(--support-01, #fa4d56); +} + +.bx--inline-notification--success { + border-left: 3px solid var(--inverse-support-02, #24a148); + background: var(--inverse-02, #f4f4f4); +} + +.bx--inline-notification--success .bx--inline-notification__icon, +.bx--inline-notification--success .bx--toast-notification__icon { + fill: var(--inverse-support-02, #24a148); +} + +.bx--inline-notification--low-contrast.bx--inline-notification--success { + border-left: 3px solid var(--support-02, #42be65); + background: #defbe6; +} + +.bx--inline-notification--low-contrast.bx--inline-notification--success .bx--inline-notification__icon, +.bx--inline-notification--low-contrast.bx--inline-notification--success .bx--toast-notification__icon { + fill: var(--support-02, #42be65); } -.bx--progress--space-equal .bx--progress-line { - min-width: 8rem; - width: 100%; +.bx--inline-notification--low-contrast.bx--inline-notification--success:before { + border-color: var(--support-02, #42be65); } -.bx--progress-step svg { - position: relative; - z-index: 1; - width: 1rem; - height: 1rem; - border-radius: 50%; - margin: 0.625rem 0.5rem 0 0; - fill: var(--interactive-04, #4589ff); +.bx--inline-notification--info { + border-left: 3px solid var(--inverse-support-04, #0f62fe); + background: var(--inverse-02, #f4f4f4); } -.bx--progress-label { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - color: var(--text-01, #f4f4f4); - line-height: 1.45; - max-width: 5.5rem; - margin: 0.5rem 0 0 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - transition: box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--inline-notification--info .bx--inline-notification__icon, +.bx--inline-notification--info .bx--toast-notification__icon { + fill: var(--inverse-support-04, #0f62fe); } -.bx--progress-label::before { - content: \\"\\"; - display: block; +.bx--inline-notification--low-contrast.bx--inline-notification--info { + border-left: 3px solid var(--support-04, #4589ff); + background: #edf5ff; } -.bx--progress-label:hover { - color: var(--link-01, #78a9ff); - cursor: pointer; - box-shadow: 0 0.0625rem var(--link-01, #78a9ff); +.bx--inline-notification--low-contrast.bx--inline-notification--info .bx--inline-notification__icon, +.bx--inline-notification--low-contrast.bx--inline-notification--info .bx--toast-notification__icon { + fill: var(--support-04, #4589ff); } -.bx--progress-label:focus { - outline: none; - color: var(--link-01, #78a9ff); - box-shadow: 0 0.1875rem 0 0 var(--link-01, #78a9ff); +.bx--inline-notification--low-contrast.bx--inline-notification--info:before { + border-color: var(--support-04, #4589ff); } -.bx--progress--space-equal .bx--progress-label { - max-width: 100%; - margin-right: 0.75rem; +.bx--inline-notification--warning { + border-left: 3px solid var(--inverse-support-03, #f1c21b); + background: var(--inverse-02, #f4f4f4); } -.bx--progress-label:active { - color: var(--interactive-01, #0f62fe); - box-shadow: 0 0.1875rem 0 0 var(--interactive-01, #0f62fe); +.bx--inline-notification--warning .bx--inline-notification__icon, +.bx--inline-notification--warning .bx--toast-notification__icon { + fill: var(--inverse-support-03, #f1c21b); } -.bx--progress-label-overflow:hover ~ .bx--tooltip, -.bx--progress-label-overflow:focus ~ .bx--tooltip { - visibility: inherit; +.bx--inline-notification--low-contrast.bx--inline-notification--warning { + border-left: 3px solid var(--support-03, #f1c21b); + background: #fdf6dd; } -.bx--progress-step .bx--tooltip .bx--tooltip__caret { - margin-left: 0.625rem; +.bx--inline-notification--low-contrast.bx--inline-notification--warning .bx--inline-notification__icon, +.bx--inline-notification--low-contrast.bx--inline-notification--warning .bx--toast-notification__icon { + fill: var(--support-03, #f1c21b); } -.bx--tooltip__text { - padding: 0; - margin: 0; - font-weight: normal; +.bx--inline-notification--low-contrast.bx--inline-notification--warning:before { + border-color: var(--support-03, #f1c21b); } -.bx--progress-step .bx--tooltip { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.25rem; - letter-spacing: 0.16px; - min-width: 7.1875rem; - width: 7.8125rem; - min-height: 1.5rem; - margin-left: 1.375rem; - margin-top: 2.5rem; - padding: 0.5rem 1rem; - display: block; - visibility: hidden; - color: var(--inverse-01, #161616); +.bx--inline-notification--warning .bx--inline-notification__icon path[opacity=\\"0\\"] { + fill: #000000; + opacity: 1; } -.bx--progress-step .bx--tooltip_multi { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.25rem; - letter-spacing: 0.16px; - width: 9.375rem; - height: auto; - color: var(--inverse-01, #161616); +.bx--inline-notification__details { + display: flex; + flex-grow: 1; + margin: 0 3rem 0 1rem; } -.bx--progress-optional { - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - position: absolute; - left: 0; - margin-left: 1.5rem; - margin-top: 1.75rem; - color: var(--text-02, #c6c6c6); - text-align: start; +@media (min-width: 42rem) { + .bx--inline-notification__details { + margin: 0 1rem; + } } -.bx--progress-step--current .bx--progress-line { - background-color: var(--interactive-04, #4589ff); +.bx--inline-notification__icon { + flex-shrink: 0; + margin-right: 1rem; + margin-top: 0.875rem; } -.bx--progress-step--incomplete svg { - fill: var(--ui-05, #f4f4f4); +.bx--inline-notification__text-wrapper { + display: flex; + flex-wrap: wrap; + padding: 0.9375rem 0; } -.bx--progress-step--incomplete .bx--progress-line { - background-color: var(--ui-03, #393939); +.bx--inline-notification__title { + font-size: 0.875rem; + font-weight: 600; + line-height: 1.125rem; + letter-spacing: 0.16px; + margin: 0 0.25rem 0 0; } -.bx--progress-step--complete .bx--progress-line { - background-color: var(--interactive-04, #4589ff); +.bx--inline-notification__subtitle { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + word-break: break-word; } -.bx--progress-step-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - width: 100%; - display: flex; +.bx--inline-notification__action-button.bx--btn--ghost { + color: var(--inverse-link, #0f62fe); + height: 2rem; + margin-bottom: 0.5rem; + margin-left: 2.5rem; } -.bx--progress-step-button *, -.bx--progress-step-button *:before, -.bx--progress-step-button *:after { - box-sizing: inherit; +@media (min-width: 42rem) { + .bx--inline-notification__action-button.bx--btn--ghost { + margin: 0.5rem 0; + } } -.bx--progress-step-button::-moz-focus-inner { - border: 0; +.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost { + color: var(--link-01, #78a9ff); } -.bx--progress-step-button--unclickable { - cursor: default; - outline: none; +.bx--inline-notification__action-button.bx--btn--ghost:active, +.bx--inline-notification__action-button.bx--btn--ghost:hover { + background-color: var(--inverse-hover-ui, #e5e5e5); } -.bx--progress-step-button--unclickable .bx--progress-label:hover { - color: var(--text-01, #f4f4f4); - cursor: default; - box-shadow: none; +.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:active, +.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:hover { + background-color: #ffffff; } -.bx--progress-step-button--unclickable .bx--tooltip__label:hover { - color: var(--link-01, #78a9ff); - cursor: pointer; - box-shadow: 0 0.0625rem var(--link-01, #78a9ff); +.bx--inline-notification__action-button.bx--btn--ghost:focus { + border-color: transparent; + box-shadow: none; + outline: 2px solid var(--inverse-focus-ui, #0f62fe); + outline-offset: -2px; } -.bx--progress-step--disabled { - cursor: not-allowed; - pointer-events: none; +.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:focus { + outline-color: var(--focus, #ffffff); } -.bx--progress-step--disabled svg { - fill: var(--disabled-02, #525252); - cursor: not-allowed; +.bx--inline-notification--hide-close-button .bx--inline-notification__action-button.bx--btn--ghost { + margin-right: 0.5rem; } -.bx--progress-step--disabled .bx--progress-label, -.bx--progress-step--disabled .bx--progress-label:hover { - color: var(--disabled-02, #525252); - cursor: not-allowed; - box-shadow: none; +.bx--inline-notification__close-button { + outline: 2px solid transparent; + outline-offset: -2px; + position: absolute; + top: 0; + right: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: transparent; + border: none; + cursor: pointer; + padding: 0; + height: 3rem; + width: 3rem; + min-width: 3rem; + max-width: 3rem; + transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--progress-step--disabled .bx--progress-label:focus, -.bx--progress-step--disabled .bx--progress-label:active { - outline: none; - box-shadow: none; +.bx--inline-notification__close-button:focus { + outline: 2px solid var(--inverse-focus-ui, #0f62fe); + outline-offset: -2px; } -.bx--progress-step--disabled .bx--progress-line { - cursor: not-allowed; +.bx--inline-notification__close-button .bx--inline-notification__close-icon { + fill: var(--inverse-01, #161616); } -.bx--progress-step--disabled .bx--progress-label-overflow:hover ~ .bx--tooltip--definition .bx--tooltip--definition__bottom { - display: none; +@media (min-width: 42rem) { + .bx--inline-notification__close-button { + position: static; + } } -.bx--progress__warning > * { - fill: var(--support-01, #fa4d56); +.bx--inline-notification--low-contrast .bx--inline-notification__close-button:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--progress.bx--skeleton .bx--progress-label { - position: relative; - border: none; - padding: 0; - box-shadow: none; - pointer-events: none; - background: var(--skeleton-01, #353535); - height: 0.75rem; - width: 2.5rem; +.bx--inline-notification--low-contrast .bx--inline-notification__close-button .bx--inline-notification__close-icon { + fill: #161616; } -.bx--progress.bx--skeleton .bx--progress-label:hover, .bx--progress.bx--skeleton .bx--progress-label:focus, .bx--progress.bx--skeleton .bx--progress-label:active { - border: none; - outline: none; - cursor: default; +.bx--inline-notification--low-contrast .bx--inline-notification__action-button { + color: var(--interactive-01, #0f62fe); } -.bx--progress.bx--skeleton .bx--progress-label:before { - content: \\"\\"; - width: 0%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: var(--skeleton-02, #393939); - animation: 3000ms ease-in-out skeleton infinite; +.bx--inline-notification--low-contrast .bx--inline-notification__action-button:active { + color: var(--interactive-01, #0f62fe); } -@media (prefers-reduced-motion: reduce) { - .bx--progress.bx--skeleton .bx--progress-label:before { - animation: none; - } +.bx--inline-notification--low-contrast .bx--inline-notification__action-button:active, .bx--inline-notification--low-contrast .bx--inline-notification__action-button:hover { + background-color: #ffffff; } -.bx--progress--vertical { +.bx--toast-notification { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; display: flex; - flex-direction: column; -} - -.bx--progress--vertical .bx--progress-step, -.bx--progress--vertical .bx--progress-step-button { - display: list-item; - min-height: 3.625rem; - width: initial; - min-width: initial; + width: 18rem; + height: auto; + padding-left: 0.875rem; + color: var(--inverse-01, #161616); + margin-top: 0.5rem; + margin-bottom: 0.5rem; + margin-right: 1rem; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); } -.bx--progress--vertical .bx--progress-step svg, -.bx--progress--vertical .bx--progress-step-button svg { - display: inline-block; - margin: 0.1875rem 0.5rem 0; +.bx--toast-notification *, +.bx--toast-notification *:before, +.bx--toast-notification *:after { + box-sizing: inherit; } -.bx--progress--vertical .bx--progress-step-button svg { - margin-right: 0.7rem; +.bx--toast-notification:first-child { + margin-top: 1rem; } -.bx--progress--vertical .bx--progress-step--current svg { - margin-left: 0.563rem; +@media (min-width: 99rem) { + .bx--toast-notification { + width: 22rem; + } } -.bx--progress--vertical .bx--progress-label { - display: inline-block; - width: initial; - max-width: 10rem; - vertical-align: top; - margin: 0; - white-space: initial; +.bx--toast-notification:not(.bx--toast-notification--low-contrast) a { + color: var(--inverse-link, #0f62fe); } -.bx--progress--vertical .bx--progress-step .bx--tooltip { - margin-top: 0.5rem; +.bx--toast-notification a { + text-decoration: none; } -.bx--progress--vertical .bx--progress-optional { - margin-top: auto; - margin-left: 2.25rem; +.bx--toast-notification a:hover { + text-decoration: underline; } -.bx--progress--vertical .bx--progress-line { - left: 0; - height: 100%; - width: 1px; +.bx--toast-notification a:focus { + outline: 1px solid var(--inverse-link, #0f62fe); } -.bx--list-box__wrapper--inline { - display: inline-grid; - align-items: center; - grid-template: auto auto / auto auto; - grid-gap: 0.25rem; +.bx--toast-notification.bx--toast-notification--low-contrast a:focus { + outline: 1px solid var(--focus, #ffffff); } -.bx--list-box__wrapper--inline .bx--label { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; +.bx--toast-notification--low-contrast { + color: #161616; } -.bx--list-box__wrapper--inline .bx--label, -.bx--list-box__wrapper--inline .bx--form__helper-text, -.bx--list-box__wrapper--inline .bx--form-requirement { - margin: 0; +.bx--toast-notification--error { + border-left: 3px solid var(--inverse-support-01, #da1e28); + background: var(--inverse-02, #f4f4f4); } -.bx--list-box__wrapper--inline .bx--form__helper-text { - max-width: none; +.bx--toast-notification--error .bx--inline-notification__icon, +.bx--toast-notification--error .bx--toast-notification__icon { + fill: var(--inverse-support-01, #da1e28); } -.bx--list-box__wrapper--inline .bx--form-requirement { - grid-column: 2; +.bx--toast-notification--low-contrast.bx--toast-notification--error { + border-left: 3px solid var(--support-01, #fa4d56); + background: #fff1f1; } -.bx--list-box { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - position: relative; - width: 100%; - height: 2.5rem; - max-height: 2.5rem; - background-color: var(--field-01, #262626); - border: none; - border-bottom: 1px solid var(--ui-04, #6f6f6f); - cursor: pointer; - color: var(--text-01, #f4f4f4); - transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9); +.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 { + fill: var(--support-01, #fa4d56); } -.bx--list-box *, -.bx--list-box *:before, -.bx--list-box *:after { - box-sizing: inherit; +.bx--toast-notification--success { + border-left: 3px solid var(--inverse-support-02, #24a148); + background: var(--inverse-02, #f4f4f4); } -.bx--list-box:hover { - background-color: var(--hover-ui, #353535); +.bx--toast-notification--success .bx--inline-notification__icon, +.bx--toast-notification--success .bx--toast-notification__icon { + fill: var(--inverse-support-02, #24a148); } -.bx--list-box--xl { - height: 3rem; - max-height: 3rem; +.bx--toast-notification--low-contrast.bx--toast-notification--success { + border-left: 3px solid var(--support-02, #42be65); + background: #defbe6; } -.bx--list-box--sm { - height: 2rem; - max-height: 2rem; +.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 { + fill: var(--support-02, #42be65); } -.bx--list-box--expanded { - border-bottom-color: var(--ui-03, #393939); +.bx--toast-notification--info { + border-left: 3px solid var(--inverse-support-04, #0f62fe); + background: var(--inverse-02, #f4f4f4); } -.bx--list-box--expanded:hover { - background-color: var(--field-01, #262626); +.bx--toast-notification--info .bx--inline-notification__icon, +.bx--toast-notification--info .bx--toast-notification__icon { + fill: var(--inverse-support-04, #0f62fe); } -.bx--list-box--expanded:hover.bx--list-box--light:hover { - background-color: var(--field-02, #393939); +.bx--toast-notification--low-contrast.bx--toast-notification--info { + border-left: 3px solid var(--support-04, #4589ff); + background: #edf5ff; } -.bx--list-box .bx--text-input { - height: 100%; +.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 { + fill: var(--support-04, #4589ff); } -.bx--list-box__invalid-icon { - position: absolute; - top: 50%; - right: 2.5rem; - fill: var(--support-01, #fa4d56); - transform: translateY(-50%); +.bx--toast-notification--warning { + border-left: 3px solid var(--inverse-support-03, #f1c21b); + background: var(--inverse-02, #f4f4f4); } -.bx--list-box[data-invalid] .bx--list-box__field { - border-bottom: 0; - padding-right: 4rem; +.bx--toast-notification--warning .bx--inline-notification__icon, +.bx--toast-notification--warning .bx--toast-notification__icon { + fill: var(--inverse-support-03, #f1c21b); } -.bx--list-box[data-invalid].bx--list-box--inline .bx--list-box__field { - padding-right: 3.5rem; +.bx--toast-notification--low-contrast.bx--toast-notification--warning { + border-left: 3px solid var(--support-03, #f1c21b); + background: #fdf6dd; } -.bx--list-box--light { - background-color: var(--field-02, #393939); +.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 { + fill: var(--support-03, #f1c21b); } -.bx--list-box--light .bx--list-box__menu { - background: var(--field-02, #393939); +.bx--toast-notification--warning .bx--toast-notification__icon path[opacity=\\"0\\"] { + fill: #000000; + opacity: 1; } -.bx--list-box--light .bx--list-box__menu-item__option { - border-top-color: var(--decorative-01, #525252); +.bx--toast-notification__icon { + flex-shrink: 0; + margin-right: 0.875rem; + margin-top: 0.875rem; } -.bx--list-box--light.bx--list-box--expanded { - border-bottom-color: var(--decorative-01, #525252); +.bx--toast-notification__details { + margin-right: 1rem; } -.bx--list-box--disabled:hover { - background-color: var(--field-01, #262626); +.bx--toast-notification__close-button { + outline: 2px solid transparent; + outline-offset: -2px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: transparent; + border: none; + cursor: pointer; + margin-left: auto; + padding: 0; + height: 3rem; + width: 3rem; + min-height: 3rem; + min-width: 3rem; + transition: outline 110ms, background-color 110ms; } -.bx--list-box--light.bx--list-box--disabled { - background-color: var(--field-02, #393939); +.bx--toast-notification__close-button:focus { + outline: 2px solid var(--inverse-focus-ui, #0f62fe); + outline-offset: -2px; } -.bx--list-box--disabled, -.bx--list-box--disabled .bx--list-box__field, -.bx--list-box--disabled .bx--list-box__field:focus { - border-bottom-width: 0; - outline: none; +.bx--toast-notification__close-button .bx--toast-notification__close-icon { + fill: var(--inverse-01, #161616); } -.bx--list-box--disabled .bx--list-box__label, -.bx--list-box--disabled.bx--list-box--inline .bx--list-box__label { - color: var(--disabled-02, #525252); +.bx--toast-notification--low-contrast .bx--toast-notification__close-button:focus { + outline: 2px solid var(--focus, #ffffff); + outline-offset: -2px; } -.bx--list-box--disabled .bx--list-box__menu-icon > svg { - fill: var(--disabled-02, #525252); +.bx--toast-notification--low-contrast .bx--toast-notification__close-button .bx--toast-notification__close-icon { + fill: #161616; } -.bx--list-box--disabled, -.bx--list-box--disabled .bx--list-box__field, -.bx--list-box--disabled .bx--list-box__menu-icon { - cursor: not-allowed; +.bx--toast-notification__title { + font-size: 0.875rem; + font-weight: 600; + line-height: 1.125rem; + letter-spacing: 0.16px; + font-weight: 600; + margin-top: 1rem; + word-break: break-word; } -.bx--list-box--disabled .bx--list-box__menu-item, -.bx--list-box--disabled .bx--list-box__menu-item:hover, -.bx--list-box--disabled .bx--list-box__menu-item--highlighted { - color: var(--disabled-02, #525252); - text-decoration: none; +.bx--toast-notification__subtitle { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + color: var(--inverse-01, #161616); + margin-top: 0; + margin-bottom: 1.5rem; + word-break: break-word; } -.bx--list-box--disabled .bx--list-box__selection:hover { - cursor: not-allowed; +.bx--toast-notification--low-contrast .bx--toast-notification__subtitle { + color: #161616; } -.bx--list-box--disabled.bx--list-box[data-invalid] .bx--list-box__field { - padding-right: 3rem; +.bx--toast-notification__caption { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; + color: var(--inverse-01, #161616); + margin-bottom: 1rem; } -.bx--list-box--disabled.bx--list-box[data-invalid].bx--list-box--inline .bx--list-box__field { - padding-right: 2rem; +.bx--toast-notification--low-contrast .bx--toast-notification__caption { + color: #161616; } -.bx--list-box.bx--list-box--inline { - background-color: transparent; - border-width: 0; +.security--panel { + display: flex; + position: fixed; + top: 0; + right: 0; + height: 100%; + width: 20rem; + color: var(--text-01, #f4f4f4); + background-color: var(--ui-01, #262626); + flex-direction: column; + justify-content: space-between; + z-index: 10000; } -.bx--list-box.bx--list-box--inline:hover { - background-color: var(--hover-ui, #353535); +.security--theme--cg10 .security--panel { + --interactive-01: #0f62fe; + --interactive-02: #697077; + --interactive-03: #ffffff; + --interactive-04: #4589ff; + --ui-background: #121619; + --ui-01: #21272a; + --ui-02: #343a3f; + --ui-03: #343a3f; + --ui-04: #697077; + --ui-05: #f2f4f8; + --text-01: #f2f4f8; + --text-02: #c1c7cd; + --text-03: #697077; + --text-04: #ffffff; + --text-05: #878d96; + --text-error: #ff8389; + --icon-01: #f2f4f8; + --icon-02: #c1c7cd; + --icon-03: #ffffff; + --link-01: #78a9ff; + --inverse-link: #0f62fe; + --field-01: #21272a; + --field-02: #343a3f; + --inverse-01: #121619; + --inverse-02: #f2f4f8; + --support-01: #fa4d56; + --support-02: #42be65; + --support-03: #f1c21b; + --support-04: #4589ff; + --inverse-support-01: #da1e28; + --inverse-support-02: #24a148; + --inverse-support-03: #f1c21b; + --inverse-support-04: #0f62fe; + --overlay-01: rgba(22, 22, 22, 0.7); + --danger: #da1e28; + --focus: #ffffff; + --inverse-focus-ui: #0f62fe; + --hover-primary: #0353e9; + --active-primary: #002d9c; + --hover-primary-text: #a6c8ff; + --hover-secondary: #5a6066; + --active-secondary: #343a3f; + --hover-tertiary: #f2f4f8; + --active-tertiary: #c1c7cd; + --hover-ui: #2f353a; + --active-ui: #4d5358; + --selected-ui: #343a3f; + --selected-light-ui: #4d5358; + --inverse-hover-ui: #e0e4ea; + --hover-selected-ui: #464c51; + --hover-danger: #b81921; + --active-danger: #750e13; + --hover-row: #2f353a; + --visited-link: #be95ff; + --disabled-01: #21272a; + --disabled-02: #4d5358; + --disabled-03: #878d96; + --highlight: #002d9c; + --decorative-01: #4d5358; + --skeleton-01: #2f353a; + --skeleton-02: #343a3f; + --brand-01: #0f62fe; + --brand-02: #697077; + --brand-03: #ffffff; + --active-01: #4d5358; + --hover-field: #2f353a; } -.bx--list-box.bx--list-box--inline.bx--list-box--expanded { - border-bottom-width: 0; +.security--panel[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--panel { + right: unset; + left: 0; } -.bx--list-box.bx--list-box--inline.bx--list-box--expanded .bx--list-box__field[aria-expanded=\\"true\\"] { - border-width: 0; +.security--panel__container .security--header__container { + width: calc( 100% - 3rem - 20rem); } -.bx--list-box.bx--list-box--inline.bx--list-box--disabled:hover { - background-color: transparent; +.security--panel__container .security--header__container > .security--header { + width: inherit; } -.bx--list-box.bx--list-box--inline.bx--list-box--expanded:hover { - background-color: var(--field-02, #393939); +.security--panel__button--close:only-child { + margin-left: auto; } -.bx--list-box.bx--list-box--inline .bx--list-box__field { - padding: 0 2rem 0 0.5rem; +.security--panel__button--close:only-child[dir=\\"rtl\\"], +[dir=\\"rtl\\"] .security--panel__button--close:only-child { + margin-right: auto; + margin-left: unset; } -.bx--list-box.bx--list-box--inline .bx--list-box__menu-icon { - right: 0.5rem; +.security--panel__header { + display: flex; + position: fixed; + top: 0; + width: 18rem; + padding-top: 1rem; + padding-bottom: 1rem; + margin-right: 1rem; + margin-left: 1rem; + box-sizing: border-box; + justify-content: space-between; + border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); } -.bx--list-box.bx--list-box--inline .bx--list-box__invalid-icon { - right: 2rem; +.security--panel__header__container--title { + width: 14.5rem; } -.bx--list-box--inline .bx--list-box__label { +.security--panel__header--title, .security--panel__header--subtitle { color: var(--text-01, #f4f4f4); + word-break: break-word; } -.bx--list-box__field { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - display: inline-block; - background: none; - appearance: none; - border: 0; - padding: 0; - cursor: pointer; - width: 100%; - position: relative; - display: inline-flex; - align-items: center; - vertical-align: top; - height: calc(100% + 1px); - padding: 0 3rem 0 1rem; - cursor: pointer; - outline: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.bx--list-box__field *, -.bx--list-box__field *:before, -.bx--list-box__field *:after { - box-sizing: inherit; +.security--panel__header--title { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.625rem; + letter-spacing: 0; + display: block; + margin-bottom: 0.75rem; } -.bx--list-box__field::-moz-focus-inner { - border: 0; +.security--panel__header--subtitle { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + letter-spacing: 0.16px; } -.bx--list-box__field:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.security--panel__body { + margin-top: 5.5rem; + flex-grow: 1; + overflow-y: auto; } -.bx--list-box__field[disabled] { - outline: none; - color: var(--disabled-02, #525252); +.security--panel__body--content { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + padding: 1rem; + border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f); } -.bx--list-box__field .bx--text-input { - padding-right: 4.5rem; +.security--panel__body--content:last-child { + border-bottom: none; } -.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input { - padding-right: 6.125rem; +.security--panel__body--footer { + margin-bottom: 3rem; } -.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input + .bx--list-box__invalid-icon { - right: 4.125rem; +.security--panel__footer { + display: flex; + position: fixed; + bottom: 0; + width: 20rem; } -.bx--list-box__field .bx--text-input--empty { - padding-right: 3rem; +.security--panel__footer__button { + max-width: 20rem; + flex-grow: 1; } -.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input--empty { - padding-right: 4.5rem; +.security--pill { + border-radius: 6.25rem; + padding: 0 0.5rem; } -.bx--list-box[data-invalid] .bx--list-box__field .bx--text-input--empty + .bx--list-box__invalid-icon { - right: 2.5rem; +.security--pill--inline { + border-radius: 3.125rem; + display: inline-flex; + padding: 0 0.25rem; } -.bx--list-box__label { +.security--profile-image { font-size: 0.875rem; font-weight: 400; line-height: 1.125rem; letter-spacing: 0.16px; - color: var(--text-01, #f4f4f4); - user-select: none; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + display: inline-flex; + width: 1.75rem; + height: 1.75rem; + color: var(--inverse-01, #161616); + align-items: center; + background-color: var(--icon-02, #c6c6c6); + border-radius: 50%; + justify-content: center; + object-fit: cover; + text-transform: uppercase; } -.bx--list-box__menu-icon { - position: absolute; - top: 0; - right: 1rem; - height: 100%; - display: flex; - align-items: center; - transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9); - cursor: pointer; +.security--profile-image--large { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.625rem; + letter-spacing: 0; + width: 3.5rem; + height: 3.5rem; } -.bx--list-box__menu-icon > svg { - fill: var(--icon-01, #f4f4f4); - height: 100%; +.bx--progress { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: flex; + list-style: none; } -.bx--list-box__menu-icon--open { - transform: rotate(180deg); +.bx--progress *, +.bx--progress *:before, +.bx--progress *:after { + box-sizing: inherit; } -.bx--list-box__selection { - position: absolute; - right: 2.0625rem; - top: 50%; - transform: translateY(-50%); - display: flex; - justify-content: center; - align-items: center; - height: 1.875rem; - width: 1.875rem; - cursor: pointer; - user-select: none; - transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--progress-step { + position: relative; + display: inline-flex; + flex-direction: row; + min-width: 7rem; + width: 8rem; + overflow: visible; } -.bx--list-box__selection:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; +.bx--progress-step .bx--tooltip__label { + display: block; } -.bx--list-box__selection--multi { - top: auto; - transform: none; +.bx--progress--space-equal .bx--progress-step { + min-width: 8rem; + flex-grow: 1; } -.bx--list-box__selection > svg { - fill: var(--icon-02, #c6c6c6); +.bx--progress-line { + position: absolute; + left: 0; + height: 1px; + width: 8rem; + border: 1px inset transparent; } -.bx--list-box--disabled .bx--list-box__selection:focus { - outline: none; +.bx--progress--space-equal .bx--progress-line { + min-width: 8rem; + width: 100%; } -.bx--list-box--disabled .bx--list-box__selection > svg { - fill: var(--disabled-02, #525252); +.bx--progress-step svg { + position: relative; + z-index: 1; + width: 1rem; + height: 1rem; + border-radius: 50%; + margin: 0.625rem 0.5rem 0 0; + fill: var(--interactive-04, #4589ff); } -.bx--list-box__selection--multi { - font-size: 0.75rem; +.bx--progress-label { + font-size: 0.875rem; font-weight: 400; - line-height: 1rem; - letter-spacing: 0.32px; - position: static; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0; - background-color: var(--inverse-02, #f4f4f4); - height: 1.5rem; - width: auto; - color: var(--inverse-01, #161616); - line-height: 0; - padding: 0.5rem; - padding-right: 0.125rem; - margin-right: 0.625rem; - border-radius: 0.75rem; + line-height: 1.125rem; + letter-spacing: 0.16px; + color: var(--text-01, #f4f4f4); + line-height: 1.45; + max-width: 5.5rem; + margin: 0.5rem 0 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9); } -.bx--list-box__selection--multi > svg { - fill: var(--inverse-01, #161616); - margin-left: 0.25rem; - width: 1.25rem; - height: 1.25rem; - padding: 0.125rem; +.bx--progress-label::before { + content: \\"\\"; + display: block; } -.bx--list-box__selection--multi > svg:hover { - border-radius: 50%; - background-color: var(--hover-secondary, #606060); +.bx--progress-label:hover { + color: var(--link-01, #78a9ff); + cursor: pointer; + box-shadow: 0 0.0625rem var(--link-01, #78a9ff); } -.bx--list-box__selection--multi:focus, -.bx--list-box__selection--multi:hover { +.bx--progress-label:focus { outline: none; + color: var(--link-01, #78a9ff); + box-shadow: 0 0.1875rem 0 0 var(--link-01, #78a9ff); } -.bx--list-box__menu { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - position: absolute; - left: 0; - right: 0; - width: 100%; - background-color: var(--ui-01, #262626); - transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9); - overflow-y: auto; - z-index: 9100; -} - -.bx--list-box .bx--list-box__field[aria-expanded=\\"false\\"] + .bx--list-box__menu { - max-height: 0; +.bx--progress--space-equal .bx--progress-label { + max-width: 100%; + margin-right: 0.75rem; } -.bx--list-box--expanded .bx--list-box__menu { - max-height: 8.75rem; +.bx--progress-label:active { + color: var(--interactive-01, #0f62fe); + box-shadow: 0 0.1875rem 0 0 var(--interactive-01, #0f62fe); } -.bx--list-box__menu-item { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.125rem; - letter-spacing: 0.16px; - height: 2.5rem; - color: var(--text-02, #c6c6c6); - cursor: pointer; - user-select: none; - position: relative; - transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--progress-label-overflow:hover ~ .bx--tooltip, +.bx--progress-label-overflow:focus ~ .bx--tooltip { + visibility: inherit; } -.bx--list-box__menu-item:hover { - background-color: var(--hover-ui, #353535); +.bx--progress-step .bx--tooltip .bx--tooltip__caret { + margin-left: 0.625rem; } -.bx--list-box__menu-item:active { - background-color: var(--selected-ui, #393939); +.bx--tooltip__text { + padding: 0; + margin: 0; + font-weight: normal; } -.bx--list-box--sm .bx--list-box__menu-item { - height: 2rem; +.bx--progress-step .bx--tooltip { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.16px; + min-width: 7.1875rem; + width: 7.8125rem; + min-height: 1.5rem; + margin-left: 1.375rem; + margin-top: 2.5rem; + padding: 0.5rem 1rem; + display: block; + visibility: hidden; + color: var(--inverse-01, #161616); } -.bx--list-box--xl .bx--list-box__menu-item { - height: 3rem; +.bx--progress-step .bx--tooltip_multi { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.16px; + width: 9.375rem; + height: auto; + color: var(--inverse-01, #161616); } -.bx--list-box--disabled .bx--list-box__menu-item:hover { - background-color: transparent; +.bx--progress-optional { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.32px; + position: absolute; + left: 0; + margin-left: 1.5rem; + margin-top: 1.75rem; + color: var(--text-02, #c6c6c6); + text-align: start; } -.bx--list-box--light .bx--list-box__menu-item:active { - background-color: var(--selected-light-ui, #525252); +.bx--progress-step--current .bx--progress-line { + background-color: var(--interactive-04, #4589ff); } -.bx--list-box--disabled .bx--list-box__menu-item__option:hover { - border-top-color: var(--ui-03, #393939); +.bx--progress-step--incomplete svg { + fill: var(--ui-05, #f4f4f4); } -.bx--list-box__menu-item:first-of-type .bx--list-box__menu-item__option { - border-top-color: transparent; +.bx--progress-step--incomplete .bx--progress-line { + background-color: var(--ui-03, #393939); } -.bx--list-box__menu-item:hover .bx--list-box__menu-item__option { - color: var(--text-01, #f4f4f4); +.bx--progress-step--complete .bx--progress-line { + background-color: var(--interactive-04, #4589ff); } -.bx--list-box__menu-item:hover + .bx--list-box__menu-item .bx--list-box__menu-item__option { - border-top-color: transparent; +.bx--progress-step-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; + display: inline-block; + background: none; + appearance: none; + border: 0; + padding: 0; + cursor: pointer; + width: 100%; + display: flex; } -.bx--list-box--disabled .bx--list-box__menu-item:hover + .bx--list-box__menu-item .bx--list-box__menu-item__option { - border-top-color: var(--ui-03, #393939); +.bx--progress-step-button *, +.bx--progress-step-button *:before, +.bx--progress-step-button *:after { + box-sizing: inherit; } -.bx--list-box__menu-item__option { - outline: 2px solid transparent; - outline-offset: -2px; - display: block; - height: 2.5rem; - color: var(--text-02, #c6c6c6); - text-decoration: none; - font-weight: normal; - line-height: 1rem; - padding: 0.6875rem 0; - margin: 0 1rem; - padding-right: 1.5rem; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top-color: var(--ui-03, #393939); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), color 70ms cubic-bezier(0.2, 0, 0.38, 0.9); +.bx--progress-step-button::-moz-focus-inner { + border: 0; } -.bx--list-box__menu-item__option:focus { - outline: 2px solid var(--focus, #ffffff); - outline-offset: -2px; - margin: 0; - padding: 0.6875rem 1rem; - border-color: transparent; +.bx--progress-step-button--unclickable { + cursor: default; + outline: none; } -.bx--list-box__menu-item__option:hover { +.bx--progress-step-button--unclickable .bx--progress-label:hover { color: var(--text-01, #f4f4f4); - border-color: transparent; -} - -.bx--list-box--sm .bx--list-box__menu-item__option { - padding-top: 0.4375rem; - padding-bottom: 0.4375rem; - height: 2rem; + cursor: default; + box-shadow: none; } -.bx--list-box--xl .bx--list-box__menu-item__option { - padding-top: 0.9375rem; - padding-bottom: 0.9375rem; - height: 3rem; +.bx--progress-step-button--unclickable .bx--tooltip__label:hover { + color: var(--link-01, #78a9ff); + cursor: pointer; + box-shadow: 0 0.0625rem var(--link-01, #78a9ff); } -.bx--list-box--disabled .bx--list-box__menu-item:hover .bx--list-box__menu-item__option, -.bx--list-box--disabled .bx--list-box__menu-item__option { - color: var(--disabled-02, #525252); +.bx--progress-step--disabled { + cursor: not-allowed; + pointer-events: none; } -.bx--list-box.bx--list-box--inline .bx--list-box__menu-item__option { - margin: 0 0.5rem; +.bx--progress-step--disabled svg { + fill: var(--disabled-02, #525252); + cursor: not-allowed; } -.bx--list-box.bx--list-box--inline .bx--list-box__menu-item__option:focus { - margin: 0; - padding-left: 0.5rem; - padding-right: 0.5rem; +.bx--progress-step--disabled .bx--progress-label, +.bx--progress-step--disabled .bx--progress-label:hover { + color: var(--disabled-02, #525252); + cursor: not-allowed; + box-shadow: none; } -.bx--list-box__menu-item--highlighted { - background-color: var(--hover-ui, #353535); - color: var(--text-01, #f4f4f4); - border-color: transparent; +.bx--progress-step--disabled .bx--progress-label:focus, +.bx--progress-step--disabled .bx--progress-label:active { + outline: none; + box-shadow: none; } -.bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option, -.bx--list-box__menu-item--highlighted + .bx--list-box__menu-item .bx--list-box__menu-item__option { - border-top-color: transparent; +.bx--progress-step--disabled .bx--progress-line { + cursor: not-allowed; } -.bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option { - color: var(--text-01, #f4f4f4); +.bx--progress-step--disabled .bx--progress-label-overflow:hover ~ .bx--tooltip--definition .bx--tooltip--definition__bottom { + display: none; } -.bx--list-box__menu-item--active { - color: var(--text-01, #f4f4f4); - background-color: var(--selected-ui, #393939); - border-bottom-color: var(--selected-ui, #393939); +.bx--progress__warning > * { + fill: var(--support-01, #fa4d56); } -.bx--list-box--light .bx--list-box__menu-item--active { - background-color: var(--selected-light-ui, #525252); - border-bottom-color: var(--selected-light-ui, #525252); +.bx--progress.bx--skeleton .bx--progress-label { + position: relative; + border: none; + padding: 0; + box-shadow: none; + pointer-events: none; + background: var(--skeleton-01, #353535); + height: 0.75rem; + width: 2.5rem; } -.bx--list-box__menu-item--active:hover { - background-color: var(--hover-ui, #353535); - border-bottom-color: var(--hover-ui, #353535); +.bx--progress.bx--skeleton .bx--progress-label:hover, .bx--progress.bx--skeleton .bx--progress-label:focus, .bx--progress.bx--skeleton .bx--progress-label:active { + border: none; + outline: none; + cursor: default; } -.bx--list-box__menu-item--active .bx--list-box__menu-item__option { - color: var(--text-01, #f4f4f4); +.bx--progress.bx--skeleton .bx--progress-label:before { + content: \\"\\"; + width: 0%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: var(--skeleton-02, #393939); + animation: 3000ms ease-in-out skeleton infinite; } -.bx--list-box__menu-item--active + .bx--list-box__menu-item > .bx--list-box__menu-item__option { - border-top-color: transparent; +@media (prefers-reduced-motion: reduce) { + .bx--progress.bx--skeleton .bx--progress-label:before { + animation: none; + } } -.bx--list-box__menu-item__selected-icon { - display: none; - position: absolute; - top: 50%; - right: 1rem; - transform: translateY(-50%); - fill: var(--icon-01, #f4f4f4); +.bx--progress--vertical { + display: flex; + flex-direction: column; } -.bx--list-box--inline .bx--list-box__menu-item__selected-icon { - right: 0.5rem; +.bx--progress--vertical .bx--progress-step, +.bx--progress--vertical .bx--progress-step-button { + display: list-item; + min-height: 3.625rem; + width: initial; + min-width: initial; } -.bx--list-box__menu-item--active .bx--list-box__menu-item__selected-icon { - display: block; +.bx--progress--vertical .bx--progress-step svg, +.bx--progress--vertical .bx--progress-step-button svg { + display: inline-block; + margin: 0.1875rem 0.5rem 0; } -.bx--list-box__menu-item .bx--checkbox-label { - width: 100%; +.bx--progress--vertical .bx--progress-step-button svg { + margin-right: 0.7rem; } -.bx--list-box__menu-item .bx--checkbox-label-text { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; +.bx--progress--vertical .bx--progress-step--current svg { + margin-left: 0.563rem; } -.bx--list-box--up .bx--list-box__menu { - bottom: 2.5rem; +.bx--progress--vertical .bx--progress-label { + display: inline-block; + width: initial; + max-width: 10rem; + vertical-align: top; + margin: 0; + white-space: initial; } -.bx--list-box--up.bx--dropdown--sm .bx--list-box__menu, -.bx--list-box--up.bx--list-box--sm .bx--list-box__menu { - bottom: 2rem; +.bx--progress--vertical .bx--progress-step .bx--tooltip { + margin-top: 0.5rem; } -.bx--list-box--up.bx--dropdown--xl .bx--list-box__menu, -.bx--list-box--up.bx--list-box--xl .bx--list-box__menu { - bottom: 3rem; +.bx--progress--vertical .bx--progress-optional { + margin-top: auto; + margin-left: 2.25rem; } -.bx--list-box input[role=\\"combobox\\"] { - background-color: inherit; - min-width: 0; +.bx--progress--vertical .bx--progress-line { + left: 0; + height: 100%; + width: 1px; } .bx--multi-select .bx--list-box__menu { diff --git a/src/components/Dropdown/_index.scss b/src/components/Dropdown/_index.scss index 6a09feca5..59cb738d4 100644 --- a/src/components/Dropdown/_index.scss +++ b/src/components/Dropdown/_index.scss @@ -1,21 +1,9 @@ //// /// Dropdown component. /// @group dropdown -/// @copyright IBM Security 2019 +/// @copyright IBM Security 2019 - 2020 //// @import 'carbon-components/scss/components/dropdown/dropdown'; -@import 'carbon-components/scss/globals/scss/vars'; - -@import '../../globals/namespace/index'; - -@include export-namespace($name: dropdown) { - /// Related to https://github.com/carbon-design-system/carbon-components/issues/2398 - .#{$prefix}--dropdown__wrapper { - &, - * { - box-sizing: border-box; - } - } -} +@import '../ListBox/index'; diff --git a/src/components/ListBox/_index.scss b/src/components/ListBox/_index.scss new file mode 100644 index 000000000..b30a49124 --- /dev/null +++ b/src/components/ListBox/_index.scss @@ -0,0 +1,7 @@ +//// +/// List box component. +/// @group list-box +/// @copyright IBM Security 2020 +//// + +@import 'carbon-components/scss/components/list-box/list-box'; diff --git a/src/components/_index.scss b/src/components/_index.scss index c32309d36..523dee012 100644 --- a/src/components/_index.scss +++ b/src/components/_index.scss @@ -19,6 +19,7 @@ @import 'IconButton/index'; @import 'InlineLoading/index'; @import 'InteractiveTag/index'; +@import 'ListBox/index'; @import 'Nav/index'; @import 'NonEntitledSection/index'; @import 'Notification/index'; @@ -88,7 +89,6 @@ /// Hidden Carbon proxy. @import 'carbon-components/scss/components/list/list'; -@import 'carbon-components/scss/components/list-box/list-box'; /// Unstable experimental components. @import 'UNSTABLE__Pagination/index';