body {
  --pf-global--FontFamily--sans-serif: #{$font-family-sans-serif};
  --pf-global--FontFamily--heading--sans-serif: #{$font-family-sans-serif};
  --pf-global--BackgroundColor--100: #{$white};
  --pf-global--Color--100: #{$black};
  --pf-global--Color--light-100: #{$white};
  --pf-global--Color--dark-100: #{$black};
  --pf-global--active-color--100: #{$blue};
  --pf-global--disabled-color--100: #{$grey};
  --pf-global--primary-color--100: #{$blue};
  --pf-global--primary-color--200: #{$blue};
  --pf-global--secondary-color--100: #{$grey};
  --pf-global--success-color--100: #{$green};
  --pf-global--info-color--100: #{$black};
  --pf-global--warning-color--100: #{$yellow};
  --pf-global--danger-color--100: #{$red};
  --pf-global--link--Color: #{$blue};
  --pf-global--link--Color--hover: #{$blue};

  a,
  a:not([href]):not([class]) {
    color: $blue;
  }

  #spinner_screen {
    background-color: $white;
  }

  .pf-l-stack {
    text-align: center;
  }

  .pf-l-gallery {
    justify-content: center;
    grid-template-columns: auto;
  }

  .pf-c-page {
    &__header {
      background-color: $white;
    }

    &__sidebar {
      max-width: 18.125rem;
      background-color: $white;

      .pf-c-nav {
        &__list {
          @extend .nav;
        }

        &__item {
          @extend .nav-item;

          margin-bottom: 1rem;
          margin-left: 1rem;

          &.pf-m-expandable::before {
            content: none;
          }
        }

        &__link {
          -webkit-appearance: none;
          width: auto;

          @extend .nav-link;

          z-index: 0;

          &::before,
          &::after {
            content: none;
          }

          &:hover,
          &:focus {
            color: $blue;
            background-color: transparent;
          }

          &.pf-m-current {
            @extend .nuxt-link-active;

            background-color: transparent;
          }
        }

        &__subnav {
          padding: 0;

          .pf-c-nav__item {
            margin-bottom: 0.5rem;
          }
        }
      }
    }
  }

  #loggedInUser,
  #landingLoggedInUser {
    color: $black;
  }

  #main_react_container .pf-c-page__main {
    background-color: $bodygrey;
    margin: 0 auto;
    width: 100%;

    &-section {
      background-color: $white;
      padding: 0 0 1rem 0;
      width: 100%;

      @include media-breakpoint-up(sm) {
        width: calc(10/12 * 100%);
      }

      @include media-breakpoint-up(md) {
        width: calc(8/12 * 100%);
      }

      @include media-breakpoint-up(lg) {
        width: calc(6/12 * 100%);
      }

      @include media-breakpoint-up(xl) {
        width: 40rem;
      }
    }

    & > .pf-c-page__main-section {
      border-radius: 0.2rem;
      margin: 0 auto;
      padding: 0.5rem 1.5rem 1.5rem;
      flex: 0 1 auto;

      &:first-child {
        margin-top: 60px;
      }

      &:last-child {
        margin-bottom: 60px;
      }

    }
  }

  .pf-c-title {
    margin-bottom: 1rem;

    strong {
      font-weight: normal;
    }

    &.pf-m-2xl {
      font-size: 1.5rem;
      font-weight: normal;
      line-height: 1.175;
      margin-top: 1.5rem;
    }
  }

  .pf-c-form {
    @extend .kcform;

    padding: 0;
    grid-gap: 1.25rem;

    .pf-c-form__group {
      display: block;

      .pf-c-form__label,
      .pf-c-form__label-text {
        font-size: $font-size-small;
        font-weight: 400;
        color: $black;
        margin-bottom: 0;
        padding-bottom: 0.125rem;
        padding-top: 0;
      }
    }

    &-control {
      background-color: $white;
      border: 1px solid $mediumgrey;
      border-radius: 0.375rem;
      font-size: $font-size-base;
      padding: 0 1rem;
      color: $black;

      &:not(textarea) {
        height: 3rem;
      }

      &:focus {
        border-color: $innovationblue;
        border-width: 1px;
        box-shadow: none;
      }

      &:focus-visible {
        outline: transparent;
      }

      &.is-invalid {
        border-color: $red;
      }

      option {
        overflow: visible;
      }
    }

    &__actions {
      justify-content: space-between;
    }
  }

  .pf-c-data-list {
    border-top: 1px solid $bodygrey;

    &__item:not(.pf-m-expanded) {
      border-bottom: 1px solid $bodygrey;
    }

    .pf-c-data-list__item[aria-labelledby='sessions'] .pf-c-data-list__item-row > div {
      width: 100%;
      padding-bottom: 1rem;
    }

    .pf-c-data-list__item[aria-labelledby='applications-list'] {
      .pf-m-link {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        line-height: 24px;
        margin-top: -1px;
      }

      .pf-c-data-list__item-control {
        padding-top: 0;
      }
    }

    &__item-row {
      padding-top: 1rem;

      .pf-c-data-list__cell {
        padding-top: 0;

        @include media-breakpoint-up(md) {
          margin-right: 0;
          margin-left: 1rem;

          &:first-child {
            margin-left: 0;
          }
        }
      }

      .pf-c-data-list__cell:empty {
        display: none;
      }
    }
  }

  #nav-toggle,
  #mobileKebab {
    font-size: 1.5rem;

    svg {
      fill: $black;
      vertical-align: middle;
      transition: $standard-transition;
    }

    &:hover svg {
      fill: $blue;
      transition: $standard-transition;
    }
  }

  #delete-account .pf-c-expandable-section {
    &__toggle {
      @extend .btn, .btn-danger, .text-uppercase;
      //TO DO: update this in the portal scss
      background-color: $red;
      border-color: $red;

      &:hover,
      &:focus {
        background-color: $red;
        border-color: $red;
      }

      svg {
        display: none;

      }

      span {
        font-size: 0.875rem;
        font-weight: 600;
        margin-left: 0;
      }
    }

    &__content .pf-m-gutter .pf-l-grid__item {
      padding: 0;
      text-align: left;
    }

    .pf-l-grid {
      display: block;
    }
  }

  .pf-c-button {
    @extend .btn;

    font-size: 0.875rem;
    font-weight: 600;

    &::after {
      content: none;
    }

    &.pf-m-secondary,
    &#cancel-btn {
      @extend .btn-outline-primary;
    }

    &.pf-m-primary {
      @extend .btn-primary;
    }

    &.pf-m-plain {
      @extend .btn-light-flat;
    }

    &.pf-m-danger {
      @extend .btn-danger, .text-uppercase;
      //TO DO: update this in the portal scss
      background-color: $red;
      border-color: $red;

      &:hover,
      &:focus {
        background-color: $red;
        border-color: $red;
      }

      &.delete-button {
        width: auto;
        height: auto;
        margin-top: 1rem;
        float: right;
      }
    }
  }

  .pf-c-dropdown {
    &__menu-item {
      color: $black;

      &:hover {
        color: $black;
        background-color: $offwhite;
      }
    }
  }

  #welcomeScreen {

    .pf-c-page__main-section .pf-c-page__main-body {
      padding: 1.5rem;
      margin: 0 auto;
    }

    .pf-c-card__title h2.pf-u-display-flex {
      display: inline !important;
    }
  }
}
