.filters {
  cursor: pointer;
}

.filters.collapsed h5::after {
  content: ' \BB';
}

.filters:not(.collapsed) h5::after {
  content: ' \AB';
}

.filterCollapse {
  cursor: pointer;
}

.filterCollapse::after {
  content: ' [-]';
}

.filterCollapse.collapsed::after {
  content: ' [+]';
}

.mouse .card {
  height: 100%;
}

.mouse .card-img {
  width: 100%;
  z-index: 1;
}

.rarity {
  max-width: 25px;
  max-height: 25px;
}

.mouse-desc p {
  font-size: small;
  line-height: 1em;
}

.mouse-desc a {
  color: inherit;
  text-decoration: none;
}

.mouse-desc p.collapse:not(.show) {
  height: 4em !important;
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
}

.mouse-desc p.collapsing {
  min-height: 4em !important;
}

.hint {
  line-height: 1em;
}

.location .mapboxgl-map {
  height: 100px;
  width: 100%;
}

.poi {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #333 no-repeat center center;
  text-align: center;
}

.poi img {
  vertical-align: middle;
  max-width: 20px;
  max-height: 20px;
}

.trap, .cheese {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: no-repeat center center;
  background-size: contain;
}

.trap .progress, .cheese .progress {
  position: relative;
  height: 5px;
  top: -8px;
  background-color: #333;
  padding: 1px;
}

.trap .progress-bar, .cheese .progress-bar {
  background-color: #fe6;
}

.trap .cr {
  float: right;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-right: -5px;
  background: no-repeat center center;
  background-size: contain;
}

.trap.green .cr {
  background-image: url('img/cr_green.png');
}

.trap.yellow .cr {
  background-image: url('img/cr_yellow.png');
}

.trap.red .cr {
  background-image: url('img/cr_red.png');
}

.loot {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.loot .odds {
  padding: 2px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 10px;
}

.loot img {
  max-width: 40px;
  max-height: 40px;
}

.buffs {
  position: absolute;
  z-index: 2;
}

.buff {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat center center;
  background-size: contain;
}

.buff img {
  max-width: 10px;
  float: right;
  margin-right: -5px;
}

#mousePhoto img {
  max-width: 100%;
}