.window {
  display: none;
  color: grey;
  flex-direction: column;
  flex: 0 1 auto;
  background-image: url("/png/bg3.png");
  min-height: 0
}

.window > .body {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  min-height: 40px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  overflow-y: scroll;
  scrollbar-width: thin;
}

.window > .header {
  height: 22px;
  display: flex;
  align-items: center;
  cursor: move;
  padding-left: 4px;
  background-image: url("/png/bg4.png");
}

.window > .header > button {
  flex: 0 0 auto;
}

.window > .header > .title {
  flex: 1 1 auto;
  padding-left: 8px;
  pointer-events: none;
}

.window > .footer {
  height: 4px;
  cursor: ns-resize;
  background: black;
}

.friend-entry {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The icon of a VIP (Friendlist.ICONS) */
.friend-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

.friend-empty {
  color: #9a9a9a;
  font-size: 11px;
  padding: 2px 4px;
}

/* The icons to choose in Edit VIP */
.vip-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vip-icon-choice {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid #444;
  cursor: pointer;
  font-size: 16px;
  text-shadow: 1px 1px 0 #000;
}

.friend-entry:hover {
  color: white !important;
}

#skill-window .body {
  display: block;
}
/* Unlock HUD (HudLayout): handles to drag the columns and the chat */
.hud-handle {
  position: absolute;
  z-index: 50;
  background: rgba(255, 200, 80, 0.35);
}
.hud-handle:hover {
  background: rgba(255, 200, 80, 0.7);
}
.hud-handle-right, .hud-handle-left {
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
}
.hud-handle-right { right: 0; }
.hud-handle-left { left: 0; }
.hud-handle-top {
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  cursor: ns-resize;
}

/* The fullscreen button at the bottom right of the game screen */
#game-wrapper .main .middle {
  position: relative;
}
#fullscreen-button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 18px;
  padding: 0;
  z-index: 5;
}
/* The Loot List (auto loot, premium) next to it */
#autoloot-button {
  position: absolute;
  right: 40px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
  padding: 0;
  z-index: 5;
}
#autoloot-button[hidden] {
  display: none;
}
/* The Hunt Analyser next to it (next to the fullscreen button when there is no A) */
#hunt-button {
  position: absolute;
  right: 74px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
  padding: 0;
  z-index: 5;
}
#autoloot-button[hidden] + #hunt-button {
  right: 40px;
}
/* Gods: create an item, at the bottom left */
#create-item-button {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 18px;
  padding: 0;
  z-index: 5;
}
#create-item-button[hidden] {
  display: none;
}
#create-item-modal input[type="text"], #hotbar-text-modal input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 8px;
}
#create-item-modal, #hotbar-text-modal {
  width: 300px;
}
#hotbar-text-modal .hotbar-text-auto {
  display: flex;
  align-items: center;
  gap: 6px;
}

#fullscreen-button.active {
  color: #ffd27a;
}