body{
	background-color: #f6f6f6;
}
.phone{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.date{
	text-align: center;
	width:100%;
	font-size: 15px;
	font-family: monospace;
	margin:10px 0;
}
.display{
	z-index: 1000;
	position: absolute;
	top:50%;
	left:50%;
	background-color: #FBFEF9;
	width:364px;
	max-width:364px;
	height:670px;
	max-height:670px;
	transform:translate(-50%, -50%);
	display: flex;
	flex-direction: column-reverse;
	align-content: flex-end;
	overflow-y: scroll;
	-moz-overflow-y:scroll;
}
.chatWindow{
	padding:30px 10px 10px 15px;
}
.message{
	display: flex;
	font-family: Heebo;
	font-size: 20px;
}
.toddText{
	background-color: #19b5fe;
	flex-grow: 1;
	padding:5px;
	border-radius: 7px 0px 7px 7px;
	color: #191923;
}
.toddTriangleContainer .toddTriangle{
	width: 0;
    height: 0;
    border-top: 10px solid #19b5fe;
    border-right: 10px solid transparent;
}
.eirText{
	background-color: #9FDEFD;
	flex-grow: 1;
	padding:5px;
	border-radius: 0px 7px 7px 7px;
	color: #191923;
}
.eirTriangleContainer .eirTriangle{
	width: 0;
    height: 0;
    border-top: 10px solid #9FDEFD;
    border-left: 10px solid transparent;
}
.toddCircleContainer .toddCircle{
	width:50px;
	height:50px;
	border-radius: 100px;
	border:1px solid black;
	background-image: url(../img/todd.png);
	background-size: auto 100%;
}
.eirCircleContainer .eirCircle{
	width:50px;
	height:50px;
	border-radius: 100px;
	border:1px solid black;
	background-image: url(../img/eir.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 80%;
}
.messageWindow{
	height:50px;
	padding:0 10px 10px 15px;
	display: flex;
}
.messageWindow textarea{
	outline: none;
	padding:5px;
	flex-grow: 1;
	font-size: 20px;
	resize: none;
	overflow:hidden;
}
.messageWindow textarea:focus{
	border:1px solid black;
}
.messageWindow i{
	font-size: 2em;
	margin:5px;
}