.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height to center vertically */
    background-color: #f0f0f0; /* Light background color */
}
#user-input {
    width: 100%;
    min-height: 40px;
    max-height: 200px;
    padding: 11px;
    margin-bottom: 10px;
    border: 0px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: left;
    color: #000000;
    overflow-y: hidden;
    resize: none;
    background-color: #ffffff;
    font-weight: 400;
    }



.chat-container {
   border-radius: 7px;
    padding: 10px;
    max-width: 1500px;
    width: 100%;
    background-image: linear-gradient(to right, rgb(219 219 219) 0%, rgb(255 255 255) 50%, rgb(209 209 209) 100%);
    text-align: center;
    margin: 0 auto;
}

.username-container input {margin: 5px;margin-right: 0px;margin-left: 0px;padding: 8px;margin-bottom: 4px;width: 100%;box-sizing: border-box;text-align: center;border-width: 2px;border-color: #d9d9d9;border-radius: 50px;font-weight: 400;border-style: solid;background-color: #ffffff !important;font-size: 16px;color: #000000;resize: none;/* animation: pulseBorder 1s infinite alternate; */}
@keyframes pulseBorder {
      0% {
        border-color: #ff1100;
  
      }
      100% {
        border-color: #c9ae62;

      }
    }

.chat-container input {
    width: calc(100% - 0px); /* Ensure the input takes full width with padding */
    padding: 11px;
    margin-bottom: 10px;
    border: 0px solid #ccc;
    border-radius: 50px;
    box-sizing: border-box; /* Include padding in the width calculation */
    font-size: 25px;
    text-align:left;
}

.chat-container .chat-log {
   background-color: #ffffffe6;
    border: 0px solid #ddd;
    border-radius: 6px;
    height: 300px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 10px;
    text-align: left;
    box-sizing: border-box;
}
hr{
 border-bottom:dashed;
    border-color:#5b5b5b;
    border-width:1px;
}
.chat-container .chat-log div {
    margin-bottom: 10px;
}

.chat-container .chat-log p {
    margin: 0;
    word-wrap: break-word;
    text-align:left;
    font-family: system-ui, sans-serif;
}
.feedbkbtnenter{
 border: 0px solid #4d4d4d;
 color: #000000;
 background-image: linear-gradient(to right, rgb(178 178 178 / 46%) 0%, #ffffff 50%, rgb(178 178 178 / 52%) 100%);
 border-radius: 50px;
 font-size: 16px;
 font-weight: 400;
 padding: 12px 20px;
 width: 220px;
 margin-top: 12px;
 cursor: pointer;
 transition: all 0.3s ease;
 backdrop-filter: blur(4px);
 text-align: center;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.feedbkbtnenter:hover {
    background-color: rgba(77, 77, 77, 0.8);
    color: #000000;
}

.feedbkbtnenter:active{
    background-image: linear-gradient(to right, rgb(255 255 255) 0%, rgb(106 106 106 / 24%) 50%, rgb(255 255 255) 100%);
}
.feedbkbtnsend{
    -webkit-appearance: none;
    background-image: url('images/send.png');
    border-style: none;
    font-weight: 400;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    border: none;
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    width: 40px;
    background-color: transparent;
    height: 40px;
}
.feedbkbtnsend:hover{
 
}
.feedbkbtnsend:active{
    transform: scale(1.1); 
}
.feedbkbtn{
    border-style: none;
    font-weight: 400;
    background-image: url('images/emoji.png');
    background-size: contain; /* Adjust this to 'cover' or other values as needed */
    background-repeat: no-repeat;
    background-position: left center; /* Adjust this to position the image */
     /* Add padding to make space for the image */
    border: none;
    color: white; /* Text color */
    font-size: 25px; /* Font size */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    width: 40px;
    background-color: transparent;
    height: 40px; /* Adjust height as needed */
}

.feedbkbtn:active{
    transform: scale(1.1); 
}
.feedbkbtnclose{background-image: url(images/close.png);border-style: none;font-weight: bold;background-size: contain;background-repeat: no-repeat;background-position: left center;border: none;color: white;cursor: pointer;display: inline-flex;align-items: center;width: 40px;background-color: transparent;height: 40px;}
.feedbkbtnclose:hover{
  
}
.feedbkbtnclose:active{
    transform: scale(1.1); 
}


.emojpicker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border: 2px solid #d1d1d1;
    border-radius: 7px;
    /* padding: 10px; */
    background-color: #ffffff;
    overflow-y: auto;
    box-sizing: border-box;
    margin-top: 20px;
    max-height: 130px;
}

.emojpicker button {
    padding: 0px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
}

.emojpicker button:hover {
    background-color: #2196f369;
    border-radius:8px
}

audio {
    display: none;
}

.mainchat_container{
    margin: 10px;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
    max-width: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 90%;
}
.messagetime{color:#676767!important;font-size:16px;font-family: system-ui, sans-serif;}
.messagedate{
 color:#676767!important;
    font-size:16px;
 font-family: system-ui, sans-serif;
}
.messagetext{
 color: #000000 !important;
    font-size:16px
}
.feedbkbtnscroll {background-image: url(images/autoscroll.png);border-style: none;font-weight: bold;background-size: contain;background-repeat: no-repeat;background-position: left center;border: none;color: white;cursor: pointer;display: inline-flex;align-items: center;height: 40px;width: 40px;background-color: transparent;}

.feedbkbtnscroll:hover {
   
}

.feedbkbtnscroll:active {
    transform: scale(1.1); 
}