#app{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}

body{
	background-color:#efefef;
}

#login-form {
	width: 78%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	border: solid 3px #efefef;
	padding: 1.4em;
	border-radius: 7px;
	background-color:#fff;
}

#scroller * {
	/* don't allow the children of the scrollable element to be selected as an anchor node */
	overflow-anchor: none;
}

#scroller {
	max-width: 600px;
	position: relative;
	height: calc(100vh - 200px);
	top: 0;
	overflow: hidden;
	background: #e2e2e2;
	padding: 0.5em;
}

#anchor {
	/* allow the final child to be selected as an anchor node */
	overflow-anchor: auto;

	/* anchor nodes are required to have non-zero area */
	height: 1px;
}

.js-logout {
	position: fixed;
	top: 6px;
	z-index: 99;
	right: 10px;
}

.chat {
	overflow: auto;
	/* position: absolute; */
	bottom: 0px;
	width: 100%;
	max-height: 100%;
}


.me {
	position: relative;
	background: #1c3a92;
	color: #fff;
	border-radius: .4em;
	padding: 1em;
	width: 80%;
	float: right;
	margin-right: 1em;
}

.me:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 6%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #1c3a92;
	border-bottom: 0;
	border-right: thick;
	margin-right: -3px;
	margin-bottom: -12px;
}

.them {
	position: relative;
	background: #FFF;
	color: #1c3a92;
	border-radius: .4em;
	border:solid 1px #1c3a92;
	padding: 1em;
	width: 80%;
	float: left;
	margin-right: 1em;
}

.them:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 6%;
	width: 0;
	height: 0;
	border: 16px solid transparent;
	border-top-color: #1c3a92;
	border-bottom: 0;
	border-left: 0;
	margin-left: -6px;
	margin-bottom: -16px;
}

.add-message{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:60px;
	background: #fff;
    padding: .7em;
    border-top: 1px solid #b3b3b3;
}

#errormessage{
	color:red;
}