html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.leaflet-popup-content-wrapper .live-destination {
    color: green;
    
  }

  .leaflet-popup-content-wrapper .planned {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }

  .info.legend {
   font-size: 20px;
   font-weight: bold;
   background-color: #c6d1e1;
   padding: 0px 20px 0px 20px;
   border-radius: 10px;
   width: auto;
   height: auto;
   opacity: 80%;
  }
  

.bg-marker{
    color: #62207f;
}

.green-line{
  background-color: green;
  padding-left: 45px;
  margin-right: 10px;

}

.yellow-line{
  background-color: yellow;
  padding-left: 45px;
  margin-right: 10px;

}

.span-text{
  color: black;
  font-size: 15px;
}

.one-div{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 17px;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .one-div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 17px;
    overflow-x: auto;
    width: 100%;
    cursor: pointer;
  }
}
@media screen and (max-width: 767px) {
  .first-part {
    font-size: 15px;
  }
}

.green-block{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}