.map-preview {
  padding: 10px 0;
}

#mapwrapper {
  min-width: 220px;
  max-width: 1920px;
  margin: 0 auto;
}

#map_base svg {
  width: 100%;
  max-height: 100%;
  margin: 0;
}

#countries .travelmap-country {
  fill: #cecece;
  stroke: #4f4f4f;
  cursor: pointer;
}

#countries .travelmap-country.is-visited {
  fill: #72a4d4;
}

#countries .travelmap-country:active {
  fill: #477cb2;
}

@media (hover: hover) {
  #countries .travelmap-country:hover {
    fill: #ebebeb;
  }

  #countries .travelmap-country.is-visited:hover {
    fill: #adcae6;
  }
}

.travelmap-pin-shadow {
  fill: #000;
  fill-opacity: 0.5;
  pointer-events: none;
}

.travelmap-pin {
  fill: #f00;
  stroke: #ffcece;
  stroke-width: 0.6;
  cursor: pointer;
}

.travelmap-pin:active {
  fill: #d15b2c;
}

@media (hover: hover) {
  .travelmap-pin:hover {
    fill: #ffee88;
  }
}

#map-tip {
  position: absolute;
  z-index: 1000;
  padding: 3px;
  border: 1px solid #ebeced;
  color: #edeef0;
  background: linear-gradient(to bottom, #494949 0%, #656565 100%);
  box-shadow: 1px 2px 4px #666;
  font: 14px/16px "Trebuchet MS", Helvetica, Arial, sans-serif;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

#map-tip[hidden] {
  display: none;
}

.legend {
  margin-bottom: 2rem;
  list-style: none;
}

.legend li {
  float: right;
  margin-right: 10px;
}

.legend span {
  float: left;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  margin-right: 2px;
  border: 1px solid #ccc;
}

.legend .visited {
  background-color: #72a4d4;
}

.legend .unvisited {
  background-color: #cecece;
}