.bubble {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  border-radius: .4em;
  // background: #00aabb;
}
.speecharrowleft{
  margin-left: 7%;
  float: left;
}
.speecharrowright{
  margin-right: 7%;
  float :right;
}
.speecharrowtopleft{
  float:left;
}
.speecharrowtopright{
  float:right;
}
.speecharrowbottomleft{
  float:left;
}
.speecharrowbottomright{
  float:right;
}

.speecharrowleft:after{
  bottom:12px;
  content: "";
  border-style: solid;
  position: absolute ;
  left: -25px;
  border-width: 15px 26px 10px 0;
  // border-color: transparent #00aabb;
} 
.speecharrowright:after {
  bottom:5px;
  content: "";
  border-style: solid;
  position: absolute ;
  right: -24px;
  left: auto;
  border-width: 19px 0 20px 33px;
  // border-color: transparent #00aabb;
}
.speecharrowbottomleft:after{
  content: "";
  position: absolute;
  bottom: -15px;
  left: 34px;
  border-width: 15px 15px 0;
  border-style: solid;
  // border-color: #00aabb transparent;
  width: 0;
}
.speecharrowbottomright:after{
  content: "";
  position: absolute;
  bottom: -15px;
  right: 34px;
  border-width: 15px 15px 0;
  border-style: solid;
  // border-color: #00aabb transparent;
  width: 0;
}
.speecharrowtopleft:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 30px;
  border-style: solid;
  border-width: 0 15px 15px;
  // border-color: #00aabb transparent;
}
.speecharrowtopright:after {
  content: "";
  position: absolute;
  top: -15px;
  right: 34px;
  border-style: solid;
  border-width: 0 15px 15px;
  // border-color: #00aabb transparent;
}
.time {
  opacity: 0.5;
  position: absolute;
  padding-top: 17px;
}
.timeclass {
  right:20px;
}
.timeright{
  padding-top:27px;
  padding-right: 30px;
}
.timeleft{
  padding-top:27px;
  padding-left: 30px;
}