ft_transcendence/containers/react/src/styles/Messages.css

.home{
	background-color: rgb(0, 0, 0);
	height: 70vh;
	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;
	overflow-x: scroll;
}

.scroll{
	overflow: scroll;
}

::-webkit-scrollbar{
	display:none;
}

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

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

.messages_box{
	background-color: rgb(0, 0, 0);
	/* 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: #a2a3ac;
	color: white;
}

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

.conv{
	padding: 5;
}

.navbar{
	/* width: clamp(50%, 500px, 20%); */
	/* height: min(50%, 100px); */
	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;
	margin-top: 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: rgb(26, 26, 26);
	/* height: calc(100% - 118px); */
	width: 70%;
	/* height: 300px; */
	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-wrap: wrap;
	flex-direction: column;
	max-width: 80%;
	gap: 10px;
}

p {
	overflow-wrap: break-word;
	max-width: 300px;
}

.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;
	margin: 1%;
	height: 25px;
}

.darkSubmit{
	display: inline-block;
	color: white;
	background-color:  #282155;
	border-radius: 10px;
	padding: 5px;
	font-size: 1.2rem;
	text-decoration: none;
	font-weight:lighter;
	margin: 1%;
}

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

.lookForFriends{
	color: rgba(255, 255, 255, 0.5);;
	backdrop-filter: sepia(90%);
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	width: 11rem;
	height: 1.5rem;
	margin-top: 1rem;
}

.greenAlert{
	width: clamp(50%, 500px, 90%);
	height: min(50%, 100px);

	margin: auto;
	padding: 1rem;
	border-radius: 12px;
	/* display: flex; */
	flex-direction: row;
	align-items: center;
	background-color: rgba(0, 86, 27, 0.7);
	font-size: 25px;
	color: rgba(255, 255, 255, 1);
}

.redAlert{
	width: clamp(50%, 500px, 90%);
	height: min(50%, 100px);

	margin: auto;
	padding: 1rem;
	border-radius: 12px;
	flex-direction: row;
	align-items: center;
	background-color: rgba(133, 6, 6, 0.7);
	font-size: 25px;
	color: rgba(255, 255, 255, 1);
}

.redAlert{
	width: clamp(50%, 500px, 90%);
	height: min(50%, 100px);

	margin: auto;
	padding: 1rem;
	border-radius: 12px;
	flex-direction: row;
	align-items: center;
	background-color: rgba(133, 6, 6, 0.7);
	font-size: 25px;
	color: rgba(255, 255, 255, 1);
}

.yellowAlert{
	width: clamp(50%, 500px, 90%);
	height: min(50%, 100px);

	margin: auto;
	padding: 1rem;
	border-radius: 12px;
	flex-direction: row;
	align-items: center;
	background-color: rgba(212, 175, 55, 0.7);
	font-size: 25px;
	color: rgba(255, 255, 255, 1);
	flex-wrap: wrap;
}

.yellowAlert::p {
	overflow-wrap: break-word;
	max-width: 1000px;
}

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

	margin: auto;
	padding: 2rem;
	border-radius: 12px;
	display: flex;
	/* flex-direction: column; */
	/* align-items: center; */
	background-color: #3e3c61;
	overflow: scroll;
}

.settingFirstPart{
	margin-top: 10%;
	margin-left: 20%;
}

.settingFirstPart2{
	margin-top: 10%;
	margin-left: 30%;
}

.settingSecondPart{
	margin-top: 10%;
	margin-left: 5%;

	/* margin-left: 20%; */
}

.checkbox{
	display:flex;
	flex-direction:row;
	margin-left: 60px;
}

input.in{
	margin-top: 5%;
	margin-left: 0px;
	background-color: black;
	color: white;
	border-radius: 4px;
	width: 70%;
	height: 100%;
	font-weight:100;
	font-size: 20px;
	padding: 7px;
}

input.in_howLong{
	margin-top: 13%;
	margin-left: 0px;
	background-color: black;
	color: white;
	border-radius: 4px;
	width: 10%;
	height: 10%;
	font-weight:100;
	font-size: 20px;
	padding: 7px;
}

.mdp{
	background-color : black;
	border-radius: 8px;
	color: white;
	width: 20%;
}

.case{
	height: auto;
	width: auto;
	margin-left: 10px; 
}