.hs-area {
	display: inline-block;
    position: relative;
	vertical-align: top;
}
.hs-wrap,
.tt-wrap {
    position: absolute;
    display: none;
}
.tt-wrap {
    border: 10px solid transparent;
    z-index: 1000;
}
.tt-wrap.left {
    top: -2px;
    right: 100%;
}
.tt-wrap.right {
    top: -2px;
    left: 100%;
}
.tt-wrap.top {
    bottom: 100%;
    left: -2px;
}
.tt-wrap.bottom {
    top: 100%;
    left: -2px;
}
.invisible-spot,
.red-spot,
.onhover-spot {
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.red-spot {
    border: 2px solid red;
    opacity: 0.7;
    box-shadow: 0 0 10px #000;
}
.red-spot.active {
    box-shadow: 0 0 5px #ff0d0d inset;
    border-color: #ff0d0d;
    opacity: 0.6;
}
.shadow-spot {
    box-shadow: 0 0 20px #000;
}
.shadow-spot.active {
    box-shadow: 0 0 50px #000;
}
.glass-spot {
    box-shadow: 0 0 20px #fff;
}
.glass-spot.active {
    box-shadow: 0 0 50px #fff;
}
.sniper-spot {
	transition: border-color 250ms ease-in-out,opacity 250ms ease-in-out,visibility 250ms ease-in-out;
	transform: translateX(-1rem) translateY(-1rem) scale(0.999);
	padding: 0;
	width: 2rem;
	height: 2rem;
	border: 2px solid transparent;
	position: absolute;
	background: rgba(0,0,0,.2);
	opacity: 1;
	visibility: visible;
	border-radius: 64px;
	line-height: .5;
	display: flex;
	align-items: center;
	justify-content: center;
	border-color: rgba(255,255,255,.5);
	cursor: pointer;
}
/*.sniper-spot:before,
.sniper-spot:after {
    content: "";
    position: absolute;
    background-color: red;
}*/
.sniper-spot:before {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: -0.5rem;
	right: -0.5rem;
	bottom: -0.5rem;
	display: block;
	cursor: pointer;
}
.sniper-spot:after {
	transform: scale(0.667);
	content: "";
	transition: transform 250ms ease-in-out;
	position: relative;
	display: block;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.55);
	width: .75rem;
	height: .75rem;
	border-radius: 64px;
	cursor: pointer;
}
.sniper-spot.active:after{
	width: .9rem;
	height: .9rem;
	cursor: pointer;
}
/*.sniper-spot.active:before,
.sniper-spot.active:after {
    width: 0;
    height: 0;
}*/
.sniper-spot.active {
	border-color: rgba(255,255,255,.5);
	background: rgba(0,0,0,.4);
}
.onhover-spot {
    border: 2px solid transparent;
}
.onhover-spot.active {
    border: 2px solid red;
    opacity: 0.7;
    box-shadow: 0 0 10px #000;
}
.img-spot img,
.markup-spot div:last-child {
    display: none;
    vertical-align: bottom;
}
.tip-tooltip {
    display: block;
    /*border-radius: 8px;*/
    padding: 10px;
    /*min-height: 20px;
    min-width: 30px;*/
    background-color: #FFF;
	border: 1px solid #999;
    color: #000;
    box-shadow: 0 0 5px #999;
	text-align: left;
	width: 170px;
}
.tip-tooltip a{
	color: #000;
}
.tip-tooltip a:hover{
	text-decoration: underline;
}
/*
.tip-tooltip:before {
    content: "";
    position: absolute;
    border: 8px solid;
    width: 0;
    height: 0;
    z-index: 999;
}
.tip-tooltip.right:before {
    top: 10px;
    right: 100%;
    border-color: transparent #000 transparent transparent;
}
.tip-tooltip.left:before {
    top: 10px;
    left: 100%;
    border-color: transparent transparent transparent #000;
}
.tip-tooltip.top:before {
    top: 100%;
    left: 12px;
    border-color: #000 transparent transparent;
}
.tip-tooltip.bottom:before {
    bottom: 100%;
    left: 12px;
    border-color: transparent transparent #000;
}
.tip-tooltip.white {
    background-color: #fff;
    color: #000;
}
.tip-tooltip.white.right:before {
    border-color: transparent #fff transparent transparent;
}
.tip-tooltip.white.left:before {
    border-color: transparent transparent transparent #fff;
}
.tip-tooltip.white.top:before {
    border-color: #fff transparent transparent;
}
.tip-tooltip.white.bottom:before {
    border-color: transparent transparent #fff;
}
*/
.bubble-tooltip {
    display: block;
    position: relative;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 0 10px #fff;
    padding: 10px 5px 8px;
    opacity: 0.8;
    z-index: 999;
    min-height: 20px;
    min-width: 30px;
}
.bubble-tooltip:before {
    content: "";
    position: absolute;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 20px;
    bottom: -10px;
    left: 9px;
    height: 16px;
    width: 20px;
}
.bubble-tooltip:after {
    content: "";
    position: absolute;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 20px;
    bottom: -17px;
    left: 18px;
    height: 9px;
    width: 11px;
}
.aim-tooltip {
    display: none;
    position: absolute;
    background-color: #000;
    color: #fff;
    padding: 6px;
}
.aim-tooltip .tt-content {
    display: none;
}
.aim-tooltip.top {
    border-radius: 10px 10px 0 0;
}
.aim-tooltip.right {
    border-radius: 0 10px 10px 0;
}
.aim-tooltip.bottom {
    border-radius: 0 0 10px 10px;
}
.aim-tooltip.left {
    border-radius: 10px 0 0 10px;
}
.hs-aim-rect,
.hs-aim-pillar {
    display: none;
    position: absolute;
    background-color: #000;
    opacity: 0.75;
    z-index: 1000;
}
.hs-aim-pillar {
    opacity: 0.2;
    z-index: 1001;
    background-color: #fff;
}
.hs-flatten {
    border-radius: 0 !important;
}
