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

select{
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	background: black;
	color: white;
	box-shadow: none;
	appearance: none;
	outline: 0;
	border: 0!important;
	margin: 5px;
	font-size: 18px;
	border-radius: 6px;
}

.modal{
	width: clamp(50%, 700px, 90%);
	height: min(50%, 300px);

	margin: auto;
	padding: 2rem;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.scroll{
	overflow: scroll;
}

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

.contact{
	background-color: rgb(46, 46, 46);
	align-items: left;
	height: 29.7rem;
	overflow: scroll;
	/* 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: yellow; */
	background-image: linear-gradient(90deg, #5843e4, #5a0760);
	color: white;
	padding: 3px;
	border-radius: 10px 10px 0px 0px;
}

.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;
}

.submit{
	display: inline-block;
	color: white;
	background-color:  #5843e4;
	border-radius: 10px;
	padding: 5px;
	font-size: 1.2rem;
	text-decoration: none;
	font-weight:lighter;
}

.div_submit {
	flex-direction: row;
	align-items: center;
	/* margin-left: 4px;
	margin-right: 4px; */
}