:root {
  --palette-1: #111;
  --palette-2: #222;
  /* #3b1e46 */
  --palette-3: #33a;
  /* #68387a */
  --palette-4: #226;
  --palette-5: #44b;
  --bg-color: var(--palette-2);
  --info-bg-color: var(--palette-1);
  --header-1-color: var(--palette-3); 
  --header-2-color: var(--palette-4);
  --header-3-color: var(--palette-1);
  --selected-item: var(--palette-5);
}

body {
  margin: 0;
  font-size: 16px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background-color: var(--bg-color);
  color: white;
  overflow-y: scroll;
}

body * {
  box-sizing: border-box;
}

.app {
  width: 800px;
  margin: auto;
  background: var(--info-bg-color);
  min-height: 100%;
}

.header {
  font-size: 2rem;
  background: var(--header-1-color);
  padding: 5px 40px;
}

.main-navigation {
  background-color: var(--header-2-color);
  font-size: 1.25rem;
  padding: 5px 30px 0 30px;
}

.navigation-item {
  cursor: pointer;
  display: inline-block;
  padding: 5px 24px;
  border-radius: 10px;
}
.navigation-item.selected {
  background-color: var(--palette-1);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cast-navigation {
  background-color: var(--header-3-color);
  padding: 20px;
}

.cast-body {
  background-color: var(--palette-4);
  padding: 20px;
  position: relative;
}

.cast-name {
  font-size: 2rem;
}

.cast-portrait {
  background-color: var(--palette-1);
  position: absolute;
  top: 20px;
  right: 20px;
  border: 2px solid var(--palette-1);
}

.cast-desc {
  padding: 10px 0;
  height: 110px;
  width: 600px;
}

.unlock-container {
  display: inline-block;
  width: 500px;
}

.unlock-line {
  background: var(--palette-1);
  margin: 10px 10px 0 0;
  padding: 10px;
}

.unlock-line.disabled {
  opacity: .5;
}

.unlock-line-header {
  border-bottom: 1px solid var(--palette-3);
  margin-bottom: 10px;
  padding-bottom: 6px;
}

.unlock-shield {
  cursor: pointer; 
}
.unlock-description,
.unlock-icons {
  display: none;
}

.unlock-description {
  white-space: pre-line;
}

.item-sidebar {
  vertical-align: top;
  margin-top: 30px;
  width: 260px;
  display: inline-block;
}

.location-view {
  padding: 10px;
  background: var(--palette-1);
}

/* .location-view .separator {
  border-top: 1px solid var(--palette-3);
} */

.location-view .clickable{
  cursor: pointer;
}

.location-view .location-type {
  display: inline-block;
  width: 28px;
  vertical-align: middle;
}
.location-view .location-name {
  display: inline-block;
  width: 190px;
  vertical-align: middle;
}

.item-list,
.item-view {
  margin-top: 10px;
  padding: 10px;
  background: var(--palette-1);
}

.item-name {
  font-size: 1.5rem;
}

.cast-icon {
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  width: 32px;
  background-image: url(./icons.png);
}

.cast-icon.selected {
  background-color: var(--selected-item);
  border-radius: 10px;
}

.item-icon {
  position: relative;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  width: 32px;
  background-image: url(./icons.png);
}

.regular-icon {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  background-image: url(./icons.png);
}

.cast-icon .tooltip,
.item-icon .tooltip {
  display: none;
}

.cast-icon:hover .tooltip,
.item-icon:hover .tooltip {
  display: block;
  position: absolute;
  background: black;
  padding: 10px;
  border-radius: 10px;
  top: 32px;
  left: 32px;
  z-index: 1;
}


/* HELP SECTION */
section {
  padding: 20px;
}

a {
  color: #3ae;
  font-weight: bold;
  text-decoration: none;
}

h2 {
  margin: 0;
  margin-top: 20px;
  background: #33a;
  padding: 8px;
  padding-left: 25px;
}

aside {
  margin-top: 20px;
  padding: 20px;
  background: var(--palette-4);
}

.help-container img {
  padding: 10px 0;
  max-width: 760px;
}

.topic-section {
  margin: 0;
  padding: 20px;
  list-style-type: disclosure-closed;
  padding-left: 60px;
}

.topic-section li, .file-list li {
  font-size: 1.2rem;
  padding-bottom: 0.5rem;
}

/* MAP */

.map-container {
  padding: 16px;
}

.map-button {
  cursor: pointer;
  display: inline-block;
}

.map-row .cell {
  display: inline-block;
  position: relative;
  height: 24px;
  width: 24px;
  background-image: url(./map.png);
}
.map-row .cell.highlighted::before {
  content: " ";
  border: 4px solid #fffa81;
  position: absolute;
  height: 20;
  width: 20px;
  z-index: 1;
  border-radius: 50px;
  top: -2px;
  left: -2px;
}
.map-row .cell-g {
  background-position: 0px 0px;
}
.map-row .cell-g1 {
  background-position: -24px 0px;
}
.map-row .cell-g2 {
  background-position: -48px 0px;
}
.map-row .cell-g3 {
  background-position: -72px 0px;
}
.map-row .cell-r {
  background-position: 0px -24px;
}
.map-row .cell-r1 {
  background-position: -24px -24px;
}
.map-row .cell-r2 {
  background-position: -48px -24px;
}
.map-row .cell-r3 {
  background-position: -72px -24px;
}
.map-row .cell-s {
  background-position: 0px -48px;
}
.map-row .cell-w {
  background-position: -24px -48px;
}
.map-row .cell-w1 {
  background-position: -48px -48px;
}
.map-row .cell-bs {
  background-position: 0px -72px;
}
.map-row .cell-h,
.map-row .cell-bhero {
  background-position: -24px -72px;
}
.map-row .cell-hb {
  background-position: -48px -72px;
}
.map-row .cell-bcons {
  background-position: -72px -72px;
}
.map-row .cell-hc {
  background-position: 0px -96px;
}
.map-row .cell-hc1 {
  background-position: -24px -96px;
}
.map-row .cell-hc2 {
  background-position: -48px -96px;
}
.map-row .cell-hc3 {
  background-position: -72px -96px;
}
.map-row .cell-hc4 {
  background-position: 0px -120px;
}
.map-row .cell-hc5 {
  background-position: -24px -120px;
}
.map-row .cell-bt1 {
  background-position: -48px -120px;
}
.map-row .cell-bt2 {
  background-position: -72px -120px;
}
.map-row .cell-b {
  background-position: -0px -144px;
}
.map-row .cell-hm {
  background-position: -24px -144px;
}
.map-row .cell-bm {
  background-position: -48px -144px;
}

.map-row .cell-l .label {
  top: 5px;
  position: absolute;
  padding: 0 10px;
  background: var(--palette-3);
  width: auto;
  z-index: 1;
}

.cell:hover .cell-tooltip {
  display: block;
}

.cell-tooltip {
  display: none;
  position: absolute;
  background: var(--palette-4);
  padding: 10px;
  border-radius: 10px;
  top: 24px;
  z-index: 2;
}

.cell-tooltip.wide {
  width: 84px;
}
.cell-tooltip.extra-wide {
  width: 148px;
}

.item-navigation {
  padding: 10px 50px 0 50px;
}

.item-navigation .item-list-button,
.item-navigation .shop-list-button,
.item-navigation .combat-list-button {
  cursor: pointer;
  display: inline-block;
  padding: 5px 10px;
  font-size: 1.25rem;
  border-radius: 10px;
  margin: 5px;
}

.item-navigation .item-list-button.selected,
.item-navigation .shop-list-button.selected,
.item-navigation .combat-list-button.selected {
  background: var(--palette-3);
}

.item-header {
  list-style: none;
  margin: 0;
  padding: 15px 20px 5px 20px;
}

.item-header .name {
  display: inline-block;
  padding-left: 37px;
  width: 232px;
}
.item-header .cost {
  display: inline-block;
  padding-left: 10px;
  width: 100px;
}
.item-header .vendors {
  display: inline-block;
  padding: 0 5px;
  width: 200px;
}
.item-header .unlocks {
  display: inline-block;
  padding: 0 5px;
  width: 200px;
}

.item-list-body {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  overflow-y: scroll;
  height: calc(100% - 180px);;
}

.item-list-body li {
  border-bottom: 1px solid var(--palette-4);
}

.item-list-body .name {
  display: inline-block;
  padding-left: 5px;
  width: 200px;
}
.item-list-body .cost {
  display: inline-block;
  padding-left: 10px;
  width: 100px;
}

.item-list-body .vendors {
  display: inline-block;
  padding: 0 5px;
  width: 200px;
}
.item-list-body .unlocks {
  display: inline-block;
  padding: 0 5px;
  width: 200px;
}

.shop-body {
  position: relative;
  margin: 10px 20px;
  background-color: var(--header-2-color);
  padding: 5px;
  border-radius: 20px;
}

.shop-name {
  font-size: 1.5rem;
  padding: 5px 50px;
}
.shop-location {
  position: absolute;
  top: 15px;
  right: 10px;
}

.shop-body .cast-icon {
  position: absolute;
  left: 10px;
  top: 10px;
}

.shop-body .item-list {
  list-style: none;
  display: inline-block;
  width: 365px;
  vertical-align: top;
  margin: 5px;
  border-radius: 11px;
  height: 210px;
}
.shop-body .item-list .cost {
  margin-left: 5px;
}