.Box_city
{
    height: 500px;
    width: 92%;
    border-radius: 3px;
    border:1px solid #DADADA;
    background-color:#E9F6FF;
}

.Boxsvg
{
    width:100%; 
    height:100%; 
    position: relative;
}

.path-city
{
    stroke: #fff;
}
.path-city:hover
{
    fill: #DADADA;
}
.path-city-g1
{
    fill: rgb(101,121,130);
}
.path-city-g2
{
    fill: rgb(33,186,240);
}
.path-city-g3
{
    fill: #0290d9;
}
.path-city-g4
{
    fill: #89cb2b;
}


 .ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}