body {
  background: linear-gradient(-45deg, #181250a9, #250b3ab2, #172538a2, #0807309f), url(/img/web_3.png);
  background-size:  200% 200%;
  background-repeat: no-repeat;
  animation: gradient 30s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 25%;
  }
  25%{
    background-position: 25% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75%{
    background-position: 25% 50% ;        
  }
  100% {
    background-position: 25% 0%;
  }  
}
.nav-width{
  width: 88%;
  margin: auto;
}
.w-45{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background: linear-gradient(-45deg, #3a0b99a8, #6c2ea39a, #456faab7, #1f1da0a1);
  background-size: 400%, 400%;
  animation: gradient2 15s ease infinite;
  width: 80%;
  height: 80%;
}
@keyframes gradient2 {
  0% {
    background-position: 0% 25%;
  }
  25%{
    background-position: 25% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75%{
    background-position: 25% 50% ;        
  }
  100% {
    background-position: 25% 0%;
  }  
}
.messageContainer::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.137);
    
}
 
.messageContainer::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background:#13131362;
}
.active {
  /* Change this to your desired active background color */
  color: rgb(255, 217, 0);
  transform: scale(1.5) rotate(180deg); /* Change this to your desired active transform values */
}
img{
  height: 2.5rem;
}
/* nav-start */
.bg-gray{
    color: #222020;
  }

  /* adjust the font size */
  .bg-gray-201.p-4.rounded-lg{
    background: #fcf9f9;
    background-color: rgb(235, 235, 235);
  }
.height{
  height: 370px;
position: relative;
  border-width: 2px;
}

  /* adjust the position */
  .flex1 {
    display: flex;

    margin-left: 100px;
    margin-right: 100px;
    align-items: center;
    justify-content: center;
  }

.text-lg {
  font-size: 1.5rem;
  color: #fdfdfd;
  margin-bottom: 5px;
}
.text-lg1 {
  font-size: 1.5rem;
  margin-top: 20px;
  color: #152477;
  text-align: center;
}

.font-medium {
  font-weight: 500;
}
.font-medium1 {
  font-weight: 500;
  color: #fcf9f9;
  margin-right: 5px;
  text-align: right;
}


#userList {
  width: 100%;
  list-style: none;
  color:#152477;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /* position: relative; */
  max-height: 440px;
  overflow: auto;
}
#userList li {
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  
}

#userList li:hover,
#userList li.selected {
  background-color: #333;
  color: #fff;
}
.bg-blue-500{
  padding: 10px;
}
#replyInput,
button[type="submit"] {
  vertical-align: middle;
}
#replyForm {
  display: flex;
  align-items: center;
}
.w-15{
  box-shadow: #131313;
  width: 280px;
  height: 500px;
  background: rgb(255, 255, 255);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#messageContainer{
  height: 350px;
}
.username{
  color: #ffffff;
  margin-left: 25px;
  
}
.message{
  color: #152477;
}
.timestamp{
  color: #222020;
}
.text-gray-701{
  color: aliceblue;
}
.justify-start{
  margin: 0px;
  margin-top: 2px;
}