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;
}
.ui {
  color: white;
  font-family: 'Tahoma';
  font-size: small;
  cursor: default;
  z-index: 0;
  /* Some helper classes */
  /* Generic UI panel */
  /* Dialog */
  /* Button element */
  /* Tabs Element */
  /* Item/Skill Slot Element */
  /*
   * A slot in a NATIVE-pipeline window (inventory, quickbar, shop, bank).
   *
   * `.slot` above is the hand-built HTML look: a grey border, a rounded corner,
   * a dark fill and an inset shadow, drawn because those windows had no art of
   * their own. A native window already draws its grid in the dialog's own TSI
   * art, so that chrome lands ON TOP of the real cell -- and its 2px margin
   * shifts every absolutely-positioned cell 2px down and right of the geometry
   * the C++ hand-tuned. Here the slot is only a hit box.
   *
   * The widget class `slot` cannot simply be dropped: ui.widgetConstructor
   * refuses an element that does not carry it.
   */
  /* A listbox that scrolls itself but is driven by the window's OWN
     SCROLLBAR art (DlgQuest's 20/21 and 30/31 pairs). The browser's native
     bar would sit on top of the authored one. */
  /*
   * A bag slot whose item is ALREADY IN THE TRADE BASKET.
   *
   * The slot keeps its item -- the item has not left the bag, it is only
   * spoken for -- but it takes no drag and no command until it is taken back
   * out of the basket. Greying it is what says so: without it the slot simply
   * stopped responding, which reads as a broken window rather than a rule.
   *
   * The icon is dimmed and desaturated rather than the whole cell, so the
   * window's own grid art underneath keeps its colour.
   */
  /* Textbox Widget */
  /* List Element */
  /* Progressbar Element */
  /* Some default colours for progress bar */
  /* Checkbox Element */
  /* dlgStatus */
  /* Login Dialog */
  /* dlgServerSelect */
  /* dlgCharacterSelect */
  /* dlgCharacterCreate */
  /* dlgMenu */
  /* dlgCharacterStatus */
  /* dlgCharacter */
  /* dlgQuestList */
  /* dlgNpcChat */
  /* dlgMessageBox */
  /* dlgQuickBar */
  /* dlgParty */
  /* dlgChatBox */
}
.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: auto;
  min-width: 250px;
  max-width: 420px;
  z-index: 999;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
}
.ui .tooltip .name {
  font-weight: bold;
}
.ui .tooltip .tooltip-body .line {
  white-space: nowrap;
  line-height: 15px;
}
.ui .tooltip .tooltip-body .line.small {
  font-size: 10px;
  line-height: 12px;
}
.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 .rose-staged > .icon {
  opacity: 0.35;
  filter: grayscale(70%);
}
.ui .rose-staged {
  cursor: default;
}
.ui .rose-noscrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui .rose-noscrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.ui .rose-questrow:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ui .rose-nativeslot {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  /* The -1px nudges on .icon exist to sit inside the .panel border above.
       With no border there is nothing to sit inside. */
}
.ui .rose-nativeslot > .icon {
  margin-top: 0;
  margin-left: 0;
}
.ui .icon {
  position: absolute;
  margin-top: -1px;
  margin-left: -1px;
  width: 40px;
  height: 40px;
  /* The socket mark -- CIconItem::Draw paints it at the icon's own
       m_ptPosition, i.e. the top-left of the 40x40 cell, under the stack count.
       Click-through: the icon beneath owns every gesture in IconSlot. */
}
.ui .icon .socket {
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
.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;
}
.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 {
  right: 10px;
  bottom: 10px;
  width: 100px;
}
.ui .dialog.menu .button {
  margin-bottom: 5px;
}
.ui .dialog.character-status {
  top: 10px;
  left: 10px;
}
.ui .dialog.character-status .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;
  padding-bottom: 3px;
}
.ui .dialog.character-status .progressbar.health {
  width: 200px;
}
.ui .dialog.character-status .progressbar.mana {
  width: 200px;
}
.ui .dialog.character-status .progressbar.exp {
  width: 200px;
  height: 0.5em;
  border-radius: 2px;
  background-size: 10% 100%;
  background-position: 1px 0px;
  background-image: linear-gradient(to right, rgba(150, 150, 100, 0.4) 90%, rgba(0, 0, 0, 0.5) 10%);
}
.ui .dialog.character {
  top: 100px;
  left: 500px;
}
.ui .dialog.character .stat-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ui .dialog.character .stat-column {
  margin-right: 5px;
}
.ui .dialog.character .stat-column:last-child {
  margin-right: 0px;
}
.ui .dialog.character .stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2px;
}
.ui .dialog.character .stat .value {
  flex: 1;
  background-color: rgba(40, 40, 40, 0.5);
  border-radius: 4px;
  text-align: center;
  height: 1.3em;
}
.ui .dialog.character .stat .label.cost {
  min-width: 20px;
  margin-right: 5px;
  text-align: right;
}
.ui .dialog.character .stat .button.levelup {
  min-width: 20px;
  height: 20px;
  margin-right: 5px;
}
.ui .dialog.character .stat .progressbar {
  flex: 1;
  height: 1.5em !important;
}
.ui .dialog.character .stat-row.long-stats {
  align-items: baseline;
}
.ui .dialog.character .stat-row.long-stats .stat-column {
  min-width: 160px;
}
.ui .dialog.character .stat-row.long-stats .stat-column:first-child {
  min-width: 140px;
}
.ui .dialog.character .stat-row.long-stats .stat-column .stat .type {
  min-width: 100px;
}
.ui .dialog.character .stat.level .type,
.ui .dialog.character .stat.job .type,
.ui .dialog.character .stat.clan .type,
.ui .dialog.character .stat.health .type,
.ui .dialog.character .stat.mana .type,
.ui .dialog.character .stat.exp .type {
  min-width: 35px !important;
}
.ui .dialog.character .stat.strength .type,
.ui .dialog.character .stat.dexterity .type,
.ui .dialog.character .stat.intelligence .type,
.ui .dialog.character .stat.concentration .type,
.ui .dialog.character .stat.charm .type,
.ui .dialog.character .stat.sense .type {
  min-width: 35px !important;
}
.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.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;
  margin-right: 5px;
  font-size: small;
}
.ui .dialog.message-box .button-area .button:last-child {
  margin-right: 0px;
}
.ui .dialog.quickbar {
  display: flex;
  flex-direction: row;
  bottom: 10px;
}
.ui .dialog.party .label.level {
  min-width: 80px;
}
.ui .dialog.party .partymember {
  display: flex;
  flex-direction: row;
}
.ui .dialog.party .partymember .label.name {
  min-width: 90px;
}
.ui .dialog.party .partymember .progressbar.health {
  min-width: 150px;
  color: white !important;
}
.ui .dialog.skills .slot {
  margin: 5px 5px 5px 5px;
}
.ui .dialog.skills .skill-panel {
  width: 352px;
}
.ui .dialog.chatbox {
  width: 450px;
  left: 10px;
  bottom: 10px;
}
.ui .dialog.chatbox .system.messages {
  height: 80px;
}
.ui .dialog.chatbox .game.messages {
  height: 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;
}
.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: 5px;
  font-size: small;
}
.ui .dialog.chatbox .radiogroup.chat-type .button:last-child {
  margin-right: 0px;
}
.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;
}
/* ==========================================================================
   QQiROSE glass skin -- THE REAL GAME ART, not an approximation.

   gui/skin/gen_wnd01.png and gen_wnd04.png are cut straight out of
   3DDATA/Control/RES/GLASSUI_00.DDS using the rects in NEWUI.TSI, then
   recomposed as 47x47 nine-patches (23px corner / 1px centre / 23px corner)
   so CSS border-image can stretch them exactly the way the native client's
   nine-slice does. GEN_WND01 is the outer window shell, GEN_WND04 the inner
   sheet -- the same two pieces every glass dialog in the real client uses.

   A ported window is skinned by adding .qq-glass. Nothing here touches
   widget logic, so the alpharose dialogs keep working untouched.

   NOTE the 23px frame is real geometry, not padding: content sits inside it,
   exactly as in the game. See reference_glass_dialog_ninepatch_geometry.
   ========================================================================== */
