.nu-card {
  width: auto;
  box-sizing: border-box;
}

.nu-card-action {
  margin: 4px;
}

.nu-card-media-title,
.nu-card-content,
.nu-card-header {
  margin: 16px;
}

.nu-card,
.nu-card-media,
.nu-card-action,
.nu-card-header,
.nu-card-content {
  font-size: 16px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--bg-color);
  background-color: var(--bg-color);
}

.nu-card-header {
  font-size: 24px;
}

.nu-card-action {
  display: flex;
  align-items: center;
}

.nu-card-media {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px !important;
}

.nu-card.nu-card--light,
.nu-card-media.nu-card-media--light,
.nu-card-action.nu-card-action--light,
.nu-card-header.nu-card-header--light,
.nu-card-content.nu-card-content--light {
  --bg-color: var(--light-bg);
  --text-color: var(--g-text-color-light);
  --border-color: var(--light-bg-dark-shadow);
  --box-shadow: 3px 3px 6px var(--light-bg-dark-shadow),
    -3px -3px 6px var(--light-bg-light-shadow);
  --box-shadow-2: 6px 6px 12px var(--light-bg-dark-shadow),
    -6px -6px 12px var(--light-bg-light-shadow);
  --box-shadow-3: 9px 9px 18px var(--light-bg-dark-shadow),
    -9px -9px 18px var(--light-bg-light-shadow);
  --box-shadow-4: 12px 12px 24px var(--light-bg-dark-shadow),
    -12px -12px 24px var(--light-bg-light-shadow);
  --box-shadow-5: 15px 15px 30px var(--light-bg-dark-shadow),
    -15px -15px 30px var(--light-bg-light-shadow);
  --box-shadow-inset: inset -2px -2px 5px var(--light-bg-light-shadow),
    inset 2px 2px 5px var(--light-bg-dark-shadow);
}

.nu-card.nu-card--dark,
.nu-card-media.nu-card-media--dark,
.nu-card-action.nu-card-action--dark,
.nu-card-header.nu-card-header--dark,
.nu-card-content.nu-card-content--dark {
  --bg-color: var(--dark-bg);
  --text-color: var(--g-text-color-dark);
  --border-color: var(--dark-bg-light-shadow);
  --box-shadow: 3px 3px 6px var(--dark-bg-dark-shadow),
    -3px -3px 6px var(--dark-bg-light-shadow);
  --box-shadow-2: 6px 6px 12px var(--dark-bg-dark-shadow),
    -6px -6px 12px var(--dark-bg-light-shadow);
  --box-shadow-3: 9px 9px 18px var(--dark-bg-dark-shadow),
    -9px -9px 18px var(--dark-bg-light-shadow);
  --box-shadow-4: 12px 12px 24px var(--dark-bg-dark-shadow),
    -12px -12px 24px var(--dark-bg-light-shadow);
  --box-shadow-5: 15px 15px 30px var(--dark-bg-dark-shadow),
    -15px -15px 30px var(--dark-bg-light-shadow);
  --box-shadow-inset: inset -2px -2px 5px var(--dark-bg-light-shadow),
    inset 2px 2px 5px var(--dark-bg-dark-shadow);
}

.nu-card.nu-card--rounded,
.nu-card-media.nu-card-media--rounded,
.nu-card-action.nu-card-action--rounded,
.nu-card-header.nu-card-header--rounded,
.nu-card-content.nu-card-content--rounded {
  border-radius: 24px;
}

.nu-card.elevation-5 {
  box-shadow: var(--box-shadow-5);
}

.nu-card.elevation-4 {
  box-shadow: var(--box-shadow-4);
}

.nu-card.elevation-3 {
  box-shadow: var(--box-shadow-3);
}

.nu-card.elevation-2 {
  box-shadow: var(--box-shadow-2);
}

.nu-card.elevation-1 {
  box-shadow: var(--box-shadow);
}

.nu-card.elevation-0 {
  box-shadow: none;
}

.nu-card.nu-card--outlined,
.nu-card.nu-card--flat {
  box-shadow: none !important;
}
.nu-card.nu-card--bordered,
.nu-card.nu-card--outlined {
  border: 1px solid var(--border-color);
}

.nu-card.nu-card--inset {
  box-shadow: var(--box-shadow-inset);
}

.nu-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nu-header-content--left {
  justify-content: flex-start;
}

.nu-header-avatar {
  margin-right: 16px;
}

.nu-card-media-title {
  position: absolute;
  bottom: 0px;
}

.nu-card-media.nu-card-media--disabled {
  opacity: 0.38;
  user-select: none;
  pointer-events: none;
}
