.mytext{ border:0;padding:10px;background:whitesmoke; } .text{ width:75%;display:flex;flex-direction:column; } .text > p:first-of-type{ width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px; } .text > p:last-of-type{ width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto; } .text-l{ float:left;padding-right:10px; } .text-r{ float:right;padding-left:10px; } .avatar{ display:flex; justify-content:center; align-items:center; width:25%; float:left; padding-right:10px; } .macro{ margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex; } .msj-rta{ float:right;background:whitesmoke; } .msj{ float:left;background:white; } .frame{ background:#e0e0de; height:450px; overflow:hidden; padding:0; } .frame > div:last-of-type{ position:absolute;bottom:0;width:100%;display:flex; } body > div > div > div:nth-child(2) > span{ background: whitesmoke;padding: 10px;font-size: 21px;border-radius: 50%; } body > div > div > div.msj-rta.macro{ margin:auto;margin-left:1%; } ul { width:100%; list-style-type: none; padding:18px; position:absolute; bottom:47px; display:flex; flex-direction: column; top:0; overflow-y:scroll; } .msj:before{ width: 0; height: 0; content:""; top:-5px; left:-14px; position:relative; border-style: solid; border-width: 0 13px 13px 0; border-color: transparent #ffffff transparent transparent; } .msj-rta:after{ width: 0; height: 0; content:""; top:-5px; left:14px; position:relative; border-style: solid; border-width: 13px 13px 0 0; border-color: whitesmoke transparent transparent transparent; } input:focus{ outline: none; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #d4d4d4; } ::-moz-placeholder { /* Firefox 19+ */ color: #d4d4d4; } :-ms-input-placeholder { /* IE 10+ */ color: #d4d4d4; } :-moz-placeholder { /* Firefox 18- */ color: #d4d4d4; }