.terms-modal {
    @include media-breakpoint-up(md) {
      max-width: 587px;
    }

  .modal-content {
    background-color: $blue-card;
    color: $blue;
  }

  .modal-header, .modal-body {
    padding: 18px;

    @include media-breakpoint-up(md) {
      padding: 22px;
    }
  }

  .modal-header {
    border: none;
    padding-bottom: 12px;
    text-align: right;

    @include media-breakpoint-up(md) {
      padding-bottom: 13px;
    }
  }

  .modal-body {
    padding-top: 12px;

    @include media-breakpoint-up(md) {
      padding-top: 13px;
    }
  }

  &__title {
    font-size: $font-size-md;
    font-weight: $font-weight-bold;
    margin: 0 0 24px 0;

    @include media-breakpoint-up(md) {
      font-size: $font-size-lg;
    }

  }

  &__content {
    @include media-breakpoint-up(md) {
      font-size: $font-size-md;
    }
  }

  &__close {
    align-items: center;
    background-color: transparent;
    border: none;
    color: $blue;
    display: inline-flex;
    font-size: $font-size-base;
    margin-left: auto;
    padding: 0;

    &:hover, &:focus {
      color: $link-hover-color;
    }

    &:after {
      content: '\f00d';
      font-family: $font-family-icons-sharp;
      font-size: 16px;
      font-weight: $font-icon-weight-light;
      line-height: 16px;
      margin-left: 12px;

      @include media-breakpoint-up(md) {
        font-size: 24px;
        line-height: 24px;
      }
    }

    @include media-breakpoint-up(md) {
      font-size: $font-size-md;
    }
  }

  &__link-wrapper {
    margin-top: 50px;

    &__link {
      font-weight: $font-weight-normal;
      text-decoration: none;

      @include media-breakpoint-up(md) {
        font-size: $font-size-md;
      }

      &:hover, &:focus {
        text-decoration: none;
      }

      span {
        text-decoration: underline;
      }

      i {
        color: $black;
        font-size: 18px;
      }
    }
  }
}