#ctr-chat{overflow:hidden}#ctr-chat>section{height:100vh}#ctr-chat>section>.content{margin:0;padding:35px}#ctr-chat .ctr-chatentries{padding:10px;margin-bottom:35px;overflow-y:scroll;scrollbar-width:thin;display:flex;flex-direction:column-reverse}.chatentry{margin-bottom:15px;color:var(--color-text);font-weight:700}.chatentry .entrydate{font-size:70%;color:var(--color-grey3);text-align:left;padding:0 5px}.chatentry.user .entrydate{text-align:right}.chatentry .name{font-weight:700;font-size:80%;text-align:left;margin-bottom:2px;padding:0 5px;color:var(--color-main)}.chatentry.user .name{text-align:right}.ctr-chat.ctr-grid{grid-template-rows:1fr auto;height:100%}.ctr-chat .chatentry .ctr-grid.grid-message .message{background:rgba(0,0,0,.2);padding:10px 15px;font-size:80%;margin-bottom:2px;border-radius:3px}.ctr-chat .chatentry.user .ctr-grid.grid-message .message{background:rgba(0,0,0,.3)}.ctr-chat .chatentry .ctr-grid.grid-message{grid-template-columns:90% 1fr}.ctr-chat .chatentry.user .ctr-grid.grid-message{grid-template-columns:1fr 90%}.ctr-chat .chatentry.client .ctr-grid.grid-message .spacer{order:2}.ctr-chat .chatentry.client .ctr-grid.grid-message .message{order:1}.ctr-chat .chatentry.user .ctr-grid.grid-message .spacer{order:1}.ctr-chat .chatentry.user .ctr-grid.grid-message .message{order:2}.chatentry.client .message{border-left:2px solid var(--color-text)}.chatentry.user .message{border-right:2px solid var(--color-main)}.ctr-grid.ctr-form-chatentry{grid-template-columns:1fr 20%;border-top:1px solid var(--color-grey4);position:relative}.ctr-grid.ctr-form-chatentry .input::before{content:'Aa';height:100%;position:absolute;color:var(--color-grey3);display:grid;align-items:center;padding:0 10px}.ctr-grid.ctr-form-chatentry .input input[type=text]{padding:10px 10px 10px 30px}.ctr-grid.ctr-form-chatentry .submit input[type=submit]{background:var(--color-grey5);color:#fff;height:100%}.ctr-grid.ctr-form-chatentry .input input[type=text],.ctr-grid.ctr-form-chatentry .submit input[type=submit]{margin:0;border:none}.button.chat{position:fixed;right:60px;bottom:50px;height:60px;width:60px;border-radius:50%;background-color:var(--color-main);overflow:initial;box-shadow:0 2px 10px rgba(0,0,0,.2)}.button.chat:hover{background-color:var(--color-main)!important;box-shadow:0 2px 10px rgba(0,0,0,.5)}.button.chat:before{color:#fff;font-size:20px}.button.chat i{position:absolute;height:15px;width:15px;left:3px;bottom:2px;background-color:var(--color-main)}.button.chat.animate{animation:animate 3s ease 2}@keyframes animate{30%{transform:scale(1.2)}40%,60%{transform:rotate(-20deg) scale(1.2)}50%{transform:rotate(20deg) scale(1.2)}70%{transform:rotate(0) scale(1.2)}100%{transform:scale(1)}}