/* Keep the fixed web authentication layer inside narrow mobile viewports. */
body[data-client="web"] {
  overflow-x: hidden;
}

.web-auth {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}

.web-auth-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  min-width: 0;
}

.web-auth-card form,
.web-auth-card label,
.web-auth-card input,
.web-auth-tabs,
.web-captcha,
.web-captcha > * {
  min-width: 0;
}

.web-captcha-hint {
  margin: 7px 2px 2px;
  color: #91a8c6;
  font-size: 12px;
  line-height: 1.5;
}

.web-captcha-hint.hidden {
  display: none;
}

#webCaptchaAnswer {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 380px) {
  .web-auth {
    padding-inline: 14px;
  }

  .web-captcha {
    grid-template-columns: minmax(0, 1.35fr) minmax(76px, 0.65fr);
  }

  .web-captcha img,
  #webCaptchaAnswer {
    min-height: 56px;
  }
}