/* CSS Document */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}

.container {
	width: 500px;
	margin: auto;
}

.chat {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f1f0e8;
}

.chat-header {
	display: flex;
	cursor: pointer;
}

.profile {
	width: 100%;
	background: #036055;
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0px 10px;
	position: relative;
}

.profile .pp {
	width: 50px;
	display: inline-block;
	border-radius: 50%;
	margin-left: 32px;
}

.profile .arrow {
	display: inline-block;
	width: 30px;
	position: absolute;
	top: 19px;
	cursor: pointer;
}

.profile h2 {
	display: inline-block;
	line-height: 60px;
	vertical-align: bottom;
	color: #fff;
	font-size: 20px;
}

.profile span {
	color: #ccc;
	position: absolute;
	top: 42px;
	left: 100px;
	font-size: 14px;
}

.right .icon {
	display: inline-block;
	width: 25px;
	margin-left: 10px;
}

.profile .left {
	flex: 1;
}

.chat-box {
	background: url('../img/bg.jpeg');
	background-attachment: fixed;
	padding-left: 20px;
	overflow-y: scroll;
	flex: 1;
}

.chat-box .img_chat {
	width: 280px;
}

.chat-r {
	display: flex;

}

.chat-r .sp {
	flex: 1;
}

.chat-l {
	display: flex;

}

.chat-l .sp {
	flex: 1;
}

.chat-box .mess {
	max-width: 300px;
	background: #f7fcf6;
	padding: 10px;
	border-radius: 10px;
	margin: 20px 0px;
	cursor: pointer;
}

.chat-r .mess p {
	word-break: break-all;
	font-size: 18px;
}

.chat-r .mess-r {
	background: #e2ffc7;	
}

.chat-box .emoji {
	width: 20px;
}

.chat-box .check {
	float: right;
}

.chat-box .check img {
	width: 20px;
}

.chat-box .check span {
	color: #888;
	font-size: 12px;
	font-weight: 700px;
}

*::-webkit-scrollbar {
	width: 5px;
}
*::-webkit-scrollbar-track {
	background: #f1f1f1;
}
*::-webkit-scrollbar-thumb {
	background: #aaa;
}
*::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.chat-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 60px;
	position: relative;
	cursor: pointer;
}

.chat-footer textarea {
	display: block;
	flex: 1;
	width: 100%;
	height: 50px;
	border-radius: 60px;
	margin: 5px;
	padding: 10px;
	outline: none;
	font-size: 19px;
	padding-left: 40px;
	padding-right: 90px;
	border: 2px solid #ccc;
	color: #555;
	resize: none;
}

.chat-footer .mic {
	display: block;
	width: 55px;
	height: 55px;
	margin-right: 20px;
}

.chat-footer .enter {
	/* display: block; */
	width: 55px;
	height: 55px;
	margin-right: 20px;
	visibility: collapse;
}

.chat-footer .emo {
	display: block;
	width: 35px;
	height: 35px;
	position: absolute;
	left: 10px;
	top: 12px;
}

.chat-footer .icons {
	position: absolute;
	right: 100px;
	top: 10px;
}

.chat-footer .icons img {
	display: inline-block;
	width: 35px;
	height: 35px;margin-left: 5px;
}

#loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }

/* body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; } */