/* hotspot */
.hotspot-container {
  cursor: pointer;
  height: 5px;
  pointer-events: auto;
  position: absolute;
  transform-origin: 50% 50%;
  visibility: inherit;
  width: 5px;
}

.hotspot-icon-container {
  cursor: pointer;
  height: 40px;
  left: -15px;
  pointer-events: auto;
  position: absolute;
  top: -20px;
  transform-origin: 50% 50%;
  visibility: inherit;
  width: 30px;
}

.hotspot-icon {
  height: 100%;
  width: 100%;
}

.hotspot-title-container {
  align-items: flex-end;
  display: flex;
  height: 16px;
  justify-content: center;
  left: -80px;
  position: absolute;
  top: -36px;
  width: 160px;
}

.hotspot-title {
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: break-word;
  text-align: center;
  text-shadow: 0px 1px white, -1px 0px white, 1px 0px white, 0px -1px white;
  width: 100%;
}

/* hotspot details */
.hotspot-details {
  background-color: #333;
  color: white;
  pointer-events: none;
  position: absolute;
}

.info-hotspot-details,
.image-hotspot-details,
.coupon-hotspot-details,
.text-hotspot-details,
.product-hotspot-details {
  height: 400px;
  left: -130px;
  top: -200px;
  width: 260px;
}

.video-hotspot-details {
  height: 480px;
  left: -240px;
  top: -240px;
  width: 480px;
}

.hotspot-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 260px;
  width: 260px;
}

.hotspot-image-info {
  height: calc(400px - 260px - 32px);
  overflow: hidden;
}

.hotspot-details-content {
  padding: 16px;
}

.hotspot-text {
  height: calc(400px - 32px);
  overflow: hidden;
}

.ytplayer {
  width: 480px;
  height: 270px;
}

.hotspot-coupon-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 260px;
  width: 260px;
}

.hotspot-product-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 260px;
  width: 260px;
}

.hotspot-product-info {
  height: calc(400px - 260px - 32px);
  overflow: hidden;
}

.close-details-btn {
  cursor: pointer;
  height: 40px;
  left: -20px;
  position: absolute;
  top: -20px;
  width: 40px;
  z-index: 10;
}

.other-link-btn {
  cursor: pointer;
  height: 40px;
  left: -20px;
  position: absolute;
  top: -20px;
  width: 40px;
  z-index: 10;
}

.add-coupon-btn {
  cursor: pointer;
  height: 40px;
  left: -20px;
  position: absolute;
  top: -20px;
  width: 40px;
  z-index: 10;
}

.buy-product-btn {
  cursor: pointer;
  height: 40px;
  left: -20px;
  position: absolute;
  top: -20px;
  width: 40px;
  z-index: 10;
}

#pano-mask {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#success-icon-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-around;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.success-icon {
  height: 100px;
  width: 100px;
}

/* text overlay */
.overlay-text-container {
  left: -100px;
  position: absolute;
  width: 200px;
}

.overlay-text {
  font-size: 24px;
  text-align: center;
  text-shadow: 0 1px white, -1px 0 white, 1px 0 white, 0 -1px white;
  width: 100%;
}