/* No horizontal scrollbar in these windows (vertical only when taller than the screen) */
.ui .dialog.bank,
.ui .dialog.inventory {
  overflow-x: hidden !important;
}
/* Account bank: keep the inventory alongside it in landscape. */
.ui .dialog.bank {
  width: 260px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  gap: 4px;
}
.ui .dialog.bank .bank-tabs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.ui .dialog.bank .bank-grid {
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 1px;
  justify-content: center;
}
.ui .dialog.bank .bank-grid .slot {
  margin: 0;
}
.ui .dialog.bank .bank-balances {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.ui .dialog.bank .bank-actions,
.ui .dialog.bank .bank-input-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.ui .dialog.bank .bank-actions .button {
  font-size: 11px;
}
.ui .dialog.bank .bank-prompt {
  margin: 0;
  padding: 4px;
  border: 1px solid #aaa;
  background: #242424;
}
.ui .dialog.bank .bank-input-label {
  display: block;
  font-size: 12px;
}
.ui .dialog.bank .bank-value {
  box-sizing: border-box;
  width: 100%;
  margin: 4px 0;
  min-height: 28px;
  user-select: text;
}
.ui .dialog.bank .bank-status {
  min-height: 16px;
  font-size: 11px;
  color: #ffdf80;
}
.ui .dialog.bank .bank-help {
  font-size: 10px;
  color: #ccc;
}
body {
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow: hidden;
  cursor: url('/data/RES/DEFAULT_20.png') 0 0, auto;
}
.thin-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.thin-scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px grey;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.6);
}
.thin-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.815);
}
.ui {
  color: white;
  font-family: 'Tahoma';
  font-size: small;
  cursor: url('/data/RES/DEFAULT_20.png') 0 0, auto;
  z-index: 0;
  /* Some helper classes */
  /* Generic UI panel */
  /* Dialog */
  /* Button element */
  /* Tabs Element */
  /* Item/Skill Slot Element */
  /* Socket / gem marker in the top-left corner of an item icon */
  /* Shaded sweep over an icon while its skill or item is reloading (SkillCooldown) */
  /* Textbox Widget */
  /* List Element */
  /* Progressbar Element */
  /* Some default colours for progress bar */
  /* Checkbox Element */
  /* dlgStatus */
  /* Login Dialog */
  /* dlgServerSelect */
  /* dlgCharacterSelect */
  /* dlgCharacterCreate */
  /* dlgMenu */
  /* dlgTargetInfo: name and HP of the selected monster or player */
  /* dlgBuffBar: icons of the active buffs, under the status window */
  /* Windows BR character information, adapted for touch screens. */
  /* dlgQuestList */
  /* dlgNpcChat */
  /* NPC store */
  /* Open Market, the own personal store (mystore.js), laid out like the original CPrivateStoreDlg */
  /* Price and quantity of an item for the shop (goods.js, the original CGoodsDlg) */
  /* Personal store of another character (storeview.js) */
  /* Trade between players (trade.js), laid out like the original CExchangeDLG */
  /* Number pad (numpad.js) */
  /* Inventory window (DlgItem.xml: 306 px wide, slots 43 px every 45 px, 6 column grid) */
  /* dlgMessageBox */
  /* Status of the character (restored from the version before the 17/10 redesign) */
  /* dlgQuickBar */
  /* dlgParty */
  /* Minimap: top right, on the left of the menu column (--mm-menu is the width of the menu, set by minimap.js) */
  /* World map: the picture of the planet (600x450) with a pin on the current zone */
  /* dlgChatBox */
}
.ui .screen-options .ui-scale::before {
  content: 'A';
  display: inline-flex;
  width: 34px;
  height: 30px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border: 1px solid rgba(220, 210, 170, 0.5);
  border-radius: 50%;
  color: #fff0bd;
  font-weight: bold;
}
.ui .screen-options {
  position: fixed;
  z-index: 40;
  top: 4px;
  left: min(270px, calc(100vw - 112px));
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: auto;
}
.ui .screen-options .screen-options-header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.ui .screen-options .screen-options-toggle {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  justify-content: center;
}
.ui .screen-options .screen-options-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.ui .screen-options .screen-options-actions > .button,
.ui .screen-options .ui-scale-control > .ui-scale {
  width: 100%;
  min-height: 30px;
  height: 30px;
  box-sizing: border-box;
  justify-content: center;
  background: rgba(24, 30, 52, 0.86);
}
.ui .screen-options .ui-scale-control {
  position: relative;
  width: 100%;
}
.ui .screen-options .ui-scale-options {
  display: none;
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  width: 64px;
  max-height: min(70vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(20, 27, 43, 0.96);
  border: 1px solid rgba(220, 225, 235, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  overscroll-behavior: contain;
}
.ui .screen-options.scale-open .ui-scale-options {
  display: block;
}
.ui .screen-options .ui-scale-option {
  min-height: 25px;
  padding: 4px 6px;
  box-sizing: border-box;
  color: #f3f3f3;
  font-size: 12px;
  line-height: 17px;
  cursor: pointer;
}
.ui .screen-options .ui-scale-option:hover,
.ui .screen-options .ui-scale-option.selected {
  background: #1672d4;
  color: #fff;
}
.ui .screen-options.collapsed {
  width: 32px;
}
.ui .screen-options.collapsed .screen-options-actions {
  display: none;
}
.ui .tooltip {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  background-color: rgba(30, 30, 30, 0.8);
  width: 280px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: hidden;
  overflow-wrap: break-word;
  line-height: 1.3;
  z-index: 10000;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
}
.ui .tooltip .name {
  font-weight: bold;
}
.ui .tooltip .item + .item {
  margin-top: 2px;
}
.ui .tooltip .bonus,
.ui .tooltip .socket-bonus {
  color: #80b0ff;
}
.ui .tooltip .appraisal {
  color: #d090ff;
}
.ui .tooltip .socket-gem,
.ui .tooltip .socket-empty {
  color: #ffff00;
}
.ui .tooltip .requirement.met {
  color: #80ff80;
}
.ui .tooltip .requirement.unmet,
.ui .tooltip .restriction {
  color: #ff8080;
}
.ui .tooltip .requirement.unknown {
  color: #cccccc;
}
.ui .tooltip .description {
  color: #dddddd;
  white-space: normal;
}
.ui .flex-horizontal {
  display: flex;
  flex-direction: row;
}
.ui .flex-vertical {
  display: flex;
  flex-direction: column;
}
.ui .flex-stretch {
  align-items: stretch;
}
.ui .flex-center {
  align-items: center;
}
.ui .flex-fill {
  flex: 1;
}
.ui .flex-fill-1 {
  flex: 2;
}
.ui .flex-fill-2 {
  flex: 2;
}
.ui .seperator {
  clear: both;
  margin-bottom: 5px;
}
.ui .seperator10 {
  clear: both;
  height: 10px;
}
.ui .seperator15 {
  clear: both;
  height: 15px;
}
.ui .vertical-scroll {
  overflow-y: auto;
}
.ui .titleText {
  width: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.ui .panel {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
}
.ui .dialog {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  position: absolute;
  background-color: rgba(50, 50, 50, 0.7);
  border: 1px solid #000;
  box-shadow: inset 0px 0px 3px #ffffff, 0px 0px 8px #000;
}
.ui .dialog .titlebar {
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  width: 100%;
  height: 20px;
  border-bottom: 1px solid #aaa;
  margin-top: -5px;
  margin-left: -5px;
  margin-bottom: 5px;
  padding-top: 7px;
  padding-left: 8px;
  padding-right: 2px;
}
.ui .dialog .button.close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
}
.ui .button {
  background: linear-gradient(to bottom, #8c5845 0%, #8c5845 49%, #692814 51%, #692814 100%);
  border-radius: 5px;
  border: 1px solid #252525;
  box-shadow: inset 0px 0px 3px #c0a59b;
  box-sizing: border-box;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  line-height: 19px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ui .button .text {
  flex: 1;
  margin-top: -1px;
}
.ui .button:hover {
  background: linear-gradient(to bottom, #915045 0%, #915006 49%, #87280a 51%, #87280a 100%);
  box-shadow: inset 0px 0px 5px #d78269, 0px 0px 3px #962d14;
  border: 1px solid #be6964;
}
.ui .button:active,
.ui .button.active {
  background: linear-gradient(to bottom, #78463c 0%, #824b3c 49%, #661901 51%, #8c280a 100%);
  box-shadow: inset 0px 0px 10px #b4230a, 0px 0px 5px #962d28;
  border: 1px solid #d27869;
}
.ui .button.grey {
  background: linear-gradient(to bottom, #969696 0%, #8c8c8c 49%, #828282 51%, #6e6e6e 100%);
}
.ui .button.grey:hover {
  background: linear-gradient(to bottom, #a0a0a0 0%, #969696 49%, #8c8c8c 51%, #787878 100%);
  box-shadow: inset 0px 0px 5px #d2d2d2, 0px 0px 3px #bebebe;
  border: 1px solid #bebebe;
}
.ui .button.grey:active,
.ui .button.grey.active {
  background: linear-gradient(to bottom, #787878 0%, #828282 49%, #666666 51%, #8c8c8c 100%);
  box-shadow: inset 0px 0px 5px #bebebe, 0px 0px 3px #aaaaaa;
  border: 1px solid #bebebe;
}
.ui .button.black {
  background: linear-gradient(to bottom, #3c3c3c 0%, #232323 49%, #191919 51%, #0f0f0f 100%);
  box-shadow: inset 0px 0px 3px #808080;
}
.ui .button.black:hover {
  background: linear-gradient(to bottom, #6e6e6e 0%, #555555 49%, #4b4b4b 51%, #414141 100%);
  box-shadow: inset 0px 0px 5px #828282, 0px 0px 3px #6e6e6e;
  border: 1px solid #464646;
}
.ui .button.black:active,
.ui .button.black.active {
  background: linear-gradient(to bottom, #1e1e1e 0%, #191919 49%, #0f0f0f 51%, #0f0f0f 100%);
  box-shadow: inset 0px 0px 9px #8c8c8c, 0px 0px 3px #787878;
  border: 1px solid #505050;
}
.ui .tabpanel.horizontal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ui .tabpanel.horizontal > .header {
  display: flex;
  flex-direction: row;
  z-index: 1;
}
.ui .tabpanel.horizontal > .header .button {
  flex: 1;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
.ui .tabpanel.horizontal > .tab {
  flex: 1;
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  margin-top: -1px;
}
.ui .tabpanel.vertical {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.ui .tabpanel.vertical > .header {
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.ui .tabpanel.vertical > .header .button {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-right: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
.ui .tabpanel.vertical > .tab {
  flex: 1;
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-left: -1px;
}
.ui .slot {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0 0 0 0;
  margin: 2px 2px 2px 2px;
}
.ui .icon .socket {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.ui .icon .socket.empty {
  width: 32px;
  height: 32px;
  background-image: url('/data/3DDATA/CONTROL/RES/SOKET.png');
}
.ui .icon .socket.gem {
  width: 20px;
  height: 20px;
  background-image: url('/data/3DDATA/CONTROL/RES/SOKETJAM.png');
}
.ui .icon .cooldown {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 3px;
}
.ui .icon {
  position: absolute;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  margin-top: -1px;
  margin-left: -1px;
  width: 40px;
  height: 40px;
}
.ui .icon .quantity {
  display: inline;
  position: absolute;
  text-align: center;
  background-color: rgba(20, 20, 20, 0.7);
  right: 0;
  bottom: 0;
  min-width: 15px;
  padding-left: 2px;
  padding-right: 2px;
  margin-bottom: -1px;
  margin-right: -1px;
}
.ui .textbox {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  color: white;
}
.ui .list {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  overflow-y: auto;
}
.ui .list .selected {
  color: yellow;
  background: rgba(40, 40, 40, 0.65);
}
.ui .list .listitem {
  padding: 3px 3px 3px 3px;
  margin-bottom: 3px;
}
.ui .list .listitem *:last-child {
  margin-bottom: 0px;
}
.ui .list .listitem:hover {
  color: yellow;
  background: rgba(40, 40, 40, 0.65);
}
.ui .progressbar {
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 2px;
  border: 1px solid #252525;
  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.6);
  background: linear-gradient(to bottom, rgba(120, 120, 120, 0.7) 0%, rgba(100, 100, 100, 0.7) 49%, rgba(80, 80, 80, 0.7) 51%, rgba(60, 60, 60, 0.7) 100%);
}
.ui .progressbar .bar {
  top: 0;
  left: 0;
  height: 100%;
  margin-right: -100%;
  display: inline;
  float: left;
  border-radius: 2px;
  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.6);
}
.ui .progressbar .text {
  display: flex;
  width: 100%;
  float: left;
}
.ui .progressbar .text .label.absolute {
  flex: 1;
  text-align: right;
  padding-right: 5px;
}
.ui .progressbar .text .spacer {
  padding-right: 5px;
}
.ui .progressbar .text .label.percent {
  padding-right: 5px;
}
.ui .progressbar.health > .bar {
  background: rgba(255, 0, 0, 0.5);
}
.ui .progressbar.mana > .bar {
  background: rgba(0, 0, 255, 0.5);
}
.ui .progressbar.exp > .bar {
  background: rgba(200, 200, 0, 0.45);
}
.ui .checkbox:before {
  content: '';
  display: inline-block;
  background: linear-gradient(to bottom, rgba(120, 120, 120, 0.7) 0%, rgba(100, 100, 100, 0.7) 49%, rgba(80, 80, 80, 0.7) 51%, rgba(60, 60, 60, 0.7) 100%);
  border-radius: 5px;
  border: 1px solid #252525;
  box-shadow: inset 0px 0px 3px #c0a59b;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  margin-right: 5px;
}
.ui .checkbox:hover:before {
  background: linear-gradient(to bottom, rgba(160, 160, 160, 0.7) 0%, rgba(140, 140, 140, 0.7) 49%, rgba(120, 120, 120, 0.7) 51%, rgba(100, 100, 100, 0.7) 100%);
}
.ui .checkbox:active:before {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0.7) 0%, rgba(80, 80, 80, 0.7) 49%, rgba(60, 60, 60, 0.7) 51%, rgba(40, 40, 40, 0.7) 100%);
}
.ui .checkbox.checked:before {
  content: 'X';
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
}
.ui .dialog.status {
  left: 50%;
  bottom: 10%;
  margin-left: -200px;
  width: 400px;
  text-align: center;
}
.ui .dialog.login {
  width: 280px;
}
.ui .dialog.login .textbox {
  width: 100%;
}
.ui .dialog.login .checkbox.remember {
  margin: 0 auto;
  width: 120px;
}
.ui .dialog.server-select {
  width: 250px;
  height: 300px;
  align-items: center;
}
.ui .dialog.server-select .list.servers {
  width: 100%;
}
.ui .dialog.server-select .button {
  width: 70%;
}
.ui .dialog.character-select {
  top: 10%;
  right: 10%;
  height: 80%;
  width: 250px;
  align-items: center;
}
.ui .dialog.character-select .list.characters {
  width: 100%;
}
.ui .dialog.character-select .button {
  width: 70%;
}
.ui .dialog.character-create {
  width: 250px;
  right: 7.5%;
  top: calc(50% - 200px);
}
.ui .dialog.character-create .input.name {
  width: 100%;
}
.ui .dialog.character-create .button.prev,
.ui .dialog.character-create .button.next {
  width: 30px;
}
.ui .dialog.character-create .label.category {
  margin-bottom: 2px;
  margin-top: 5px;
  text-align: center;
  font-weight: bold;
}
.ui .dialog.character-create .label.gender,
.ui .dialog.character-create .label.face,
.ui .dialog.character-create .label.hair-style,
.ui .dialog.character-create .label.hair-color {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  padding-top: 2px;
  text-align: center;
  height: 22px;
}
.ui .dialog.menu {
  --hud-slot: 40px;
  --hud-gap: 8px;
  --hud-safe-top: env(safe-area-inset-top, 0px);
  --hud-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hud-safe-left: env(safe-area-inset-left, 0px);
  --hud-safe-right: env(safe-area-inset-right, 0px);
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  width: 56px;
  box-sizing: border-box;
  padding: 4px;
  min-height: 0;
  gap: 4px;
}
.ui .dialog.menu .menu-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.ui .dialog.menu .button {
  min-height: 40px;
  height: 40px;
  flex-shrink: 0;
}
.ui .dialog.menu .menu-actions .button {
  display: flex;
  align-items: center;
  text-align: left;
  background: rgba(24, 30, 52, 0.8);
  border-radius: 22px;
}
.ui .dialog.menu .menu-actions .button .text {
  font-size: 11px;
  padding-right: 3px;
}
.ui .dialog.menu .menu-actions .button::before {
  content: '';
  display: block;
  width: 34px;
  height: 30px;
  flex: 0 0 34px;
  margin: 0 2px;
  background-image: url('/data/3DDATA/CONTROL/RES/MENU_HUD.png');
  background-repeat: no-repeat;
}
.ui .dialog.menu .menu-actions .button:hover {
  box-shadow: inset 0 0 5px #ddd4a5;
}
.ui .dialog.menu .my-store::before {
  background-position: 0 0;
}
.ui .dialog.menu .character::before {
  background-position: 0 -30px;
}
.ui .dialog.menu .inventory::before {
  background-position: 0 -60px;
}
.ui .dialog.menu .skill-list::before {
  background-position: 0 -90px;
}
.ui .dialog.menu .quest-list::before {
  background-position: 0 -120px;
}
.ui .dialog.menu .char-select::before {
  background-position: 0 -150px;
}
.ui .dialog.menu .menu-toggle {
  font-size: 10px;
  flex-shrink: 0;
}
.ui .dialog.menu.icons-only .menu-actions .text {
  display: none;
}
.ui .dialog.menu.icons-only .menu-actions .button {
  justify-content: center;
  width: 40px;
  align-self: center;
  border-radius: 50%;
}
.ui .dialog.menu.collapsed .menu-actions {
  display: none;
}
.ui .dialog.menu .hud-orientation {
  display: none;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  padding: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  color: #eee5c8;
  background: rgba(18, 27, 28, 0.97);
  pointer-events: auto;
  touch-action: none;
}
@media (orientation: portrait) and (pointer: coarse) {
  .ui .dialog.menu {
    z-index: 2147483646 !important;
  }
  .ui .dialog.menu .hud-orientation {
    display: flex;
  }
}
@media (max-height: 400px) {
  .ui .dialog.menu {
    --hud-slot: 32px;
  }
}
.ui .dialog.target-info {
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
}
.ui .dialog.target-info .label.name {
  width: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  width: auto;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0;
  padding-bottom: 2px;
}
.ui .dialog.target-info .hp-gauge {
  position: relative;
  width: 190px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid #3b0d0d;
  border-radius: 3px;
  background: rgba(30, 10, 10, 0.75);
  overflow: hidden;
}
.ui .dialog.target-info .hp-gauge .fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #f0624c 0%, #c4301f 50%, #8f1b12 100%);
}
.ui .dialog.target-info .hp-gauge .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  line-height: 14px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.ui .dialog.buff-bar {
  top: 108px;
  left: 10px;
  width: 230px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
}
.ui .dialog.buff-bar .buff-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.ui .dialog.buff-bar .buff-icon {
  width: 20px;
  height: 20px;
  pointer-events: auto;
  cursor: pointer;
}
.ui .dialog.buff-bar .buff-tip {
  display: none;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(20, 20, 20, 0.85);
  font-size: 12px;
  pointer-events: none;
}
.ui .dialog.buff-bar .buff-tip .buff-time {
  color: #7dff8a;
}
.ui .dialog.character {
  top: 5vh;
  left: 12px;
  width: 600px;
  max-width: calc(100vw - 24px);
  overflow-x: hidden;
  box-sizing: border-box;
}
.ui .dialog.character .character-content {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: space-between;
  gap: 12px;
  max-height: calc(90vh - 42px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 2px;
  touch-action: pan-y;
}
.ui .dialog.character section {
  min-width: 0;
}
.ui .dialog.character .character-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 22px;
  margin-bottom: 2px;
}
.ui .dialog.character .character-field > span:first-child {
  flex-shrink: 0;
}
.ui .dialog.character .character-field .field-value {
  flex: 0 0 96px;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 2px;
}
.ui .dialog.character .character-field .progressbar {
  flex: 0 0 96px;
  min-width: 0;
  height: 20px;
}
.ui .dialog.character .character-battle .field-value {
  flex-basis: 72px;
}
.ui .dialog.character .character-info .character-field > span:first-child {
  min-width: 48px;
}
.ui .dialog.character .character-battle .character-field > span:first-child {
  min-width: 66px;
}
.ui .dialog.character [data-field="exp-bonus"],
.ui .dialog.character .attribute-cost {
  color: #ffe45e;
}
.ui .dialog.character [data-field="birthstone"] {
  color: #ffbd66;
}
.ui .dialog.character .birthstone-boost {
  color: #ff9a2e !important;
}
.ui .dialog.character .character-field {
  position: relative;
}
.ui .dialog.character .birthstone-tip {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 5;
  min-width: 120px;
  padding: 4px 8px;
  border: 1px solid #000;
  border-radius: 3px;
  background: rgba(15, 15, 25, 0.92);
  pointer-events: none;
}
.ui .dialog.character .birthstone-tip .birthstone-name {
  color: #ff9a2e;
  font-weight: bold;
}
.ui .dialog.character .birthstone-tip .birthstone-line {
  color: #8c8cff;
}
.ui .dialog.character .attribute-points {
  padding: 2px 0 6px;
  display: flex;
  justify-content: space-between;
}
.ui .dialog.character .attribute-head,
.ui .dialog.character .attribute-row {
  display: grid;
  grid-template-columns: 40px 38px 40px 34px 34px;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.ui .dialog.character .attribute-head {
  font-size: 11px;
  color: #c6c6c6;
  margin-bottom: 2px;
}
.ui .dialog.character .attribute-row {
  min-height: 32px;
}
.ui .dialog.character .attribute-name {
  text-align: left;
}
.ui .dialog.character .attribute-base {
  font-weight: bold;
}
.ui .dialog.character .attribute-bonus {
  color: #69ed8b;
}
.ui .dialog.character .attribute-bonus.negative {
  color: #ff8e8e;
}
.ui .dialog.character .attribute-increase,
.ui .dialog.character .character-reborn {
  min-width: 30px;
  min-height: 28px;
  cursor: pointer;
  color: white;
  border: 1px solid #9b997d;
  border-radius: 4px;
  background: rgba(90, 89, 71, 0.9);
  font: inherit;
}
.ui .dialog.character .attribute-increase:hover:enabled,
.ui .dialog.character .character-reborn:hover:enabled {
  background: #6f7048;
}
.ui .dialog.character .attribute-increase:focus-visible,
.ui .dialog.character .character-reborn:focus-visible {
  outline: 2px solid #f6d56c;
  outline-offset: 2px;
}
.ui .dialog.character .attribute-increase:disabled,
.ui .dialog.character .character-reborn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ui .dialog.character .attribute-increase {
  font-size: 18px;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 28px;
  justify-self: center;
}
.ui .dialog.character .attribute-status {
  min-height: 16px;
  padding-top: 3px;
  font-size: 12px;
  color: #ffe4a1;
}
.ui .dialog.character .character-reborn {
  width: 100%;
  min-height: 30px;
  margin-top: 4px;
}
@media (max-width: 620px) {
  .ui .dialog.character .character-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
  }
  .ui .dialog.character .character-attributes {
    grid-column: 1 / -1;
  }
  .ui .dialog.character .attribute-head,
  .ui .dialog.character .attribute-row {
    grid-template-columns: minmax(40px, 1fr) 1fr 1fr 1fr 34px;
  }
}
@media (max-width: 460px) {
  .ui .dialog.character .character-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ui .dialog.character .character-attributes {
    grid-column: auto;
  }
}
.ui .dialog.quest-list {
  width: 300px;
}
.ui .dialog.quest-list .list.quests {
  height: 100px;
}
.ui .dialog.quest-list .items {
  margin-right: 5px;
}
.ui .dialog.quest-list .label.description {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  overflow-y: auto;
}
.ui .dialog.quest-list .footer {
  margin-top: 6px;
}
.ui .dialog.quest-list .button.abandon {
  width: 100px;
}
.ui .dialog.quest-list .label.timer {
  text-align: center;
}
.ui .dialog.npcchat {
  width: 450px;
  top: 30%;
  left: calc(50% - 225px);
}
.ui .dialog.npcchat .label.message {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  min-height: 80px;
}
.ui .dialog.npcchat .list.options > div {
  cursor: pointer;
}
.ui .dialog.npcshop {
  width: 340px;
}
.ui .dialog.npcshop .shop-tabs {
  font-size: 0;
}
.ui .dialog.npcshop .shop-tabs .button {
  display: inline-block;
  margin: 2px;
  font-size: small;
  cursor: pointer;
}
.ui .dialog.npcshop .shop-grid {
  min-height: 90px;
  max-height: 230px;
  overflow-y: auto;
}
.ui .dialog.npcshop .shop-section {
  margin-top: 4px;
  font-size: small;
}
.ui .dialog.npcshop .shop-cart {
  min-height: 44px;
  max-height: 100px;
  overflow-y: auto;
}
.ui .dialog.npcshop .shop-slot {
  cursor: pointer;
}
.ui .dialog.npcshop .shop-slot .shop-price {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 2px;
  font-size: 9px;
  color: #ffe9a0;
  background-color: rgba(20, 20, 20, 0.7);
}
.ui .dialog.npcshop .shop-total {
  margin: 6px 2px;
  font-size: small;
}
.ui .dialog.npcshop .shop-buttons {
  font-size: 0;
}
.ui .dialog.npcshop .shop-buttons .button {
  display: inline-block;
  margin: 2px;
  font-size: small;
  cursor: pointer;
}
.ui .dialog.mystore {
  width: 244px;
  max-width: calc(100vw - 20px);
  padding: 0 8px 8px 8px;
}
.ui .dialog.mystore .titlebar {
  margin: 0 -8px 0 -8px;
  width: calc(100% + 16px);
  height: 28px;
  padding: 8px 8px 0 10px;
  box-sizing: border-box;
}
.ui .dialog.mystore .mystore-title {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 4px 0;
}
.ui .dialog.mystore .mystore-tabs {
  display: flex;
}
.ui .dialog.mystore .mystore-tabs .button {
  flex: 1;
  margin: 0 2px;
  font-size: small;
}
.ui .dialog.mystore .mystore-grid {
  display: grid;
  grid-template-columns: repeat(5, 43px);
  gap: 1px;
  justify-content: center;
  margin-top: 6px;
}
.ui .dialog.mystore .slot {
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  margin: 0;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #6a6a6a;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.mystore .slot.selected {
  border-color: #d2a62c;
}
.ui .dialog.mystore .slot.wish .icon {
  opacity: 0.55;
}
.ui .dialog.mystore .slot .icon {
  left: 1px;
  top: 1px;
  margin: 0;
}
.ui .dialog.mystore .slot .mystore-price {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2px;
  font-size: 9px;
  text-align: right;
  color: #ffe9a0;
  background-color: rgba(20, 20, 20, 0.7);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}
.ui .dialog.mystore .mystore-status {
  margin: 6px 2px 0 2px;
  min-height: 26px;
  font-size: 11px;
  color: #c6c6c6;
}
.ui .dialog.mystore .mystore-footer {
  display: flex;
  margin-top: 6px;
}
.ui .dialog.mystore .mystore-footer .button {
  flex: 1;
  margin: 0 2px;
  font-size: small;
}
.ui .dialog.mystore .mystore-footer .button.basket {
  flex: 0 0 60px;
}
.ui .dialog.goods {
  width: 210px;
  padding: 0 8px 8px 8px;
}
.ui .dialog.goods .titlebar {
  margin: 0 -8px 0 -8px;
  width: calc(100% + 16px);
  height: 28px;
  padding: 8px 8px 0 10px;
  box-sizing: border-box;
}
.ui .dialog.goods .goods-item {
  display: flex;
  align-items: center;
  margin: 8px 0 4px 0;
  font-size: small;
}
.ui .dialog.goods .goods-item .goods-icon {
  position: relative;
  width: 43px;
  height: 43px;
  margin-right: 8px;
  border: 1px solid #6a6a6a;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.goods .goods-item .goods-icon .icon {
  left: 1px;
  top: 1px;
  margin: 0;
}
.ui .dialog.goods .goods-item .goods-name {
  flex: 1;
}
.ui .dialog.goods .goods-label {
  display: block;
  margin: 4px 0 1px 2px;
  font-size: 11px;
  color: #c6c6c6;
}
.ui .dialog.goods input {
  width: 100%;
  box-sizing: border-box;
}
.ui .dialog.goods .goods-add {
  width: 80px;
  margin: 8px auto 0 auto;
  font-size: small;
}
.ui .dialog.storeview {
  width: 270px;
  max-width: calc(100vw - 20px);
  padding: 0 6px 6px 6px;
}
.ui .dialog.storeview .titlebar {
  margin: 0 -6px 0 -6px;
  width: calc(100% + 12px);
  height: 28px;
  padding: 8px 8px 0 10px;
  box-sizing: border-box;
}
.ui .dialog.storeview .storeview-owner {
  margin: 6px 2px 4px 2px;
  font-size: small;
  color: #ffe9a0;
}
.ui .dialog.storeview .storeview-tabs {
  display: flex;
}
.ui .dialog.storeview .storeview-tabs .button {
  flex: 1;
  margin: 0 1px;
  font-size: small;
}
.ui .dialog.storeview .storeview-grid {
  min-height: 50px;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  font-size: small;
}
.ui .dialog.storeview .slot {
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  margin: 1px;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid #6a6a6a;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.storeview .slot.selected {
  border-color: #d2a62c;
}
.ui .dialog.storeview .slot .icon {
  left: 1px;
  top: 1px;
  margin: 0;
}
.ui .dialog.storeview .slot .storeview-price {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2px;
  font-size: 9px;
  text-align: right;
  color: #ffe9a0;
  background-color: rgba(20, 20, 20, 0.7);
  pointer-events: none;
}
.ui .dialog.storeview .storeview-detail {
  margin-top: 4px;
  padding: 4px;
  min-height: 40px;
  font-size: small;
  background-color: rgba(30, 30, 30, 0.45);
  border: 1px solid #6a6a6a;
}
.ui .dialog.storeview .storeview-detail .storeview-hint {
  color: #c6c6c6;
}
.ui .dialog.storeview .storeview-detail .storeview-name {
  margin-bottom: 3px;
}
.ui .dialog.storeview .storeview-detail .storeview-label {
  display: block;
  margin: 2px 0;
  font-size: 10px;
  color: #c6c6c6;
}
.ui .dialog.storeview .storeview-detail .storeview-count {
  display: block;
  width: 90px;
}
.ui .dialog.storeview .storeview-detail .storeview-total {
  margin: 3px 0;
  color: #ffe9a0;
}
.ui .dialog.storeview .storeview-detail .button.action {
  width: 90px;
  margin-top: 3px;
}
.ui .dialog.storeview .storeview-detail .button.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ui .dialog.storeview .storeview-money {
  margin: 4px 2px 0 2px;
  font-size: small;
  color: #c6c6c6;
}
.ui .dialog.trade {
  width: 236px;
  max-width: calc(100vw - 20px);
  padding: 0 8px 8px 8px;
}
.ui .dialog.trade .titlebar {
  margin: 0 -8px 0 -8px;
  width: calc(100% + 16px);
  height: 28px;
  padding: 8px 8px 0 10px;
  box-sizing: border-box;
}
.ui .dialog.trade .trade-name {
  margin: 8px 0 3px 0;
  padding: 2px 6px;
  font-size: small;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6a6a6a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui .dialog.trade .trade-grid {
  display: grid;
  grid-template-columns: repeat(5, 43px);
  gap: 1px;
  justify-content: center;
}
.ui .dialog.trade .slot {
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  margin: 0;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #6a6a6a;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.trade .slot.filled {
  border-color: #d2a62c;
}
.ui .dialog.trade .slot .icon {
  left: 1px;
  top: 1px;
  margin: 0;
}
.ui .dialog.trade .trade-money {
  display: flex;
  align-items: center;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: small;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6a6a6a;
}
.ui .dialog.trade .trade-money .zulie-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1px solid #d2a62c;
  color: #ffe9a0;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}
.ui .dialog.trade .trade-money .amount {
  flex: 1;
  text-align: right;
}
.ui .dialog.trade .trade-money .state {
  margin-left: 8px;
  color: #7fd37f;
}
.ui .dialog.trade .trade-money.trade-my-money {
  cursor: pointer;
}
.ui .dialog.trade .trade-buttons {
  display: flex;
  margin-top: 8px;
}
.ui .dialog.trade .trade-buttons .button {
  flex: 1;
  margin: 0 2px;
  font-size: small;
}
.ui .dialog.trade .trade-buttons .button.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ui .dialog.numpad {
  width: 150px;
  padding: 6px;
}
.ui .dialog.numpad .numpad-title {
  font-size: 10px;
  color: #c6c6c6;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui .dialog.numpad .numpad-display {
  margin-bottom: 5px;
  padding: 3px 6px;
  text-align: right;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6a6a6a;
  color: #ffe9a0;
}
.ui .dialog.numpad .numpad-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.ui .dialog.numpad .numpad-keys .button {
  height: 26px;
  line-height: 23px;
  font-size: small;
}
.ui .dialog.numpad .numpad-actions {
  display: flex;
  margin-top: 5px;
}
.ui .dialog.numpad .numpad-actions .button {
  flex: 1;
  margin: 0 1px;
  font-size: small;
}
.ui .dialog.inventory {
  width: 306px;
  padding: 0 0 6px 0;
  background-color: rgba(50, 50, 50, 0.7);
  /* Equipment area: every slot at its fixed XML position */
  /* Slot name shown in an empty slot of the Costume tab */
  /* PAT tab (DlgItem.xml): five part slots and the vehicle information box */
  /* Vehicle page: the only page shown on the PAT tab */
  /* Item grid: 6 columns, no gaps */
  /* Weight and zuly at the bottom of the inventory */
}
.ui .dialog.inventory .titlebar {
  margin: 0;
  width: 100%;
  height: 28px;
  padding: 8px 8px 0 10px;
  box-sizing: border-box;
}
.ui .dialog.inventory .tabpanel.page,
.ui .dialog.inventory .tabpanel.inventory {
  margin: 0 5px;
}
.ui .dialog.inventory .tabpanel.page > .header,
.ui .dialog.inventory .tabpanel.inventory > .header {
  display: flex;
}
.ui .dialog.inventory .tabpanel.page > .header .button,
.ui .dialog.inventory .tabpanel.inventory > .header .button {
  flex: 1;
  height: 22px;
  line-height: 19px;
  margin: 0 1px;
}
.ui .dialog.inventory .tabpanel.page > .tab,
.ui .dialog.inventory .tabpanel.inventory > .tab {
  flex: none;
  position: relative;
  padding: 0;
  margin-top: -1px;
  box-sizing: border-box;
  background-color: rgba(30, 30, 30, 0.45);
}
.ui .dialog.inventory .tabpanel.page {
  margin-top: 3px;
}
.ui .dialog.inventory .tabpanel.page > .tab {
  flex: none;
  height: 150px;
}
.ui .dialog.inventory .tabpanel.inventory {
  margin-top: 6px;
}
.ui .dialog.inventory .slot {
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  margin: 0;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #6a6a6a;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.inventory .slot.filled {
  border-color: #d2a62c;
}
.ui .dialog.inventory .slot.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.ui .dialog.inventory .slot .icon {
  left: 1px;
  top: 1px;
  margin: 0;
}
.ui .dialog.inventory .equip-area {
  position: relative;
  width: 100%;
  height: 100%;
}
.ui .dialog.inventory .equip-area .slot {
  position: absolute;
}
.ui .dialog.inventory .equip-area .pos-l0,
.ui .dialog.inventory .equip-area .pos-l1,
.ui .dialog.inventory .equip-area .pos-l2 {
  left: 14px;
}
.ui .dialog.inventory .equip-area .pos-m00,
.ui .dialog.inventory .equip-area .pos-m01,
.ui .dialog.inventory .equip-area .pos-m02 {
  left: 83px;
}
.ui .dialog.inventory .equip-area .pos-m10,
.ui .dialog.inventory .equip-area .pos-m11,
.ui .dialog.inventory .equip-area .pos-m12 {
  left: 128px;
}
.ui .dialog.inventory .equip-area .pos-m20,
.ui .dialog.inventory .equip-area .pos-m21 {
  left: 173px;
}
.ui .dialog.inventory .equip-area .pos-r0,
.ui .dialog.inventory .equip-area .pos-r1,
.ui .dialog.inventory .equip-area .pos-r2 {
  left: 239px;
}
.ui .dialog.inventory .equip-area .pos-l0,
.ui .dialog.inventory .equip-area .pos-m00,
.ui .dialog.inventory .equip-area .pos-m10,
.ui .dialog.inventory .equip-area .pos-m20,
.ui .dialog.inventory .equip-area .pos-r0 {
  top: 6px;
}
.ui .dialog.inventory .equip-area .pos-l1,
.ui .dialog.inventory .equip-area .pos-m01,
.ui .dialog.inventory .equip-area .pos-m11,
.ui .dialog.inventory .equip-area .pos-m21,
.ui .dialog.inventory .equip-area .pos-r1 {
  top: 51px;
}
.ui .dialog.inventory .equip-area .pos-l2,
.ui .dialog.inventory .equip-area .pos-m02,
.ui .dialog.inventory .equip-area .pos-m12,
.ui .dialog.inventory .equip-area .pos-r2 {
  top: 96px;
}
.ui .dialog.inventory .tab.costume .slot[data-label]:not(.filled):after,
.ui .dialog.inventory .tab.pat .slot[data-label]:not(.filled):after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 10px;
  color: #c6c6c6;
  pointer-events: none;
}
.ui .dialog.inventory .equip-area .pat-p0,
.ui .dialog.inventory .equip-area .pat-p1,
.ui .dialog.inventory .equip-area .pat-p2,
.ui .dialog.inventory .equip-area .pat-p3,
.ui .dialog.inventory .equip-area .pat-p4 {
  top: 6px;
}
.ui .dialog.inventory .equip-area .pat-p0 {
  left: 28px;
}
.ui .dialog.inventory .equip-area .pat-p1 {
  left: 73px;
}
.ui .dialog.inventory .equip-area .pat-p2 {
  left: 118px;
}
.ui .dialog.inventory .equip-area .pat-p3 {
  left: 178px;
}
.ui .dialog.inventory .equip-area .pat-p4 {
  left: 223px;
}
.ui .dialog.inventory .tab.pat .slot[data-label]:not(.filled):after {
  font-size: 9px;
}
.ui .dialog.inventory .pat-info {
  position: absolute;
  left: 14px;
  top: 56px;
  width: 268px;
  height: 87px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #6a6a6a;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.inventory .pat-info .row {
  height: 17px;
  margin-bottom: 5px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
}
.ui .dialog.inventory .tabpanel.inventory > .header .button.vehicle {
  display: none;
}
.ui .dialog.inventory.pat-mode .tabpanel.inventory > .header .button {
  display: none;
}
.ui .dialog.inventory.pat-mode .tabpanel.inventory > .header .button.vehicle {
  display: flex;
}
.ui .dialog.inventory .tabpanel.inventory > .tab {
  display: grid;
  grid-template-columns: repeat(6, 43px);
  grid-auto-rows: 43px;
  gap: 2px;
  justify-content: center;
  padding: 6px 0;
}
.ui .dialog.inventory .tabpanel.inventory > .tab br {
  display: none;
}
.ui .dialog.inventory .inventory-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 5px 0 5px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
}
.ui .dialog.inventory .inventory-footer .label {
  color: #c6c6c6;
  margin-right: 6px;
  font-size: 11px;
}
.ui .dialog.inventory .inventory-footer .weight .value {
  color: #66ccff;
}
.ui .dialog.inventory .inventory-footer .weight.overweight .value {
  color: #ff7070;
}
.ui .dialog.inventory .inventory-footer .money .value {
  color: #ffe45e;
}
.ui .dialog.message-box {
  width: 300px;
  min-height: 150px;
}
.ui .dialog.message-box .button-area {
  font-size: 0;
}
.ui .dialog.message-box .button-area .button {
  flex: 1;
  justify-content: center;
  margin-right: 5px;
  font-size: small;
}
.ui .dialog.message-box .button-area .button:last-child {
  margin-right: 0px;
}
.ui .dialog.character-status {
  top: 10px;
  left: 10px;
  width: 250px;
  padding: 4px 6px 4px 6px;
  box-sizing: border-box;
  font-size: 11px;
}
.ui .dialog.character-status .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 14px;
}
.ui .dialog.character-status .row.top .label.name {
  width: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  width: auto;
  flex: 1;
  color: #ffe08a;
  letter-spacing: 0;
}
.ui .dialog.character-status .row.top .label.level {
  white-space: nowrap;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.ui .dialog.character-status .row.bottom {
  margin-top: 1px;
}
.ui .dialog.character-status .row.bottom .label {
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
}
.ui .dialog.character-status .row.bottom .label.weight.overweight {
  color: #ff7070;
}
.ui .dialog.character-status .main {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.ui .dialog.character-status .bars {
  flex: 1;
  min-width: 0;
}
.ui .dialog.character-status .progressbar.health,
.ui .dialog.character-status .progressbar.mana {
  height: 18px;
  line-height: 18px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.ui .dialog.character-status .progressbar.health > .bar {
  background: linear-gradient(to bottom, #d8452a, #8a1f10);
}
.ui .dialog.character-status .progressbar.mana > .bar {
  background: linear-gradient(to bottom, #3a7fe0, #1a3f94);
}
.ui .dialog.character-status .progressbar.exp {
  height: 8px;
  line-height: 8px;
  margin-bottom: 0;
  font-size: 9px;
  border-radius: 2px;
}
.ui .dialog.character-status .progressbar.exp .bar {
  background: linear-gradient(to bottom, #d8d85a, #8c8c20);
}
.ui .dialog.character-status .progressbar.exp .text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  justify-content: center;
}
.ui .dialog.character-status .progressbar.exp .label.percent {
  padding-right: 0;
  text-shadow: 1px 1px 0 #000;
}
.ui .dialog.character-status .progressbar.exp {
  position: relative;
}
.ui .dialog.character-status .slot.weapon-icon {
  flex: none;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #6a6a6a;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.character-status .slot.weapon-icon .icon {
  left: 1px;
  top: 1px;
  margin: 0;
}
.ui .dialog.quickbar {
  position: fixed;
  box-sizing: border-box;
  padding: 5px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ui .dialog.quickbar .slots {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--hud-rows, 1), var(--hud-slot, 40px));
  grid-auto-columns: var(--hud-slot, 40px);
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 0;
}
.ui .dialog.quickbar .slots::-webkit-scrollbar {
  display: none;
}
.ui .dialog.quickbar .slot {
  width: var(--hud-slot, 40px);
  height: var(--hud-slot, 40px);
  margin: 0;
  box-sizing: border-box;
}
.ui .dialog.quickbar .icon {
  margin: 0;
  transform-origin: top left;
  transform: scale(var(--hud-icon-scale, 1));
}
.ui .dialog.quickbar.hud-keyboard {
  display: none;
}
.ui .dialog.quickbar .quick-key {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  line-height: 11px;
  text-shadow: 1px 1px #000;
  pointer-events: none;
}
@media (pointer: coarse), (hover: none) {
  .ui .dialog.quickbar .quick-key {
    display: none;
  }
}
.ui .dialog.party {
  width: 290px;
  box-sizing: border-box;
}
.ui .dialog.party .label.level {
  min-width: 80px;
}
.ui .dialog.party .rules {
  display: flex;
  gap: 4px;
  margin: 5px 0;
}
.ui .dialog.party .rules .button {
  flex: 1;
  height: 22px;
  font-size: 11px;
}
.ui .dialog.party .list.members {
  min-height: 36px;
}
.ui .dialog.party .listitem {
  margin-bottom: 2px;
  cursor: pointer;
}
.ui .dialog.party .partymember {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.ui .dialog.party .partymember .label.name {
  flex: 0 0 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui .dialog.party .partymember .bars {
  flex: 1;
  min-width: 0;
}
.ui .dialog.party .partymember .progressbar.health {
  min-width: 0;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  color: white !important;
}
.ui .dialog.party .partymember .progressbar.mana {
  height: 6px;
  margin-top: 2px;
}
.ui .dialog.party .partymember.offline {
  opacity: 0.45;
}
.ui .dialog.party .actions {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}
.ui .dialog.party .actions .button {
  flex: 1;
  height: 22px;
  font-size: 11px;
}
.ui .dialog.party .button.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.ui .dialog.skills {
  position: fixed;
  width: min(527px, calc(100vw - 12px));
  height: min(387px, calc(100vh - 12px));
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
}
.ui .dialog.skills > .titlebar {
  width: calc(100% + 10px);
  height: 28px;
  margin: -5px -5px 5px -5px;
  padding: 8px 8px 0 10px;
  box-sizing: border-box;
}
.ui .dialog.skills .skills-body {
  display: flex;
  gap: 8px;
  padding: 6px 11px 6px 6px;
  height: calc(100% - 38px);
  box-sizing: border-box;
  min-width: 0;
}
.ui .dialog.skills .skill-tabs {
  width: 98px;
  flex: 0 0 98px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ui .dialog.skills .skill-tabs .button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4px;
  line-height: normal;
  min-height: 28px;
  height: 28px;
  box-sizing: border-box;
  cursor: pointer;
}
.ui .dialog.skills .skills-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ui .dialog.skills .skill-page-title {
  height: 18px;
  flex: 0 0 18px;
  text-align: center;
  font-weight: bold;
}
.ui .dialog.skills .skill-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 43px));
  grid-template-rows: repeat(6, 43px);
  justify-content: space-between;
  align-content: space-between;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ui .dialog.skills .skill-slot.slot {
  width: 43px;
  height: 43px;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  border-color: #6a6a6a;
  box-shadow: inset 0 0 4px #000;
}
.ui .dialog.skills .skill-slot .icon {
  width: 40px;
  height: 40px;
}
.ui .dialog.skills .skill-slot .skill-level-up {
  display: none;
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: #1cbd3b;
  border: 1px solid #b8ff9b;
  font: bold 13px/14px Arial;
  text-align: center;
  text-shadow: 0 1px #167b21;
  cursor: pointer;
}
.ui .dialog.skills .skill-slot.can-level .skill-level-up {
  display: block;
}
.ui .dialog.skills .skill-slot.level-pending .skill-level-up {
  opacity: 0.5;
  pointer-events: none;
}
.ui .dialog.skills .skills-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  flex: 0 0 28px;
}
.ui .dialog.skills .skill-tree-open {
  min-width: 88px;
  height: 25px;
  cursor: pointer;
}
.ui .dialog.skills .skill-points {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 70px;
  font-size: 12px;
}
.ui .dialog.skills .skill-point-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe782 0, #ba7514 62%, #392307 70%);
  color: #fff4b2;
  border: 1px solid #ffd55e;
  font-size: 8px;
  font-weight: bold;
}
.ui .dialog.skills .skill-points-value {
  color: #fff;
}
@media (max-width: 540px) {
  .ui .dialog.skills {
    width: calc(100vw - 8px);
    left: 4px !important;
    right: 4px;
    margin: 0;
    height: min(387px, calc(100vh - 8px));
  }
  .ui .dialog.skills .skills-body {
    gap: 5px;
    padding: 5px 10px 5px 5px;
  }
  .ui .dialog.skills .skill-tabs {
    width: 74px;
    flex-basis: 74px;
    gap: 4px;
  }
  .ui .dialog.skills .skill-tabs .button {
    font-size: 10px;
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
  .ui .dialog.skills .skill-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 2px;
  }
  .ui .dialog.skills .skill-slot.slot {
    width: min(43px, 100%);
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
  }
  .ui .dialog.skills .skill-slot .icon {
    width: 100%;
    height: 100%;
    background-size: 520px 520px;
  }
}
@media (max-height: 420px) {
  .ui .dialog.skills {
    height: calc(100vh - 8px);
  }
  .ui .dialog.skills .skills-body {
    height: calc(100% - 28px);
  }
}
.ui .dialog.skill-tree {
  position: fixed;
  width: min(553px, calc(100vw - 12px));
  height: min(527px, calc(100vh - 12px));
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
}
.ui .dialog.skill-tree > .titlebar {
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
}
.ui .dialog.skill-tree .skill-tree-title {
  height: 26px;
  padding: 3px 8px;
  box-sizing: border-box;
  font-weight: bold;
}
.ui .dialog.skill-tree .skill-tree-scroll {
  width: 100%;
  height: calc(100% - 26px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
.ui .dialog.skill-tree .skill-tree-canvas {
  position: relative;
  min-width: 520px;
  min-height: 500px;
  transform-origin: top left;
  background: rgba(0, 0, 0, 0.25);
}
.ui .dialog.skill-tree .skill-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ui .dialog.skill-tree .skill-tree-lines line {
  stroke: #9a9a9a;
  stroke-width: 2;
  opacity: 0.8;
}
.ui .dialog.skill-tree .skill-tree-banner {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.ui .dialog.skill-tree .skill-tree-node {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 2px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #6a6a6a;
  cursor: pointer;
}
.ui .dialog.skill-tree .skill-tree-node.root {
  width: 72px;
  height: 44px;
  font-size: 9px;
  text-align: center;
}
.ui .dialog.skill-tree .skill-tree-node.unlearned {
  filter: grayscale(1) brightness(0.48);
}
.ui .dialog.skill-tree .skill-tree-node.can-level:after {
  content: '+';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: #1cbd3b;
  border: 1px solid #b8ff9b;
  font: bold 13px/14px Arial;
  text-align: center;
}
.ui .dialog.skill-tree .skill-tree-node .icon {
  width: 100%;
  height: 100%;
}
@media (max-width: 560px) {
  .ui .dialog.skill-tree .skill-tree-scroll {
    overflow: auto;
  }
  .ui .dialog.skill-tree .skill-tree-canvas {
    min-width: 520px;
    min-height: 500px;
  }
}
.ui .dialog.minimap {
  --mm-w: 182px;
  --mm-h: 132px;
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  width: calc(var(--mm-w) + 10px);
  box-sizing: border-box;
  padding: 4px 5px 5px 5px;
  min-height: 0;
  gap: 3px;
  font-size: 11px;
}
.ui .dialog.minimap .mm-head {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
}
.ui .dialog.minimap .mm-zone {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.ui .dialog.minimap .mm-buttons {
  display: flex;
  gap: 2px;
}
.ui .dialog.minimap .mm-buttons .button {
  width: 22px;
  height: 20px;
  line-height: 17px;
  font-size: 12px;
  padding: 0;
}
.ui .dialog.minimap .mm-body {
  position: relative;
  width: var(--mm-w);
  height: var(--mm-h);
  border: 1px solid #6a6a6a;
  border-radius: 2px;
  box-shadow: inset 0 0 4px #000;
  background: #15161a;
  overflow: hidden;
}
.ui .dialog.minimap .mm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.ui .dialog.minimap .mm-nomap {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
  color: #c6c6c6;
  font-size: 13px;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.ui .dialog.minimap .mm-coords {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui .dialog.minimap.minimized .mm-body {
  display: none;
}
@media (pointer: coarse) {
  .ui .dialog.minimap {
    --mm-w: 140px;
    --mm-h: 100px;
  }
}
.ui .dialog.worldmap {
  width: min(640px, calc(100vw - 12px));
  box-sizing: border-box;
  padding-bottom: 5px;
}
.ui .dialog.worldmap .wm-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 450;
  background: #15161a;
  border: 1px solid #6a6a6a;
  border-radius: 2px;
  box-shadow: inset 0 0 4px #000;
  overflow: hidden;
}
.ui .dialog.worldmap .wm-image {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}
.ui .dialog.worldmap .wm-pin {
  position: absolute;
  margin: -27px 0 0 -10px;
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
}
.ui .dialog.worldmap .wm-none {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
  text-align: center;
  color: #c6c6c6;
}
.ui .dialog.worldmap .wm-zone {
  margin-top: 4px;
  text-align: center;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.ui .dialog.chatbox {
  width: 450px;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  max-height: 45vh;
  min-height: 0;
  position: fixed;
  overflow: hidden;
  left: 10px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding: 5px;
}
.ui .dialog.chatbox .chat-toolbar .button,
.ui .dialog.chatbox .chat-heading .button,
.ui .dialog.chatbox .chat-compose .button {
  min-height: 32px;
  height: 32px;
}
.ui .dialog.chatbox .chat-type .button {
  min-width: 32px;
}
.ui .dialog.chatbox .chat-type .button .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui .dialog.chatbox .chat-compose .textbox {
  box-sizing: border-box;
  height: 32px;
}
.ui .dialog.chatbox .chat-toolbar .open-chat {
  min-width: 36px;
  font-size: 10px;
}
@media (max-height: 400px) {
  .ui .dialog.chatbox .chat-heading {
    display: none;
  }
  .ui .dialog.chatbox .label.messages.thin-scrollbar {
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
  }
}
@media (max-width: 699px) {
  .ui .dialog.chatbox .chat-type .button .text {
    font-size: 0;
  }
  .ui .dialog.chatbox .chat-type .button .text::after {
    font-size: 11px;
  }
  .ui .dialog.chatbox .chat-type .all .text::after {
    content: 'All';
  }
  .ui .dialog.chatbox .chat-type .trade .text::after {
    content: '$';
  }
  .ui .dialog.chatbox .chat-type .clan .text::after {
    content: '@';
  }
  .ui .dialog.chatbox .chat-type .party .text::after {
    content: '#';
  }
  .ui .dialog.chatbox .chat-type .whisper .text::after {
    content: '"';
  }
  .ui .dialog.chatbox .chat-type .group .text::after {
    content: '~';
  }
}
.ui .dialog.chatbox .system.messages {
  height: 80px;
  flex: 1 1 80px;
}
.ui .dialog.chatbox .game.messages {
  height: 170px;
  flex: 2 1 170px;
}
.ui .dialog.chatbox .label.messages {
  background-color: rgba(40, 40, 40, 0.4);
  border: 1px solid #777;
  box-shadow: inset 0px 0px 3px #000;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
  overflow-y: auto;
  min-height: 0;
  overflow-wrap: break-word;
}
.ui .dialog.chatbox .label.messages .say {
  color: #ffffff;
}
.ui .dialog.chatbox .label.messages .shout {
  color: #bdfaff;
}
.ui .dialog.chatbox .label.messages .whisper {
  color: #c9ff90;
}
.ui .dialog.chatbox .label.messages .trade {
  color: #ffffff;
}
.ui .dialog.chatbox .label.messages .clan {
  color: #ffe47a;
}
.ui .dialog.chatbox .label.messages .ally {
  color: #ffe47a;
}
.ui .dialog.chatbox .label.messages .party {
  color: #ffed8c;
}
.ui .dialog.chatbox .label.messages .system {
  color: #ffe0e5;
}
.ui .dialog.chatbox .label.messages .notice {
  color: #ffbcac;
}
.ui .dialog.chatbox .label.messages .error {
  color: #ff0000;
}
.ui .dialog.chatbox .label.messages .quest {
  color: #97ddf1;
}
.ui .dialog.chatbox .label.messages .quest-reward {
  color: #e0a2d1;
}
.ui .dialog.chatbox .radiogroup.chat-type {
  display: flex;
  flex-direction: row;
  font-size: 0;
}
.ui .dialog.chatbox .radiogroup.chat-type .button {
  flex: 1;
  margin-right: 2px;
  min-width: 0;
  padding: 3px 1px;
  font-size: 11px;
}
.ui .dialog.chatbox .radiogroup.chat-type .button:last-child {
  margin-right: 0px;
}
.ui .dialog.chatbox .chat-heading,
.ui .dialog.chatbox .chat-toolbar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
}
.ui .dialog.chatbox .chat-heading {
  justify-content: space-between;
}
.ui .dialog.chatbox .chat-type {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.ui .dialog.chatbox .chat-type .button {
  min-height: 28px;
  box-sizing: border-box;
}
.ui .dialog.chatbox .button.minimize,
.ui .dialog.chatbox .button.open-chat {
  min-width: 28px;
  min-height: 28px;
}
.ui .dialog.chatbox .button.unread {
  box-shadow: inset 0 -3px #ffd777;
  color: #ffd777;
}
.ui .dialog.chatbox .system-summary {
  display: none;
  height: 18px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ddd;
  font-size: 11px;
}
.ui .dialog.chatbox .chat-compose {
  flex-shrink: 0;
  margin-top: 3px;
}
.ui .dialog.chatbox .textbox.message {
  min-width: 0;
  font-size: 16px;
}
.ui .dialog.chatbox .button.open-chat {
  display: none;
}
.ui .dialog.chatbox.minimized .chat-heading,
.ui .dialog.chatbox.minimized .messages,
.ui .dialog.chatbox.minimized .chat-compose,
.ui .dialog.chatbox.minimized .button.minimize {
  display: none;
}
.ui .dialog.chatbox.minimized .system-summary,
.ui .dialog.chatbox.minimized .button.open-chat {
  display: block;
}
.ui .dialog.chatbox .button.send {
  width: 50px;
  height: inherit;
  margin-left: 5px;
}
.ui .dialog.debug {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  top: -2px;
  right: 10px;
  min-width: 200px;
}
.ui .dialog.debug .panel.controls {
  box-shadow: inset 0px 0px 3px #ffffff;
  background-color: rgba(50, 50, 50, 0.7);
  border: 1px solid #000;
  border-radius: 0;
}
.ui .dialog.debug .panel.controls .button {
  border-radius: 0;
  margin-top: -1px;
  height: 24px;
  text-align: left;
  padding-left: 5px;
}
.ui .dialog.debug .panel.controls *:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top: 0px;
}
.ui .dialog.debug .panel.controls *:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.ui .dialog.debug .button.toggle-controls {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.item-iconsheet-1 {
  background: url('/data/3DDATA/CONTROL/RES/ICON01.png');
}
.item-iconsheet-2 {
  background: url('/data/3DDATA/CONTROL/RES/ICON02.png');
}
.item-iconsheet-3 {
  background: url('/data/3DDATA/CONTROL/RES/ICON03.png');
}
.item-iconsheet-4 {
  background: url('/data/3DDATA/CONTROL/RES/ICON04.png');
}
.item-iconsheet-5 {
  background: url('/data/3DDATA/CONTROL/RES/ICON05.png');
}
.item-iconsheet-6 {
  background: url('/data/3DDATA/CONTROL/RES/ICON06.png');
}
.item-iconsheet-7 {
  background: url('/data/3DDATA/CONTROL/RES/ICON07.png');
}
.item-iconsheet-8 {
  background: url('/data/3DDATA/CONTROL/RES/ICON08.png');
}
.item-iconsheet-9 {
  background: url('/data/3DDATA/CONTROL/RES/ICON09.png');
}
.item-iconsheet-10 {
  background: url('/data/3DDATA/CONTROL/RES/ICON10.png');
}
.item-iconsheet-11 {
  background: url('/data/3DDATA/CONTROL/RES/ICON11.png');
}
.item-iconsheet-12 {
  background: url('/data/3DDATA/CONTROL/RES/ICON12.png');
}
.item-iconsheet-13 {
  background: url('/data/3DDATA/CONTROL/RES/ICON13.png');
}
.item-iconsheet-14 {
  background: url('/data/3DDATA/CONTROL/RES/ICON14.png');
}
.item-iconsheet-15 {
  background: url('/data/3DDATA/CONTROL/RES/ICON15.png');
}
.item-iconsheet-16 {
  background: url('/data/3DDATA/CONTROL/RES/ICON16.png');
}
.item-iconsheet-17 {
  background: url('/data/3DDATA/CONTROL/RES/ICON17.png');
}
.item-iconsheet-18 {
  background: url('/data/3DDATA/CONTROL/RES/ICON18.png');
}
.item-iconsheet-19 {
  background: url('/data/3DDATA/CONTROL/RES/ICON19.png');
}
.item-iconsheet-20 {
  background: url('/data/3DDATA/CONTROL/RES/ICON20.png');
}
.item-iconsheet-21 {
  background: url('/data/3DDATA/CONTROL/RES/ICON21.png');
}
.item-iconsheet-22 {
  background: url('/data/3DDATA/CONTROL/RES/ICON22.png');
}
.item-iconsheet-23 {
  background: url('/data/3DDATA/CONTROL/RES/ICON23.png');
}
.item-iconsheet-24 {
  background: url('/data/3DDATA/CONTROL/RES/ICON24.png');
}
.item-iconsheet-25 {
  background: url('/data/3DDATA/CONTROL/RES/ICON25.png');
}
.item-iconsheet-26 {
  background: url('/data/3DDATA/CONTROL/RES/ICON26.png');
}
.item-iconsheet-27 {
  background: url('/data/3DDATA/CONTROL/RES/ICON27.png');
}
.item-iconsheet-28 {
  background: url('/data/3DDATA/CONTROL/RES/ICON28.png');
}
.item-iconsheet-29 {
  background: url('/data/3DDATA/CONTROL/RES/ICON29.png');
}
.item-iconsheet-30 {
  background: url('/data/3DDATA/CONTROL/RES/ICON30.png');
}
.item-iconsheet-31 {
  background: url('/data/3DDATA/CONTROL/RES/ICON31.png');
}
.item-iconsheet-32 {
  background: url('/data/3DDATA/CONTROL/RES/ICON32.png');
}
.item-iconsheet-33 {
  background: url('/data/3DDATA/CONTROL/RES/ICON33.png');
}
.item-iconsheet-34 {
  background: url('/data/3DDATA/CONTROL/RES/ICON34.png');
}
.item-iconsheet-35 {
  background: url('/data/3DDATA/CONTROL/RES/ICON35.png');
}
.item-iconsheet-36 {
  background: url('/data/3DDATA/CONTROL/RES/ICON36.png');
}
.item-iconsheet-37 {
  background: url('/data/3DDATA/CONTROL/RES/ICON37.png');
}
.item-iconsheet-38 {
  background: url('/data/3DDATA/CONTROL/RES/ICON38.png');
}
.item-iconsheet-39 {
  background: url('/data/3DDATA/CONTROL/RES/ICON39.png');
}
.item-iconsheet-40 {
  background: url('/data/3DDATA/CONTROL/RES/ICON40.png');
}
.item-iconsheet-41 {
  background: url('/data/3DDATA/CONTROL/RES/ICON41.png');
}
.item-iconsheet-42 {
  background: url('/data/3DDATA/CONTROL/RES/ICON42.png');
}
.item-iconsheet-43 {
  background: url('/data/3DDATA/CONTROL/RES/ICON43.png');
}
.item-iconsheet-44 {
  background: url('/data/3DDATA/CONTROL/RES/ICON44.png');
}
.item-iconsheet-45 {
  background: url('/data/3DDATA/CONTROL/RES/ICON45.png');
}
.item-iconsheet-46 {
  background: url('/data/3DDATA/CONTROL/RES/ICON46.png');
}
.item-iconsheet-47 {
  background: url('/data/3DDATA/CONTROL/RES/ICON47.png');
}
.item-iconsheet-48 {
  background: url('/data/3DDATA/CONTROL/RES/ICON48.png');
}
.item-iconsheet-49 {
  background: url('/data/3DDATA/CONTROL/RES/ICON49.png');
}
.item-iconsheet-50 {
  background: url('/data/3DDATA/CONTROL/RES/ICON50.png');
}
.item-iconsheet-51 {
  background: url('/data/3DDATA/CONTROL/RES/ICON51.png');
}
.item-iconsheet-52 {
  background: url('/data/3DDATA/CONTROL/RES/ICON52.png');
}
.item-iconsheet-53 {
  background: url('/data/3DDATA/CONTROL/RES/ICON53.png');
}
.item-iconsheet-54 {
  background: url('/data/3DDATA/CONTROL/RES/ICON54.png');
}
.item-iconsheet-55 {
  background: url('/data/3DDATA/CONTROL/RES/ICON55.png');
}
.item-iconsheet-56 {
  background: url('/data/3DDATA/CONTROL/RES/ICON56.png');
}
.item-iconsheet-57 {
  background: url('/data/3DDATA/CONTROL/RES/ICON57.png');
}
.item-iconsheet-58 {
  background: url('/data/3DDATA/CONTROL/RES/ICON58.png');
}
.item-iconsheet-59 {
  background: url('/data/3DDATA/CONTROL/RES/ICON59.png');
}
.item-iconsheet-60 {
  background: url('/data/3DDATA/CONTROL/RES/ICON60.png');
}
.item-iconsheet-61 {
  background: url('/data/3DDATA/CONTROL/RES/ICON61.png');
}
.item-iconsheet-62 {
  background: url('/data/3DDATA/CONTROL/RES/ICON62.png');
}
.item-iconsheet-63 {
  background: url('/data/3DDATA/CONTROL/RES/ICON63.png');
}
.item-iconsheet-64 {
  background: url('/data/3DDATA/CONTROL/RES/ICON64.png');
}
.item-iconsheet-65 {
  background: url('/data/3DDATA/CONTROL/RES/ICON65.png');
}
.item-iconsheet-66 {
  background: url('/data/3DDATA/CONTROL/RES/ICON66.png');
}
.item-iconsheet-67 {
  background: url('/data/3DDATA/CONTROL/RES/ICON67.png');
}
.item-iconsheet-68 {
  background: url('/data/3DDATA/CONTROL/RES/ICON68.png');
}
.item-iconsheet-69 {
  background: url('/data/3DDATA/CONTROL/RES/ICON69.png');
}
.item-iconsheet-70 {
  background: url('/data/3DDATA/CONTROL/RES/ICON70.png');
}
.item-iconsheet-71 {
  background: url('/data/3DDATA/CONTROL/RES/ICON71.png');
}
.item-iconsheet-72 {
  background: url('/data/3DDATA/CONTROL/RES/ICON72.png');
}
.skill-iconsheet-1 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL01.png');
}
.skill-iconsheet-2 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL02.png');
}
.skill-iconsheet-3 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL03.png');
}
.skill-iconsheet-4 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL04.png');
}
.skill-iconsheet-5 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL05.png');
}
.skill-iconsheet-6 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL06.png');
}
.skill-iconsheet-7 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL07.png');
}
.skill-iconsheet-8 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL08.png');
}
.skill-iconsheet-9 {
  background: url('/data/3DDATA/CONTROL/RES/SKILL09.png');
}