.revealable-password__wrapper {
  position: relative;
}

.revealable-password__wrapper--admin-login {
  width: 80%;
  max-width: 290px;
  height: 34px;
  margin-top: 10px;
  margin-bottom: 10px;
}

form#formPw .revealable-password__wrapper,
form#pwForm .revealable-password__wrapper {
  display: inline-block;
  height: 25px;
  width: 50% !important;
  max-width: 50% !important;
  margin: 2px 0;
}

div#general .revealable-password__wrapper {
  display: inline-block;
  width: 237px !important;
  height: 29px !important;
  margin: 2px 0;
}

form#loginForm .revealable-password__wrapper,
form#registerForm .revealable-password__wrapper {
  display: block;
  margin: 10px auto 25px;
}

form#loginForm .revealable-password__wrapper {
  max-width: 350px;
}

form#registerForm .revealable-password__wrapper {
  max-width: 500px;
}

.revealable-password__wrapper input.revealable {
  width: 100% !important;
  height: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: white !important;
  padding-right: 28px !important;
  box-sizing: border-box;
}

.revealable-password__wrapper--admin-login input.revealable,
form#loginForm .revealable-password__wrapper input.revealable {
  padding-left: 28px;
}

form#loginForm .revealable-password__wrapper input.revealable {
  height: auto !important;
}

input.revealable-password__text[hidden] {
  display: none;
}

input.revealable:not(:has(~ input.revealable-password__text[hidden])) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

input.revealable-password__text {
  background: transparent;
  box-sizing: border-box;
  display: block;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
}

.revealable-password__wrapper--admin-login input.revealable-password__text {
  outline: none;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #eee;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  max-width: 290px;
  font-size: 0.8rem;
}

form#formPw input.revealable-password__text {
  margin: 0;
}

form#pwForm .revealable-password__text {
  border-radius: 3px;
  transition: all ease 0.2s;
  height: 25px;
  border: 1px solid #ddd;
  font-size: 0.8rem;
  margin: 0;
  width: 100%;
}

div#general .revealable-password__text {
  margin: 0;
  width: 100%;
}

form#loginForm .revealable-password__text,
form#registerForm .revealable-password__text {
  margin: 0;
  border: none;
  text-align: center;
  outline: none;
  border-bottom: 2px solid #1493BE;
  background: #fff;
  width: 100%;
}

form#loginForm input.revealable-password__text {
  z-index: 2;
}

.revealable-password__wrapper .revealable-password__button {
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTU3Mi41IDI0MS40QzUxOC4zIDEzNS42IDQxMC45IDY0IDI4OCA2NFM1Ny43IDEzNS42IDMuNSAyNDEuNGEzMi40IDMyLjQgMCAwIDAgMCAyOS4yQzU3LjcgMzc2LjQgMTY1LjEgNDQ4IDI4OCA0NDhzMjMwLjMtNzEuNiAyODQuNS0xNzcuNGEzMi40IDMyLjQgMCAwIDAgMC0yOS4yek0yODggNDAwYTE0NCAxNDQgMCAxIDEgMTQ0LTE0NCAxNDMuOSAxNDMuOSAwIDAgMSAtMTQ0IDE0NHptMC0yNDBhOTUuMyA5NS4zIDAgMCAwIC0yNS4zIDMuOCA0Ny45IDQ3LjkgMCAwIDEgLTY2LjkgNjYuOUE5NS44IDk1LjggMCAxIDAgMjg4IDE2MHoiLz48L3N2Zz4=");
  cursor: pointer;
}

.revealable-password__wrapper .revealable-password__button--password-visible {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM4LjggNS4xQzI4LjQtMy4xIDEzLjMtMS4yIDUuMSA5LjJTLTEuMiAzNC43IDkuMiA0Mi45bDU5MiA0NjRjMTAuNCA4LjIgMjUuNSA2LjMgMzMuNy00LjFzNi4zLTI1LjUtNC4xLTMzLjdMNTI1LjYgMzg2LjdjMzkuNi00MC42IDY2LjQtODYuMSA3OS45LTExOC40YzMuMy03LjkgMy4zLTE2LjcgMC0yNC42Yy0xNC45LTM1LjctNDYuMi04Ny43LTkzLTEzMS4xQzQ2NS41IDY4LjggNDAwLjggMzIgMzIwIDMyYy02OC4yIDAtMTI1IDI2LjMtMTY5LjMgNjAuOEwzOC44IDUuMXpNMjIzLjEgMTQ5LjVDMjQ4LjYgMTI2LjIgMjgyLjcgMTEyIDMyMCAxMTJjNzkuNSAwIDE0NCA2NC41IDE0NCAxNDRjMCAyNC45LTYuMyA0OC4zLTE3LjQgNjguN0w0MDggMjk0LjVjOC40LTE5LjMgMTAuNi00MS40IDQuOC02My4zYy0xMS4xLTQxLjUtNDcuOC02OS40LTg4LjYtNzEuMWMtNS44LS4yLTkuMiA2LjEtNy40IDExLjdjMi4xIDYuNCAzLjMgMTMuMiAzLjMgMjAuM2MwIDEwLjItMi40IDE5LjgtNi42IDI4LjNsLTkwLjMtNzAuOHpNMzczIDM4OS45Yy0xNi40IDYuNS0zNC4zIDEwLjEtNTMgMTAuMWMtNzkuNSAwLTE0NC02NC41LTE0NC0xNDRjMC02LjkgLjUtMTMuNiAxLjQtMjAuMkw4My4xIDE2MS41QzYwLjMgMTkxLjIgNDQgMjIwLjggMzQuNSAyNDMuN2MtMy4zIDcuOS0zLjMgMTYuNyAwIDI0LjZjMTQuOSAzNS43IDQ2LjIgODcuNyA5MyAxMzEuMUMxNzQuNSA0NDMuMiAyMzkuMiA0ODAgMzIwIDQ4MGM0Ny44IDAgODkuOS0xMi45IDEyNi4yLTMyLjVMMzczIDM4OS45eiIvPjwvc3ZnPg==");
}