#alternative-logins a.button::before {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  height: 18px;
  display: inline-block;
  vertical-align: bottom;
}

#alternative-logins a.button[href*="/sociallogin/oauth/facebook"]::before {
  background-image: url(../img/button/facebook.svg);
  width: 14px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/google"]::before {
  background-image: url(../img/button/google.svg);
  width: 23px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/amazon"]::before {
  background-image: url(../img/button/amazon.svg);
  width: 26px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/twitter"]::before {
  background-image: url(../img/button/twitter.svg);
  width: 25px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/GitHub"]::before {
  background-image: url(../img/button/github.svg);
  width: 23px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/discord"]::before {
  background-image: url(../img/button/discord.svg);
  width: 21px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/slack"]::before {
  background-image: url(../img/button/slack.svg);
  width: 21px;
}
#alternative-logins a.button[href*="/sociallogin/oauth/QQ"]::before {
  background-image: url(../img/button/qq.svg);
  width: 21px;
}

#alternative-logins a.button[href*="/sociallogin/oauth/facebook"],
#alternative-logins a.button[href*="/sociallogin/oauth/google"],
#alternative-logins a.button[href*="/sociallogin/oauth/amazon"],
#alternative-logins a.button[href*="/sociallogin/oauth/twitter"],
#alternative-logins a.button[href*="/sociallogin/oauth/GitHub"],
#alternative-logins a.button[href*="/sociallogin/oauth/discord"],
#alternative-logins a.button[href*="/sociallogin/oauth/slack"],
#alternative-logins a.button[href*="/sociallogin/oauth/QQ"],
#alternative-logins a.button.gitlab,
#alternative-logins a.button.openid,
#alternative-logins a.button.paypal,
#alternative-logins a.button.stackoverflow,
#alternative-logins a.button.salesforce,
#alternative-logins a.button.yahoo {
  border: 0;
  color: #ffffff;
}

/* Button colors */
#alternative-logins a.button[href*="/sociallogin/oauth/facebook"] {
  background-color: #3c5a99;
}
#alternative-logins a.button[href*="/sociallogin/oauth/google"] {
  background-color: #DB4437;
}
#alternative-logins a.button[href*="/sociallogin/oauth/amazon"] {
  background-color: #ff9900;
}
#alternative-logins a.button[href*="/sociallogin/oauth/twitter"] {
  background-color: #1da1f2;
}
#alternative-logins a.button[href*="/sociallogin/oauth/GitHub"] {
  background-color: #333333;
}
#alternative-logins a.button[href*="/sociallogin/oauth/discord"] {
  background-color: #7289DA;
}
#alternative-logins a.button[href*="/sociallogin/oauth/slack"] {
  background-color: #611f69;
}
#alternative-logins a.button[href*="/sociallogin/oauth/QQ"] {
  background-color: #0052d9;
}
#alternative-logins a.button.gitlab {
  background-color: #3f3177;
}
#alternative-logins a.button.openid {
  background-color: #b3b3b3;
}
#alternative-logins a.button.paypal {
  background-color: #253B80;
}
#alternative-logins a.button.yahoo {
  background-color: #4d00ae;
}
#alternative-logins a.button.stackoverflow {
  background-color: #BCBBBB;
}
#alternative-logins a.button.salesforce {
  background-color: #009EDB;
}

/* Predefined buttons icons */
#alternative-logins a.button.gitlab::before {
  background-image: url(../img/button/gitlab.svg);
  width: 24px;
}
#alternative-logins a.button.openid::before {
  background-image: url(../img/button/openid.svg);
  width: 24px;
}
#alternative-logins a.button.paypal::before {
  background-image: url(../img/button/paypal.svg);
  width: 21px;
}
#alternative-logins a.button.yahoo::before {
  background-image: url(../img/button/yahoo.svg);
  width: 31px;
}
#alternative-logins a.button.stackoverflow::before {
  background-image: url(../img/button/stackoverflow.svg);
  width: 21px;
}
#alternative-logins a.button.salesforce::before {
  background-image: url(../img/button/salesforce.svg);
  width: 29px;
}

/* Personal settings styles */
.disconnect-logins a::before {
  content: "";
  width: 25px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../img/close.svg);
}
.disconnect-logins a:hover {
  color: var(--color-primary-element);
}
.disconnect-logins li {
  margin-bottom: 5px;
}
.disconnect-logins li:last-child {
  margin-bottom: 20px;
}
.disconnect-logins li a {
  font-size: 14px;
}

.sociallogin-connect #alternative-logins li {
  height: unset;
  display: inline-flex;
}
.sociallogin-connect #alternative-logins li a {
  padding: 12px 24px;
}