.background {
  fill: none;
  pointer-events: all;
}

.feature {
  fill: #ccc;
  cursor: pointer;
}

.directorate.active {
  fill: orange;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#map {
    height: 800px;
    width: 1168px;
  }

#legend {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 400px;
    height: 95px;
    background: white;
    border-radius: 5px;
    border: 3px double grey;
    /*box-shadow: 3px 3px black;*/
    z-index: 10;
  }

#legend_datacollection {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 200px;
    height: 95px;
    background: white;
    border-radius: 5px;
    border: 3px double grey;
    /*box-shadow: 3px 3px black;*/
    z-index: 10;
  }

.legenditem{
	z-index: 11;
}



.Liwas {
  fill: #ccc;
  fill-opacity: .50;
  stroke: #fff;
  z-index: 3;

}

.Schools {
  fill: black;
  stroke: #fff;
  z-index: 5;
}

.Roads {
  stroke: black;
  fill: none;
  z-index: 4;
}


.cssload-container{
  position:relative;
  top:100px;
  z-index: 50;
}

.cssload-text{
	  position: absolute;
	  top: 35%;
	  left: 53%;
}
 
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(204,204,204);
  border-left-color: rgb(0,0,0);
  border-radius: 974px;
    -o-border-radius: 974px;
    -ms-border-radius: 974px;
    -webkit-border-radius: 974px;
    -moz-border-radius: 974px;
}

.cssload-whirlpool {
  margin: -24px 0 0 -24px;
  height: 49px;
  width: 49px;
  animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
  content: "";
  margin: -22px 0 0 -22px;
  height: 43px;
  width: 43px;
  animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
  content: "";
  margin: -28px 0 0 -28px;
  height: 55px;
  width: 55px;
  animation: cssload-rotate 2300ms linear infinite;
    -o-animation: cssload-rotate 2300ms linear infinite;
    -ms-animation: cssload-rotate 2300ms linear infinite;
    -webkit-animation: cssload-rotate 2300ms linear infinite;
    -moz-animation: cssload-rotate 2300ms linear infinite;
}



@keyframes cssload-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-rotate {
  100% {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-rotate {
  100% {
    -ms-transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}