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

.container{
	/* border: thick; */
	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;
	/* margin-bottom: 30px; */
}

.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: #349b83;
	height: calc(100% - 118px);
	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;
}

/* .meMessageInfo{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.meMessageContent{
	display: flex;
	flex-direction: row-reverse;
	max-width: 80%;
	gap: 10px;
} */

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