*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}
body{
  /* display:flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; */
  background: #f7f7f7;
  padding: 10px 100px;
}

.gridactive{
  display:grid;
}
.griddeactive{
  display:none;
}


.chatapponclick{
  position: absolute;
  right: 10px;
  bottom: 200px;
  border: none;
  text-align: center;
  text-decoration: none;
  font-size:75px;
  background-color: none;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
}

.wrapper{
  display: none;
  grid-template-columns:  80px 2fr;
  grid-template-rows: 75px 50px 50px 400px 60px;
  grid-template-areas:'userheader  chatterheader'
                       'sidebar   mainbar'
                       'sidebar   mainbar'
                       'sidebar  mainbar'
                       'hidebar  footer';
                       background: #fff;
                       max-width: 1300px;
                       width: 100%;

                       border-radius: 2px;
                       box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
                                   0 32px 64px -48px rgba(0,0,0,0.5);
}



/* .hidebar{
  display: grid;
  grid-area: hidebar;
  border-right:  2px solid blue;
  cursor: pointer;
}
.hidebar::hover{
  display: grid;
  grid-area: hidebar;

} */

.hidebar{
  display: grid;
  grid-area: hidebar;
  color: blue;
  font-size: 40px;
  justify-content: right;
  margin-right: 25px;
  cursor: pointer;
}




#hidechatwindow{
  display: none;
  border: none;
    background-color: unset;
    font-size: 30px;
    font-weight: bold;
    color: blue;
    margin-left: 1280px;
    cursor: pointer;

}



.userimg{
  display:grid;
  grid-area:userimg;
  grid-template-columns:50px;
  grid-template-rows:50px;
  grid-template-areas:'overlap';
}
.userimg img{
  display:grid;
  object-fit:cover;
  height:50px;
  width:50px;
  border-radius:5%;
  grid-area:overlap;
}

.userimg .img{
  display:grid;
  object-fit:cover;
  height:50px;
  width:50px;
  padding: 14px;

  font-size: 20px;
  border-radius:5%;
  background-color: #9a8b45;
  grid-area:overlap;
}

.status-dot {
  border:3px solid white;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  grid-area:overlap;
  align-self:end;
  justify-self:end;

}

.active{
   background-color: #00b300;
}
.deactive{
   /* background-color: rgba(#86898b, 0.79); */
    background-color:#636b5c;
}

:is(.userheader,.chatterheader){
  display: grid;
  grid-template-columns:50px 1fr;
  grid-template-rows: minmax(25px,50px) 25px;
  grid-template-areas:'userimg details';
  color: white;
  padding:10px;
}
.userheader{
  grid-area:userheader;
  border-right: 2px solid #32377e;
}

.chatterheader{
  grid-area:chatterheader;
}



:is(.userheader .details,.chatterheader .details){
  padding:15px;
  font-size:20px;
}
.chatterheader{
  display: grid;
  grid-area:chatterheader;
}
/* ======================================search area starts========================================== */
.search{

 padding: 5.5px 13px;
}

.search input{
  height: 42px;
  width: 370px;
  padding: 0px 13px;
  font-size: 16px;

  border: none;
  outline:none;
  border-bottom: 1px solid #1d0fb6;
}

/* ======================================search area ends========================================== */


/* ===============================================sidebar area starts=========================================================== */
.sidebar{
  display: grid;
  grid-area:sidebar;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 10px;

}
.meetinggroup{

  grid-area:meetinggroup;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'meetingconfe meetingchat';
  padding: 5px 13px;
  margin: 0px 20px;

}

:is(.meetingconfe,.meetingchat){
  padding: 10px 5px;

}

select{
  background-color: #3d37de;
  color: white;
  border: none;
  outline: none;
  height: 30px;
  border-radius: 50px;
  cursor: pointer;
  padding-right: 5px;
  text-align-last: center;
}

/* :is(.meetingconfeselect,.meetingchatselect){



} */




.chatbox::-webkit-scrollbar,.sidebar::-webkit-scrollbar{
  width: 10px;

}

.chatbox::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{
    background: #a0a19d;

}

.chatbox::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{
  background: blue;
}

.sidebar .users a{
 border-bottom: 2px solid #e6e6e6;
}
.sidebar .users > a {

  display: grid;
  grid-template-columns: 50px 220px 50px 50px;
  grid-template-rows: 25px 25px 25px;
  grid-template-areas: 'userimg span span span'
                       'userimg chatmsg created-date created-date';

                       margin:10px 10px;
                       padding-bottom: 10px;

                       color: black;

}



