/* Switchers - START */
.mapSwitchers{
    position: absolute;
    display: flex !important;
    top:0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
}
.mapSwitchers > div{
    width:50px !important;
    height: 50px !important;
    top: 0 !important;
    left: 0 !important;
    position: relative !important;
    border-radius: 4px !important;
    overflow: hidden;
    pointer-events: all !important;
    transition: box-shadow 0.3s ease-in-out;
    cursor: pointer !important;
}

body.hasHover .mapSwitchers > div:hover{
    box-shadow: 0 0 0 4px #ffffff80;
}
body.hasHover .mapSwitchers > div > img{
    transition: transform 0.3s ease-in-out;
}
body.hasHover .mapSwitchers > div:hover > img{
    transform: scale(120%) !important;
}

body[data-map-state="roads"] .mapSwitcher-roads,
body[data-map-state="satellite"] .mapSwitcher-satellite,
body[data-map-state="3d"] .mapSwitcher-3d
{
    box-shadow: 0 0 0 2px #ffffff !important;
}

/* Mobile fix */
@media (max-width: 767.98px){
	.mapSwitchers{
		flex-direction: column;
	}
}
@media (max-width: 767.98px), (max-height: 400px){
    .mapWrapper::after{
        display: none !important;
    }
}
/* Switchers - FINISH */



/* Map - START */
.mapWrapper{
    pointer-events: all !important;
}
.mapWrapper::after{
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 200px !important;
    background: linear-gradient(180deg, #00000080, transparent);
    pointer-events: none;
}
.map2d{
    position: absolute;
    top:0; left:0; width:100%; height:100%;
}
body[data-map-state="3d"] .map2d{
    display: none;
}
body[data-map-state="satellite"] #map3d,
body[data-map-state="roads"] #map3d{
    display: none;
}
/* Map - FINISH */