.form-block{
  display: block;
  text-align: center;
  position: relative;
  font-size: 14px;
  padding: 24px 0;
  margin: 50px auto;

  @include breakpoint(medium up) {
    padding: 24px;
    margin: 70px auto;
    &.form-group-double,&.form-group-single {
      width: 534px;
    }
  }

  @include breakpoint(xlarge up) {
    font-size: 16px;
    display: inline-block;
    //padding: 24px 12px;
    &.form-group-single{
      width: 384px;
    }
    &.form-group-double{
      width: 792px;
    }
  }

  &.create-account-page{
    .google{
      margin-bottom: 0;
    }
    .facebook{
      margin-bottom: 12px;
    }
  }
  .mail{
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .divider{
    border-bottom: 1px solid $off-white;
    margin: 24px 0 24px 0;
    .middle-or-block{
      display: none;
    }
    &.or{
      position: relative;
      margin: 24px 0 24px 0;
      .middle-or-block{
        color: $light-grey;
        width: 25px;
        background-color: white;
        z-index: 4;
        display: inline-block;
        left: 50%;
        bottom: -12px;
        transform: translateX(-50%);
        position: absolute;
      }
    }
  }
}
.border-form{
  @include breakpoint(medium up) {
    border: 2px solid $light-mint;
    border-radius: 4px;
  }
}
.have-account{
  margin-top: 24px;
  margin-bottom: 0;
  &.alt{
    margin-top: 12px;
  }
  h5{
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
  }
  span{
    margin-left: 2px;
    display: inline-block;
    a{
      color: $dark-mint;
      text-decoration: none;
    }
  }
}
.form-top-center{
  &.profile-icon{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;

    & > div{
      padding: 20px 0;
    }
  }

}
.circle{
  border-radius: 50%;
}