:host {
  @apply flex flex-col pt-4 pb-6 pl-1 pr-4 bg-white;
  height: 300px;
}

.header {
  @apply w-full flex flex-row justify-between mt-5;

  .left {
    @apply h-6 bg-ucla-blue ml-4;
    width: 300px;
  }

  .right {
    @apply h-6 bg-ucla-blue ml-4;
    width: 150px;
  }
}

.row {
  @apply flex flex-row mt-6 ml-4;
}

.sub-row {
  @apply flex flex-row;
}

.thumbnail {
  @apply bg-ucla-blue rounded-card mr-3;
  width: 63px;
  height: 90px;
}

.item {
  @apply h-4 bg-ucla-blue ml-6 mb-1;
  width: 250px;
}

.title {
  @apply h-4 bg-ucla-blue ml-6 mb-4;
  width: 524px;
}

.animation {
  animation: load 1s linear infinite;
}

@keyframes load {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

::ng-deep .customer ui-skeleton-loader {
  .header {
    .left {
      @apply bg-inactive-customer;
    }

    .right {
      @apply bg-inactive-customer;
    }
  }

  .thumbnail {
    @apply bg-inactive-customer;
  }

  .item {
    @apply bg-inactive-customer;
  }

  .title {
    @apply bg-inactive-customer;
  }
}
