@carbon/ibm-products-styles/css/index-without-carbon.css

Carbon for IBM Products styles

.c4p--apikey-modal .cds--modal-close {
  display: none;
}

.c4p--apikey-modal .cds--inline-loading {
  min-block-size: 3rem;
}

.c4p--apikey-modal .cds--modal-content {
  padding-inline-end: 1rem;
}

.c4p--apikey-modal__body {
  margin-block-end: 1rem;
  padding-inline-end: calc(20% - 1rem);
}

.c4p--apikey-modal__messaging {
  display: flex;
  margin-block-start: 0.5rem;
  padding-inline-end: calc(20% - 1rem);
}

.c4p--apikey-modal__messaging-text {
  flex: 1;
  margin-inline-start: 0.5rem;
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: var(--cds-label-01-font-weight, 400);
  line-height: var(--cds-label-01-line-height, 1.33333);
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
}

.c4p--apikey-modal__messaging-text > * {
  font: inherit;
}

.c4p--apikey-modal__error-icon svg {
  fill: var(--cds-button-danger-primary, #da1e28);
}

.c4p--apikey-modal__checkmark-icon {
  fill: var(--cds-button-primary, #0f62fe);
}

.c4p--about-modal .cds--modal-container {
  grid-template-rows: auto auto 1fr auto;
}

.c4p--about-modal .c4p--about-modal__logo {
  margin: 1rem 1rem 2rem 1rem;
}

.c4p--about-modal .c4p--about-modal__header {
  padding: 0;
  grid-row: auto;
  margin-block-end: 0;
  padding-inline-end: 20%;
  padding-inline-start: 1rem;
}

.c4p--about-modal .c4p--about-modal__title {
  font-size: var(--cds-heading-04-font-size, 1.75rem);
  font-weight: var(--cds-heading-04-font-weight, 400);
  line-height: var(--cds-heading-04-line-height, 1.28572);
  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
  color: var(--cds-text-primary, #161616);
}

.c4p--about-modal .c4p--about-modal__body {
  font-size: var(--cds-body-compact-02-font-size, 1rem);
  font-weight: var(--cds-body-compact-02-font-weight, 400);
  line-height: var(--cds-body-compact-02-line-height, 1.375);
  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
  overflow: hidden auto;
  grid-row: auto;
  min-block-size: 4rem;
  padding-block-start: 0;
  padding-inline: 1rem 20%;
}
.c4p--about-modal .c4p--about-modal__body:not(.cds--modal-scroll-content) {
  margin-block-end: 1.5rem;
  padding-block-end: 0;
}

.c4p--about-modal .cds--modal-content--overflow-indicator {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cds-layer-01, #f4f4f4));
  inset-block-end: 1.5rem;
}

.c4p--about-modal .c4p--about-modal__links-container {
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  font-weight: var(--cds-body-compact-01-font-weight, 400);
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
  margin-block-start: 1.5rem;
}

.c4p--about-modal .c4p--about-modal__version {
  color: var(--cds-text-secondary, #525252);
}

.c4p--about-modal .c4p--about-modal__links-container a + a {
  border-inline-start: 1px solid var(--cds-border-strong-01, #8d8d8d);
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
}

.c4p--about-modal .c4p--about-modal__content,
.c4p--about-modal .c4p--about-modal__copyright-text {
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: var(--cds-label-01-font-weight, 400);
  line-height: var(--cds-label-01-line-height, 1.33333);
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
  color: var(--cds-text-secondary, #525252);
  margin-block: 1.5rem 0;
}

.c4p--about-modal .c4p--about-modal__copyright-text {
  margin-block-start: 1rem;
}

p.c4p--about-modal__content:first-child,
p.c4p--about-modal__copyright-text:first-child {
  margin-block-start: 2rem;
}

.c4p--about-modal .c4p--about-modal__footer {
  display: block;
  padding: 1rem;
  background-color: var(--cds-layer-02, #ffffff);
  block-size: auto;
}

.c4p--action-set {
  align-items: stretch;
  justify-content: flex-end;
  background-color: var(--cds-layer-01, #f4f4f4);
}

.c4p--action-set .c4p--action-set__action-button {
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
  font-weight: var(--cds-body-short-01-font-weight, 400);
  line-height: var(--cds-body-short-01-line-height, 1.28572);
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
  align-items: center;
  margin: 0;
}
.c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
  block-size: 4rem;
  padding-block: 1rem 2rem;
}

.c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
.c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
  max-inline-size: none;
}

.c4p--action-set:not(.c4p--action-set--stacking) .c4p--action-set__action-button--ghost {
  padding-inline-start: 2rem;
}

.c4p--action-set.c4p--action-set--row-single.c4p--action-set--md .c4p--action-set__action-button,
.c4p--action-set.c4p--action-set--row-single .c4p--action-set__action-button--ghost {
  flex: 0 0 100%;
}

.c4p--action-set.c4p--action-set--row-double .c4p--action-set__action-button--ghost {
  flex: 1 1 75%;
}

.c4p--action-set.c4p--action-set--row-single.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
.c4p--action-set.c4p--action-set--row-double.c4p--action-set--md .c4p--action-set__action-button,
.c4p--action-set.c4p--action-set--row-double.c4p--action-set--lg .c4p--action-set__action-button,
.c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
  flex: 0 1 50%;
}

.c4p--action-set.c4p--action-set--row-triple .c4p--action-set__action-button--ghost {
  flex: 1 1 50%;
}

.c4p--action-set.cds--btn-set.c4p--action-set--row-triple.c4p--action-set--lg .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
.c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
.c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
.c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
  flex: 0 1 25%;
  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
  max-inline-size: 14.5rem;
}

.c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button--ghost {
  flex: 1 1 25%;
}

.c4p--action-set .c4p--action-set__action-button .cds--inline-loading {
  position: absolute;
  inline-size: 2rem;
  inset-block-start: 0;
  inset-inline-end: 0;
}

.c4p--button-menu {
  min-inline-size: 160px;
}
.c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open {
  background-color: var(--cds-button-primary, #0f62fe);
}
.c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover {
  background-color: var(--cds-button-primary-hover, #0050e6);
}
.c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open {
  background-color: var(--cds-button-tertiary, #0f62fe);
}
.c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover {
  background-color: var(--cds-button-tertiary-hover, #0050e6);
}
.c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open {
  background-color: transparent;
}
.c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover {
  background-color: var(--cds-layer-hover);
}
.c4p--button-menu .c4p--button-menu__trigger {
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  font-weight: var(--cds-body-compact-01-font-weight, 400);
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  inline-size: 100%;
}

.c4p--button-menu__options.cds--overflow-menu-options::after {
  content: initial;
}

:root {
  --cds-grid-gutter: 2rem;
  --cds-grid-columns: 4;
  --cds-grid-margin: 0;
}
@media (min-width: 42rem) {
  :root {
    --cds-grid-columns: 8;
    --cds-grid-margin: 1rem;
  }
}
@media (min-width: 66rem) {
  :root {
    --cds-grid-columns: 16;
  }
}
@media (min-width: 99rem) {
  :root {
    --cds-grid-margin: 1.5rem;
  }
}

.cds--css-grid {
  --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
  --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
  --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
  display: grid;
  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 99rem;
  padding-inline: var(--cds-grid-margin);
}

.cds--css-grid--full-width {
  max-inline-size: 100%;
}

.cds--css-grid-column {
  --cds-grid-mode-start: var(--cds-grid-gutter-start);
  --cds-grid-mode-end: var(--cds-grid-gutter-end);
  margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
}
[dir=rtl] .cds--css-grid-column {
  margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
}

.cds--css-grid--narrow {
  --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
}

.cds--css-grid--condensed {
  --cds-grid-gutter: 0.0625rem;
  --cds-grid-column-hang: 0.96875rem;
}

.cds--css-grid--start {
  margin-inline-start: 0;
}

.cds--css-grid--end {
  margin-inline-end: 0;
}

.cds--subgrid {
  display: grid;
  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
  margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
}
[dir=rtl] .cds--subgrid {
  margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
}

.cds--subgrid--wide {
  --cds-grid-gutter-start: 1rem;
  --cds-grid-gutter-end: 1rem;
  --cds-grid-column-hang: 0;
}

.cds--subgrid--narrow {
  --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
  --cds-grid-gutter-end: 1rem;
  --cds-grid-column-hang: 1rem;
}

.cds--subgrid--condensed {
  --cds-grid-gutter-start: 0.03125rem;
  --cds-grid-gutter-end: 0.03125rem;
  --cds-grid-column-hang: 0.96875rem;
}

.cds--grid-column-hang {
  margin-inline-start: var(--cds-grid-column-hang);
}
[dir=rtl] .cds--grid-column-hang {
  margin-inline: initial var(--cds-grid-column-hang);
}

.cds--col-span-0 {
  display: none;
}

.cds--col-span-1 {
  --cds-grid-columns: 1;
  display: block;
  grid-column: span 1/span 1;
}

.cds--col-span-2 {
  --cds-grid-columns: 2;
  display: block;
  grid-column: span 2/span 2;
}

.cds--col-span-3 {
  --cds-grid-columns: 3;
  display: block;
  grid-column: span 3/span 3;
}

.cds--col-span-4 {
  --cds-grid-columns: 4;
  display: block;
  grid-column: span 4/span 4;
}

.cds--col-span-5 {
  --cds-grid-columns: 5;
  display: block;
  grid-column: span 5/span 5;
}

.cds--col-span-6 {
  --cds-grid-columns: 6;
  display: block;
  grid-column: span 6/span 6;
}

.cds--col-span-7 {
  --cds-grid-columns: 7;
  display: block;
  grid-column: span 7/span 7;
}

.cds--col-span-8 {
  --cds-grid-columns: 8;
  display: block;
  grid-column: span 8/span 8;
}

.cds--col-span-9 {
  --cds-grid-columns: 9;
  display: block;
  grid-column: span 9/span 9;
}

.cds--col-span-10 {
  --cds-grid-columns: 10;
  display: block;
  grid-column: span 10/span 10;
}

.cds--col-span-11 {
  --cds-grid-columns: 11;
  display: block;
  grid-column: span 11/span 11;
}

.cds--col-span-12 {
  --cds-grid-columns: 12;
  display: block;
  grid-column: span 12/span 12;
}

.cds--col-span-13 {
  --cds-grid-columns: 13;
  display: block;
  grid-column: span 13/span 13;
}

.cds--col-span-14 {
  --cds-grid-columns: 14;
  display: block;
  grid-column: span 14/span 14;
}

.cds--col-span-15 {
  --cds-grid-columns: 15;
  display: block;
  grid-column: span 15/span 15;
}

.cds--col-span-16 {
  --cds-grid-columns: 16;
  display: block;
  grid-column: span 16/span 16;
}

.cds--sm\:col-span-0 {
  display: none;
}

.cds--sm\:col-span-1 {
  --cds-grid-columns: 1;
  display: block;
  grid-column: span 1/span 1;
}

.cds--sm\:col-span-2 {
  --cds-grid-columns: 2;
  display: block;
  grid-column: span 2/span 2;
}

.cds--sm\:col-span-3 {
  --cds-grid-columns: 3;
  display: block;
  grid-column: span 3/span 3;
}

.cds--sm\:col-span-4 {
  --cds-grid-columns: 4;
  display: block;
  grid-column: span 4/span 4;
}

.cds--sm\:col-span-auto {
  grid-column: auto;
}

.cds--sm\:col-span-100 {
  grid-column: 1/-1;
}

.cds--sm\:col-span-75 {
  --cds-grid-columns: 3;
  grid-column: span 3 / span 3;
}

.cds--sm\:col-span-50 {
  --cds-grid-columns: 2;
  grid-column: span 2 / span 2;
}

.cds--sm\:col-span-25 {
  --cds-grid-columns: 1;
  grid-column: span 1 / span 1;
}

@media (min-width: 42rem) {
  .cds--md\:col-span-0 {
    display: none;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-1 {
    --cds-grid-columns: 1;
    display: block;
    grid-column: span 1/span 1;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-2 {
    --cds-grid-columns: 2;
    display: block;
    grid-column: span 2/span 2;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-3 {
    --cds-grid-columns: 3;
    display: block;
    grid-column: span 3/span 3;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-4 {
    --cds-grid-columns: 4;
    display: block;
    grid-column: span 4/span 4;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-5 {
    --cds-grid-columns: 5;
    display: block;
    grid-column: span 5/span 5;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-6 {
    --cds-grid-columns: 6;
    display: block;
    grid-column: span 6/span 6;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-7 {
    --cds-grid-columns: 7;
    display: block;
    grid-column: span 7/span 7;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-8 {
    --cds-grid-columns: 8;
    display: block;
    grid-column: span 8/span 8;
  }
}
@media (min-width: 42rem) {
  .cds--md\:col-span-auto {
    grid-column: auto;
  }
  .cds--md\:col-span-100 {
    grid-column: 1/-1;
  }
  .cds--md\:col-span-75 {
    --cds-grid-columns: 6;
    grid-column: span 6 / span 6;
  }
  .cds--md\:col-span-50 {
    --cds-grid-columns: 4;
    grid-column: span 4 / span 4;
  }
  .cds--md\:col-span-25 {
    --cds-grid-columns: 2;
    grid-column: span 2 / span 2;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-0 {
    display: none;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-1 {
    --cds-grid-columns: 1;
    display: block;
    grid-column: span 1/span 1;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-2 {
    --cds-grid-columns: 2;
    display: block;
    grid-column: span 2/span 2;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-3 {
    --cds-grid-columns: 3;
    display: block;
    grid-column: span 3/span 3;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-4 {
    --cds-grid-columns: 4;
    display: block;
    grid-column: span 4/span 4;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-5 {
    --cds-grid-columns: 5;
    display: block;
    grid-column: span 5/span 5;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-6 {
    --cds-grid-columns: 6;
    display: block;
    grid-column: span 6/span 6;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-7 {
    --cds-grid-columns: 7;
    display: block;
    grid-column: span 7/span 7;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-8 {
    --cds-grid-columns: 8;
    display: block;
    grid-column: span 8/span 8;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-9 {
    --cds-grid-columns: 9;
    display: block;
    grid-column: span 9/span 9;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-10 {
    --cds-grid-columns: 10;
    display: block;
    grid-column: span 10/span 10;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-11 {
    --cds-grid-columns: 11;
    display: block;
    grid-column: span 11/span 11;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-12 {
    --cds-grid-columns: 12;
    display: block;
    grid-column: span 12/span 12;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-13 {
    --cds-grid-columns: 13;
    display: block;
    grid-column: span 13/span 13;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-14 {
    --cds-grid-columns: 14;
    display: block;
    grid-column: span 14/span 14;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-15 {
    --cds-grid-columns: 15;
    display: block;
    grid-column: span 15/span 15;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-16 {
    --cds-grid-columns: 16;
    display: block;
    grid-column: span 16/span 16;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-span-auto {
    grid-column: auto;
  }
  .cds--lg\:col-span-100 {
    grid-column: 1/-1;
  }
  .cds--lg\:col-span-75 {
    --cds-grid-columns: 12;
    grid-column: span 12 / span 12;
  }
  .cds--lg\:col-span-50 {
    --cds-grid-columns: 8;
    grid-column: span 8 / span 8;
  }
  .cds--lg\:col-span-25 {
    --cds-grid-columns: 4;
    grid-column: span 4 / span 4;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-0 {
    display: none;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-1 {
    --cds-grid-columns: 1;
    display: block;
    grid-column: span 1/span 1;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-2 {
    --cds-grid-columns: 2;
    display: block;
    grid-column: span 2/span 2;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-3 {
    --cds-grid-columns: 3;
    display: block;
    grid-column: span 3/span 3;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-4 {
    --cds-grid-columns: 4;
    display: block;
    grid-column: span 4/span 4;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-5 {
    --cds-grid-columns: 5;
    display: block;
    grid-column: span 5/span 5;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-6 {
    --cds-grid-columns: 6;
    display: block;
    grid-column: span 6/span 6;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-7 {
    --cds-grid-columns: 7;
    display: block;
    grid-column: span 7/span 7;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-8 {
    --cds-grid-columns: 8;
    display: block;
    grid-column: span 8/span 8;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-9 {
    --cds-grid-columns: 9;
    display: block;
    grid-column: span 9/span 9;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-10 {
    --cds-grid-columns: 10;
    display: block;
    grid-column: span 10/span 10;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-11 {
    --cds-grid-columns: 11;
    display: block;
    grid-column: span 11/span 11;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-12 {
    --cds-grid-columns: 12;
    display: block;
    grid-column: span 12/span 12;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-13 {
    --cds-grid-columns: 13;
    display: block;
    grid-column: span 13/span 13;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-14 {
    --cds-grid-columns: 14;
    display: block;
    grid-column: span 14/span 14;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-15 {
    --cds-grid-columns: 15;
    display: block;
    grid-column: span 15/span 15;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-16 {
    --cds-grid-columns: 16;
    display: block;
    grid-column: span 16/span 16;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-span-auto {
    grid-column: auto;
  }
  .cds--xlg\:col-span-100 {
    grid-column: 1/-1;
  }
  .cds--xlg\:col-span-75 {
    --cds-grid-columns: 12;
    grid-column: span 12 / span 12;
  }
  .cds--xlg\:col-span-50 {
    --cds-grid-columns: 8;
    grid-column: span 8 / span 8;
  }
  .cds--xlg\:col-span-25 {
    --cds-grid-columns: 4;
    grid-column: span 4 / span 4;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-0 {
    display: none;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-1 {
    --cds-grid-columns: 1;
    display: block;
    grid-column: span 1/span 1;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-2 {
    --cds-grid-columns: 2;
    display: block;
    grid-column: span 2/span 2;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-3 {
    --cds-grid-columns: 3;
    display: block;
    grid-column: span 3/span 3;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-4 {
    --cds-grid-columns: 4;
    display: block;
    grid-column: span 4/span 4;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-5 {
    --cds-grid-columns: 5;
    display: block;
    grid-column: span 5/span 5;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-6 {
    --cds-grid-columns: 6;
    display: block;
    grid-column: span 6/span 6;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-7 {
    --cds-grid-columns: 7;
    display: block;
    grid-column: span 7/span 7;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-8 {
    --cds-grid-columns: 8;
    display: block;
    grid-column: span 8/span 8;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-9 {
    --cds-grid-columns: 9;
    display: block;
    grid-column: span 9/span 9;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-10 {
    --cds-grid-columns: 10;
    display: block;
    grid-column: span 10/span 10;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-11 {
    --cds-grid-columns: 11;
    display: block;
    grid-column: span 11/span 11;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-12 {
    --cds-grid-columns: 12;
    display: block;
    grid-column: span 12/span 12;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-13 {
    --cds-grid-columns: 13;
    display: block;
    grid-column: span 13/span 13;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-14 {
    --cds-grid-columns: 14;
    display: block;
    grid-column: span 14/span 14;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-15 {
    --cds-grid-columns: 15;
    display: block;
    grid-column: span 15/span 15;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-16 {
    --cds-grid-columns: 16;
    display: block;
    grid-column: span 16/span 16;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-span-auto {
    grid-column: auto;
  }
  .cds--max\:col-span-100 {
    grid-column: 1/-1;
  }
  .cds--max\:col-span-75 {
    --cds-grid-columns: 12;
    grid-column: span 12 / span 12;
  }
  .cds--max\:col-span-50 {
    --cds-grid-columns: 8;
    grid-column: span 8 / span 8;
  }
  .cds--max\:col-span-25 {
    --cds-grid-columns: 4;
    grid-column: span 4 / span 4;
  }
}
.cds--col-span-auto {
  grid-column: auto;
}

.cds--col-span-100 {
  grid-column: 1/-1;
}

.cds--col-span-75 {
  --cds-grid-columns: 3;
  grid-column: span 3 / span 3;
}
@media (min-width: 42rem) {
  .cds--col-span-75 {
    --cds-grid-columns: 6;
    grid-column: span 6 / span 6;
  }
}
@media (min-width: 66rem) {
  .cds--col-span-75 {
    --cds-grid-columns: 12;
    grid-column: span 12 / span 12;
  }
}

.cds--col-span-50 {
  --cds-grid-columns: 2;
  grid-column: span 2 / span 2;
}
@media (min-width: 42rem) {
  .cds--col-span-50 {
    --cds-grid-columns: 4;
    grid-column: span 4 / span 4;
  }
}
@media (min-width: 66rem) {
  .cds--col-span-50 {
    --cds-grid-columns: 8;
    grid-column: span 8 / span 8;
  }
}

.cds--col-span-25 {
  --cds-grid-columns: 1;
  grid-column: span 1 / span 1;
}
@media (min-width: 42rem) {
  .cds--col-span-25 {
    --cds-grid-columns: 2;
    grid-column: span 2 / span 2;
  }
}
@media (min-width: 66rem) {
  .cds--col-span-25 {
    --cds-grid-columns: 4;
    grid-column: span 4 / span 4;
  }
}

.cds--col-start-1 {
  grid-column-start: 1;
}

.cds--col-start-2 {
  grid-column-start: 2;
}

.cds--col-start-3 {
  grid-column-start: 3;
}

.cds--col-start-4 {
  grid-column-start: 4;
}

.cds--col-start-5 {
  grid-column-start: 5;
}

.cds--col-start-6 {
  grid-column-start: 6;
}

.cds--col-start-7 {
  grid-column-start: 7;
}

.cds--col-start-8 {
  grid-column-start: 8;
}

.cds--col-start-9 {
  grid-column-start: 9;
}

.cds--col-start-10 {
  grid-column-start: 10;
}

.cds--col-start-11 {
  grid-column-start: 11;
}

.cds--col-start-12 {
  grid-column-start: 12;
}

.cds--col-start-13 {
  grid-column-start: 13;
}

.cds--col-start-14 {
  grid-column-start: 14;
}

.cds--col-start-15 {
  grid-column-start: 15;
}

.cds--col-start-16 {
  grid-column-start: 16;
}

.cds--col-end-2 {
  grid-column-end: 2;
}

.cds--col-end-3 {
  grid-column-end: 3;
}

.cds--col-end-4 {
  grid-column-end: 4;
}

.cds--col-end-5 {
  grid-column-end: 5;
}

.cds--col-end-6 {
  grid-column-end: 6;
}

.cds--col-end-7 {
  grid-column-end: 7;
}

.cds--col-end-8 {
  grid-column-end: 8;
}

.cds--col-end-9 {
  grid-column-end: 9;
}

.cds--col-end-10 {
  grid-column-end: 10;
}

.cds--col-end-11 {
  grid-column-end: 11;
}

.cds--col-end-12 {
  grid-column-end: 12;
}

.cds--col-end-13 {
  grid-column-end: 13;
}

.cds--col-end-14 {
  grid-column-end: 14;
}

.cds--col-end-15 {
  grid-column-end: 15;
}

.cds--col-end-16 {
  grid-column-end: 16;
}

.cds--col-end-17 {
  grid-column-end: 17;
}

.cds--col-start-auto {
  grid-column-start: auto;
}

.cds--col-end-auto {
  grid-column-end: auto;
}

.cds--sm\:col-start-1 {
  grid-column-start: 1;
}

.cds--sm\:col-start-2 {
  grid-column-start: 2;
}

.cds--sm\:col-start-3 {
  grid-column-start: 3;
}

.cds--sm\:col-start-4 {
  grid-column-start: 4;
}

.cds--sm\:col-start-5 {
  grid-column-start: 5;
}

.cds--sm\:col-start-6 {
  grid-column-start: 6;
}

.cds--sm\:col-start-7 {
  grid-column-start: 7;
}

.cds--sm\:col-start-8 {
  grid-column-start: 8;
}

.cds--sm\:col-start-9 {
  grid-column-start: 9;
}

.cds--sm\:col-start-10 {
  grid-column-start: 10;
}

.cds--sm\:col-start-11 {
  grid-column-start: 11;
}

.cds--sm\:col-start-12 {
  grid-column-start: 12;
}

.cds--sm\:col-start-13 {
  grid-column-start: 13;
}

.cds--sm\:col-start-14 {
  grid-column-start: 14;
}

.cds--sm\:col-start-15 {
  grid-column-start: 15;
}

.cds--sm\:col-start-16 {
  grid-column-start: 16;
}

.cds--sm\:col-end-2 {
  grid-column-end: 2;
}

.cds--sm\:col-end-3 {
  grid-column-end: 3;
}

.cds--sm\:col-end-4 {
  grid-column-end: 4;
}

.cds--sm\:col-end-5 {
  grid-column-end: 5;
}

.cds--sm\:col-end-6 {
  grid-column-end: 6;
}

.cds--sm\:col-end-7 {
  grid-column-end: 7;
}

.cds--sm\:col-end-8 {
  grid-column-end: 8;
}

.cds--sm\:col-end-9 {
  grid-column-end: 9;
}

.cds--sm\:col-end-10 {
  grid-column-end: 10;
}

.cds--sm\:col-end-11 {
  grid-column-end: 11;
}

.cds--sm\:col-end-12 {
  grid-column-end: 12;
}

.cds--sm\:col-end-13 {
  grid-column-end: 13;
}

.cds--sm\:col-end-14 {
  grid-column-end: 14;
}

.cds--sm\:col-end-15 {
  grid-column-end: 15;
}

.cds--sm\:col-end-16 {
  grid-column-end: 16;
}

.cds--sm\:col-end-17 {
  grid-column-end: 17;
}

.cds--sm\:col-start-auto {
  grid-column-start: auto;
}

.cds--sm\:col-end-auto {
  grid-column-end: auto;
}

@media (min-width: 42rem) {
  .cds--md\:col-start-1 {
    grid-column-start: 1;
  }
  .cds--md\:col-start-2 {
    grid-column-start: 2;
  }
  .cds--md\:col-start-3 {
    grid-column-start: 3;
  }
  .cds--md\:col-start-4 {
    grid-column-start: 4;
  }
  .cds--md\:col-start-5 {
    grid-column-start: 5;
  }
  .cds--md\:col-start-6 {
    grid-column-start: 6;
  }
  .cds--md\:col-start-7 {
    grid-column-start: 7;
  }
  .cds--md\:col-start-8 {
    grid-column-start: 8;
  }
  .cds--md\:col-start-9 {
    grid-column-start: 9;
  }
  .cds--md\:col-start-10 {
    grid-column-start: 10;
  }
  .cds--md\:col-start-11 {
    grid-column-start: 11;
  }
  .cds--md\:col-start-12 {
    grid-column-start: 12;
  }
  .cds--md\:col-start-13 {
    grid-column-start: 13;
  }
  .cds--md\:col-start-14 {
    grid-column-start: 14;
  }
  .cds--md\:col-start-15 {
    grid-column-start: 15;
  }
  .cds--md\:col-start-16 {
    grid-column-start: 16;
  }
  .cds--md\:col-end-2 {
    grid-column-end: 2;
  }
  .cds--md\:col-end-3 {
    grid-column-end: 3;
  }
  .cds--md\:col-end-4 {
    grid-column-end: 4;
  }
  .cds--md\:col-end-5 {
    grid-column-end: 5;
  }
  .cds--md\:col-end-6 {
    grid-column-end: 6;
  }
  .cds--md\:col-end-7 {
    grid-column-end: 7;
  }
  .cds--md\:col-end-8 {
    grid-column-end: 8;
  }
  .cds--md\:col-end-9 {
    grid-column-end: 9;
  }
  .cds--md\:col-end-10 {
    grid-column-end: 10;
  }
  .cds--md\:col-end-11 {
    grid-column-end: 11;
  }
  .cds--md\:col-end-12 {
    grid-column-end: 12;
  }
  .cds--md\:col-end-13 {
    grid-column-end: 13;
  }
  .cds--md\:col-end-14 {
    grid-column-end: 14;
  }
  .cds--md\:col-end-15 {
    grid-column-end: 15;
  }
  .cds--md\:col-end-16 {
    grid-column-end: 16;
  }
  .cds--md\:col-end-17 {
    grid-column-end: 17;
  }
  .cds--md\:col-start-auto {
    grid-column-start: auto;
  }
  .cds--md\:col-end-auto {
    grid-column-end: auto;
  }
}
@media (min-width: 66rem) {
  .cds--lg\:col-start-1 {
    grid-column-start: 1;
  }
  .cds--lg\:col-start-2 {
    grid-column-start: 2;
  }
  .cds--lg\:col-start-3 {
    grid-column-start: 3;
  }
  .cds--lg\:col-start-4 {
    grid-column-start: 4;
  }
  .cds--lg\:col-start-5 {
    grid-column-start: 5;
  }
  .cds--lg\:col-start-6 {
    grid-column-start: 6;
  }
  .cds--lg\:col-start-7 {
    grid-column-start: 7;
  }
  .cds--lg\:col-start-8 {
    grid-column-start: 8;
  }
  .cds--lg\:col-start-9 {
    grid-column-start: 9;
  }
  .cds--lg\:col-start-10 {
    grid-column-start: 10;
  }
  .cds--lg\:col-start-11 {
    grid-column-start: 11;
  }
  .cds--lg\:col-start-12 {
    grid-column-start: 12;
  }
  .cds--lg\:col-start-13 {
    grid-column-start: 13;
  }
  .cds--lg\:col-start-14 {
    grid-column-start: 14;
  }
  .cds--lg\:col-start-15 {
    grid-column-start: 15;
  }
  .cds--lg\:col-start-16 {
    grid-column-start: 16;
  }
  .cds--lg\:col-end-2 {
    grid-column-end: 2;
  }
  .cds--lg\:col-end-3 {
    grid-column-end: 3;
  }
  .cds--lg\:col-end-4 {
    grid-column-end: 4;
  }
  .cds--lg\:col-end-5 {
    grid-column-end: 5;
  }
  .cds--lg\:col-end-6 {
    grid-column-end: 6;
  }
  .cds--lg\:col-end-7 {
    grid-column-end: 7;
  }
  .cds--lg\:col-end-8 {
    grid-column-end: 8;
  }
  .cds--lg\:col-end-9 {
    grid-column-end: 9;
  }
  .cds--lg\:col-end-10 {
    grid-column-end: 10;
  }
  .cds--lg\:col-end-11 {
    grid-column-end: 11;
  }
  .cds--lg\:col-end-12 {
    grid-column-end: 12;
  }
  .cds--lg\:col-end-13 {
    grid-column-end: 13;
  }
  .cds--lg\:col-end-14 {
    grid-column-end: 14;
  }
  .cds--lg\:col-end-15 {
    grid-column-end: 15;
  }
  .cds--lg\:col-end-16 {
    grid-column-end: 16;
  }
  .cds--lg\:col-end-17 {
    grid-column-end: 17;
  }
  .cds--lg\:col-start-auto {
    grid-column-start: auto;
  }
  .cds--lg\:col-end-auto {
    grid-column-end: auto;
  }
}
@media (min-width: 82rem) {
  .cds--xlg\:col-start-1 {
    grid-column-start: 1;
  }
  .cds--xlg\:col-start-2 {
    grid-column-start: 2;
  }
  .cds--xlg\:col-start-3 {
    grid-column-start: 3;
  }
  .cds--xlg\:col-start-4 {
    grid-column-start: 4;
  }
  .cds--xlg\:col-start-5 {
    grid-column-start: 5;
  }
  .cds--xlg\:col-start-6 {
    grid-column-start: 6;
  }
  .cds--xlg\:col-start-7 {
    grid-column-start: 7;
  }
  .cds--xlg\:col-start-8 {
    grid-column-start: 8;
  }
  .cds--xlg\:col-start-9 {
    grid-column-start: 9;
  }
  .cds--xlg\:col-start-10 {
    grid-column-start: 10;
  }
  .cds--xlg\:col-start-11 {
    grid-column-start: 11;
  }
  .cds--xlg\:col-start-12 {
    grid-column-start: 12;
  }
  .cds--xlg\:col-start-13 {
    grid-column-start: 13;
  }
  .cds--xlg\:col-start-14 {
    grid-column-start: 14;
  }
  .cds--xlg\:col-start-15 {
    grid-column-start: 15;
  }
  .cds--xlg\:col-start-16 {
    grid-column-start: 16;
  }
  .cds--xlg\:col-end-2 {
    grid-column-end: 2;
  }
  .cds--xlg\:col-end-3 {
    grid-column-end: 3;
  }
  .cds--xlg\:col-end-4 {
    grid-column-end: 4;
  }
  .cds--xlg\:col-end-5 {
    grid-column-end: 5;
  }
  .cds--xlg\:col-end-6 {
    grid-column-end: 6;
  }
  .cds--xlg\:col-end-7 {
    grid-column-end: 7;
  }
  .cds--xlg\:col-end-8 {
    grid-column-end: 8;
  }
  .cds--xlg\:col-end-9 {
    grid-column-end: 9;
  }
  .cds--xlg\:col-end-10 {
    grid-column-end: 10;
  }
  .cds--xlg\:col-end-11 {
    grid-column-end: 11;
  }
  .cds--xlg\:col-end-12 {
    grid-column-end: 12;
  }
  .cds--xlg\:col-end-13 {
    grid-column-end: 13;
  }
  .cds--xlg\:col-end-14 {
    grid-column-end: 14;
  }
  .cds--xlg\:col-end-15 {
    grid-column-end: 15;
  }
  .cds--xlg\:col-end-16 {
    grid-column-end: 16;
  }
  .cds--xlg\:col-end-17 {
    grid-column-end: 17;
  }
  .cds--xlg\:col-start-auto {
    grid-column-start: auto;
  }
  .cds--xlg\:col-end-auto {
    grid-column-end: auto;
  }
}
@media (min-width: 99rem) {
  .cds--max\:col-start-1 {
    grid-column-start: 1;
  }
  .cds--max\:col-start-2 {
    grid-column-start: 2;
  }
  .cds--max\:col-start-3 {
    grid-column-start: 3;
  }
  .cds--max\:col-start-4 {
    grid-column-start: 4;
  }
  .cds--max\:col-start-5 {
    grid-column-start: 5;
  }
  .cds--max\:col-start-6 {
    grid-column-start: 6;
  }
  .cds--max\:col-start-7 {
    grid-column-start: 7;
  }
  .cds--max\:col-start-8 {
    grid-column-start: 8;
  }
  .cds--max\:col-start-9 {
    grid-column-start: 9;
  }
  .cds--max\:col-start-10 {
    grid-column-start: 10;
  }
  .cds--max\:col-start-11 {
    grid-column-start: 11;
  }
  .cds--max\:col-start-12 {
    grid-column-start: 12;
  }
  .cds--max\:col-start-13 {
    grid-column-start: 13;
  }
  .cds--max\:col-start-14 {
    grid-column-start: 14;
  }
  .cds--max\:col-start-15 {
    grid-column-start: 15;
  }
  .cds--max\:col-start-16 {
    grid-column-start: 16;
  }
  .cds--max\:col-end-2 {
    grid-column-end: 2;
  }
  .cds--max\:col-end-3 {
    grid-column-end: 3;
  }
  .cds--max\:col-end-4 {
    grid-column-end: 4;
  }
  .cds--max\:col-end-5 {
    grid-column-end: 5;
  }
  .cds--max\:col-end-6 {
    grid-column-end: 6;
  }
  .cds--max\:col-end-7 {
    grid-column-end: 7;
  }
  .cds--max\:col-end-8 {
    grid-column-end: 8;
  }
  .cds--max\:col-end-9 {
    grid-column-end: 9;
  }
  .cds--max\:col-end-10 {
    grid-column-end: 10;
  }
  .cds--max\:col-end-11 {
    grid-column-end: 11;
  }
  .cds--max\:col-end-12 {
    grid-column-end: 12;
  }
  .cds--max\:col-end-13 {
    grid-column-end: 13;
  }
  .cds--max\:col-end-14 {
    grid-column-end: 14;
  }
  .cds--max\:col-end-15 {
    grid-column-end: 15;
  }
  .cds--max\:col-end-16 {
    grid-column-end: 16;
  }
  .cds--max\:col-end-17 {
    grid-column-end: 17;
  }
  .cds--max\:col-start-auto {
    grid-column-start: auto;
  }
  .cds--max\:col-end-auto {
    grid-column-end: auto;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.c4p--cascade__element,
.c4p--cascade__col {
  /* stylelint-disable-next-line max-nesting-depth */
}
@media (prefers-reduced-motion: no-preference) {
  .c4p--cascade__element,
  .c4p--cascade__col {
    /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
    animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
    animation-fill-mode: forwards;
    opacity: 0;
  }
}

.c4p--cascade__element:nth-child(n+1),
.c4p--cascade__col-1 {
  animation-delay: 60ms;
}

.c4p--cascade__element:nth-child(n+2),
.c4p--cascade__col-2 {
  animation-delay: 120ms;
}

.c4p--cascade__element:nth-child(n+3),
.c4p--cascade__col-3 {
  animation-delay: 180ms;
}

.c4p--cascade__element:nth-child(n+4),
.c4p--cascade__col-4 {
  animation-delay: 240ms;
}

.c4p--cascade__element:nth-child(n+5),
.c4p--cascade__col-5 {
  animation-delay: 300ms;
}

.c4p--cascade__element:nth-child(n+6),
.c4p--cascade__col-6 {
  animation-delay: 360ms;
}

.c4p--cascade__element:nth-child(n+7),
.c4p--cascade__col-7 {
  animation-delay: 420ms;
}

.c4p--cascade__element:nth-child(n+8),
.c4p--cascade__col-8 {
  animation-delay: 480ms;
}

.c4p--coachmark-dragbar {
  display: flex;
  /* stylelint-disable-next-line max-nesting-depth */
}
.c4p--coachmark-dragbar svg {
  color: var(--cds-icon-inverse, #ffffff);
}

.c4p--coachmark-header {
  display: flex;
}

/* stylelint-disable function-no-unknown */
/* stylelint-disable max-nesting-depth */
/* stylelint-disable carbon/layout-use */
/* stylelint-disable carbon/theme-use */
/* stylelint-disable declaration-no-important */
.c4p--coachmark-overlay {
  position: absolute;
  z-index: 5901;
  border-radius: 0.125rem;
  background-color: var(--cds-background-inverse, #393939);
  color: var(--cds-text-inverse, #ffffff);
  inline-size: 18rem;
  visibility: hidden;
}
.c4p--coachmark-overlay--tooltip {
  position: initial;
  transform: none !important;
}
.c4p--coachmark-overlay--fixed {
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 1rem;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.2, 0, 1, 0.9);
}
@media (prefers-reduced-motion) {
  .c4p--coachmark-overlay--fixed {
    transition: none;
  }
}
.c4p--coachmark-overlay--is-dragmode {
  border-radius: 0;
  box-shadow: 0 0 0 0.25rem var(--cds-background-inverse, #393939);
  outline: 0.125rem solid var(--cds-icon-inverse, #ffffff);
}
.c4p--coachmark-overlay--is-visible {
  transform: translateY(0);
  visibility: visible;
}
.c4p--coachmark-overlay--top {
  transform: translate(-50%, calc(-1 * (100% + 1.5rem + 0.375rem)));
}
.c4p--coachmark-overlay--top-left {
  transform: translate(-1.5rem, calc(-1 * (100% + 1.5rem + 0.375rem)));
}
.c4p--coachmark-overlay--top-right {
  transform: translate(calc(-1 * (100% - 1.5rem)), calc(-1 * (100% + 1.5rem + 0.375rem)));
}
.c4p--coachmark-overlay--bottom {
  transform: translate(-50%, 1.875rem);
}
.c4p--coachmark-overlay--bottom-left {
  transform: translate(-1.5rem, 1.875rem);
}
.c4p--coachmark-overlay--bottom-right {
  transform: translate(calc(-1 * (100% - 1.5rem)), 1.875rem);
}
.c4p--coachmark-overlay--left {
  transform: translate(calc(-1 * (100% + 1.5rem + 0.375rem)), -50%);
}
.c4p--coachmark-overlay--left-top {
  transform: translate(calc(-1 * (100% + 1.5rem + 0.375rem)), -1.5rem);
}
.c4p--coachmark-overlay--left-bottom {
  transform: translate(calc(-1 * (100% + 1.5rem + 0.375rem)), calc(-1 * (100% - 1.5rem)));
}
.c4p--coachmark-overlay--right {
  transform: translate(1.875rem, -50%);
}
.c4p--coachmark-overlay--right-top {
  transform: translate(1.875rem, -1.5rem);
}
.c4p--coachmark-overlay--right-bottom {
  transform: translate(1.875rem, calc(-1 * (100% - 1.5rem)));
}
.c4p--coachmark-overlay__element-stepped-media {
  block-size: 8rem;
  margin-block-end: 1rem;
}
.c4p--coachmark-overlay__body .cds--btn--ghost {
  color: var(--cds-link-inverse, #78a9ff);
}
.c4p--coachmark-overlay__body .cds--btn--ghost:hover {
  color: var(--cds-link-inverse, #78a9ff);
}
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element {
  display: block;
  flex: 0 0 100%;
  max-inline-size: 100%;
}
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__content {
  padding-block-end: 1rem;
}
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div {
  margin: 0 0 0.5rem;
}
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div > h2 {
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
  order: 1;
}
.c4p--coachmark-overlay__handle {
  position: relative;
  flex-grow: 1;
  padding: 0.25rem 0 0 0.5rem;
  border: 0;
  background-color: transparent;
  text-align: start;
}
.c4p--coachmark-overlay__handle::before {
  position: absolute;
  block-size: 1.625rem;
  content: "";
  inline-size: 1.625rem;
  inset-block-start: 0.125rem;
  inset-inline-start: 0.125rem;
}
.c4p--coachmark-overlay__handle:hover {
  cursor: move;
}
.c4p--coachmark-overlay__handle:focus {
  border: none;
  outline: none;
}
.c4p--coachmark-overlay__handle:focus::before {
  border: 1px solid var(--cds-icon-inverse, #ffffff);
  outline: 1px solid #0f62fe;
}
.c4p--coachmark-overlay--close-btn-container {
  block-size: 2rem;
  inline-size: 2rem;
  margin-inline-start: auto !important;
}
.c4p--coachmark-overlay--close-btn {
  block-size: 2rem;
  inline-size: 2rem;
  margin-inline-start: auto !important;
}
.c4p--coachmark-overlay--close-btn svg > path {
  margin: 0;
  fill: var(--cds-icon-inverse, #ffffff) !important;
}
.c4p--coachmark-overlay--close-btn:hover {
  background-color: var(--cds-background-inverse-hover, #474747) !important;
}
.c4p--coachmark-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-block-start: 1rem;
  padding-block-end: 1rem;
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--link {
  color: var(--cds-link-inverse, #78a9ff);
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--link:hover {
  color: #a6c8ff;
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--link:active {
  color: var(--cds-text-on-color, #ffffff);
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--link:focus {
  outline-color: var(--cds-text-on-color, #ffffff);
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--btn--ghost {
  border-color: transparent !important;
  border-radius: 0;
  outline: 1px solid transparent;
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--btn--ghost:hover {
  background-color: var(--cds-background-inverse-hover, #474747);
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--btn--ghost:active {
  background-color: var(--cds-button-secondary-active, #6f6f6f);
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--btn--ghost:focus {
  box-shadow: inset 0 0 0 1px var(--cds-background-inverse, #393939), inset 0 0 0 0.125rem #ffffff;
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__handle:focus::before {
  border: 1px solid #ffffff;
  outline: 1px solid transparent;
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn {
  border-color: transparent !important;
  border-radius: 0;
  outline: 1px solid transparent;
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:active {
  background-color: var(--cds-button-secondary-active, #6f6f6f);
}
.c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:focus {
  box-shadow: inset 0 0 0 1px var(--cds-background-inverse, #393939), inset 0 0 0 0.125rem #ffffff;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--link {
  color: #0062fe;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--link:hover {
  color: #0043ce;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--link:active {
  color: var(--cds-link-secondary, #0043ce);
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--link:focus {
  color: var(--cds-text-inverse, #ffffff);
  outline-color: var(--cds-text-inverse, #ffffff);
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--btn--primary:focus {
  background-color: var(--cds-button-primary-active, #002d9c);
  box-shadow: inset 0 0 0 0.125rem var(--cds-button-primary, #0f62fe), inset 0 0 0 0.1875rem var(--cds-button-tertiary, #0f62fe);
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--btn--ghost {
  border-color: transparent;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--btn--ghost:hover {
  background-color: var(--cds-background-inverse-hover, #474747);
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--btn--ghost:active {
  background-color: var(--cds-button-tertiary-active, #002d9c);
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .cds--btn--ghost:focus {
  box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 0.125rem #ffffff;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__handle:focus::before {
  border: 1px solid #ffffff;
  outline: 1px solid #0f62fe;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn {
  border-color: transparent;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:focus {
  box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 0.125rem #ffffff;
}
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:active {
  background-color: var(--cds-button-tertiary-active, #002d9c);
}
.c4p--coachmark-overlay .c4p--carousel__item {
  flex: 0 0 100% !important;
}

/* stylelint-disable max-nesting-depth */
/* stylelint-disable carbon/theme-use */
/* stylelint-disable declaration-no-important */
.c4p--coachmark-tagline {
  position: fixed;
  z-index: 1000;
  display: grid;
  overflow: hidden;
  border-radius: 0.125rem 0.125rem 0 0;
  background: #6929c4;
  background-image: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
  color: #ffffff !important;
  grid-template-columns: [cta-col] auto [close-btn-col] 2.5rem;
  inline-size: 18rem;
  inset-block-end: 0;
  inset-inline-end: 1rem;
  opacity: 1;
  transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9) 300ms;
  transition-delay: 240ms;
}
@media (prefers-reduced-motion) {
  .c4p--coachmark-tagline {
    transition: none;
  }
}
.c4p--coachmark-tagline::before {
  position: absolute;
  z-index: -1;
  background: linear-gradient(90deg, #0043ce 0%, #6929c4 100%);
  content: "";
  inset: 0;
  opacity: 0;
  /* stylelint-disable-next-line carbon/motion-duration-use */
  transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9);
}
@media (prefers-reduced-motion) {
  .c4p--coachmark-tagline::before {
    transition: none;
  }
}
.c4p--coachmark-tagline:hover::before {
  opacity: 1;
}
.c4p--coachmark-tagline--is-open {
  background: #ffffff;
  opacity: 0;
}
.c4p--coachmark-tagline--is-open c4p--coachmark-tagline__cta {
  opacity: 0;
}
.c4p--coachmark-tagline--is-open c4p--coachmark-tagline--close-btn {
  display: none;
}
.c4p--coachmark-tagline--is-open::before {
  background: #ffffff;
}
.c4p--coachmark-tagline__cta {
  display: grid;
  padding: 0.5rem 0;
  border: none;
  background: transparent;
  color: #ffffff !important;
  grid-template-columns: [icon-col] 2rem [body-col] auto;
  text-align: start;
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
  font-weight: var(--cds-body-short-01-font-weight, 400);
  line-height: var(--cds-body-short-01-line-height, 1.28572);
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.c4p--coachmark-tagline__cta:focus {
  box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 0.25rem #ffffff;
  outline: 1px solid transparent;
}
.c4p--coachmark-tagline__cta:hover {
  cursor: pointer !important;
}
.c4p--coachmark-tagline__cta .c4p--coachmark-tagline__idea {
  justify-self: center;
}
.c4p--coachmark-tagline--close-btn-container {
  block-size: 2rem;
  inline-size: 2rem;
  margin-inline-start: auto;
}
.c4p--coachmark-tagline--close-btn {
  border-color: transparent !important;
  border-radius: 0;
  block-size: 2rem;
  color: #ffffff;
  inline-size: 2rem;
  margin-inline-start: auto !important;
  outline: 1px solid transparent;
}
.c4p--coachmark-tagline--close-btn:active {
  background-color: var(--cds-button-secondary-active, #6f6f6f);
}
.c4p--coachmark-tagline--close-btn:focus {
  box-shadow: inset 0 0 0 1px var(--cds-background-inverse, #393939), inset 0 0 0 0.125rem #ffffff !important;
}
.c4p--coachmark-tagline--close-btn svg > path {
  margin: 0;
  fill: #ffffff !important;
}
.c4p--coachmark-tagline--close-btn:hover {
  background-color: #7c3dd6 !important;
}

/**
 * Copyright IBM Corp. 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
@keyframes cds--hide-feedback {
  0% {
    opacity: 1;
    visibility: inherit;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes cds--show-feedback {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: inherit;
  }
}
@keyframes cds--skeleton {
  0% {
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
  }
  20% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
  28% {
    transform: scaleX(1);
    transform-origin: right;
  }
  51% {
    transform: scaleX(0);
    transform-origin: right;
  }
  58% {
    transform: scaleX(0);
    transform-origin: right;
  }
  82% {
    transform: scaleX(1);
    transform-origin: right;
  }
  83% {
    transform: scaleX(1);
    transform-origin: left;
  }
  96% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
  }
}
.cds--layout--size-xs {
  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
  --cds-layout-size-height: var(--cds-layout-size-height-context);
}

.cds--layout-constraint--size__default-xs {
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
}

.cds--layout-constraint--size__min-xs {
  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
}

.cds--layout-constraint--size__max-xs {
  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
}

.cds--layout--size-sm {
  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
  --cds-layout-size-height: var(--cds-layout-size-height-context);
}

.cds--layout-constraint--size__default-sm {
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
}

.cds--layout-constraint--size__min-sm {
  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
}

.cds--layout-constraint--size__max-sm {
  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
}

.cds--layout--size-md {
  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
  --cds-l