.account-form {
  display: flex;
  position: relative;
  padding-left: 105px;
  padding-bottom: 60px;
  font-size: var(--text-size-ms);
  line-height: 1.5556;
  color: var(--text-dark);
}
.account-form:before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  left: 60px;
  width: 48px;
  height: 34px;
  margin-top: -20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAARVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////9SnXPCAAAAF3RSTlMAZmMFDFRNEF9HMB8JWUE7QzYlHDgpF5nP0QcAAAFoSURBVGje7ZjJbsMwDERLWpv3Lcn/f2ovaoKSKUqTOhQF5zrz8KLAMCB/eDwej8fzPXlcU0H4IWYu3GIdiQRXuTDUlVRwkZsSgkIg5s4IoBCIuSmCQiDnQgKF4AI3oEJwgQsICsEF7gYagZzLUSWQcyOqBHJuBZVAziWdQM4VnUDOoU4g50ApABe4wAUucIELXOCCfyb4JbnuZlq04s46TLRoxQ11uNCiFbfV4U4LE8fvMTiSwsbxe8z8IEUrrq8n7TtS2Dh+VR1o04brlrrDQJpG3FkET7OBm+a6KyNp2nDdCjVpIpWF438k4IO3dq7b4Ss9b+1c2J67mFlr58YEzxy0tHP59prhTlszNw0RX8NtIrWN6/KxILyC/GWi5rrwOPaefMbdAp2pOXiTsrKZngMePOg5LRyfLZmN9BwfzgP7GWqODzG9mak5Pkz3wHodx4cl9m9Xdg7LHPv1fmZ+Rinn8Xg8fzafiswYK62S59QAAAAASUVORK5CYII=) no-repeat 50% 50%;
  background-size: contain;
  filter: brightness(0.75);
}
.account-form fieldset {
  width: 340px;
  max-width: var(--section-width);
  margin: 0;
  padding: 0;
  border: 0 none;
  overflow: hidden;
}
.account-form legend {
  display: block;
  margin-bottom: 15px;
  font-size: calc(var(--text-size-m) * 2);
  font-weight: var(--text-weight-bold);
  line-height: 1.45;
  letter-spacing: 2px;
  letter-spacing: 1.78px;
  white-space: nowrap;
  text-align: left;
}
.account-form p {
  display: flex;
  margin: 15px 0;
  gap: 20px;
  font-weight: var(--text-weight-normal);
  letter-spacing: 1px;
}
.account-form p label {
  flex: 1;
}
.account-form p .label {
  display: block;
  margin-bottom: 6px;
  font-weight: var(--text-weight-normal);
  letter-spacing: 1px;
}
.account-form label:has([required]) .label:after {
  content: "*";
  display: inline-block;
  margin: 0 5px;
  font-weight: 700;
  color: var(--invalid);
  vertical-align: top;
}
.account-form p input, .account-form p textarea {
  display: block;
  appearance: none;
  width: 100%;
  max-width: var(--section-width);
  height: 44px;
  padding: 0 15px;
  font-size: var(--text-size-s);
  font-family: Roboto;
  font-weight: var(--text-weight-normal);
  letter-spacing: 1px;
  color: var(--text-dark);
  background: transparent;
  border-image: none;
  box-shadow: none;
  border: 1px solid var(--paragraph-fill-thin);
  box-sizing: border-box;
  border-radius: 0;
}
.account-form p textarea {
  height: auto;
  padding-top: 8px;
  resize: none;
}
.account-form p:has(input[type="password"]), .account-form p:has(input.password-input) {
  display: block;
}
.account-form p input[type="password"], .account-form p input.password-input {
  display: inline-block;
  letter-spacing: 2px;
  padding-right: 40px;
}
.account-form p input[type="password"] {
  font-family: Arial;
  font-weight: var(--text-weight-bold);
}
.account-form input:focus, .account-form textarea:focus {
  outline: none;
}
.account-form input::placeholder, .account-form textarea::placeholder, .account-form p input[type="password"]::placeholder {
  font-size: var(--text-size-xs);
  font-family: Roboto;
  font-weight: var(--text-weight-normal);
  letter-spacing: 1px;
  color: var(--paragraph-fill-opacity);
}
/* .account-form input:focus {
  background-color: rgba(255,255,255,.4);
} */
/* .account-form input:focus::placeholder {
  color: var(--paragraph-gray-opacity);
} */
.account-form input[type="submit"], .account-form button {
  display: block;
  position: relative;
  width: 100%;
  max-width: var(--section-width);
  height: 45px;
  margin-top: 45px;
  font-size: var(--text-size-ms);
  font-family: Roboto;
  font-weight: var(--text-weight-head);
  letter-spacing: 1px;
  color: var(--text-light);
  background-color: var(--paragraph-fill);
  border: 0 none;
  border-radius: 0;
  cursor: pointer;
}
.account-form input[type="submit"]:hover, .account-form button:hover {
  color: var(--text-light);
  transition: var(--transition);
  background-color: var(--paragraph-fill-hover);
}
.account-form.loading {
  cursor: wait;
}
.account-form.loading > * {
  pointer-events: none;
}
.account-form.loading input[type="submit"], .account-form.loading button {
  color: var(--text-thin);
  cursor: wait;
  opacity: .5;
}
.account-form.loading button:before {
  content: "";
  display: block;
  position: absolute;
  left: 14px;
  top: 0;
  width: 20px;
  height: 100%;
  opacity: .8;
  filter: brightness(.5) invert(1);
  background: url(data:image/gif;base64,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) no-repeat 50% 50%;
  background-size: contain;
}
.account-form .error {
  display: block;
  font-size: var(--text-size-xs);
  color: var(--invalid);
  text-align: center;
  margin-top: 45px;
  margin-bottom: 0;
}
.account-form .error ~ p:has(button) {
  margin-top: 10px;
}
.account-form .error ~ p button {
  margin-top: 0;
}
.account-form .agree {
  display: block;
  margin-top: 11px;
  font-size: var(--text-size-xs);
  line-height: 14px;
  font-weight: var(--text-weight-normal);
  letter-spacing: 1px;
  color: var(--text-dark);
  cursor: pointer;
  white-space: nowrap;
}
.account-form input[type="checkbox"] {
  position: relative;
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  color: var(--paragraph-fill);
  box-shadow: none;
  border-image: none;
  border-radius: 0;
  vertical-align: top;
  border: 1px solid currentColor;
  cursor: pointer;
}
.account-form input[type="checkbox"]:checked {
  background: currentColor;
}
.account-form input[type="checkbox"]:checked:after {
  content: "";
  display: block;
  position: absolute;
  left: -2px;
  top: -1px;
  width: 14px;
  height: 8px;
  border: 3px solid #fff;
  border-width: 0 0 3px 3px;
  transform: scale(.5) rotate(-45deg);
}
.account-form .tips {
  display: block;
  margin: 5px 0;
  color: var(--text-dark);
  font-size: var(--text-size-xxxs);
  font-weight: var(--text-weight-normal);
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
}
.account-form .forgot-tips {
  margin-top: 15px;
}
.account-form .text {
  display: block;
  margin: 5px 0 0 0;
}
.account-form a {
  display: inline-block;
}
.account-form a, .account-form a:visited {
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 15%;
  text-decoration-color: var(--text-gray);
  text-decoration-thickness: 1px;
}
.account-form p.invalid, .account-form label.invalid {
  position: relative;
}
.account-form p.invalid:after, .account-form label.invalid:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  left: 12px;
  width: 10px;
  height: 10px;
  color: var(--invalid);
  border: 1px solid currentColor;
  border-width: 1px 0 0 1px;
  background-color: var(--white);
  transform: rotate(45deg);
}
.account-form p.invalid:before, .account-form label.invalid:before {
  content: attr(data-invalid);
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -4px;
  left: 0;
  padding: 9px 12px;
  font-size: var(--text-size-xs);
  font-weight: var(--text-weight-normal);
  line-height: 16px;
  letter-spacing: 1px;
  color: var(--invalid);
  background-color: var(--white);
  border: 1px solid currentColor;
  transform: translate(0, 100%);
  box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}
