* { margin: 0 0 0 0; padding: 0 0 0 0; }

.content {
  position:relative;
  overflow: hidden;
}

.top {
  display: flex;
  align-items: center;
}
 
.logo { width: 30%; }

#osm-map { height:100%; width:100%; }

#foot { padding:5px; width: 100%; font-family: arial,helvetica; font-size:20px; }

#topmsg { display:inline; padding:5px; width: 70%; color: #040; font-family: arial,helvetica; font-size:30px; text-align: center; }

#msg { 
  position:absolute;
  width:100%;
  left: 0;
  bottom: 0;
  color:#000;
  background: rgba(0,0,0,0);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  z-index:10;
}

.front-icons { 
  position:absolute;
  width:40px;
  bottom: 40px;
  color:#000;
  background: rgba(0,0,0,0);
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index:12;
}

#onoffline-wrap { left: 0px; }

#icon-message-wrap { left: 50px; }

#audio-mic-wrap { left: 100px; }

#audio-speaker-wrap { left: 150px; }

#audio-phone-wrap { left: 200px; }

#audio-nophone-wrap { left: 250px; }

#direct-wrap { 
  width:100%;
  position:absolute;
  bottom:-600px;
  background-color:#000;
  color:#fff;
  transition:0.4s ease;
}
#direct-wrap > i { float:right; margin: 5px 5px 5px 5px; cursor:pointer; }
#directions { font-size: 20px; }

#menu-wrap { 
  width:100%;
  min-height: 50%;
  position:absolute;
  top: 0;
  left:-6000px;
  background-color:#000;
  color:#fff;
  transition:0.4s ease;
  z-index: 20;
}
#menu-wrap > i { float:right; margin: 5px 5px 5px 5px; cursor:pointer; }

#menu {
  position:relative;
  padding: 20px 5px 5px 5px;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  
  xxjustify-content: center;
  gap: 2rem;
  height:500px;
}

#menu-bc {
  cursor:pointer;  
}
.menu-bc {
  padding: 5px 5px 5px 5px;
  color: #f90;
  font-weight:bold;
  font-size: 20px;
}
.menu-bclast {
  color:#fff;
}

#menu-entry {
  padding: 5px 5px 5px 5px;
  width:100%;
  min-height: 50%;
  position:absolute;
  top: 40px;
  left:-6000px;
  width:100%;
  background-color:#444;
  color:#fff;
  transition:0.4s ease;
  z-index:20;
}

#ol-info-wrap { 
  xxwidth:100%;
  max-height: 600px;
  position:absolute;
  top: 0;
  left:-6000px;
  background-color:#000;
  color:#fff;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 20;
  transition:0.4s ease;
}
#ol-info-wrap > i { float:right; margin: 5px 10px 5px 5px; cursor:pointer; }

#ol-info {
  position:relative;
  padding: 5px 5px 5px 5px;

  overflow-x: scroll;
  overflow-y: scroll;

}