/* span that wraps the password input */
.password-container {
  position: relative; 
  width: 155px; /* Set a specific width for the container */
}

.password-container input,
#txtPassordVerify { 
  width: 153px; /* Input takes up the full width of the container */
  padding-right: 30px; /* Padding to prevent text from going under the icon */
}

/* button to toggle password */
.toggle-password {
  border: none;
  background-color: transparent;
  /* Position the icon relative to the container */
  position: absolute; 
  right: 10px; /* Position from the right edge */
  top: 50%; /* Start at the vertical center */
  transform: translateY(-38%); /* Adjust for vertical centering */
  width: 18px; /* Width for the svg */
  height: 16px; /* Height for the svg */
}

/* Shows an open eye */
.hide-password {
  background-image: url('../img/icons/show-password.svg');
  background-size: cover;
}

/* Shows an closed eye */
.show-password {
  background-image: url('../img/icons/hide-password.svg');
  background-size: cover;
}