.userdetails{
  display: grid;
  grid-area: userdetails;
  padding: 0px 15px;
  font-size:20px;
}


.sidebar .users > a  span{

  grid-area:span;
  grid-column: 2/4;
  grid-row: 1/span 2;
  padding: 0px 10px;
  font-size:17px;
}

.sidebar .users > a .chatmsg{


  grid-area:chatmsg;
  grid-row: 3;
  padding: 0px 10px;
  font-size:15px;
  color: #67676a;
}

/* p{
  text-overflow : ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 146px;
} */



.created-date{

  grid-area:created-date;
  grid-row:1;
  grid-column: 2/5;
  padding-top: 5px;
  font-size: 12px;
  text-align: left;
  justify-content: flex-end;
}
/* .sidebar .userslist .content{
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows:
} */


/* ===============================================sidebar area ends=========================================================== */
/* ===============================================mainbar area ends=========================================================== */
.mainbar{
  display: grid;
  grid-area:mainbar;
}

.chatbox{
  padding:20px;
overflow-y: scroll;

}

/* p{
  word-wrap : break-word;
} */

.mainbar .chatbox .chatingmsg{
  display: grid;


  grid-template-rows: auto;
  /* border: 1px solid black; */
  padding: 10px 10px;
  margin-bottom: 10px;

}
.mainbar .chatbox .outgoingmsg{
grid-template-columns: 50px 1fr;
grid-template-areas: 'userimg detailsmsg';

}
.mainbar .chatbox .incomingmsg{
  grid-template-columns: 1fr 50px;
  grid-template-areas: 'detailsmsg userimg';
}

.mainbar .chatbox .chatingmsg .detailsmsg{
  display: grid;
  /* grid-area:detailsmsg; */
  word-wrap: break-word;
  margin: 0px 10px;
  padding: 5px 10px;
  /* border: 1px solid black; */
  border-radius: 25px;
    box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
    background: white;

}

.mainbar .chatbox .chatingmsg .detailsmsg p{

  word-wrap: break-word;
  width: 700px;
  font-size: 15px;
  padding: 10px 5px;

}



/* ===============================================sidebar area ends=========================================================== */
.footer{
  display: grid;
  grid-area:footer;
  grid-template-areas: 'input button';
  grid-template-columns: 1fr 70px;
  grid-template-rows: 50px;
  padding: 5px 10px;


}



.footer input{
  display: grid;
  grid-area:input;
  padding: 0px 50px;
  border-radius: 50px 0px 0px 50px;
  outline: none;
  border: 1px solid blue;
  font-size: 16px;

}

.footer input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  margin-left: 35px;
}
.footer input::-moz-placeholder { /* Firefox 19+ */
margin-left: 20px;
}
.footer input:-ms-input-placeholder { /* IE 10+ */
  margin-left: 20px;
}
.footer input:-moz-placeholder { /* Firefox 18- */
  margin-left: 20px;
}



.footer button{
  display: grid;
  grid-area:button;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  color: white;
  padding-right: 10px;
  border-radius: 0px 50px 50px 0px;
}
 .emoji{
   /* display: grid;
   grid-area:emoji; */
   position: absolute;
    font-size: 40px;
    margin-left: 5px;
   font-size: 40px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.emojiwrapper{
  position: absolute;

  visibility: hidden;
  z-index: 1;
  bottom: 70%;
  left:20px;
}
.emoji .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
.triangle-topleft {
      width: 0;
      height: 0;
      border-top: 50px solid #a4a89d;
      border-right: 50px solid transparent;

    }
    .emojicontainer{
     display: flex;
     /* visibility: hidden; */

     align-items: center;
     justify-content: center;
     background-color: #a4a89d;
     width: 800px;
     height: 200px;
     flex-wrap: wrap;
     padding: 5px;
     overflow-y: scroll;
     cursor: pointer;

   }
   .emojicontainer span:hover{
     background-color: #78786;
   }

   .emojicontainer::-webkit-scrollbar{
     width: 10px;

   }

   .emojicontainer::-webkit-scrollbar-track{
       background: #a0a19d;

   }

   .emojicontainer::-webkit-scrollbar-thumb{
     background: blue;
   }