@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&display=swap');
html {
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
}
body {
	height: 100vh;
	margin: 0;
	/*background: linear-gradient(-135deg, #FDBBBD, #674BD3);*/
}

i {
	margin-right: 10px;
}

.chat {
	display: flex;
	flex-direction: column;
	/*min-height: calc(100vh - 4rem);*/
	margin: 0 auto;
	max-width: 640px;
	min-height: 100vh;
	/*margin: auto auto;*/
	background-color: #F3F3FD;
    font-family: 'PT Sans Narrow', sans-serif;
}

.header {
	z-index: 10;
	flex: none;
	background-color: #D8D9F5;
	padding: 1rem;
	position: fixed;
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
	top: 0;
}
.header-title {
	margin: 0;
	color: #222328;
}
.header-desc {
	margin: 0;
	color: #444;
}

.header-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	margin-top: 1rem;
	margin-bottom: -1rem;
	list-style: none;
}
.header-li {

	text-transform: uppercase;
	color: #a0a1bd;
	margin: 0;
	padding: 5px;
	border-bottom: 2px solid #D8D9F5;
	font-weight: 700;
	transition: .3s ease;
}
.header-link {
	text-decoration: none;
	color: inherit;
	transition: .3s ease;
}

.header-li:hover {
	color: #3788f1;
	border-bottom: 2px solid #3788f1;
	transition: .3s ease;
}



.body {
	/*position: relative;*/
	display: flex;
	flex-direction: column;
	padding-bottom: 80px;
	/*justify-content: flex-end;*/
}

.body-btn {
	margin: 15px auto;
	max-width: 200px;
	text-align: center;
	padding: 5px;
}
.btn {
	border-radius: 25px;
	color: #444;
	height: 30px;
	line-height: 30px;
	font-weight: 700;
	/*background-color: #fff;
	box-shadow: 0px 0px 5px 2px #D8D9F5;*/
	background: linear-gradient(0deg, #3788f1, #79b6f5);
	box-shadow: 0px 0px 5px 2px #79b6f5;
	color: #fff;
	transition: .3s ease;

}

.btn:hover {
	cursor: pointer;
	box-shadow: none;
	transition: .3s ease;
}

.chat-stream {
	padding: 5rem 5px 5px;
	display: flex;
	flex-direction: column;
	/*justify-content: flex-end;*/
}
.msg {
	margin: 5px auto 5px 5px;
}
.msg-text {
	background-color: #ebeaef;
	color: #444;
	border-radius: 25px;
	padding: 5px 15px;
}
.msg-date {
	font-size: .7rem;
	color: #666;
	padding: 5px 15px;
}
.my-msg {
	text-align: right;
	margin: 5px 5px 5px auto;
}
.my-msg .msg-text {
	background-color: #3788f1;
	color: #fff;
}




.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;

	background: #F3F3FD;
	padding: 15px;
	/*border: 15px solid #F3F3FD;*/
	box-sizing: border-box;

}
.control {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	padding: 10px;
	box-shadow: 0px 0px 5px 2px rgba(204,204,204,.5);

}
.left-control {
	padding: 5px;
	width: 35px;
	text-align: center;
	color: #888;
	font-size: 1.5rem;
	cursor: pointer;
}
.input-text {
	width: 100%;
	padding: 5px;
	margin: 5px;
	min-height: 25px;
	font-weight: 700;
	color: #ccc;
	max-height: 100px;
}
.input-text:focus {
	color: #444;
	outline: none;
}
.send-msg {
	padding: 5px;
	width: 35px;
	text-align: center;
}
.left-control i,
.send-msg i {
	margin: 0;
}