.account-panel {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-entity-wordmark[hidden] {
  display: none !important;
}

.password-field {
  display: block;
  position: relative;
}

.password-field input {
  padding-right: 44px;
}

.password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #061d2b;
  cursor: pointer;
  display: flex;
  height: 38px;
  justify-content: center;
  padding: 8px;
  position: absolute;
  right: 2px;
  top: 0;
  width: 40px;
}

.password-toggle svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 21px;
}

.password-toggle.is-visible svg {
  opacity: 0.72;
}

.account-panel[hidden] {
  display: none;
}

.account-card {
  border: 1px solid rgba(255, 242, 0, 0.45);
  max-width: 520px;
  padding: 28px;
  width: 100%;
}

.account-card h2 {
  margin: 0 0 8px;
}

.account-card form {
  display: grid;
  gap: 16px;
}

.account-card .primary {
  padding: 0 18px;
}

input,
input[name="email"] {
  background: #fff200;
  border-color: rgba(255, 242, 0, 0.55);
  caret-color: #061d2b;
  color: #061d2b;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff200 inset !important;
  -webkit-text-fill-color: #061d2b !important;
  caret-color: #061d2b;
}

.text-action {
  background: transparent;
  border: 0;
  color: #fff200;
  cursor: pointer;
  font: inherit;
  padding: 2px;
  text-decoration: underline;
}
