.fortyImage {
    width: 50px;
    height: auto;
    border-radius: 0.3em;
}
 
 .bold {
     color: gray;
     font-weight: bold;
     font-size: 1.2em;
     text-align: center;
    }


	.autofit {
		background: gray;
		width: fit-content;
		max-width: 200px;
		border-radius: "16px";
		padding: 1em;
		background: gray;
	}

	
	

	.bluem {
		background-color: blue;
	}


/*
.alright {
text-align: right;
    }*/

 #post {
 	padding-bottom: 3em;
 }

 .senta, .reca {
 	border-radius: 8px;
 }
    
 h6 {
 	font-size: 2em;
 	margin-top: 3.6em;
 }

 .img-wrap {
 	display: flex;
	 margin: 1em;
 }

 .right {
 	justify-content: flex-end;
 }

 .chatHeaderBackButton{
	 width: 11em !important;
	 padding: 0.5em;
 }
    
    .left {
        justify-content: flex-start;
    }

 #back {
 	margin: 1em;
 }

 .chatHeader {
 	font-family: Arial;
 	font-weight: bold;
 	font-size: 3em;
 	text-align: center;
 	margin-left: 2em;
 }

 #float {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	vertical-align: middle;
 	float: left;
 	width: 100vw;
 	height: 10em;
 }

 .message {
 	list-style-type: none;
 	background: #f1f0f0;
 	margin: 0.3em;
 	margin-bottom: 0.5em;
 	width: 21em;
 	display: block;
 	border-radius: 1em;
 	padding: 0.4em;
 }

 .messagelarge {
 	list-style-type: none;
 	background: #f1f0f0;
 	margin: 0.3em;
 	margin-bottom: 0.5em;
 	width: 21em;
 	display: block;
 	border-radius: 6px;
 	padding: 0.4em;
 }   
    
#centerBack {
	display: flex;
	justify-content: center;
	align-items: center;
}
    
/*-------------------------------------MESSAGES--------------------------------------*/
.ms {
    list-style-type: none;
 background: #ecf0f1;
     border-radius: 6px;
 	margin: 0.3em;
 	margin-bottom: 0.5em;
 	display: block;
 	overflow: auto;
 	padding: 0.4em;
    color: black;
    
}    
    
smallChat {
    	/*background: orange;*/
    width: 15em;
    margin-left:calc((70vw - 15em));
    border-radius: 1em;
}
    
.medium {
    	/*background: green;*/
    color: black;
    width: 7em;
 	height: auto;
    margin-left:calc((70vw - 7em));
 	
 }
    
 .large {
 	height: auto;
    width: 21em;
    margin-left:calc((70vw - 21em));
 }
    
    
    
.rsmall {
    width: 15em;
    border-radius: 1em;
}
    
    
.rmedium {
   /* background: green;*/
    width: 7em;
 	color: white;
 	height: auto;
 }
  
    
    
 .rlarge {
   /* background: #3498db;*/
 	height: auto;
    width: 21em;
   /* margin-left:calc((70vw - 21em));*/
 }
    
.received {
       color: white;
        background: #3498db;
		margin-left: auto;
}
    
   
/*
.whiteDark h3 {
color: rgb(0, 0, 0);
}*/
    
 #mstext {
 	margin: 2em;
 	border: 2px solid gray;
 	font-size: 1em;
 	border-radius: 0.6em;
 	padding: 0.5em;
 	background: #fff;
 	resize: none;
 }

 button {
 	border: none;
 	font-weight: bold;
 	font-size: 1em;
 	color: #3498db;
 }


.darkButton {
	background: #1c1e21;
}

 #wrapper {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	height: auto;
 	justify-content: center;
 	align-items: center;
 }

 #messages {
 	height: 350px;
 	width: 70vw;
 	overflow-y: scroll;
 }

 #post {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
 }

 #post button {
 	padding: 1em;
 }

 #imga {
 	width: 8em;
 	height:8em;
 	border-radius: 50%;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
 }

 /*----------------------------------------FONT SIZES HERE--------------------------------------------*/

 /*-----------------------------------MOBILE DESIGN-----------------------------------*/

 @media (max-device-width: 415px) {
 	/*UP TO XS MAX (replace 70em)*/
 	button, #back {
 		font-size: 2.5em;
 	}
 	/*#wrapper {
 		font-size: 1.6em;
 	}*/
 	.message, .sent, smallChat, .medium, .large, .received {
 		font-size: 2em;
 	}
	 
 	.chatHeader {
 		font-size: 5em;
 	}
 	textarea {
 		font-size: 30px !important;
 	}
 	.sentLarge {
 		font-size: 2em !important;
 	}
     
	 .fortyImage { /* 29/03/2022 */
		width: 81px;
		height: auto;
		border-radius: 0.7em;
		margin-right: 90px;
	}

     label {
         font-weight: bold;
         font-size: 1.4em;
     }
	 
	 .img-wrap {
    height: 20em;
}
	 
	 
	 
	 .DATE {
		 font-size: 2em;
	 }
     
	 
	 label {
		 font-size: 2em;
	 }
    
     
     
 }

 /* CHANGES ON RESIZE ADJUST BEHAVIOUR (HIDE UNDER HAMBURGER, ETC.)*/

 @media only screen and (max-width: 70em) {
 	#post {
 		flex-direction: column;
 	}
     
 	#messages {
 		width: 91vw;
 	}
 	
 	.img-wrap {
 		height: 12em;
 	}
     
 	.img-wrap img {
 		height: 100%;
 	}
     
 	textarea {
 		width: 80vw;
 		height: 3em;
 	}
     
 	#messages {
 		height: 900px;
 		overflow-y: scroll;
 	}
     
     smallChat {
         margin-left:calc((90vw - 15em));
     }
     
     .medium {
         margin-left:calc((90vw - 7em));
     }
     
     .large {
         width: 12em;
         margin-left:calc((90vw - 12em));
     }
     
     .rlarge {
         width: 12em;
     }
     
     /* #imga {
 	width: 12em;
 	height:12em;
     }*/
 }



    input[type="file"]{
        display: none;
    }
    
    label {
        text-align: center;
        color: #3498db;
        /*padding-bottom: 2.5em;*/
    }
    
    .m-wrap {
        display: flex;
        align-items: flex-end;
        margin-bottom: 0.6em;
    }
    
    
    .rec-wrap {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.6em;
    }