.avatar{position:relative;border-radius:50%;cursor:pointer}.avatar .initials,.avatar .innerContent{overflow:hidden;position:absolute;width:100%;height:100%;border-radius:50%}.avatar .initials,.avatar .initials>*,.avatar .innerContent>*{width:100%;height:100%}.avatar .initials{text-align:center;text-transform:uppercase;font-weight:700;font-style:normal;font-stretch:normal;color:#fff;background-image:linear-gradient(177deg,#2a96d7,#08ced0)}.avatar.withBorder{border:2px solid #3578e4;padding:3px}.avatar.withBorder .initials,.avatar.withBorder .innerContent{width:calc(100% - .375rem);height:calc(100% - .375rem)}.avatar.online:after{content:"";position:absolute;width:1rem;height:1rem;border:.125rem solid #fff;background-color:#26d1a9;border-radius:50%;bottom:0;right:0;box-sizing:border-box}.avatar.l{height:3.375rem;width:3.375rem;min-width:3.375rem;line-height:3.375rem;font-size:1.375rem}.avatar.m{height:2.5rem;width:2.5rem;min-width:2.5rem;line-height:2.5rem;font-size:1rem}.avatar.m:after{width:.75rem;height:.75rem}.avatar.s{height:1.875rem;width:1.875rem;min-width:1.875rem;line-height:1.875rem;font-size:.75rem}.avatar.s:after{width:.625rem;height:.625rem}.ellipseComponent .ellipse{border-radius:50%;background-color:var(--color-accent)}.inboxContainer .inbox .inboxHeader{position:sticky;top:0;background:#fff;z-index:1}.inboxContainer .inbox .chatListElement{display:flex;align-items:center;border:1px dotted grey;margin-top:1rem}.inboxContainer .inbox .chatListElement>div{margin:0 .5rem}.inboxContainer .inbox .chatListElement .unreadCountBadge{background:red;color:#fff;border-radius:50%;padding:.125rem .5rem;cursor:default}.chatContainer .chatHeader{position:sticky;top:0;background:#fff;z-index:1}.chatContainer .messagesContainer{padding:1rem;flex:1 0 auto;margin-bottom:2rem}.chatContainer .messagesContainer .messagesDivider{color:grey;text-align:center;margin-bottom:25px;font-size:1.15em}.chatContainer .messageInputContainer{background:#fff;position:fixed;bottom:0;height:3rem;width:100%;display:flex;box-sizing:border-box;padding:0 1rem}.chatContainer .messageInputContainer input{flex:2;border-radius:.5rem}.chatContainer .messageInputContainer button{margin-left:1rem;border-radius:.5rem}.chat{display:flex;min-height:100vh;flex-direction:column}.chat .header{width:100%;height:10vh;border-bottom:1px solid var(--color-accent);flex:0 0 auto;display:flex;justify-content:center;align-items:center}.chat .content{flex:1 0 auto;margin:0;padding:0;overflow-y:scroll;overflow-x:hidden;max-height:80vh;position:relative}.chat .content .messagesDivider{color:grey;text-align:center;margin-bottom:25px;font-size:1.15em}.chat .content .image{width:40px;height:40px;background-color:#00f;border-radius:50%;margin:12px 5px 0 0;position:absolute;left:11px}.chat .content .messageItem{margin:10px;display:flex}.chat .content .message{max-width:80%;border-radius:30px;display:flex;align-items:center;font-size:1.2em;padding:15px 20px 10px}.chat .content .firstMessage,.chat .content .middleMessage{margin-bottom:3px}.chat .content .lastMessage{margin-bottom:15px}.chat .content .currentUser{justify-content:flex-end}.chat .content .currentUser .message{background-color:#3e70e4;color:#fff}.chat .content .companionUser{justify-content:flex-start;margin-left:55px}.chat .content .companionUser .message{background-color:#f2f1f3;color:#000}.chat .footer{width:100%;height:10vh;flex:0 0 auto;display:flex;border-top:1px solid var(--color-accent);align-items:center;justify-content:flex-end}.chat .footer .button{float:right;margin-right:55px;padding:10px 20px;margin-bottom:0}.image{position:absolute;left:-50px;top:15px}.messageItem{margin:10px;display:flex}.messageItem .message{max-width:80%;border-radius:30px;display:flex;align-items:center;font-size:1.2em;padding:10px 20px}.messageItem .firstMessage,.messageItem .middleMessage{margin-bottom:3px}.messageItem .lastMessage{margin-bottom:15px}.currentUser{justify-content:flex-end}.currentUser .message{background-color:#3e70e4;color:#fff}.companionUser{justify-content:flex-start;margin-left:55px;position:relative}.companionUser .message{background-color:#f2f1f3;color:#000}:root{--color-text:#000;--color-text-on-accent:#fff;--color-bg:#fff;--color-accent:#0064c8;--color-accent-darken:#004a95;--color-accent-lighten:#007dfb;--color-disabled:#ccc;--color-border:#ccc;--font-family-main:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}body,html{height:100%;width:100%;position:relative;margin:0;padding:0}body{color:var(--color-text);background-color:var(--color-bg);font-family:var(--font-family-main)}p{padding:0;margin:0}mark{color:var(--color-text);background-color:var(--color-bg)}label{display:block}button,input,select,textarea{font-family:inherit;font-size:inherit;padding:.4em;margin:0 0 .5em;box-sizing:border-box;border:1px solid var(--color-border);border-radius:2px}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}a:visited{color:var(--color-accent-darken)}input:disabled{color:var(--color-disabled)}input[type=range]{height:0}button{background-color:var(--color-accent);color:var(--color-text-on-accent);outline:none}button:active{background-color:var(--color-accent-darken)}button:focus{border-color:var(--color-accent-lighten)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{background-color:#fefefe;padding:.5rem}.container .header,.container .section{padding:1rem;border:1px solid #ccc;margin:.5rem}.container .section>div{display:flex;align-items:center;margin:.5rem 0}.container .section>div>*{margin-right:.5rem}