SideBySideAuth0 Style

auth0.css

body {
  marign: 0;
}

#auth0-lock-container-1.auth0-lock-container {
  min-height: 100vh;
}

#auth0-lock-container-1 .auth0-lock-overlay {
  display:none;
}

#auth0-lock-container-1 .auth0-lock-center {
  display:block;
  overflow-y: auto;
  background: linear-gradient(45deg,#6fa8ef 0%,#5a65db 50%);
}

#auth0-lock-container-1 .auth0-lock-widget {
  width: 50%;
  box-shadow: none;
  background: #fff;
  min-height: 100vh;
  margin: 0px 0px 0px 0px;
  float: right;
  border-radius: 0;
}

#auth0-lock-container-1 .auth0-lock.auth0-lock .auth0-lock-header-bg {
  background: #fff;
}

#auth0-lock-container-1 .auth0-lock-header-bg-blur {
  background: none!important;
}

#auth0-lock-container-1 .auth0-lock-header-avatar {
  margin: 0px auto; 
  margin-top: 20px;
}

#auth0-lock-container-1 .auth0-lock-widget-container {
  padding-top: 40px;
}

#auth0-lock-container-1 .auth0-lock.auth0-lock .auth0-lock-widget {
  -webkit-transform: translateX(100%) scale(0.8);
  transform: translateX(100%) scale(0.8);
}

#auth0-lock-container-1 .auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-widget {
  -webkit-transform: translateX(0%) scale(1);
  transform: translateX(0%) scale(1);
}

@media (max-width: 850px) {
  #auth0-lock-container-1 .auth0-lock-widget {
    width: 75%;
  }
}

@media (max-width: 650px) {
  #auth0-lock-container-1 .auth0-lock-widget {
    width: 100%;
  }
}