.ui {
  /* The inner sheet, for windows that want the second frame. A captionless
     readout must NOT use this -- one band is a complete panel on its own. */
}
.ui .qq-glass {
  position: relative;
  color: #eef1f7;
  /* `fill` paints the 1px centre slice as the body -- that centre pixel is
       RGBA(33,32,33,135), the game's own translucent panel. */
  border: 23px solid transparent;
  border-image: url("/gui/skin/gen_wnd01.png") 23 fill stretch;
  background: transparent;
}
.ui .qq-sheet {
  border: 23px solid transparent;
  border-image: url("/gui/skin/gen_wnd04.png") 23 fill stretch;
}
.ui .mm-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #98a1b4;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ui .mm-chip:hover {
  background: rgba(255, 111, 156, 0.35);
  border-color: #ff6f9c;
  color: #fff;
}
.ui .minimap {
  position: absolute;
  width: 208px;
  z-index: 40;
  /* Square box pinned by _resizeCanvas; the ring clips the map to a disc. */
}
.ui .minimap .mm-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ui .minimap .mm-head .zone {
  flex: 1 1 auto;
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui .minimap .mm-head .mm-channel {
  color: #ff6f9c;
  font-size: 11px;
}
.ui .minimap .mm-aperture {
  position: relative;
  width: 192px;
  height: 192px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
}
.ui .minimap .mm-aperture canvas.map {
  display: block;
  width: 100%;
  height: 100%;
}
.ui .minimap .mm-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
}
.ui .minimap .mm-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.ui .minimap .mm-foot .coords {
  flex: 1 1 auto;
  color: #98a1b4;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ui .minimap .mm-tools {
  display: flex;
  gap: 4px;
}
.ui .minimap.collapsed .mm-aperture,
.ui .minimap.collapsed .mm-foot {
  display: none;
}
/* ---------------------------------------------------------------------------
   SKILL / ITEM COOLDOWN OVERLAY

   THESE RULES DID NOT EXIST. `IconSlot._renderCooldown` has always built a
   `.cooldown` box holding a `.cooldown-sweep` and a `.cooldown-time`, but no
   stylesheet in the project ever mentioned any of the three -- so the sweep div
   had no size and no positioning and painted nothing, and the only thing that
   reached the screen was the bare seconds text sitting in the icon's top-left.
   That is the "cooldown is just a number" bug: the wipe was computed correctly
   every frame and then thrown away by the layout.

   The geometry is `zz_renderer_d3d::draw_sprite_cover` (zz_renderer_d3d.cpp:6282),
   which CReloadProcess::Draw calls with coverColor RGBA(0,0,0,110):

     angle_value = value * 2 * PI          value = remaining / total
     vector      = (sin a, -cos a)         a = 0 is 12 o'clock, a grows CLOCKWISE

   A CSS conic-gradient also starts at 12 o'clock and also runs clockwise, so the
   wedge maps across with no correction. 110/255 = 0.431 -- the old inline value
   of 0.7 was a guess and made the icon far darker than the client's.
   --------------------------------------------------------------------------- */
