body{
height: -webkit-fill-available;
}

#app {
  /* max-width: 800px;
  margin: auto;
  overflow: hidden; */
}

main {
  height: auto;
}

#guest_hooter {
  position: fixed;
  background-color: black;
  color: white;
  bottom: 0;
  width: calc(100%);
}

#guest_hooter #inner {
  margin: auto;
  max-width: 1000px;
  overflow: hidden;
}

#guest_hooter #inner .hooter_link{
  overflow: hidden;
   float: left;
   width: calc(25%);
}

#guest_hooter #inner .hooter_link.target{
  /* background-color: red */
}
.hooter_link a {
  color: white;
  display: block;
  width: calc(70px);
  margin: auto;
  /* background-color:  */
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
}
.hooter_link.target a {
  background-color: white;
  color: black;
}

#guest_hooter #inner .hooter_link span{
  float: none;
  width: 100%;
  text-align: center;
  display: block;
}

#inner .hooter_link .text {
  font-size: 9px;
  /* margin-bottom: 13px; */
}

#inner .hooter_link .material-symbols-outlined {
  height: 30px;
  line-height: 30px;
  font-size: 30px;
}



#guest_chat_wrap {
  position: fixed;
  max-width: 1000px;
  margin:auto;
  width: 100%;
  left: 50%;
  transform:  translateX(-50%);
  -webkit-transform:  translateX(-50%);
  height: calc(100vh - 20px);
}


#guest_info_wrap {
  position: fixed;
  max-width: 1000px;
  margin:auto;
  width: 100%;
  left: 50%;
  transform:  translateX(-50%);
  -webkit-transform:  translateX(-50%);
  max-height: calc(100vh - 54px);
  overflow: scroll;
  /* background-color: red */
}



/* #chat-container {
  height: calc(100% - 60px);
} */