body {
  margin: 0; 
  padding: 0;
}

#map { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 100%; 
}

.btn-clickable {
  background-color: white;
  border: 1px solid #ced4da;
  border-left: 0px;
}

.addresses {
  top:8px;
  left:8px;
  z-index:100;
}

.spot {  
  background-image: url('../img/parking_w.png');
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.spot-free {
  border: 3px solid #28a745;
  background-color: #28a745;
}

.spot-warning {
  border: 3px solid #ffd111;
  background-color: #ffd111;
}

.spot-full {
  border: 3px solid #dc3545;
  background-color: #dc3545;
}

.spot-indicator {
  background-image: url('../img/indicator_green.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  cursor: pointer;
  height: 29px;
  width: 84px;
}

.spot-indicator-text {
  height: 25px;
  width: 60px;
  margin-left: auto;
  margin-right: 0;
  margin-top: 3px;
  color: white;
  text-align: center;
  font-size: 22px;
}

.currentlocationpointer {
  align-content: center;
  border-radius: 50%;
  border: 7px solid #0957a1;
  width: 35px;
  height: 35px;
}

.togglefreespots {
  position: absolute;
  /*left: 8px;*/
  left: 45px;
  top: 79px;
  z-index: 100;
}

.toggleroute {
  position: absolute;
  left: 8px;
  top: 117px;
  z-index: 100;
}

.readonly-label {
    background-color: #f0f0f0;
}

.mapboxgl-ctrl-top-left {
  top: 70px;
}

.mapboxgl-ctrl-directions {
  padding-top: 30px;
}

img.logo {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: 5px;
  height: 100px;
}

img.logo-left {
  margin-right: 110px;
}

img.logo-right {
  margin-right: 5px;
}


@media only screen and (max-width: 480px) {
  img.logo {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 5px;
    height: 50px;
  }
  img.logo-left {
    margin-right: 60px;
  }
  img.logo-right {
    margin-right: 5px;
  }
}