.account-form .notifications {
  font-size: var(--text-size-s);
}
.account-form .output {
  margin: 0;
  line-height: 38px;
}
.account-form .output, .account-form .output .label {
  font-weight: var(--text-weight-default);
}

@media screen and (max-width: 1049px) {
  .account-form {
    padding: 100px 0 150px 105px;
  }
}


@media screen and (max-width: 870px) {
  .account-form, .general-account-form {
    width: 340px;
    max-width: var(--section-width);
    min-width: 290px;
    padding: 50px 0;
    margin: 0 auto;
  }
  .account-form:before {
    content: none;
  }
  .account-form legend {
    font-size: var(--text-size-xxl);
  }
  .account-form .agree {
    font-size: var(--text-size-xs);
  }
  .account-form .tips {
    font-size: 15px;
  }
}

@media screen and (max-width: 420px) {
  .account-form legend {
    text-align: center;
  }
}
@media screen and (max-width: 375px) {
  .account-form .agree {
    font-size: var(--text-size-xxs);
  }
}

@media screen and (max-width: 359px) {
  .account-form fieldset {
    max-width: none;
  }
  .account-form .agree {
    font-size: var(--text-size-xxxs);
  }
  .account-form p input, .account-form p textarea, .account-form button, .account-form input[type="submit"] {
    max-width: none;
  }
}