#mapContainer {
    width: 100%;
    height: 396px;
    padding: 30px 0 0 0;
    position: relative; 
}


@media (max-width: 1024px) {
    #mapContainer {
        padding: 0;
    }   
}

#map {
    width: 100%;
    height: 100%;
}

.interativeMapMarkerIcon > span {
    position: absolute;
    border-radius: 50%;
    border: 8px solid;
    width: 8px;
    height: 8px;
    box-sizing: unset !important;
    background-color: white;
}

.interativeMapMarkerIcon > span::after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    bottom: -30px;
    left: -6px;
    border: 10px solid transparent;
    border-top: 17px solid;
    box-sizing: unset !important;
}

.interativeMapMarkerIcon.markerBlack > span     { border-color:black; }     .interativeMapMarkerIcon.markerBlack > span:after       { border-top-color: black; }
.interativeMapMarkerIcon.markerBlue > span      { border-color:blue; }      .interativeMapMarkerIcon.markerBlue > span:after        { border-top-color: blue; }
.interativeMapMarkerIcon.markerCyan > span      { border-color:cyan; }      .interativeMapMarkerIcon.markerCyan > span:after        { border-top-color: cyan; }
.interativeMapMarkerIcon.markerDarkgreen > span { border-color:darkgreen; } .interativeMapMarkerIcon.markerDarkgreen > span:after   { border-top-color: darkgreen; }
.interativeMapMarkerIcon.markerGold > span      { border-color:gold ; }     .interativeMapMarkerIcon.markerGold > span:after        { border-top-color: gold; }
.interativeMapMarkerIcon.markerGreen > span     { border-color:green; }     .interativeMapMarkerIcon.markerGreen > span:after       { border-top-color: green; }
.interativeMapMarkerIcon.markerLawngreen > span { border-color:lawngreen; } .interativeMapMarkerIcon.markerLawngreen > span:after   { border-top-color: lawngreen; }
.interativeMapMarkerIcon.markerMaroon > span    { border-color:maroon; }    .interativeMapMarkerIcon.markerMaroon > span:after      { border-top-color: maroon; }
.interativeMapMarkerIcon.markerOrange > span    { border-color:orange; }    .interativeMapMarkerIcon.markerOrange > span:after      { border-top-color: orange; }
.interativeMapMarkerIcon.markerPurple > span    { border-color:purple; }    .interativeMapMarkerIcon.markerPurple > span:after      { border-top-color: purple; }
.interativeMapMarkerIcon.markerRed > span       { border-color:red; }       .interativeMapMarkerIcon.markerRed > span:after         { border-top-color: red; }
.interativeMapMarkerIcon.markerSilver > span    { border-color:#818181; }    .interativeMapMarkerIcon.markerSilver > span:after      { border-top-color: #818181; }
.interativeMapMarkerIcon.markerViolet > span    { border-color:violet; }    .interativeMapMarkerIcon.markerViolet > span:after      { border-top-color: violet; }
.interativeMapMarkerIcon.markerWhite > span     { border-color:white; }     .interativeMapMarkerIcon.markerWhite > span:after       { border-top-color: white; }
.interativeMapMarkerIcon.markerYellow > span    { border-color:yellow; }    .interativeMapMarkerIcon.markerYellow > span:after      { border-top-color: yellow; }

#mapContainer #map .leaflet-popup-content-wrapper {
    padding: 0 !important;
}

#mapContainer #map .leaflet-popup-content {
    margin: 0 !important;
}

#mapContainer #map .locationPopup > img {
    border-radius: 12px 12px 0 0;
}

#mapContainer #map .locationPopup .locationData {
    padding: 8px;
    max-width: 250px;
}

#mapContainer #map .locationPopup .locationData > * {
    margin-bottom: 2px;
}

#mapContainer #map .locationPopup .locationData .locationTitle {
    text-transform: uppercase;
    font-weight: bold;
    color: #1d2c4e;
}

#mapContainer #map .locationPopup .locationData .rowTitle {
    display:inline-block;
    width: 85px;
}

#mapContainer #map .locationPopup .locationData a {
    color: inherit;
    text-decoration: inherit;
}

#mapContainer #map .locationPopup .representativeData {
    color: #009fe3;
    font-weight: bold;
}