.trusona-easy-login-button,
.trusona-login-button,
.trusona-no-passwords-login-button,
.no-passwords-login-button,
.trusona-consumer-button,
.trusona-employee-button {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.5);
  color: transparent;
  display: block;
  height: 50px;
  margin: auto;
  position: relative;
  text-indent: -9999px;
  width: 300px;
  transition: unset;
}

.trusona-easy-login-button:hover,
.trusona-login-button:hover,
.trusona-no-passwords-login-button:hover,
.no-passwords-login-button:hover,
.trusona-consumer-button:hover,
.trusona-employee-button:hover, {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

.trusona-easy-login-button:before,
.trusona-easy-login-button:after,
.trusona-login-button:before,
.trusona-login-button:after,
.trusona-no-passwords-login-button:before,
.trusona-no-passwords-login-button:after,
.no-passwords-login-button:before,
.no-passwords-login-button:after,
.trusona-consumer-button:before,
.trusona-consumer-button:after,
.trusona-employee-button:before,
.trusona-employee-button:after {
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: opacity 300ms;
}

.trusona-easy-login-button:before,
.trusona-login-button:before,
.trusona-no-passwords-login-button:before,
.no-passwords-login-button:before,
.trusona-consumer-button:before,
.trusona-employee-button:before {
  background-position: 0 -50px;
}

.trusona-easy-login-button:after,
.trusona-login-button:after,
.trusona-no-passwords-login-button:after,
.no-passwords-login-button:after,
.trusona-consumer-button:after,
.trusona-employee-button:after {
  background-position: 0 -100px;
  transition: opacity 600ms;
}

.trusona-easy-login-button:hover:before, .trusona-easy-login-button:hover:after,
.trusona-login-button:hover:before, .trusona-login-button:hover:after,
.trusona-no-passwords-login-button:hover:before, .trusona-no-passwords-login-button:hover:after,
.no-passwords-login-button:hover:before, .no-passwords-login-button:hover:after,
.trusona-consumer-button:hover:before, .trusona-consumer-button:hover:after,
.trusona-employee-button:hover:before, .trusona-employee-button:hover:after {
  opacity: 1;
}

.trusona-easy-login-button:active:before, .trusona-easy-login-button:active:after,
.trusona-login-button:active:before, .trusona-login-button:active:after,
.trusona-no-passwords-login-button:active:before, .trusona-no-passwords-login-button:active:after,
.no-passwords-login-button:active:before, .no-passwords-login-button:active:after
.trusona-consumer-button:active:before, .trusona-consumer-button:active:after,
.trusona-employee-button:active:before, .trusona-employee-button:active:after {
  opacity: 0;
}

.trusona-easy-login-button:active,
.trusona-login-button:active,
.trusona-no-passwords-login-button:active,
.no-passwords-login-button:active,
.trusona-consumer-button:active,
.trusona-employee-button:active {
  background-position: 0 -150px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.trusona-login-button,
.trusona-login-button:before,
.trusona-login-button:after {
  background-image: url('../img/trusona-login.svg');
}

.trusona-no-passwords-login-button,
.trusona-no-passwords-login-button:before,
.trusona-no-passwords-login-button:after {
  background-image: url('../img/trusona-nopasswords-login.svg');
}


.no-passwords-login-button,
.no-passwords-login-button:before,
.no-passwords-login-button:after {
  background-image: url('../img/nopasswords-login.svg');
}

.trusona-easy-login-button,
.trusona-easy-login-button:before,
.trusona.easy-login-button:after,
.trusona-consumer-button,
.trusona-consumer-button:before,
.trusona-consumer-button:after {
  background-image: url('../img/trusona-easy-login.svg')
}

.trusona-employee-button,
.trusona-employee-button:before,
.trusona-employee-button:after {
  background-image: url('../img/login-with-trusona.svg')
}