@import 'css/bootstrap/bootstrap.min.css';
@import 'css/others/animate.css';
@import 'css/others/magnific-popup.css';
@import 'css/others/meanmenu.min.css';
@import 'css/others/owl.carousel.min.css';
@import 'css/others/font-awesome.min.css';
@import 'css/others/pe-icon-7-stroke.css';
body {
	font-family: 'poppins', sans-serif;
	font-size: 17px;
	font-weight: normal;
  max-width: 450px;
	margin: 50px auto;
  display: flex;
  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:white; 
	background:#0B93F6;
	align-self: flex-end;
}

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

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