.cooldown {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Decoration only: the slot underneath still has to take the click that
     casts the skill, and the drag that moves it. */
  pointer-events: none;
  z-index: 6;
}
.cooldown-sweep {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-image is set per frame by IconSlot._renderCooldown. */
}
.cooldown-time {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  /* FONT_OUTLINE_11_BOLD, centred on the icon -- CSkill::DrawIcon centres the
     string on (20, 20) of the 40x40 slot, which is what translate(-50%) does
     here without having to measure the glyphs. */
  transform: translateY(-50%);
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  color: #ffffff;
  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
}
/* ===========================================================================
   THE BROWSER CONTROLS AND THE TABLET HUD
     gui/hudmode.js       -- the two buttons beside the status plate
     gui/touchcontrols.js -- the stick, the skill pad, the action buttons

   Z-INDEX. Everything here clears UIDialog's window band. UIDialog hands out
   z-index 100 and UP (`++UIDialog._topZ`) and grows it on every bringToFront,
   so a fixed number in the low hundreds is beaten by any window the player
   raises often enough. 2500 is deliberately above that band and below the
   loading screen's 3000: the stick is how the character MOVES, and a window
   dragged over it would strand the player. The two mode buttons sit at the
   same level for the same reason -- the way back OUT of tablet mode must not
   be coverable by the tablet HUD it switches off.

   THE PAD'S GEOMETRY IS SHARED WITH THE JAVASCRIPT. The cell size (56px) and
   the gap (7px) below are PAD_CELL and PAD_GAP in gui/touchcontrols.js, which
   is what positions each cell. Change one and change the other, or the grid
   comes apart -- which is also why the compact rules further down resize the
   panel and the buttons but never the cells.
   =========================================================================== */
