.chat {
  width: 100%;
  /*display: flex;*/
  /*flex-direction: column;*/
  padding: 10px;
}

.texts {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.text {
  border-radius: 15px;
  padding: 5px 15px;
  margin-bottom: 5px;
  margin-top: 5px;
  display: inline-block; 
}



/* cadetblue */
.my {align-items: flex-end;}
.my .text {width: 100%; margin-right: 25%; color: black; background-color: darkcyan; position: relative;}
.my .text.last:before {
    content: ""; position: absolute; z-index: 0; top: 0; left: -7px;
    height: 20px; width: 20px; background: darkcyan; border-top-right-radius: 15px;
}
.my .text.last:after {
    content: ""; position: absolute; z-index: 1; top: 0; left: -10px; width: 10px;
    height: 20px; background: black; border-top-right-radius: 10px;
}

/* darkgray */
.your {align-items: flex-start;}
.your .text {width: 100%; margin-right: 25%; color: black; background-color: darkgray; position: relative;}
.your .text.last:before {
    content: ""; position: absolute; z-index: 0; top: 0; left: -7px;
    height: 20px; width: 20px; background: darkgray; border-top-right-radius: 15px;
}
.your .text.last:after {
    content: ""; position: absolute; z-index: 1; top: 0; left: -10px; width: 10px;
    height: 20px; background: black; border-top-right-radius: 10px;
}



#ajaxInput {
  border: solid 2px #D7D7D7;  
}