/* @define Card */
.np-Card {
  --Card-background-color: var(--color-background-neutral);
  --Card-border-radius: var(--size-32);
  --Card-flex-gap: var(--size-16);
  --Card-padding: var(--size-24);
  --Card-closeButton-position: var(--size-16);
  --Card-max-width: initial;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: rgba(134,167,189,0.10196);
  background-color: var(--Card-background-color);
  border-radius: 32px;
  border-radius: var(--Card-border-radius);
  gap: 16px;
  gap: var(--Card-flex-gap);
  padding: 24px;
  padding: var(--Card-padding);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 576px) {
  .np-Card {
    max-width: var(--Card-max-width);
  }
}
.np-Card.is-disabled .np-Card-closeButton {
  cursor: not-allowed;
}
.np-theme-personal--dark .np-Card {
  --Card-background-color: var(--color-background-elevated);
}
.np-Card-closeButton {
  position: absolute;
  z-index: 100;
  top: var(--Card-closeButton-position);
  right: var(--Card-closeButton-position);
}
[dir="rtl"] .np-Card-closeButton {
  left: var(--Card-closeButton-position);
  right: auto;
}
.np-Card--small {
  --Card-border-radius: var(--size-16);
  --Card-closeButton-position: var(--size-8);
  --Card-padding: var(--size-16);
}