.--dark-theme{--chat-background:rgba(10, 14, 14, 0.95);--chat-panel-background:#131719;--chat-bubble-background:#14181a;--chat-bubble-active-background:#171a1b;--chat-add-button-background:#212324;--chat-send-button-background:#8147fc;--chat-text-color:#a3a3a3;--chat-options-svg:#a3a3a3;}body{background:url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);background-size:cover;}#chat{background:var(--chat-background);max-width:600px;margin:25px auto;box-sizing:border-box;padding:1em;border-radius:12px;position:relative;overflow:hidden;}#chat::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) fixed;z-index:-1;}#chat .btn-icon{position:relative;cursor:pointer;}#chat .btn-icon svg{stroke:#FFF;fill:#FFF;width:50%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}#chat .chat__conversation-board{padding:1em 0 2em;height:calc(100vh - 55px - 2em - 25px * 2 - .5em - 3em);overflow:auto;}#chat .chat__conversation-board__message-container.reversed{flex-direction:row-reverse;}#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble{position:relative;}#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble span:not(:last-child){margin:0 0 2em 0;}#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__person{margin:0 0 0 1.2em;}#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__options{align-self:center;position:absolute;left:0;display:none;}#chat .chat__conversation-board__message-container{position:relative;display:flex;flex-direction:row;}#chat .chat__conversation-board__message-container:hover .chat__conversation-board__message__options{display:flex;align-items:center;}#chat .chat__conversation-board__message-container:hover .option-item:not(:last-child){margin:0 0.5em 0 0;}#chat .chat__conversation-board__message-container:not(:last-child){margin:0 0 2em 0;}#chat .chat__conversation-board__message__person{text-align:center;margin:0 1.2em 0 0;}#chat .chat__conversation-board__message__person__avatar{height:35px;width:35px;overflow:hidden;border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;ms-user-select:none;position:relative;}#chat .chat__conversation-board__message__person__avatar::before{content:"";position:absolute;height:100%;width:100%;}#chat .chat__conversation-board__message__person__avatar img{height:100%;width:auto;}#chat .chat__conversation-board__message__person__nickname{font-size:9px;color:#484848;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;}#chat .chat__conversation-board__message__context{max-width:55%;align-self:flex-end;}#chat .chat__conversation-board__message__options{align-self:center;position:absolute;right:0;display:none;}#chat .chat__conversation-board__message__options .option-item{border:0;background:0;padding:0;margin:0;height:16px;width:16px;outline:none;}#chat .chat__conversation-board__message__options .emoji-button svg{stroke:var(--chat-options-svg);fill:transparent;width:100%;}#chat .chat__conversation-board__message__options .more-button svg{stroke:var(--chat-options-svg);fill:transparent;width:100%;}#chat .chat__conversation-board__message__bubble span{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:inline-table;word-wrap:break-word;background:var(--chat-bubble-background);font-size:13px;color:var(--chat-text-color);padding:0.5em 0.8em;line-height:1.5;border-radius:6px;font-family:"Lato", sans-serif;}#chat .chat__conversation-board__message__bubble:not(:last-child){margin:0 0 0.3em;}#chat .chat__conversation-board__message__bubble:active{background:var(--chat-bubble-active-background);}#chat .chat__conversation-panel{background:var(--chat-panel-background);border-radius:12px;padding:0 1em;height:55px;margin:0.5em 0 0;}#chat .chat__conversation-panel__container{display:flex;flex-direction:row;align-items:center;height:100%;}#chat .chat__conversation-panel__container .panel-item:not(:last-child){margin:0 1em 0 0;}#chat .chat__conversation-panel__button{background:grey;height:20px;width:30px;border:0;padding:0;outline:none;cursor:pointer;}#chat .chat__conversation-panel .add-file-button{height:23px;min-width:23px;width:23px;background:var(--chat-add-button-background);border-radius:50%;}#chat .chat__conversation-panel .add-file-button svg{width:70%;stroke:#54575c;}#chat .chat__conversation-panel .emoji-button{min-width:23px;width:23px;height:23px;background:transparent;border-radius:50%;}#chat .chat__conversation-panel .emoji-button svg{width:100%;fill:transparent;stroke:#54575c;}#chat .chat__conversation-panel .send-message-button{background:var(--chat-send-button-background);height:30px;min-width:30px;border-radius:50%;transition:0.3s ease;}#chat .chat__conversation-panel .send-message-button:active{transform:scale(0.97);}#chat .chat__conversation-panel .send-message-button svg{margin:1px -1px;}#chat .chat__conversation-panel__input{width:100%;height:100%;outline:none;position:relative;color:var(--chat-text-color);font-size:13px;background:transparent;border:0;font-family:"Lato", sans-serif;resize:none;}@media only screen and (max-width:600px){#chat{margin:0;border-radius:0;}#chat .chat__conversation-board{height:calc(100vh - 55px - 2em - .5em - 3em);}#chat .chat__conversation-board__message__options{display:none !important;}}@import url("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:0.025em;color:#333;background:#F7F7F7;}.center{position:absolute;top:50%;left:calc(50% + 12rem);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:0.125rem;}.contact .message, .contact .seen{font-size:0.9rem;color:#999;}.contact .badge{box-sizing:border-box;position:absolute;width:1.5rem;height:1.5rem;text-align:center;font-size:0.9rem;padding-top:0.125rem;border-radius:1rem;top:0;left:2.5rem;background:#333;color:white;}.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 0 rgba(0, 0, 0, 0.1), 2rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);transition:transform 500ms;}.contacts h2{margin:0.5rem 0 1.5rem 5rem;}.contacts .fa-bars{position:absolute;left:2.25rem;color:#999;transition:color 200ms;}.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:24rem;height:38rem;z-index:2;box-sizing:border-box;border-radius:1rem;background:white;box-shadow:0 0 8rem 0 rgba(0, 0, 0, 0.1), 0rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);}.chat .contact.bar{flex-basis:3.5rem;flex-shrink:0;margin:1rem;box-sizing:border-box;}.chat .messages{padding:1rem;background:#F7F7F7;flex-shrink:2;overflow-y:auto;box-shadow:inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.05), inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);}.chat .messages .time{font-size:0.8rem;background:#EEE;padding:0.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:0.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 rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);}.chat .messages .message.parker{margin:1rem 1rem 1rem auto;border-radius:1.125rem 1.125rem 0 1.125rem;background:#333;color:white;}.chat .messages .message .typing{display:inline-block;width:0.8rem;height:0.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 250ms infinite;animation:typing 3s 250ms infinite;}.chat .messages .message .typing.typing-3{-webkit-animation:typing 3s 500ms infinite;animation:typing 3s 500ms infinite;}.chat .input{box-sizing:border-box;flex-basis:4rem;flex-shrink:0;display:flex;align-items:center;padding:0 0.5rem 0 1.5rem;}.chat .input i{font-size:1.5rem;margin-right:1rem;color:#666;cursor:pointer;transition:color 200ms;}.chat .input i:hover{color:#333;}.chat .input input{border:none;background-image:none;background-color:white;padding:0.5rem 1rem;margin-right:1rem;border-radius:1.125rem;flex-grow:2;box-shadow:0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.2);font-family:Red hat Display, sans-serif;font-weight:400;letter-spacing:0.025em;}.chat .input input:placeholder{color:#999;}@-webkit-keyframes typing{0%, 75%, 100%{transform:translate(0, 0.25rem) scale(0.9);opacity:0.5;}25%{transform:translate(0, -0.25rem) scale(1);opacity:1;}}@keyframes typing{0%, 75%, 100%{transform:translate(0, 0.25rem) scale(0.9);opacity:0.5;}25%{transform:translate(0, -0.25rem) scale(1);opacity:1;}}.pic.stark{background-image:url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/7/73/SMH_Mentor_6.png");}.pic.banner{background-image:url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/4/4f/BruceHulk-Endgame-TravelingCapInPast.jpg");}.pic.thor{background-image:url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/9/98/ThorFliesThroughTheAnus.jpg");}.pic.danvers{background-image:url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/0/05/HeyPeterParker.png");}.pic.rogers{background-image:url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/7/7c/Cap.America_%28We_Dont_Trade_Lives_Vision%29.png");}