#panorama {
  width: 100%;
  height: calc(100vh - 100px);
}

.pnlm-container {
  background: #000 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC0SURBVHgB7ZY9C8MgEIbfNIV8kCFZM+b//6asjg6KIogtOhRKg9JozHIPuByHj+LdYQPghRt44CZITOLLeOIEfd9jXddk3r7vKCq21oJzjtjBhmGIbXGNeFmWPPG2bYdxrTUYY8gheWOlFKSUXzHnHHJJio0xP+IS0ACpxql2OsK3zzzPodqFEKHyq4jbtv30ru9zv2JQcVUj+cZd12GaplRacjb/LR7HMazSNKDvLYlJXIg3ks41KV+L92AAAAAASUVORK5CYII=") repeat;
}

.custom-hotspot {
  height: 50px;
  width: 50px;
  background: #f00;
}

.pnlm-controls-container,
.pnlm-about-msg {
  display: none !important;
}

.pnlm-controls {
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
}

.pnlm-panorama-info {
  bottom: 0.8rem;
}

.pnlm-title-box {
  font-size: 0.9rem;
  padding: 0.4rem 0.4rem 0.2rem 1rem;
}

div.custom-tooltip span {
  visibility: hidden;
  position: absolute;
  border-radius: 3px;
  background-color: #fff;
  color: #000;
  text-align: center;
  max-width: 300px;
  padding: 5px 10px;
  margin-left: -220px;
  cursor: default;
}

div.custom-tooltip:hover span {
  visibility: visible;
}

div.custom-tooltip:hover span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  bottom: -20px;
  left: -10px;
  margin: 0 50%;
}

div.pnlm-tooltip span {
  font-size: 0.8rem;
  white-space: nowrap;
}

.pnlm-hotspot.pnlm-scene {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIeSURBVHgB7ZmBTcNADEVdxAAZ4TYgG5AN6AZkA8oEsAFsQDcAJkg3aJngygQpExifcm1/3IRWbdQ6KE+y6vgukn3xOb6UaGBgYODfwcyJyJOI54pS5F3EkXWCkyILbmdClhEHp7yfjCwijqV6tWM6hacyB3tBFokOr3lTYxhcSR1xRd2SgP6DA6PRaNEy7yS6DmAJ+l1In/WF6A8wtiCLxHwvIVW8yHMsof2oROJczn/jyToxCN/gfIFp1QUj6pBQLmWzLqMeHM1EUpGVyELGZmSRsEFV7oeVfo1lNSPLiIP3vB9vMhCuXk4lH0bZdf6fBFftgVer7Lj+Ni7VnJys0OR8tH+APQTzDNdvZIGQz2qVUxjDpi3Tc8kCXE+TD7AnYGew4z7JqEOO7YUc6NjXpKDPQP8EvQip1FUgxwZwA/oM9Az0L9Cn9dsppyoQz9XR09E5USnhwF6AfazuGav9geR0LlSel2qsMTA1J7w7plyvYo6O5JqO41HkVuQbHHO0Pais1j2RJh5s8nhP+E3a5p4V9WQCtr8+NMFVA7dJL+7DdyAkPgXM7Tn1Dd79tPJCfSCWySTqExVERtbhqol7h+sCAvBsqZVugrfvgEm8dqxOaWQVrtqBzWqDPTNfWuNKI69qXJfWlKzQUDZ9y5y5yf0QSqRaXdcyT++Hy5dW3v0CN9kzX5fWMV0K3j3QH3TW5fqfH/1rNQYGBgZ2+AU7SHMVFsc6+QAAAABJRU5ErkJggg==");
  background-color: black;
  background-size: 80%;
  background-position: center;
  border-radius: 100px;
  box-shadow: 0 0 0 2px #111;
  height: 40px;
  width: 40px;
}
.pnlm-hotspot.pnlm-scene:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

#controls {
  position: absolute;
  top: auto;
  bottom: 0.6rem;
  left: auto;
  right: 4.4rem;
  z-index: 2;
}
#controls .ctrl {
  padding: 2px 0 0 0;
  width: 50px;
  height: 48px;
  text-align: center;
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
  cursor: pointer;
}
#controls .ctrl:hover {
  background: white;
}
#controls #fullscreen {
  border-radius: 100px;
}

.pnlm-compass {
  bottom: 0.6rem;
  right: 0.6rem;
  filter: invert(1);
}