// Partial / Auth OG

.auth {
  margin-top: 20px;

  .outer{
    margin-top:56px;
    margin-bottom:50px;
    max-width:350px;
    margin-left:auto;
    margin-right:auto;
    background-color:#fff;
    box-shadow:0 0 15px 0 rgba(0,0,0,0.15);
    padding:20px 20px 50px 20px;
  }

  .jojo-header{
    z-index: 1;
    color:$black;

    .jojo{
      padding-top:10px;
      display:block;
      text-align: center;
  
      & > .inner{
        display:inline-block;
        width:230px;
        height:230px;
        background-image:url(https://images.dragonchain.com/brand/jojo.svg);
        background-size:230px 230px;
      }
    }
    
    .logo{
      height: 230px;
      margin-left:30px;
      font-weight:700;
      width:220px;
      height:40px;
      a{
        color:#000;
      }
    }
  }

  .title{
    @include headline-cloud-effect;
    display:inline-block;
    vertical-align:baseline;
    color:$blue-dark;
    font-size:40px;
    line-height:45px;
    font-weight:700;
    position:relative;
    margin-bottom:10px;
  }

  .middle {
    margin:10px;

    p{
      font-size:15px;
      color:$grey;
    }
    
    a{
      @include link-underline(rgba(0,0,0,0), $blue);
      padding-bottom:2px;
      
      font-size:15px;
      line-height:19px;
      color:$grey;
      font-weight:500;
      text-decoration:none;
      
      &:hover{
        color:$black;
      }
    }

    .message-alert{
      display: flex;
      padding-top:16px;
      font-size:15px;
      line-height:19px;
      font-weight:500;
      color:$black;

      div{margin-right: 6px;}
    }
  }

  .auth-message{
    margin-top:30px;

    a{
      @include link-underline(rgba(0,0,0,0), $blue);
      padding-bottom:2px;
      
      font-size:15px;
      line-height:19px;
      color:$grey;
      font-weight:500;
      text-decoration:none;
      
      &:hover{
        color:$black;
      }
    }

    p{
      font-size:15px;
      color:$grey;
    }

  }

  .actions {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .verifyText {
    margin-bottom: 6px;
  }

  .terms {
    display: flex;
    input { margin-right: 5px;  margin-bottom: 20px; }
    p {margin-left: 10px; }
    
  }

  .loading {
    text-align: center;
      
    h1{
      @include headline-cloud-effect;
      vertical-align:baseline;
      color:$blue-dark;
      font-size:40px;
      line-height:45px;
      font-weight:700;
      position:relative;
      margin-top:20px;
      margin-bottom:10px;
    }
  }

  @include breakpoint($phone){
    .header{
      .logo{
        margin-top:18px;
        position:relative;
        top:auto;
        margin-left:30px;
        margin-bottom:20px;
      }
    }
  }
}