.login-form {
  text-align: center;
  width: 80%;
  margin: 20px auto 0;
}
.login-form .warn {
  font-size: 15px;
  line-height: 16px;
  text-align: justify;
  margin-bottom: 15px;
  color: #ff7b7b;
}
.login-form .ref {
  margin: 10px auto 35px auto;
  opacity: 0.64;
  max-width: 270px;
  font-size: 20px;
}
.login-form .logo {
  height: 140px;
  width: 140px;
  object-fit: contain;
  margin-bottom: 10px;
}
.login-form .social-box {
  color: white;
  cursor: pointer;
  border-radius: 5px;
  max-width: 300px;
  transition-property: box-shadow, color, background-color, border-color;
  transition-duration: .4s;
  transition-timing-function: ease;
  margin: auto;
  margin-bottom: 10px;
  min-height: 40px;
  overflow: hidden;
  /*&:hover{*/
  /*background-color: white!important;*/
  /*.icon{*/
  /*background-color: transparent;*/
  /*box-shadow: none;*/
  /*border-right: 1px solid transparent;*/
  /*}*/
  /*}*/
}
@media (max-height: 450px) {
  .login-form .social-box {
    zoom: 0.75;
  }
}
.login-form .social-box .icon {
  width: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-top: 12px;
  box-sizing: border-box;
  background: #00000024;
  box-shadow: 0 0 10px #0000006b;
  margin-right: 15px;
}
.login-form .social-box .icon i {
  font-size: 20px;
}
.login-form .social-box .text {
  text-align: left;
}
.login-form .social-box .text .main-text {
  font-size: 16px;
}
.login-form .social-box .text .sub-text {
  font-size: 13px;
  opacity: 0.64;
}
.login-form .social-box.facebook {
  background-color: #3b5999;
  border-color: #3b5999;
}
.login-form .social-box.facebook .icon {
  border-color: #3b5999;
}
.login-form .social-box.facebook:hover {
  background-color: #32456d;
}
.login-form .social-box.google {
  background-color: #dc3e33;
  border-color: #dc3e33;
}
.login-form .social-box.google .icon {
  border-color: #dc3e33;
}
.login-form .social-box.google:hover {
  background-color: #bf3e35;
}
.login-form .social-box.email {
  background-color: #009788;
  border-color: #009788;
}
.login-form .social-box.email .icon {
  border-color: #009788;
}
.login-form .social-box.email:hover {
  background-color: #038477;
}
.login-form .social-box.free {
  background-color: #484848;
  border-color: #484848;
}
.login-form .social-box.free .icon {
  border-color: #484848;
}
.login-form .social-box.free:hover {
  background-color: #272727;
}
.login-form input[type=email],
.login-form input[type=password] {
  display: block;
  width: 100%;
  margin: 0 auto;
  outline: none;
  height: 100%;
  padding-top: 15px;
  padding-bottom: 16px;
}
.login-form .login-button {
  width: 100%;
  margin: 0 auto;
}
.login-form .forgot-password {
  display: block;
  margin: 8px auto 0 auto;
  font-size: 14px;
}