html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.login-crab {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}

.login-crab__side {
  float: left;
  width: 48%;
  height: 100%;
}

.login-crab__content {
  float: right;
  width: 48%;
  height: 100%;
  position: relative;
}

.login-crab__loading .login-crab__side,
.login-crab__loading .login-crab__form {
  background: linear-gradient(100deg,
      #F2F2F2 40%,
      #fefefe 50%,
      #F2F2F2 60%) #F2F2F2;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 2s login-crab__loading ease-in-out infinite;
}

.login-crab__loading .login-crab__side {
  height: 100%;
}

.login-crab__loading .login-crab__form {
  width: 500px;
  height: 500px;
  border-radius: 5px;
  margin: 0 auto;
  position: absolute;
  top: 225px;
  left: 250px;
}

@keyframes login-crab__loading {
  to {
    background-position-x: -20%;
  }
}