/* TWO BANDS, AND THE SPLIT IS DELIBERATE.
   (Play-tested 2026-08-30: "any UI can draw in front of our new skillbar --
   the inventory was BEHIND it; any window should draw in front".)

   UIDialog hands every window a z-index from `++UIDialog._topZ`, starting at
   100 and climbing on each bringToFront -- so a WINDOW is always >= 100, and
   the last one raised is the highest. Everything here started at 2500, above
   that band, which is what buried the inventory behind the skill pad.

   @rb-hud-z IS NEGATIVE, and 90 was not good enough. A UIDialog is given a
   z-index only when it is RAISED -- `bringToFront` runs off the window's own
   mousedown, and nothing stamps one at open time -- so a window the player has
   opened and not yet clicked computes to `z-index: auto`. In the painting
   order, ANY positive z-index beats `auto`, so at 90 the tablet HUD drew over
   a freshly opened Character window while the same window covered it fine
   after one click. That is the "jump/sit/pickup always draw in front" report:
   intermittent by nature, and it looked like an icon bug because the three
   sprites were the most obvious thing showing through.

   -1 puts the whole subtree in painting step 3: BEHIND every positioned
   sibling, `auto` and numbered alike, with no dependence on whether a window
   has been touched. It does NOT fall behind the 3D view -- `.ui` is
   `position: fixed; z-index: 0`, which makes it a stacking context, so a
   negative child is contained by it and still paints above the canvas outside
   it. Hit-testing follows paint order, so the stick keeps taking its own
   touches from the world; it simply loses them to any window laid over it,
   which is the whole point.

   The fix belongs HERE rather than in UIDialog: stamping a z-index on every
   dialog at open time would make each one a stacking context and change how
   every control's z-index (2, 3, 6, 40) resolves client-wide -- see the note
   in tooltipmanager.js, which relies on today's behaviour.

   @rb-btn-z (2500) is the exception, and only the three corner buttons are in
   it: Full Screen, PC/Tablet and Reset UI. Those are the way OUT of any state
   the HUD can get into -- Reset UI is literally "put my windows back" -- and a
   recovery control that a window can sit on top of is not a recovery control.
   They are 30px tall in a corner, so the cost is nil. */
/* WHERE THE THREE CLUSTERS SIT, and why these numbers and not the edges.
   (Play-tested 2026-08-30: the pad was tucked under the menu column and the
   stick was jammed into the corner.)

   RIGHT: DlgMenu is 56px wide (its Root_Element WIDTH) and docks to the right
   edge, so anything closer in than that is UNDERNEATH the button column --
   which is exactly where the skill pad's last column had ended up. 68 = those
   56 plus a 12px gutter, so the pad ends where the menu begins.

   LEFT: the stick is off the edge rather than against it. A thumb wrapped round
   the bezel cannot reach a control flush with the frame, and the chat window's
   restore tab (34px at 8,8) lives down there too.

   The action column is DERIVED, never typed: it is the pad's own offset plus
   the pad's width plus a gutter, so moving the pad moves the buttons with it.
   @rb-pad-width is 4 cells (56) + 3 gaps (7) + 2 * 8px padding + 2px border,
   and the cell/gap figures are PAD_CELL / PAD_GAP in gui/touchcontrols.js. */
/* The compact pad is narrower (5px padding instead of 8), so its button column
   sits correspondingly closer in. */
/* --- the two buttons beside the status plate ------------------------------ */
.ui .rb-hudbtns {
  position: absolute;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* The zero-size `.ui` box takes no pointers; each button turns them back on
     for itself, so the gap between the two still belongs to the world. */
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
}
/* THE STANDALONE SIZE BUTTON, shown whenever the in-game bar is not (i.e. the
   login and character-select screens). Docked to the top-right rather than
   measured against DlgInfo, which does not exist on those screens.

   `position: fixed` and not absolute: the `.ui` box is sized to the UI's own
   viewport and a fixed child resolves against it (the transform makes it the
   containing block), so `right`/`top` mean the corner of the screen at every
   scale -- which is the whole point of a control you must be able to find when
   the UI is too big to read. */
