html {
  height: 100%;
  margin: 0;
}
body {
  height: 100%;
  margin: 0;
}

#app {
  height: 100%;
}

#title {
  text-align: center;
}

.full-screen {
  width: 100%;
  height: 100%;
}

.leaflet-custom-display {
  background: #fff;
  padding: 5px;
}

.mapserver-label-icon {
  margin-left: -100px !important;
  margin-top: -100px !important;
}

.player-popup {
  display: grid;
  grid-template-columns: 64px auto;
  grid-template-areas: 'img info';
  grid-column-gap: 10px;
}

.player-popup img.portrait {
  grid-area: img;
  height: 128px;
  width: 64px;
  image-rendering: pixelated;
}

.player-popup div.info {
  grid-area: info;
}

.poi_image_container {
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
}

.poi_image {
  width: 100%;
  height: auto;
}