.message-board {
  
  height: 300px;
  width: 100%;
  border: 1px solid #aa2217;
  border-radius: 5px;
  padding: 10px;
  background-color:  rgba(255, 255, 255, 0.75);;
}

.message-input{
  display: inline;
}

/* phone */
@media screen and (max-width: 768px) {
  #sendMessageText {    
    width: 89%;
  }
  #sendMessageBtn {
    width: 100%;        
  }
   #loginname{
     width: 100%;
   }
   #aliasBtn {
    width: 100%;
   }
   #lineloginbtn {
    width: 100%;
   }      
}
/* tablet */
@media screen and (min-width: 768px) {
  #sendMessageText {
   width: 94%;  
  }  
  #loginname{
    width: 100%;  
  } 
  #sendMessageBtn{
    width: 100%;  
  }
}
/* desktop */
@media screen and (min-width: 1024px) {
  #sendMessageText {
    width: 87%;
  }  
  #loginname{
    width: 80%;  
  }
  #lineloginbtn{
    width: 10%;  
  }
  #sendMessageBtn{
    width: 8%;  
  }
}

input[type=text] {
  border-radius: 5px;
  border: 1px solid #aa2217;
  margin-bottom: 4px;
}

.btn.btn-primary{
  background-color: #aa2217;
  border-color: #aa2217;
  color: #ffffff;
  padding: 0.375rem 0.75rem;
}
.login-session .btn.btn-primary{
  margin-bottom: 4px; 
}
.login-session .btn.btn-success {
  background-color: #00B900;
  border-color: #00B900;
  color: #ffffff;
  margin-bottom: 4px; 
  @media screen and (max-width: 768px) {
    width: 100%;        
  }
  @media screen and (min-width: 768px) {
    width: 20%;  
  }
}
.login-session .btn.btn-primary:hover, .btn.btn-primary:active {
  background-color: #801515;
  border-color: #801515;
  color: #ffffff;
}
.login-session .btn.btn-success:hover, .btn.btn-success:active {
  background-color: #008a00;
  border-color: #008a00;
  color: #ffffff;
}
.chatuser{
  color: #aa2217;
}
.chatmessage{
  color: #000000;
}

/* sticker */
#stickerPopup {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 10px;  /* Spacing between images */

  position: absolute; 
  top: 30px;  
  left: 0; 
  width: 100px;
  max-height: 200px;
  overflow-y: auto;      
  background-color: #fff; 
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 
  padding: 10px;
}
.sticker {
  cursor: pointer;
  width: 48px;
  height: auto;        
}
.chat-sticker {
  width: 48px;
  height: auto;        
}
.showPopup {
  display: block;
}