.ui .rb-hudbtns-solo {
  position: fixed;
  right: calc(10px + var(--rb-safe-right, 0px));
  top: calc(10px + var(--rb-safe-top, 0px));
}
.ui .rb-hudbtn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 88px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(12, 14, 20, 0.62);
  color: #dfe4ee;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Stops a tap being read as a double-tap zoom or the start of a scroll. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ui .rb-hudbtn:hover {
  background: rgba(28, 32, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.ui .rb-hudbtn:active {
  transform: translateY(1px);
}
/* On = full screen taken, or tablet mode running. */
.ui .rb-hudbtn-on {
  border-color: #ff6f9c;
  color: #fff;
  background: rgba(120, 26, 55, 0.72);
}
.ui .rb-hudbtn-glyph {
  font-size: 13px;
  line-height: 1;
  /* Emoji glyph widths differ wildly between platforms; a fixed box keeps the
     two captions starting at the same x whatever the machine substitutes. */
  width: 15px;
  text-align: center;
}
/* --- the tablet HUD root -------------------------------------------------- */
.ui .rb-touch {
  /* Not a box of its own: three corner-docked children in viewport space, so
     nothing here can swallow a click meant for the world. */
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: -1;
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
}
/* --- the analog stick ----------------------------------------------------- */
.ui .rb-stick {
  pointer-events: auto;
  position: fixed;
  /* Bottom-LEFT, off the edge rather than against it (see @rb-stick-left) and
     clear of the chat window's restore tab (34px at 8,8), so the way back to
     chat is never underneath the thumb. */
  left: calc(64px + var(--rb-safe-left, 0px));
  bottom: calc(56px + var(--rb-safe-bottom, 0px));
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(10, 12, 18, 0.55) 62%, rgba(10, 12, 18, 0.68) 100%);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  /* The stick OWNS its gestures. Without this the browser reads the push as a
     scroll or a pinch and takes the finger away mid-walk. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.72;
  transition: opacity 140ms ease, border-color 140ms ease;
}
.ui .rb-stick-held {
  opacity: 1;
}
/* The ring the knob may reach. Past it the character RUNS, so it is drawn
   where the switch actually is rather than as decoration: 104px across is
   2 * RUN_AT * the 72px of knob travel, near enough to read by eye. */
.ui .rb-stick-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.ui .rb-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.92) 0%, rgba(190, 200, 215, 0.85) 45%, rgba(90, 100, 118, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  /* NO transition on transform. The knob is driven straight from the finger,
     and a tween would put it behind where the thumb actually is. */
}
.ui .rb-stick-run {
  border-color: #ff6f9c;
}
.ui .rb-stick-run .rb-stick-knob {
  background: radial-gradient(circle at 40% 35%, #ffd0e0 0%, #ff6f9c 55%, #a13358 100%);
}
/* --- the skill pad -------------------------------------------------------- */
.ui .rb-pad {
  pointer-events: auto;
  position: fixed;
  /* Inboard of DlgMenu's 56px button column -- see @rb-pad-right. */
  right: calc(68px + var(--rb-safe-right, 0px));
  bottom: calc(14px + var(--rb-safe-bottom, 0px));
  padding: 8px;
  border-radius: 8px;
  background: rgba(12, 14, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}
.ui .rb-pad-grid {
  position: relative;
}
/* SCALED, NOT RESIZED. IconSlot draws a fixed 40x40 `.icon` whose art is a TSI
   atlas offset, so a bigger box would leave a 40px sprite in its corner rather
   than a bigger button. 40 * 1.4 = 56px, the usual floor for a thumb, and the
   1.4 here is PAD_SCALE in gui/touchcontrols.js. */
.ui .rb-padslot {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: scale(1.4);
  transform-origin: 0 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;
}
.ui .rb-pad-pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.ui .rb-pad-dot {
  width: 30px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #b9c1d0;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ui .rb-pad-dot-on {
  border-color: #ff6f9c;
  background: rgba(120, 26, 55, 0.72);
  color: #fff;
}
/* --- the action buttons --------------------------------------------------- */
.ui .rb-actions {
  pointer-events: auto;
  position: fixed;
  /* A column immediately LEFT of the pad, so both live under the right thumb
     and neither drifts into the middle of the screen. DERIVED from the pad's
     own offset and width (@rb-act-right) so that moving the pad moves these
     with it and the two can never drift apart. */
  right: calc(341px + var(--rb-safe-right, 0px));
  bottom: calc(14px + var(--rb-safe-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  touch-action: manipulation;
}
/* NO PLATE. These were dark circles with the icon inset; the circle is gone and
   the sprite IS the button (user, 2026-08-30). It reads better because the TSI
   art already carries its own frame -- the disc was a second border around a
   bordered icon -- and dropping it buys the icon back the 24px the inset cost,
   so the target got BIGGER by losing its chrome, not smaller.

   The stick, the camera button and the skill pad keep their panels: those are
   surfaces you press ANYWHERE on, and they have to show you where they are.
   These three are single sprites, and a sprite needs no saucer. */
.ui .rb-action {
  padding: 2px;
  color: #dfe4ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* The only thing standing in for the plate: the label has to stay readable
     over bright ground now that there is nothing behind it. */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* Press feedback was the plate's job; without one the icon itself has to
   answer, or a tap looks like it missed. */
.ui .rb-action:active {
  transform: scale(0.92);
}
/* THE GAME'S OWN ICON, not a glyph. Jump / Sit / Pick Up are LIST_SKILL rows
   11-13 and column 51 is their icon number into Skill1.TSI, so these are the
   same sprites the quick bar and the skill tree draw (see _paintActionIcons).

   `.icon` is absolutely positioned at a fixed 40x40 with a -1px nudge, so it
   needs a positioned box of its own to sit in -- and it is SCALED into that
   box rather than resized, for the same reason the skill pad's cells are: the
   art is an atlas OFFSET, and a smaller element would show a smaller WINDOW
   onto the sheet instead of a smaller icon. 40 * 0.8 = 32. */
.ui .rb-action-art {
  position: relative;
  width: 40px;
  height: 40px;
  pointer-events: none;
  /* Lifts the sprite off bright terrain now that no plate does. */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}
.ui .rb-action-label {
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
}
/* --- short screens -------------------------------------------------------- */
/* Under ~520px of height the panel and the button column crowd the bottom
   edge, so the CHROME steps down. THE CELLS DO NOT: their positions come from
   PAD_CELL / PAD_GAP in the JavaScript, and shrinking them here alone would
   pull the grid apart. The stick keeps its size too -- it is the control that
   has to stay accurate, and a smaller ring is a coarser one. */
.ui .rb-touch-compact .rb-pad {
  padding: 5px;
}
.ui .rb-touch-compact .rb-pad-pager {
  margin-top: 5px;
}
.ui .rb-touch-compact .rb-pad-dot {
  height: 20px;
  line-height: 18px;
}
.ui .rb-touch-compact .rb-action-art {
  width: 32px;
  height: 32px;
}
.ui .rb-touch-compact .rb-action-art > .icon {
  transform: scale(0.8);
  transform-origin: top left;
}
.ui .rb-touch-compact .rb-action-label {
  font-size: 8px;
}
.ui .rb-touch-compact .rb-actions {
  gap: 6px;
  right: calc(331px + var(--rb-safe-right, 0px));
}
/* --- the camera button ---------------------------------------------------- */
/* "Hold right-click", for a machine with one button. Press and drag -- the drag
   continues off the button and across the whole screen, because that is what
   makes it the same gesture rather than a 92px scrubbing area.

   POSITIONED FROM JAVASCRIPT (`TouchControls._layout`), centred over the skill
   pad and sitting just above it. The pad's height is whatever its three rows
   and its pager come to, and a second copy of that number here would drift the
   moment either changed; left/top are written from the pad's measured box
   instead. These offsets are only the pre-measurement resting place. */
.ui .rb-look {
  pointer-events: auto;
  position: fixed;
  right: calc(154px + var(--rb-safe-right, 0px));
  bottom: calc(260px + var(--rb-safe-bottom, 0px));
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.1) 0%, rgba(10, 12, 18, 0.55) 65%, rgba(10, 12, 18, 0.68) 100%);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
  color: #dfe4ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* It OWNS its gesture: without this the browser reads the drag as a scroll or
     a pinch and takes the finger away mid-turn. */
  touch-action: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  opacity: 0.72;
  transition: opacity 140ms ease, border-color 140ms ease;
}
.ui .rb-look-held {
  opacity: 1;
  border-color: #ff6f9c;
  cursor: grabbing;
}
.ui .rb-look-glyph {
  font-size: 26px;
  line-height: 1;
}
.ui .rb-look-label {
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
}
.ui .rb-touch-compact .rb-look {
  width: 76px;
  height: 76px;
}
.ui .rb-touch-compact .rb-look-glyph {
  font-size: 21px;
}