.equipment-options-wrapper {
  display: flex;
  margin: 8px;
}

.equipment-buttons {
  flex: 1 1 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 4px;
}

.equipment-buttons button {
  width: 100%;
  margin: 2px;
  height: 20px;
}

.character-status {
  margin: 8px;
}

.bar {	
  border: 1px solid black;
  margin: 2px;
  border-radius: 8px;
  height: 12px;
  text-align: center;
  cursor: pointer;
  background-image: url("/png/bg3.png");
  position: relative;
}

.bar:hover {
  border: 1px solid white;
}

.bar .icon {
  position: absolute;
  left: 0;
  font-size: 10px;
}

.bar .percentage {
  position: absolute;
  font-size: 10px;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
}

.character-health {
  background-color: #FF7F7F;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
}

.character-mana {
  background-color: lightblue;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
}

.equipment.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.equipment-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status-bar {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 18px;
  margin-top: 4px;
  background-image: url("/png/bg3.png");
  border: 1px solid black;
}

.status-bar img {
  flex: 0 0 auto;
}

#head-slot {
  background-image: url("/png/head.png");
}

#armor-slot {
  background-image: url("/png/armor.png");
}

#legs-slot {
  background-image: url("/png/legs.png");
}

#backpack-slot {
  background-image: url("/png/backpack.png");
}

#boots-slot {
  background-image: url("/png/boots.png");
}

#left-slot {
  background-image: url("/png/left.png");
}

#right-slot {
  background-image: url("/png/right.png");
}

#quiver-slot {
  background-image: url("/png/quiver.png");
}

.equipment-padding {
  text-align: center;
  font-size: 10px;
  min-height: 24px;
}
/* Fight buttons next to the equipment, like the Tibia client: two columns of three (full attack, balanced, full
   defense | stand, follow, secure mode). Same style as the other buttons of this client (dark texture, black border);
   with the symbols of the Tibia 8.0 client (client/png/cip, made on the server from Tibia.pic with tools/extract-pic.js)
   at their own size, otherwise text symbols. */
.fight-modes {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  grid-auto-rows: 22px;
  gap: 3px;
  align-content: start;
  margin: 2px 0 0 6px;
}

.fight-modes .fight-button {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  color: #9a9a9a;
}

.fight-modes .fight-button.active {
  color: white;
  border-color: #8c8c8c;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.25);
}

/* Symbols of the Tibia client: grey when not pressed, colored when pressed */
.fight-modes.cip-icons .fight-button {
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}

.fight-modes.cip-icons #fight-offensive { background-image: url("../png/cip/fight-offensive.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-offensive.active { background-image: url("../png/cip/fight-offensive-on.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-balanced { background-image: url("../png/cip/fight-balanced.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-balanced.active { background-image: url("../png/cip/fight-balanced-on.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-defensive { background-image: url("../png/cip/fight-defensive.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-defensive.active { background-image: url("../png/cip/fight-defensive-on.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-stand { background-image: url("../png/cip/fight-stand.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-stand.active { background-image: url("../png/cip/fight-stand-on.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-chase { background-image: url("../png/cip/fight-chase.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-chase.active { background-image: url("../png/cip/fight-chase-on.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-secure { background-image: url("../png/cip/fight-secure-on.png"), url("/png/bg3.png"); }
.fight-modes.cip-icons #fight-secure.active { background-image: url("../png/cip/fight-secure.png"), url("/png/bg3.png"); }

/* The second background (texture) is repeated like the other buttons */
.fight-modes.cip-icons .fight-button { background-repeat: no-repeat, repeat; }

.fight-modes.cip-icons .fight-button:hover { border-color: white; }

.remember-password {
  font-size: 12px;
  cursor: pointer;
}


/* Tibia 8.0 inventory layout: Soul and Cap in boxes under the outer columns, Stop / Options / Help under the fight
   buttons (the colors of this client stay) */
.equipment-box {
  width: 32px;
  height: 26px;
  margin: 1px;
  border: 1px solid #111;
  background-image: url("/png/bg3.png");
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  color: #d0d0d0;
  box-sizing: content-box;
  padding-top: 1px;
}

.fight-panel {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.fight-panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 5px 0 0 6px;
  width: 47px;
}

.fight-panel-buttons button {
  width: 47px;
  height: 18px;
  margin: 0;
  padding: 0;
  font-size: 10px;
}


/* The minimize button of the equipment panel (client/src/equipment-panel.js) */
.equipment-options-wrapper {
  position: relative;
}

#equipment-minimize {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  line-height: 12px;
}

/* Minimized: the slots and the fight modes are hidden; Stop, Options and Help stay */
.equipment-options-wrapper.minimized .equipment-column,
.equipment-options-wrapper.minimized .fight-modes {
  display: none;
}

.equipment-options-wrapper.minimized .fight-panel,
.equipment-options-wrapper.minimized .fight-panel-buttons {
  flex-direction: row;
  width: auto;
  margin: 0;
}

.equipment-options-wrapper.minimized .fight-panel-buttons button {
  width: 56px;
  margin: 2px;
}

.equipment-options-wrapper.minimized .equipment-buttons {
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px 4px 2px 4px;
}

.equipment-options-wrapper.minimized .equipment-buttons button {
  width: auto;
  flex: 1 1 30%;
}

/* Minimized: one column, the rows centred */
.equipment-options-wrapper.minimized {
  flex-direction: column;
  align-items: stretch;
}

.equipment-options-wrapper.minimized .first-wrapper,
.equipment-options-wrapper.minimized .equipment.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.equipment-options-wrapper.minimized .status-bar {
  width: 100%;
}

.equipment-options-wrapper.minimized .first-wrapper {
  flex-direction: column;
  align-items: stretch;
}

.equipment-options-wrapper.minimized .fight-panel {
  align-self: center;
}

.equipment-options-wrapper.minimized .fight-panel-buttons {
  gap: 4px;
  justify-content: center;
}

/* Minimized: the panel does not make the column wider (its own width does not count), it takes the width of the
   column and the rows of buttons wrap inside it */
.equipment-options-wrapper.minimized {
  width: 0;
  min-width: calc(100% - 16px);
  box-sizing: border-box;
}

.equipment-options-wrapper.minimized .fight-panel-buttons {
  flex-wrap: wrap;
}

.equipment-options-wrapper.minimized .fight-panel-buttons button {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}

.equipment-options-wrapper.minimized .fight-panel,
.equipment-options-wrapper.minimized .fight-panel-buttons {
  width: 100%;
}

.equipment-options-wrapper.minimized .equipment-buttons button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equipment-options-wrapper.minimized .status-bar {
  box-sizing: border-box;
}