.loginComponent {
  text-align: center;
}
.loginComponent ons-input {
  width: 100%;
}
.loginComponent span.month-label {
  position: absolute;
  left: 5px;
  bottom: 3px;
  opacity: 0.3;
}
.loginComponent ons-select select {
  height: 23px;
  background: none;
  line-height: 17px;
  border-bottom: 1px solid #afafaf;
}
.loginComponent .credit {
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}
.loginComponent .credit a {
  color: black;
}
.loginComponent .refresh-captcha {
  position: absolute;
  right: 60px;
  top: 50%;
  margin-top: -10px;
  opacity: 0.64;
  color: #2ea92e;
  cursor: pointer;
}
.loginComponent .loading-captcha {
  top: 50%;
  position: absolute;
  left: 50%;
  margin: -8px 0 0 -5px;
  color: blue;
}
.loginComponent .loadingCheckerboard {
  background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), /* checkered effect */ linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 2em 2em;
}
.loginComponent .field-title {
  font-size: 12px;
  opacity: 0.4;
}
.loginComponent .error-label {
  font-size: 14px;
  opacity: 0.91;
  color: red;
}
.loginComponent .warn {
  font-size: 15px;
  line-height: 16px;
  text-align: justify;
  margin-bottom: 15px;
  color: #ff7b7b;
}
.loginComponent .ref {
  margin: 10px auto 35px auto;
  opacity: 0.64;
  max-width: 270px;
  font-size: 20px;
}
.loginComponent .logo {
  height: 140px;
  width: 140px;
  object-fit: contain;
  margin-bottom: 10px;
}
.loginComponent .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) {
  .loginComponent .social-box {
    zoom: 0.75;
  }
}
.loginComponent .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;
}
.loginComponent .social-box .icon i {
  font-size: 20px;
}
.loginComponent .social-box .text {
  text-align: left;
}
.loginComponent .social-box .text .main-text {
  font-size: 16px;
}
.loginComponent .social-box .text .sub-text {
  font-size: 13px;
  opacity: 0.64;
}
.loginComponent .social-box.facebook {
  background-color: #3b5999;
  border-color: #3b5999;
}
.loginComponent .social-box.facebook .icon {
  border-color: #3b5999;
}
.loginComponent .social-box.facebook:hover {
  background-color: #32456d;
}
.loginComponent .social-box.google {
  background-color: #dc3e33;
  border-color: #dc3e33;
}
.loginComponent .social-box.google .icon {
  border-color: #dc3e33;
}
.loginComponent .social-box.google:hover {
  background-color: #bf3e35;
}
.loginComponent .social-box.email {
  background-color: #009788;
  border-color: #009788;
}
.loginComponent .social-box.email .icon {
  border-color: #009788;
}
.loginComponent .social-box.email:hover {
  background-color: #038477;
}
.loginComponent .social-box.free {
  background-color: #484848;
  border-color: #484848;
}
.loginComponent .social-box.free .icon {
  border-color: #484848;
}
.loginComponent .social-box.free:hover {
  background-color: #272727;
}
.loginComponent input[type=email],
.loginComponent input[type=password] {
  display: block;
  width: 100%;
  margin: 0 auto;
  outline: none;
  height: 100%;
  margin-top: 10px;
}
.loginComponent .login-button {
  width: 100%;
  margin: 0 auto;
}
.loginComponent .forgot-password {
  display: block;
  margin: 8px auto 0 auto;
  font-size: 14px;
}
.loginComponent .disableButtons {
  background-color: silver!important;
  pointer-events: none;
}