#map {
    height: 100%;
    width: 100%;
}
.bars {
    background-color: rgba(240, 248, 255, 0.808);
    
}
#Locator {
    padding: 4px;
    width: 26px;
    height: 26px;
    background-image: url("ux-locate-on.png");
    background-repeat: no-repeat;
    background-size: 26px 26px;
    background-position: center; 
}
.leaflet-popup-content {
    direction: rtl;
    text-align: right;
}
#Legend {
    background-color: rgba(240, 248, 255, 0.808);
    direction: rtl;
    float: right;

}
#Legend > span {
    margin: 5px;
}


#Legend > span  > i > svg {
    display: inline-block;
  width: 1em;
  height: 1em;
  font-size: inherit;

  vertical-align: -0.125em;
}
circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-top: 8px;
    float: right;
  }