.AuthorizePage {
  .OAuth-Header {
    text-align: center;
    margin-bottom: 30px;

    h2 {
      font-size: 3em;
      margin-bottom: .1em;
    }

    p {
      font-size: 1.2em;
      margin-top: .1em;
    }
  }

  .OAuth-Body {
    max-width: 60%;
    margin: 0 auto;

    .OAuth-User {
      display: flex;
      align-items: center;
      justify-content: center;

      .OAuth-User-Avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }

      .OAuth-User-Info {
        margin-left: 10px;
        white-space: nowrap;

        h4 {
          margin: 0;
        }

        small {
          opacity: .5;
        }
      }
    }

    .OAuth-Details {
      display: flex;

      .OAuth-App {
        min-width: 300px;
      }

      .OAuth-Scopes {
        flex: 1;
      }
    }

    .OAuth-App, .OAuth-Scopes {
      margin: 20px 0;

      > p {
        font-weight: bold;
        font-size: 1.2em;
      }
    }

    .OAuth-App {
      text-align: center;

      .OAuth-App-Info {
        color: @text-color;
        display: inline-block;
        text-decoration: none;

        .OAuth-App-Icon {
          width: 64px;
          height: 64px;
        }

        p {
          font-weight: bolder;
          font-size: 2em;
          margin-bottom: 0;
        }
        small {
          font-size: 1.2em;
          opacity: .5;
        }
      }
    }

    .OAuth-Scopes {
      text-align: center;

      .OAuth-Scope {
        display: flex;
        text-align: left;

        .OAuth-ScopeIcon {
          width: 40px;
          height: 40px;
        }

        .OAuth-ScopeDetail {
          margin-left: 10px;

          h4 {
            margin: 0;
          }
        }
      }
    }

    .OAuth-Action {
      margin: 30px 0;
    }
  }
}

@media screen and (max-width: @screen-phone-max) {
  .AuthorizePage .OAuth-Body {
    max-width: 100%;

    .OAuth-Details {
      flex-direction: column;

      .OAuth-Scopes {
        padding: 0 30px;
      }
    }
  }
}