.online-login {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  color: #362b20;
  font:
    12px Arial,
    sans-serif;
  background: #101820;
}
.online-login[hidden],
.online-login [hidden],
#login-inspection [hidden] {
  display: none !important;
}
.online-login.maple-ui-original-cursor,
.online-login.maple-ui-original-cursor * {
  cursor: none !important;
}
.online-login-window {
  position: absolute;
  width: 800px;
  height: 600px;
  left: 50%;
  top: 50%;
  isolation: isolate;
  overflow: hidden;
  transform-origin: center;
}
.online-login-body {
  position: relative;
  z-index: 3;
  width: 800px;
  height: 600px;
}
.online-login-artwork {
  pointer-events: none !important;
  image-rendering: pixelated;
}
.online-login-artwork canvas {
  pointer-events: none;
  image-rendering: pixelated;
}
.online-login-scenery {
  position: absolute;
  inset: 0;
  width: 800px;
  height: 600px;
  overflow: hidden;
}
.online-login-button,
.online-login-register {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.online-login-skinned {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
}
.online-login-skinned > .online-login-artwork {
  text-align: left;
}
.online-login button:disabled {
  cursor: default;
}
.online-login :focus-visible {
  outline: 2px solid #156da5;
  outline-offset: 2px;
}
.online-login input {
  box-sizing: border-box;
  width: 165px;
  height: 23px;
  border: 1px solid #a28964;
  border-radius: 2px;
  background: #fffdf4;
  color: #31291e;
  padding: 2px 5px;
  font:
    12px Arial,
    sans-serif;
}
.online-login input:disabled {
  color: #777;
}
.online-login-account,
.online-login-characters,
.online-login-create {
  position: absolute;
  inset: 0;
}
.online-login-register {
  position: absolute;
  left: 424px;
  top: 350px;
}
.online-login-form {
  position: absolute;
  left: 410px;
  top: 228px;
  width: 330px;
  height: 64px;
}
.online-login-account-tool {
  position: absolute;
}
.online-login-row {
  display: grid;
  grid-template-columns: 100px 165px;
  align-items: center;
  gap: 5px;
  min-height: 31px;
}
.online-login-account .online-login-row {
  position: absolute;
  display: block;
  left: 67px;
  top: 12px;
  min-height: 0;
}
.online-login-account .online-login-row:nth-child(2) {
  top: 40px;
}
.online-login-account input {
  width: 132px;
  height: 15px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  line-height: 15px;
}
.online-login-account input[type="password"] {
  width: 120px;
}
.online-login-account .online-login-label {
  display: none;
}
.online-login-submit {
  position: absolute;
  left: 213px;
  top: -5px;
}
.online-registration-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
}
.online-registration {
  width: 420px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 3px;
  border: 1px solid var(--console-frame);
  box-shadow:
    var(--console-shadow),
    3px 3px 0 #0005;
}
.online-registration-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  padding: 2px 3px 2px 6px;
  color: var(--console-on-accent);
  background: var(--console-caption);
  font-weight: bold;
}
.online-registration .online-registration-close {
  width: 22px;
  min-height: 20px;
  height: 20px;
  padding: 0;
  font:
    bold 17px/16px Arial,
    sans-serif;
}
.online-registration-form {
  padding: 8px 15px 14px;
}
.online-registration-instructions {
  margin: 0 0 14px;
  font-size: 12px;
}
.online-registration .online-login-row {
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.online-registration.inspection-chrome input {
  height: 28px;
  min-height: 28px;
  min-width: 0;
  border-radius: 0;
  box-shadow:
    inset 1px 1px #404040,
    inset -1px -1px #fff;
}
.online-registration-status {
  min-height: 36px;
  margin: 12px 0;
  font-size: 12px;
}
.online-registration-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.online-registration-actions button {
  min-width: 94px;
}
.online-registration :focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}
.online-login-roster {
  position: absolute;
  left: 110px;
  top: 270px;
  width: 600px;
  height: 126px;
}
.online-login-card {
  position: absolute;
  top: 0;
  width: 100px;
  height: 126px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.online-login-portrait {
  position: absolute;
  left: 0;
  top: 0;
  height: 100px;
  width: 100px;
  overflow: visible;
}
.online-login-portrait canvas,
.online-login-preview canvas {
  image-rendering: pixelated;
}
.online-login-character-name {
  position: absolute;
  top: 102px;
  /* LoginBackdrop shares the native integer layout with the nameplate. */
  left: 0;
  width: max-content;
  max-width: 198px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  line-height: 15px;
}
.online-login-character-detail {
  position: absolute;
  /* Original information window z20 is above the selection controls at z10. */
  z-index: 1;
  top: 160px;
  left: 180px;
  width: 183px;
  height: 115px;
  /* 0098a707 font1 → 0098a7df: black Arial12. */
  color: #000;
  font-size: 12px;
}
.online-login-character-detail > span {
  position: absolute;
  z-index: 1;
  width: 45px;
  height: 17px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online-login-character-detail > .online-login-info-job {
  top: 1px;
  left: 46px;
  width: 135px;
}
.online-login-info-level {
  top: 19px;
  left: 46px;
}
.online-login-info-fame {
  top: 19px;
  left: 136px;
}
.online-login-info-str {
  top: 37px;
  left: 46px;
}
.online-login-info-int {
  top: 37px;
  left: 136px;
}
.online-login-info-dex {
  top: 55px;
  left: 46px;
}
.online-login-info-luk {
  top: 55px;
  left: 136px;
}
.online-login-character-detail > .online-login-info-ranking {
  top: 99px;
  left: 36px;
  width: 145px;
  height: 14px;
}
.online-login-previous {
  position: absolute;
  /* 00604756/00604765: layer (-260,-1215), camera (-400,-1508). */
  left: 140px;
  top: 293px;
}
.online-login-next {
  position: absolute;
  /* 00604a8e/00604a9d: layer (188,-1213), camera (-400,-1508). */
  left: 588px;
  top: 295px;
}
.online-login-actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.online-login-actions > button {
  position: absolute;
  pointer-events: auto;
}
.online-login-enter {
  left: 604px;
  top: 147px;
}
.online-login-new {
  left: 604px;
  top: 185px;
}
.online-login-delete {
  left: 604px;
  top: 234px;
}
/* Production keeps account utilities on the book; development moves them into its sidebar. */
.online-login-actions > :is(.online-login-refresh, .online-login-signout) {
  bottom: 26px;
  box-sizing: border-box;
  width: 88px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  box-shadow:
    inset 1px 1px #dfdfdf,
    inset -1px -1px #808080;
  background: #c0c0c0;
  color: #101010;
  font:
    12px/1 "MS Sans Serif",
    Tahoma,
    sans-serif;
  white-space: nowrap;
}
.online-login-actions > .online-login-refresh {
  left: 40px;
}
.online-login-actions > .online-login-signout {
  left: 136px;
}
.online-login-actions
  > :is(.online-login-refresh, .online-login-signout):active:not(:disabled) {
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #808080;
}
.online-login-actions
  > :is(.online-login-refresh, .online-login-signout):focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}
.online-login-actions
  > :is(.online-login-refresh, .online-login-signout):disabled {
  color: #808080;
  text-shadow: 1px 1px #fff;
}
.online-login-create-layout {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.online-login-look,
.online-login-options {
  pointer-events: auto;
}
.online-login-look {
  position: absolute;
  /* 005f55d5..005f562b: x=22, y=-2369-600*race; 100 is z, not x. */
  left: 372px;
  top: 239px;
  width: 100px;
}
.online-login-preview {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: visible;
}
.online-login-look .online-login-note {
  display: none;
}
.online-login-options {
  position: absolute;
  left: 520px;
  top: 200px;
  width: 200px;
}
.online-login-option {
  position: relative;
  height: 18px;
  /* 00618026 selects the same original font1 as the roster information. */
  color: #000;
  font-size: 12px;
}
.online-login-option .online-login-label {
  display: none;
}
.online-login-option-value {
  position: absolute;
  left: 72px;
  top: 2px;
  width: 112px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online-login-option button {
  position: absolute;
  top: 1px;
  width: 15px;
}
.online-login-option-previous {
  left: 57px;
}
.online-login-option-next {
  left: 185px;
}
.online-login-name-step {
  position: absolute;
  left: 545px;
  top: 203px;
  width: 120px;
}
.online-login-name-step input {
  width: 120px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.online-login-name-step .online-login-row {
  display: block;
  min-height: 0;
  height: 15px;
}
.online-login-name-step .online-login-label,
.online-login-name-step .online-login-note {
  display: none;
}
.online-login-note {
  font-size: 10px;
  line-height: 14px;
}
.online-login-create .online-login-back {
  left: 610px;
  top: 273px;
}
.online-login-create-submit {
  left: 536px;
  top: 273px;
}
/* 00619876..00619900: appearance pane buttons are local (37/111,330).
   The name pane uses (27/101,178) in 00617c1e..00617c98. */
.online-login-create[data-phase="appearance"] .online-login-create-submit {
  left: 546px;
  top: 425px;
}
.online-login-create[data-phase="appearance"] .online-login-back {
  left: 620px;
  top: 425px;
}
.online-login-stats-step {
  position: absolute;
  left: 493px;
  top: 150px;
  width: 242px;
  height: 210px;
  color: #362b20;
}
.online-login-stats-title {
  position: absolute;
  left: 25px;
  top: 24px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}
.online-login-stat-value {
  position: absolute;
  left: 73px;
  width: 22px;
  line-height: 15px;
  color: #000;
}
.online-login-roll {
  position: absolute;
  left: 134px;
  top: 60px;
  width: 51px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.online-login-roll-note {
  position: absolute;
  left: 25px;
  top: 141px;
  width: 192px;
  margin: 0;
  line-height: 17px;
}
.online-login-create[data-phase="stats"] .online-login-create-submit {
  left: 536px;
  top: 365px;
}
.online-login-create[data-phase="stats"] .online-login-back {
  left: 610px;
  top: 365px;
}
.online-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: #0005;
}
.online-dialog {
  position: relative;
  width: 362px;
  height: 219px;
  isolation: isolate;
}
.online-dialog > .online-login-artwork {
  z-index: 0;
}
.online-dialog-titlebar,
.online-dialog-body {
  position: absolute;
  z-index: 1;
}
.online-dialog-body {
  inset: 0;
}
.online-dialog-titlebar {
  left: 110px;
  right: 30px;
  top: 30px;
  text-align: left;
  font-weight: bold;
}
.online-dialog-text {
  position: absolute;
  left: 110px;
  right: 30px;
  top: 56px;
  margin: 0;
  height: 72px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 18px;
}
.online-dialog-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: 158px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

#login-inspection pre {
  max-height: 220px;
  overflow: auto;
}
.community-maps {
  position: fixed;
  top: calc(var(--project-bar-height) + 12px);
  right: 16px;
  z-index: 25;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #b6c8b5;
  border-radius: 8px;
  background: #f2f7ef;
  color: #183b29;
  font:
    13px system-ui,
    sans-serif;
}
.community-maps[hidden] {
  display: none;
}
.community-maps select,
.community-maps button {
  font: inherit;
  padding: 5px 8px;
}