/* icon */ .hotspot-icon { position: fixed; cursor: pointer; z-index: 103; } .hotspot-icon .dot { width: 25px; height: 25px; margin: -12.5px 0 0 -12.5px; border-radius: 50%; position: absolute; background: hsla(196, 100%, 82%, 0.3); border: 2px solid hsl(215, 47%, 50%); top: 50%; left: 50%; } .hotspot-icon .pulse { width: 25px; height: 25px; margin: -11.5px 0 0 -11.5px; position: absolute; top: 50%; left: 50%; background: white; border-radius: 50%; border: 1px solid hsl(205, 100%, 70%); animation: pulsate 1.5s ease-out; animation-iteration-count: infinite; } @keyframes pulsate { 0% { -webkit-transform: scale(1.0, 1.0); opacity: 0.8; } 100% { -webkit-transform: scale(2.2, 2.2); opacity: 0.0; } } /* popover */ .hotspot.overlay { z-index: 104; } .hotspot.overlay .hotspot-popover { position: fixed; width: 250px; text-align: left; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border: 1px solid hsl(0, 0%, 80%); border-radius: 4px; } .hotspot.overlay .hotspot-popover-top { padding: 0 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: hsl(164, 44%, 47%); } .hotspot.overlay .hotspot-title { margin: 0; font-size: 1.15em; font-weight: 600; color: white; } .hotspot.overlay .hotspot-popover-bottom { background-color: white; padding: 15px; height: 130px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .hotspot.overlay .hotspot-confirm { position: absolute; bottom: 18px; right: 18px; border: none; background-color: hsl(164, 44%, 47%); color: white; font-size: 1.05em; font-weight: 500; width: 70px; height: 28px; border-radius: 4px; } /* arrows */ .hotspot-popover:after, .hotspot-popover:before { border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; } .hotspot-popover:after { border-width: 12px; } .hotspot-popover:before { border-width: 13px; } .hotspot-popover.arrow-top:before, .hotspot-popover.arrow-top:after { bottom: 100%; right: 50%; } .hotspot-popover.arrow-top:after { border-bottom-color: hsl(164, 44%, 47%); margin-right: -12px; } .hotspot-popover.arrow-top:before { border-bottom-color: hsl(0, 0%, 80%); margin-right: -13px; } .hotspot-popover.arrow-left:before, .hotspot-popover.arrow-left:after { right: 100%; top: 50%; } .hotspot-popover.arrow-left:after { border-right-color: #fff; margin-top: -12px; } .hotspot-popover.arrow-left:before { border-right-color: hsl(0, 0%, 80%); margin-top: -13px; } .hotspot-popover.arrow-bottom:before, .hotspot-popover.arrow-bottom:after { top: 100%; right: 50%; } .hotspot-popover.arrow-bottom:after { border-top-color: #fff; margin-right: -12px; } .hotspot-popover.arrow-bottom:before { border-top-color: hsl(0, 0%, 80%); margin-right: -13px; } .hotspot-popover.arrow-right:before, .hotspot-popover.arrow-right:after { left: 100%; top: 50%; } .hotspot-popover.arrow-right:after { border-left-color: #fff; margin-top: -12px; } .hotspot-popover.arrow-right:before { border-left-color: hsl(0, 0%, 80%); margin-top: -13px; }