@import url(https://fonts.cdnfonts.com/css/sf-pro-display);*{box-sizing:border-box;margin:0;padding:0}html{font-family:SF Pro Display,sans-serif;font-size:62.5%;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{border:4px solid #ccc;border-radius:30px;box-shadow:0 0 10px #00000040;height:70rem;margin:0 auto;max-width:34rem;overflow:hidden}.main{padding-top:2rem}.main,.message-view{display:flex;flex-direction:column;height:100%}.main-header{align-items:center;display:flex}.title{font-size:2.4rem;margin-left:.5rem;margin-right:auto}.main-header ion-icon{color:#007aff;cursor:pointer;font-size:2rem;margin-right:.5rem}.search-box{align-items:center;background-color:#eee;border:none;border-radius:7px;display:flex;gap:.5rem;height:2rem;margin:.5rem;padding:1rem .5rem}.search-input{background-color:#eee;width:100%}input,input:active,input:hover,input:link,input:visited{border:none;outline:none}.search-box ion-icon{color:grey;font-size:1.6rem}.contacts{overflow-x:hidden;overflow-y:auto}.contact{align-items:flex-start;display:flex;padding:.5rem 0 0 1.5rem}.contact__image{border-radius:50%;cursor:pointer;margin-right:10px}.contact__text{border-bottom:1px solid #e0e0e0;padding:0 .5rem 1rem 0;width:100%}.contact:first-of-type .contact__text{border-top:1px solid #e0e0e0}.message-text{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.contact__header{align-items:center;display:flex;justify-content:space-between}.contact__name{cursor:pointer;flex-grow:1;font-size:1.6rem;font-weight:700;margin:0}.contact__time{align-items:center;color:#999;display:flex;font-size:1.2rem}.contact__time span{margin-right:5px}.contact__time ion-icon,.message-text{cursor:pointer}.message-text{color:#888;font-size:1.2rem}.chat__header{align-items:first baseline;background-color:#f8f8f8;border-bottom:1px solid #e1e1e1;display:flex;justify-content:space-between;padding:3rem 1.6rem}.chat__header ion-icon{color:#007aff;cursor:pointer;font-size:2.4rem;position:relative;top:50%;transform:translateY(-50%)}.sender__image{border-radius:50%}.sender__name{align-items:center;color:#888;display:flex;font-size:.9rem;justify-content:center;width:100%}.sender__name ion-icon{color:inherit;font-size:inherit;transform:translateY(0)}.conversation{margin-bottom:auto;overflow-x:hidden;overflow-y:auto;padding:0 1rem 1rem;width:100%}.message,.messages{display:flex;flex-direction:column}.message{width:100%}.message__text{border-radius:20px;display:inline-block;margin-top:.2rem;padding:8px 15px}.received{align-items:flex-start}.received .message__text{align-self:flex-start;background-color:#eee;margin-right:6rem;position:relative}.received .message__text.last:before{background:#eee;border-bottom-right-radius:15px;bottom:0;content:"";height:18px;left:-7px;position:absolute;width:20px;z-index:-2}.received .message__text.last:after{background:#fff;border-bottom-right-radius:10px;bottom:0;content:"";height:18px;left:-10.9px;position:absolute;width:11px;z-index:-1}.message__time{align-self:center;color:#888;padding-bottom:.5rem;padding-top:.5rem}.sent .message__text{align-self:flex-end;background:#007aff;color:#fff;margin-left:6rem;position:relative}.last{margin-bottom:.5rem}.sent .message__text.last:before{background:#007aff;border-bottom-left-radius:15px;bottom:0;content:"";height:15px;position:absolute;right:-10px;width:20px;z-index:-2}.sent .message__text.last:after{background:#fff;border-bottom-left-radius:10px;bottom:0;content:"";height:15px;position:absolute;right:-10.9px;width:11px;z-index:-1}.message-input-box{align-items:center;border:1px solid #eee;border-radius:7px;display:flex;margin:.5rem .5rem 3rem;padding:.3rem 0 .3rem .5rem}.message-input{font-size:1rem;width:100%}.message-input,.message-input:active,.message-input:hover,.message-input:link,.message-input:visited{border:none;outline:none}.message-input-box ion-icon{font-size:1.1rem;padding:0 .5rem 0 0}.new-message{display:flex;flex-direction:column;height:100%}.new-message__open{margin-bottom:auto}.new-message__header{background-color:#f8f8f8;height:5rem;position:relative}.new-message__header h3{font-size:1rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.new-message__header p{color:#007aff;cursor:pointer;font-size:1rem;position:absolute;right:5%;top:50%;transform:translateY(-50%)}.new-message__receiver{align-items:center;border-bottom:.5px solid #e0e0e0;display:flex;gap:.5rem;padding:1rem}.new-message__receiver label{color:#888}.new-message__receiver input{font-size:1.1rem;width:100%}.contacts::-webkit-scrollbar,.conversation::-webkit-scrollbar{width:8px}.contacts::-webkit-scrollbar,.conversation::-webkit-scrollbar-track{background-color:initial}.contacts::-webkit-scrollbar,.conversation::-webkit-scrollbar-thumb{background-color:#c4c4c4;border-radius:8px}
/*# sourceMappingURL=main.054dfcd7.css.map*/