.table_container {
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 2em;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 2px;
}

.modal-body {
  max-height: calc(100vh - 212px);
  overflow-y: auto;
}

footer {
  margin: 20px;
}

:root {
  --location-size: 24px;
  --location-border-width: 5px;
  --location-border-circle-width: 2.5px;
  --location-border-polygon-width: 12px;
  --location-fill: #ff0000;
  --location-fill-hover: #ff8000;
  --location-stroke: #000000;

  --item-grid-width: 7;
  --item-grid-height: 7;
  --item-scale-x: 1;
  --item-scale-y: 1;
}
.large {
  --location-size: 48px;
  --location-border-width: 10px;
}
.small {
  --location-size: 14px;
  --location-border-width: 4px;
}
.available {
  --location-fill: #32cd32;
  --location-fill-hover: #00ff00;
}
.visible {
  --location-fill: #ffd700;
  --location-fill-hover: #ffff00;
}
.marked {
  --location-fill: #0080ff;
  --location-fill-hover: #80c0ff;
}
.done {
  --location-fill: #808080;
  --location-fill-hover: #a0a0a0;
}
.marked.done {
  --location-fill: #808080;
  --location-fill-hover: #a0a0a0;
  --location-stroke: #0080ff;
}
.highlighted,
.highlighted.done {
  --location-stroke: #ff0000;
}
.highlighted_reverse,
.highlighted_reverse.done {
  --location-stroke: #ffd700;
}

.map_container {
  display: inline-block;
  position: relative;
  top: 25px;
}

.map_footer {
  background: black;
  color: white;
 position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.map {
  position: relative;
  display: inline-block;
  user-select: none;
  width: 800px;
  height: 800px;
  background-size: contain;
}

#lw_map {
  background-image: url('../img/lightworld.png');
}
#dw_map {
  background-image: url('../img/darkworld.png');
}
#uw_map {
  background-image: url('../img/underworld.png');
}
.location {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.help-location .location {
  position: inherit;
  transform: none;
}

.location svg {
  width: var(--location-size);
  height: var(--location-size);
  vertical-align: top;
}

.location rect {
  stroke-width: var(--location-border-width);
  stroke: var(--location-stroke);
}

.location circle {
  stroke-width: var(--location-border-circle-width);
  stroke: var(--location-stroke);
}

.location polygon {
  stroke-width: var(--location-border-polygon-width);
  stroke: var(--location-stroke);
}

.location {
  fill: var(--location-fill);
}

.location:hover {
  fill: var(--location-fill-hover);
}

.item-tracker {
  width: 800px;
  height: 800px;
  background-color: black;

  position: relative;
  display: inline-block;
}

.item {
  position: absolute;
  width: calc(100% / var(--item-grid-width) * var(--item-scale-x));
  height: calc(100% / var(--item-grid-height) * var(--item-scale-y));
  z-index: 1;
  left: calc(var(--item-x) * 100% / var(--item-grid-width));
  top: calc(var(--item-y) * 100% / var(--item-grid-height));
}

.item_missing {
  opacity: 0.3;
}

.silverarrows,
.bow-silverarrows,
.bow {
  --item-x: 2;
  --item-y: 0;
}
.boomerang,
.boomerang-red,
.boomerang-both {
  --item-x: 3;
  --item-y: 0;
}
.hookshot {
  --item-x: 4;
  --item-y: 0;
}
.bomb {
  --item-x: 5;
  --item-y: 0;
}
.mushroom-powder,
.mushroom,
.powder {
  --item-x: 6;
  --item-y: 0;
}
.firerod {
  --item-x: 2;
  --item-y: 1;
}
.icerod {
  --item-x: 3;
  --item-y: 1;
}
.bombos {
  --item-x: 4;
  --item-y: 1;
}
.ether {
  --item-x: 5;
  --item-y: 1;
}
.quake {
  --item-x: 6;
  --item-y: 1;
}
.lantern {
  --item-x: 2;
  --item-y: 2;
}
.hammer {
  --item-x: 3;
  --item-y: 2;
}
.shovel-flute,
.shovel,
.flute {
  --item-x: 4;
  --item-y: 2;
}
.net {
  --item-x: 5;
  --item-y: 2;
}
.book {
  --item-x: 6;
  --item-y: 2;
}
.bottle {
  --item-x: 2;
  --item-y: 3;
}
.somaria {
  --item-x: 3;
  --item-y: 3;
}
.byrna {
  --item-x: 4;
  --item-y: 3;
}
.cape {
  --item-x: 5;
  --item-y: 3;
}
.mirror {
  --item-x: 6;
  --item-y: 3;
}
.boots {
  --item-x: 2;
  --item-y: 4;
}
.glove,
.glove2 {
  --item-x: 3;
  --item-y: 4;
}
.flippers {
  --item-x: 4;
  --item-y: 4;
}
.moonpearl {
  --item-x: 5;
  --item-y: 4;
}

.agahnim,
.agahnim1,
.agahnim2,
.agahnim1-agahnim2 {
  --item-x: 6;
  --item-y: 4;
}
.boss0 {
  --item-x: 0;
  --item-y: 2;
}
.boss0reward {
  --item-x: 0.5;
  --item-y: 2.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss0chest {
  --item-x: 1;
  --item-y: 2;
}
.boss1 {
  --item-x: 0;
  --item-y: 3;
}
.boss1reward {
  --item-x: 0.5;
  --item-y: 3.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss1chest {
  --item-x: 1;
  --item-y: 3;
}
.boss2 {
  --item-x: 0;
  --item-y: 4;
}
.boss2reward {
  --item-x: 0.5;
  --item-y: 4.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss2chest {
  --item-x: 1;
  --item-y: 4;
}
.boss3 {
  --item-x: 0;
  --item-y: 5;
}
.boss3reward {
  --item-x: 0.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss3chest {
  --item-x: 0;
  --item-y: 6;
}
.boss4 {
  --item-x: 1;
  --item-y: 5;
}
.boss4reward {
  --item-x: 1.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss4chest {
  --item-x: 1;
  --item-y: 6;
}
.boss5 {
  --item-x: 2;
  --item-y: 5;
}
.boss5reward {
  --item-x: 2.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss5chest {
  --item-x: 2;
  --item-y: 6;
}
.boss6 {
  --item-x: 3;
  --item-y: 5;
}
.boss6reward {
  --item-x: 3.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss6chest {
  --item-x: 3;
  --item-y: 6;
}
.boss7 {
  --item-x: 4;
  --item-y: 5;
}
.boss7reward {
  --item-x: 4.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss7chest {
  --item-x: 4;
  --item-y: 6;
}
.boss8 {
  --item-x: 5;
  --item-y: 5;
}
.boss8reward {
  --item-x: 5.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss8chest {
  --item-x: 5;
  --item-y: 6;
}
.boss9 {
  --item-x: 6;
  --item-y: 5;
}
.boss9reward {
  --item-x: 6.5;
  --item-y: 5.5;
  --item-scale-x: 0.5;
  --item-scale-y: 0.5;
}
.boss9chest {
  --item-x: 6;
  --item-y: 6;
}

.mail,
.mail2,
.mail3 {
  --item-x: 0;
  --item-y: 0;
  --item-scale-x: 2;
  --item-scale-y: 2;
}
.shield,
.shield1,
.shield2,
.shield3 {
  --item-x: 0;
  --item-y: 1;
}
.sword,
.sword1,
.sword2,
.sword2-butter,
.sword2-tempered {
  --item-x: 1;
  --item-y: 0;
}