body{
background:#242733;

    
}



div.chat {
  position: relative;
 align-items: center;
  
top: 50vh;
left: 0;
transform: translate(0, -60%);
  
  font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 400;
max-width: 450px;
	margin: 16px auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
p {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position:relative;
	padding:10px 20px;
  border-radius:25px;
}

p:before, p:after {
    content:"";
		position:absolute;
    bottom:-2px;
    height:20px;
  }

.from-me {
	color:#f2f2f2; 
	background:#1736E9;
	align-self: flex-end;
}

.from-me:before {
		right:-7px;
		border-right:20px solid #1736E9;
		border-bottom-left-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
		        transform:translate(0, -2px);
	}

.from-me:after {
		right:-56px;
		width:26px;
		background:#242733;
		border-bottom-left-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
		        transform:translate(-30px, -2px);
	}
.from-them {
	background:#393D4D;
	color:#f2f2f2;
}
.from-them:before {
		left:-7px;
		border-left:20px solid #393D4D;
		border-bottom-right-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
		        transform:translate(0, -2px);
	}
.from-them:after {
		left:4px;
		width:26px;
		background:#242733;
		border-bottom-right-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
		        transform:translate(-30px, -2px);
	}