/* specials_imagemap.css */
.row.imagemap {
    width:100%;
}
.imagemap > div > span {
    content:'';
    background-color:#eee;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    margin-bottom: -3px;
}
.imagemap > div > span.free {
    background-color:green;
}
.imagemap > div > span.wait {
    background-color:orange;
}
.imagemap > div > span.rented {
    background-color:red;
}
.imagemap .imagemap_inside {
    position:relative;
}
.imagemap .hotspot:hover {
    z-index: 10;
}
.imagemap .hotspot > li {
    margin:0;
    position: relative;
}
.imagemap .hotspot > li:before {
	display:none;
}
.imagemap .hotspot {
    position:absolute;
    margin-bottom: 0;
}
.imagemap .hotspot_toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 9;
}
.imagemap .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* imagemap Markierungen */
.imagemap .hotspot .hotspot_toggle:before {
    width:25px;
    height:25px;
    display:inline-block;
    background-color:rgba(217,0,0,1);
    border-radius:100%;
    color:#fff;
    font:14px/25px Arial;
    content: attr(data-apartment-number);
    position: relative;
    pointer-events: none;
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
    -ms-transition: All 0.8s ease;
    transition: All 0.8s ease;
}
.imagemap .hotspot .hotspot_toggle:hover:before {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.imagemap .hotspot.free .hotspot_toggle:before {
    background-color:green;
}
.imagemap .hotspot.wait .hotspot_toggle:before {
    background-color:orange;
    color:#000;
}
/* imagemap Popup */
.imagemap .hotspot_content {
    min-width:400px;
    position:absolute;
    top: -15px;
    left:-5px;
    z-index:10;
    padding:25px;
    text-align:left;
    background: rgba(255,255,255,1);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
}
.imagemap .hotspot_content a {
    display:inline-block;
    margin-top:10px;
    padding:10px;
    border:2px solid var(--col1);
}
.imagemap .hotspot_content a.more2 {
    background-color:var(--col1);
    color:#fff;
}
.imagemap .hotspot_content a.more2:hover {
	background-color:var(--col2);
	border-color:var(--col2);
}

.imagemap .hotspot_content button.close {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 101;
    right: 10px;
    top: 10px;
    cursor: pointer;
    padding: 0;
}
.imagemap .hotspot_content button.close > span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--grey3);
    position: absolute;
    top: calc(50% - 1px);
}
.imagemap .hotspot_content button.close > span:nth-child(1) {
    transform: rotate(45deg);
}
.imagemap .hotspot_content button.close > span:nth-child(2) {
    transform: rotate(-45deg);
}

@media (max-width: 480px) {
    .imagemap .hotspot_content {
    	min-width:185px;
    	padding: 10px;
    }

    .imagemap .hotspot_content h3,
    .imagemap .hotspot_content {
    	font-size: 16px;
    }
}