:host {
  @apply flex flex-col box-border;
}

.title {
  @apply text-page-heading font-bold;
}

.card-customer-card,
.card-customer-details {
  @apply bg-white p-4 text-center;
  box-shadow: 0 -2px 24px 0 #dce2e9;
}

.card-customer-orders {
  box-shadow: 0 -2px 24px 0 #dce2e9;
}

.card-customer-card .title,
.card-customer-details .title {
  @apply text-inactive-customer text-xl;
}

.header {
  @apply bg-white rounded-card p-card;
  box-shadow: 0px 19px 25px -10px white;
  height: 180px;
}

a {
  @apply no-underline;
}

h1 {
  @apply text-center text-page-heading;
}

.desc {
  @apply text-center text-card-heading;
}

.desc-empty {
  @apply text-center text-regular;
}

.orders {
  @apply flex flex-col bg-white;
  height: calc(100vh - 575px);
}

.card-link-visible {
  height: calc(100vh - 635px);
}

.line {
  @apply bg-customer h-px-2;
}

.order-row {
  @apply flex flex-row bg-white py-4 px-4;
}

.date {
  width: 14%;
}

.status {
  width: 20%;
}

.channel {
  width: 32%;
}

.value {
  width: 26%;
}

.details {
  @apply text-brand text-cta-l font-bold no-underline;
  width: 8%;
  text-align: end;
}

.bold {
  @apply font-bold;
}

.card {
  @apply flex flex-col items-stretch h-full;
}

.footer {
  @apply bg-white;
  flex-grow: 1;
  margin-top: 2px;
}

.spin {
  @apply animate-spin fixed;
  top: 65%;
  left: 50%;
}

.spin-text {
  @apply fixed text-regular;
  top: 66%;
  left: 42%;
}

h1 {
  @apply font-bold;
}
