@import"https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,900&display=swap";body,html{font-family:Red hat Display,sans-serif;font-weight:400;line-height:1.25em;letter-spacing:.025em;color:#333;background:#f7f7f7}.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pic{width:4rem;height:4rem;background-size:cover;background-position:center;border-radius:50%}.contact{position:relative;margin-bottom:1rem;padding-left:5rem;height:4.5rem;display:flex;flex-direction:column;justify-content:center}.contact .pic{position:absolute;left:0}.contact .name{font-weight:500;margin-bottom:.125rem}.contact .message,.contact .seen{font-size:.9rem;color:#999}.contact .badge{box-sizing:border-box;position:absolute;width:1.5rem;height:1.5rem;text-align:center;font-size:.9rem;padding-top:.125rem;border-radius:1rem;top:0;left:2.5rem;background:#333;color:#fff}.contacts{position:absolute;top:50%;left:0;transform:translate(-6rem,-50%);width:24rem;height:32rem;padding:1rem 2rem 1rem 1rem;box-sizing:border-box;border-radius:1rem 0 0 1rem;cursor:pointer;background:white;box-shadow:0 0 8rem #0000001a,2rem 2rem 4rem -3rem #00000080;transition:transform .5s}.contacts h2{margin:.5rem 0 1.5rem 5rem}.contacts .fa-bars{position:absolute;left:2.25rem;color:#999;transition:color .2s}.contacts .fa-bars:hover{color:#666}.contacts .contact:last-child{margin:0}.contacts:hover{transform:translate(-23rem,-50%)}.chat{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:75vw;height:38rem;z-index:2;box-sizing:border-box;border-radius:1rem;background:white;box-shadow:0 0 8rem #0000001a,0 2rem 4rem -3rem #00000080}.chat .contact.bar{flex-basis:3.5rem;flex-shrink:0;margin:1rem;box-sizing:border-box}.chat .messages{padding:1rem;background:#f7f7f7;height:calc(100% - 10px);flex-shrink:2;overflow-y:auto;box-shadow:inset 0 2rem 2rem -2rem #0000000d,inset 0 -2rem 2rem -2rem #0000000d}.chat .messages .time{font-size:.8rem;background:#eee;padding:.25rem 1rem;border-radius:2rem;color:#999;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto}.chat .messages .message{box-sizing:border-box;padding:.5rem 1rem;margin:1rem;background:#fff;border-radius:1.125rem 1.125rem 1.125rem 0;min-height:2.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:66%;box-shadow:0 0 2rem #00000013,0 1rem 1rem -1rem #0000001a}.chat .messages .message.user{margin:1rem 1rem 1rem auto;border-radius:1.125rem 1.125rem 0;background:#333;color:#fff}.chat .messages .message .typing{display:inline-block;width:.8rem;height:.8rem;margin-right:0rem;box-sizing:border-box;background:#ccc;border-radius:50%}.chat .messages .message .typing.typing-1{-webkit-animation:typing 3s infinite;animation:typing 3s infinite}.chat .messages .message .typing.typing-2{-webkit-animation:typing 3s .25s infinite;animation:typing 3s .25s infinite}.chat .messages .message .typing.typing-3{-webkit-animation:typing 3s .5s infinite;animation:typing 3s .5s infinite}.chat .input{box-sizing:border-box;flex-basis:4rem;flex-shrink:0;display:flex;align-items:center;padding:0 .5rem 0 1.5rem}.chat .input i{font-size:1.5rem;margin-right:1rem;color:#666;cursor:pointer;transition:color .2s}.chat .input i:hover{color:#333}.chat .input input{border:none;background-image:none;background-color:#fff;padding:.5rem 1rem;margin-right:1rem;border-radius:1.125rem;flex-grow:2;box-shadow:0 0 1rem #0000001a,0 1rem 1rem -1rem #0003;font-family:Red hat Display,sans-serif;font-weight:400;letter-spacing:.025em}.chat .input input:placeholder{color:#999}@-webkit-keyframes typing{0%,75%,to{transform:translateY(.25rem) scale(.9);opacity:.5}25%{transform:translateY(-.25rem) scale(1);opacity:1}}@keyframes typing{0%,75%,to{transform:translateY(.25rem) scale(.9);opacity:.5}25%{transform:translateY(-.25rem) scale(1);opacity:1}}.pic.chatbot{background-image:url(https://cdn-images-1.medium.com/v2/resize:fit:100/format:png/1*jO76MZ9zHMWGo183mFRTfw.png)}.pic.banner{background-image:url(https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/4/4f/BruceHulk-Endgame-TravelingCapInPast.jpg)}button{background-color:#1976d2;padding:7px 15px;color:#fff;border:1px black solid;border-radius:5px}button:disabled{opacity:.7;border:1px solid grey}