.sidebarStyle {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 12px;
  background-color: #404040;
  color: #fff;
  z-index: 1!important;
  padding: 6px;
  font-weight: 700
}

.mapContainer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0
}

.fab-container.menu-login,
.fab-container.menu-logout{
    bottom: 0vh;
    position: fixed;
    margin: 2em;
    right: 0vw;
}

.fab-container.menu-login > button {
  background-color: #f44336 !important;
}

.fab-container.menu-logout > button {
  background-color: #50be62 !important;
}

button.mapboxgl-ctrl-geolocate {
  display: none;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal.display-block {
  z-index: 1050;
  outline: 0;
  overflow: hidden;
  padding-top: 5em;
  left: 0;
}

.modal-dialog {
  width: auto;
  margin: 30px auto;
  position: relative;
  box-sizing: border-box;
  display: block;
  transform: translate(0, 0);
}

.modal-header {
  display: block;
  box-sizing: border-box;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  background-color: ghostwhite;
}

.modal-header::before {
  display: table;
  content: " ";
}

.modal-header::after {
  clear: both;
  display: table;
  content: " ";
}

.modal-title {
  margin: 0;
  text-align: center;
}

.modal-body {
  display: block;
  box-sizing: border-box;
  position: relative;
  padding: 15px;
  background-color: ghostwhite;
}

.modal-footer {
  padding: 15px;
  text-align: center;
  border-top: 1px solid #e5e5e5;
  background-color: ghostwhite;
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

.closeModal {
  color: #333;
  background-color: #fbae02;
  border-color: #ccc;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.counter.mapboxgl-marker {
  background-image: url('logo192.png');
  background-size: cover;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  padding-left: 25px;
}

.mapboxgl-popup {
  max-width: 200px;
}