html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: droid-sans, sans-serif;
}

.leaflet-control-attribution {
  display: none;
}

#map {
  height: 100%;
  width: 100%;
  float: right;
  z-index: 0;
  z-index: 0;
}


#modal_open {
  font-size: 25px;
  padding: 1px;
  color: #333;
  position: fixed;
  top: 10px;
  right: 2%;
  z-index: 1;
  width: 29px;
  height: 29px;
  background-color: #fdfdfd;
  border-radius: 4px;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 1px 2px 9px 5px rgba(0,0,0,0.21);
  -moz-box-shadow: 1px 2px 9px 5px rgba(0,0,0,0.21);
  box-shadow: 1px 2px 9px 5px rgba(0,0,0,0.21);
}

.line-number{margin:0 auto;display:block;font-size:15px;font-weight:700}
.vehicle-marker{background-color:#fff;box-shadow:1px 4px 7px #8a8a8a;position:relative;border-radius:15px;display:flex;outline:none;align-items:center;padding:0 6px!important;z-index:1000!important;}

.bus{color:#006b47!important;border:2px solid #006b47!important;}
.bus:hover{color:#fff!important;background-color:#006b47!important;border:2px solid #fff!important;}

.tram{color:#007bff!important;border:2px solid #007bff!important;}
.tram:hover{color:#fff!important;background-color:#007bff!important;border:2px solid #fff!important;}

.blocked{cursor: not-allowed!important;background-color: #f5cccc!important;}
.blocked:hover{background-color: #e65e5e!important;}

.bg-bus{background-color:#006b47!important;color: #fff!important;}
.bg-bus:hover{background-color:#fff!important;color:#006b47!important;border:2px solid #006b47!important;}

.bg-bus-request{background-color:#fff!important;color: #006b47!important;border:2px solid #006b47!important;}
.bg-bus-request:hover{background-color:#006b47!important;color:#fff!important;}

.bg-tram{background-color:#007bff!important;color: #fff!important;}
.bg-tram:hover{background-color:#fff!important;color:#007bff!important;border:2px solid #007bff!important;}

.bg-tram-request{background-color:#fff!important;color: #007bff!important;border:2px solid #007bff!important;}
.bg-tram-request:hover{background-color:#007bff!important;color:#fff!important;}

.leaflet-marker-pane > * {
  -webkit-transition: transform 0.3s linear;
  -moz-transition: transform 0.3s linear;
  -o-transition: transform 0.3 linear;
  -ms-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
}

.stop_marker {
  width: 18px;
  z-index: 500!important;
  border: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  outline: none;
  border-radius: 18px;
  height: 18px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

small {
  font-size: 12px;
}