@use '@carbon/react/scss/spacing' as *;
@use '@carbon/react/scss/type' as *;
@use '@carbon/react/scss/breakpoint' as *;
@use '@carbon/react/scss/theme' as *;

@use './mixins.scss' as *;
@use './overrides.scss';

.dashboard-page__illo {
  max-width: 100%;
}

.dashboard-page__banner {
  padding-top: $spacing-05;
  padding-bottom: $spacing-05 * 2;
  @include dashboard-page-background;
}

.dashboard-page__heading {
  @include type-style('heading-05');
}

.dashboard-page__separator {
  padding-top: $spacing-03;
  padding-bottom: $spacing-02 * 2;
  margin-top: 2rem;
  margin-bottom: 2rem;
  @include dashboard-page-background;
}

.dashboard-page__separator h4 {
  @include type-style('heading-04');
  font-weight: bold;
}

.dashboard-page__r2 {
  @include type-style('heading-05');
  border: 1px;
  border-color: #000000;
  margin-top: rem(40px);
  padding-top: rem(40px);
  padding-bottom: rem(40px);
}

.dashboard-page__r2 h4 {
  padding-top: $spacing-05;
  padding-bottom: $spacing-05 * 2;
  text-align: right;
}

.dashboard-page__r3 {
  //text-align: center;
  //top: 50%;
  //left: 50%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.dashboard-page__card {
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: right;
}

.dashboard-page__tab-content {
  padding-top: $spacing-10;
  padding-bottom: $spacing-10;
}

.dashboard-page__subheading {
  @include type-style('heading-03');
  @include font-weight('semibold');
}

.dashboard-page__p {
  @include type-style('heading-03');
  margin-top: $spacing-06;
  margin-bottom: $spacing-08;

  @include breakpoint-between((320px + 1), md) {
    max-width: 75%;
  }
}

.dashboard-page__r3 {
  margin-top: 20px;
  padding-top: $spacing-04;
  padding-bottom: $spacing-02;
  @include dashboard-page-background;
}

.dashboard-page__label {
  @include type-style('heading-01');
}
