.login-form {
  background-color: var(--formBackground-color);
  border-radius: 15px;
  padding: 40px 25px;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.login-form__title {
  font-size: 30px;
  border-bottom: 1px solid var(--titleSeparator-color);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.login-form__error {
  color: var(--error-color);
  margin-top: 5px;
  font-size: 14px;
}

.login-form__btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--btnText-color);
}

.login-form__btn:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--btnText-color);
}

@media (max-width: 472px) {
  .login-form__btn {
    min-width: 236px;
  }
}

.login-form__register {
  color: var(--secondary-color);
}

.login-form__register:hover {
  color: var(--secondary-color);
}

/* Base Social Button */
.login-form__social-btn {
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: center;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: var(--socialNetworkBtnText-color);
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-form__social-btn:hover {
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: center;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: var(--socialNetworkBtnText-color);
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-form__social-btn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}

.login-form__social-btn:focus {
  outline: none;
}

.login-form__social-btn:active {
  box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}

/* Facebook Button */
.login-form__social-btn--Facebook {
  background-color: var(--facebookPrimaryBtn-color);
  border-color: var(--facebookPrimaryBtn-color);
}

.login-form__social-btn--Facebook:before {
  border-right: var(--facebookBtnSeparator-color) 1px solid;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png")
    6px 6px no-repeat;
}

.login-form__social-btn--Facebook:hover,
.login-form__social-btn--Facebook:focus {
  background-color: var(--facebookSecondaryBtn-color);
  color: var(--socialNetworkBtnText-color);
}

/* Google Button*/
.login-form__social-btn--Google {
  background-color: var(--googlePrimaryBtn-color);
}

.login-form__social-btn--Google:before {
  border-right: var(--googleBtnSeparator-color) 1px solid;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png")
    6px 6px no-repeat;
}

.login-form__social-btn--Google:hover,
.login-form__social-btn--Google:focus {
  background-color: var(--googleSecondaryBtn-color);
  color: var(--socialNetworkBtnText-color);
}

.social-account-provider {
  text-decoration: none !important;
}