.x-billing-list {
  @include media-breakpoint-up(lg) {
    @include transition(all 300ms ease-in-out);
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: $card-border-radius;
    position: relative;
    overflow: visible;
    width: 100%;

    .cdk-virtual-scroll-content-wrapper {
      padding: 0 1rem 1rem;
      // box-shadow: $box-shadow;
      // background-color: theme-color("white");
      // border-radius: $card-border-radius;
    }

    .x-files {
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      overflow: hidden;
      display: block;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    .x-file-complex-header {
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      overflow: hidden;
    }
  }
}



%x-shadow,
.x-shadow {
  @extend %border-0;
  box-shadow: $box-shadow !important;
}

.x-billing {
  background-color: $white;
  border-radius: $card-border-radius;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  padding: 1.5rem;
  position: relative;
  width: 100%;
  overflow: hidden;

  sc-btn-icon {
    z-index: 99;
  }
  .chartjs-render-monitor {
    height: 100% !important;
  }

  &-chart {
    @extend %position-absolute,
            %w-100,
            %h-100;
    top: 0;
    left: 0;
  }

  &-dark {
    @include custom-theme-color(primary, background-color);
    color: $white;
    @extend %x-shadow;
  }

  &-row {
    flex-direction: row;
  }

  &-body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  &-details {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .u-right {
      align-items: flex-end;
    }

    > * {
      display: flex;
      flex-direction: column;

      > *:last-child {
        margin-bottom: 0;
      }
    }

  }

  &-label {
    @extend %font-weight-medium;
    color: theme-color("info");
    opacity: 0.7;
    font-size: 1rem;

    .x-billing-dark & {
      color: $white;
    }
  }

  &-h4 {
    font-size: $h4-font-size;

    .x-billing-details & {
      line-height: 1;
      margin-bottom: 0;
    }
  }

  &-h6 {
    @extend %font-weight-medium;
    color: theme-color("default");
    font-size: $h6-font-size;
    margin-bottom: 0;
  }

}