*{
    margin: 0;
    padding: 0;
}

.wb{
	width:20%;
	height:70vh;
	border:1px solid black;
	Background:white;
  /* margin-top:50px; */
margin-top:20px;

	}


.chat{
	/* width:100%; */
	height:50px;
	/* border:1px solid black; */
	display: flex;
	justify-content:start;
align-items:center;

background:rgb(241, 250, 250);
margin-top:10px;
}


.image{

	width:40px;
	height:40px;
	border-radius:50px;
}

.profile{
	width:fit-content;
display: flex;
justify-content:space-evenly;
align-items:center;
padding-left:20px;
}

.ab{

	width:100%;
	height:100%;
	border-radius:50%;
}

.name{
	color:black;
	padding-left:10px;
}
.chat_body{
    /* width: 100%; */
    display: flex;
    /* align-items: center;
    justify-content: center; */
margin-left: 20%;
}
.chat_card{

    width: 70%;
    height: 70vh;
    /* border: 1px solid black; */
    margin:20px 10px;
}
.chat_card .chat_head{
    width: 100%;
    height: 15%;
    /* border: 1px solid black; */
    background-color: white;
    box-shadow:2px 2px 10px gray;
    top: 0;
    position: sticky;
    z-index: 999;

    display: flex;
    align-items:center;
    justify-content: space-between;
}
.chat_card .chat_head .head_logo {
    border: 1px solid black;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat_card .chat_head .head_logo .ch_logo{

    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* border: 1px solid black; */
    margin-left: 20px;

}

.chat_card .chat_head .head_logo .ch_name{
    margin-left: 10px;  

}
.chat_card .chat_head .head_logo .ch_logo img{
      height: 100%;
    width: 100%;
    border-radius: 50%;
}
.chat_card .chat_head .head_icon{
width: fit-content;
/* border: 1px solid black; */
padding: 0px 20px;
  display: flex;
    align-items: center;
    justify-content: center;
}
.chat_card .chat_head .head_icon i{
    
    width: 40px;
    height: 40px;
    border: 1px solid black;
    border-radius: 50%;
      display: flex;
    align-items: center;
    justify-content: center;
    margin:0 5px;
}



/* wb_chat  */

.chat_container{

    /* border: 1px solid black; */
    height:78vh;
    margin:1.9%  0 0 19.5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat_container .chat_left_body{
    width:75%;
    height: 100%;
   /* border: 1px solid black; */

}


.chat_container .chat_right_body{
    width:25%;
    height: 100%;
   /* border: 1px solid black; */
background-color: white;
}

.chat_container .chat_right_body .chat_right_onscroll{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.chat_container .chat_left_body .chat_left_body_header{
height:50px;
/* border: 1px solid black; */
background-color: white;
box-shadow:2px 2px 10px rgb(202, 202, 202);
display: flex;
align-items: center;
justify-content: space-between;

}

.chat_container .chat_right_body .chat_profile{
height:50px;
/* border:1px solid black; */
display: flex;
justify-content:start;
align-items:center;
background:rgb(241, 250, 250);
margin-bottom:5px;
}


.chat_container .chat_right_body .profile_img{
width:fit-content;
display: flex;
justify-content:space-evenly;
align-items:center;
padding-left:15px;
/* border: 1px solid black; */
}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_profile{
width:fit-content;
display: flex;
align-items:center;
  /* border: 1px solid black; */
}

.chat_container .chat_left_body .chat_left_body_header .chat_left_header_profile .profile_image{
    height: 45px;
    width: 45px;
    /* border: 1px solid black; */
    margin-left: 20px;

}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_profile .profile_image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.chat_container .chat_left_body .chat_left_body_header .chat_left_header_profile .profile_name{
    margin-left: 15px;  
}

.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon{
    width:fit-content;
    /* border: 1px solid black; */
    display: flex;
}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon .video{
     width:60px;
    height: 40px;
   margin-right: 10px; 
       display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon .video:hover{
    width:60px;
    height: 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
   background: rgb(236, 236, 236);
    border-radius:50px;
      margin-right: 10px;
}

.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon .magnifying-glass{
    width:40px;
    height: 40px;
    margin-right: 10px;
        display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon .magnifying-glass:hover{
    width:40px;
    height: 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius:50%;
    background: rgb(236, 236, 236);
      margin-right: 10px;
}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon .ellipsis-vertical{
        width:40px;
    height: 40px;
    margin-right: 10px;
      display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.chat_container .chat_left_body .chat_left_body_header .chat_left_header_icon .ellipsis-vertical:hover{
    width:40px;
    height: 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius:50%;
  background: rgb(236, 236, 236);
      margin-right: 10px;
}

 .chat_container .chat_left_body .chat_left_body_background{
    height: calc(100% - 50px);
     /* border: 1px solid black; */
         padding: 5px 0;
     background:url(../../chat/uploads/pattern.jpg);
     background-size:contain;
     /* background-repeat: no-repeat; */
}

/* .chat_left_wb_chat_body_background{
       height: 100%;
     border: 1px solid black; 
     background:url(../../chat/uploads/pattern.jpg);
     background-size:contain;
}  */
.chat_left_message_container{
 height:87% ;
 overflow-x: hidden;
 overflow-y: auto;
/* border: 1px solid black; */
}

.chat_form{
    height: 13%;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
}

.chat_form .chat_from_input{
    width: 98%;
    height: 90%;
    border-radius: 50px;
    background-color: #ffffff;
    box-shadow:1px 1px 10px rgb(214, 214, 214);
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.chat_form .chat_from_input .from input{
  width: 100%;
  border: none;
padding-left: 5px;
}
.pluse_container{
    width: 40px;
    height: 40px;
    border-radius: 50%;
       display: flex;
    align-items: center;
    justify-content: center;
     margin-left: 10px;
     position: relative;
}
.pluse_click{
    position: absolute;
    height: auto;
    width: 200px;
    bottom: 100%;
    left: 0%;
}
.pluse_container:hover{
    width: 40px;
    height: 40px;
    border-radius: 50%;
       display: flex;
    align-items: center;
    justify-content: center;
     margin-left: 10px;
     background-color: rgb(214, 214, 214);
}
 .submit_button{
    width: 40px;
    height: 40px;
    border-radius:50%;
    background-color: rgb(0, 128, 75);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.from{
  width: calc(100% - 30px - 40px);
}

.sender{
    width: 98%;
text-align:left;
margin: auto;
padding-top: 9px;
display: flex;
justify-content: start;
}

.sender_message{
    max-width: 70%;
    padding:5px 20px 5px 20px;
    border-radius: 10px;
    background-color:#c6eec6;

}
.sender_message span{
font-size: 15px;
}
.receiver{
    width: 98%;
text-align:left;
margin:auto;
padding-top: 9px;
display: flex;
justify-content: end;
}

.receiver_message{
            max-width: 70%;
        background-color: #ffffff;
padding: 5px 20px 5px 20px;
    border-radius: 10px;
}
.receiver_message span{
    font-size: 15px;

}
.sender_time,.reciever_time{
    width: 100%;
    text-align: right;
    font-size: 10px;
    color: gray;
}