.home{
	background-color: black;
	height: 10vh;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.scroll{
	overflow: scroll;
}

.newMessage{
	color: white;
	font-size: 18px;
}

.contact{
	background-color: rgb(46, 46, 46);
	align-items: left;
	/* width: 2rem; */
	/* height: 4rem; */
}

.messages_box{
	background-color: black;
	/* height: 90vh; */
	display: flex;
	align-items: center;
	justify-content: center;
	/* position:relative;	 */
	
}

.container{
	border-color: #FFFFFF ;
	border-radius: 50%;
	width: 65%;
	height: 80%;
	display: flex;
}

.sidebar{
	flex:1;
	border-right: 1px solid #3e3c61;
	background-color: #060b26;
	color: white;
}

.chat{
	flex:2;
	color: white;
	align-items: center;
}

.conv{
	padding: 5;
}

.navbar{
	display: flex;
	align-items: center;
	background-color: #000c66;
	color: white;
	padding: 3px;
}

.pic{
	height: 35px;
	width: 35px;
	border-radius: 50%;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.end{
	display: flex;
	flex: 3;
	justify-content: flex-end;

}

.pic-user{
	height: 50px;
	width: 50px;
	border-radius: 50%;
	object-fit: cover;
	/* margin-right: 10px; */
}

.messages{
	background-color: black;
	/* height: calc(100% - 118px); */
	width: 40rem;
	overflow: scroll;
}

.input{
	display: flex;
	height: 50px;
	background-color: white;
	color:#060b26;
	border: none;
}

input{
	margin-left: 10px;
	width: 100%;
	font-size: 18px;
	border: none;
	outline: none;
}

.send{
	display: flex;
	font-size: 30px;
	align-items: center;
	margin-right: 10px;
}

.youMessage{
	display: flex;
	padding: 20px;
}

.messageInfo{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.messageContent{
	display: flex;
	flex-direction: column;
	max-width: 80%;
	gap: 10px;
}

.meMessage{
	display: flex;
	flex-direction: row-reverse;
	padding: 20px;
	color: lightgrey;
}