Built motion from commit f861bcb808219e66da88ba48b61bddb35224a65e. Version 3.0.0...
[motion-next.git] / snippet / chat_v3.0.0-alpha.8 / styles / app.css
1 /*!
2  * *************************************************************************
3  * *                                                                       *
4  * * xCALLY Motion -  The Omnichannel Contact Center                       *
5  * * Copyright (c) Xenialab s.r.l. All Rights Reserved                     *
6  * *                                                                       *
7  * *************************************************************************
8  * *                                                                       *
9  * * Email: info@xcally.com                                                *
10  * * Website: https://www.xcally.com                                       *
11  * *                                                                       *
12  * *************************************************************************
13  * *                                                                       *
14  * * The SOFTWARE PRODUCT is protected by copyright laws and international *
15  * * copyright treaties, as well as other intellectual property laws and   *
16  * * treaties. The SOFTWARE PRODUCT is licensed, not sold.                      *
17  * *                                                                       *
18  * *************************************************************************
19  */
20 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
21 :root{--xc-ws-div-color: #011f6a;--xc-ws-text-color: #ffffff;--xc-ws-button-color: #011f6a;--xc-ws-background-color: #fafafa;--xc-ws-client-height: 450px;--xc-ws-client-width: 295px}span.ng-binding,span.field-description{user-select:none}::-webkit-scrollbar{width:0;background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:0px}.field-description{font-size:13px;line-height:14px;color:gray;padding:5px 0px 5px 0px}.field-description.error{color:#dd2c00}.md-button.upload-button{padding:0 16px;height:36px}md-icon.material-icons{color:inherit !important}.white-label,.md-toolbar-tools .title{user-select:none}.white-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.white-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-fab.upload-button,.md-fab.upload-button.md-button.md-default-theme.md-raised:not([disabled]) md-icon,.md-fab.upload-button.md-button.md-raised:not([disabled]) md-icon{color:var(--xc-ws-text-color) !important;background:var(--xc-ws-div-color) !important}.chat-online ::-webkit-scrollbar{width:5px;background:var(--xc-ws-div-color)}.chat-online ::-webkit-scrollbar-thumb{background:linear-gradient(13deg, var(--xc-ws-text-color), var(--xc-ws-div-color));border-radius:10px}.chat-online ::-webkit-scrollbar-thumb:hover{background:linear-gradient(13deg, var(--xc-ws-div-color), var(--xc-ws-text-color))}.chat-online form{display:flex;height:calc(100% - 20px);overflow:auto;padding:1em 0px 40px 0px;position:relative;max-width:100%;overflow-x:hidden}.chat-online form .form-input-container{height:100%;overflow:auto;scrollbar-width:none}.chat-online form div[ng-switch-when=label] md-content{overflow:hidden}.chat-online form div[ng-switch-when=label] md-content span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chat-online form div.offline-button-wrapper{position:fixed;bottom:40px;left:20px;width:calc(100% - 48px);display:flex;background:linear-gradient(transparent, var(--xc-ws-background-color) 33%);align-items:center;justify-content:center}.chat-online form div.offline-button-wrapper button#offlineButton{width:100%}.chat-online md-content{height:20px}.chat-unmanaged{display:flex;flex-direction:column}.chat-unmanaged form{flex-grow:1;max-width:100%;overflow-x:hidden}.chat-closing{height:100%;padding:20px;overflow:hidden;align-items:stretch;justify-content:space-between}.chat-closing>md-content,.chat-closing>form{max-width:100%;overflow-x:hidden}.chat-closing>md-content,.chat-closing>md-content span,.chat-closing>form,.chat-closing>form span{width:100%}.logo{width:32px}#attachmentButton:hover .mdi-attachment:before{color:#555 !important;opacity:.85 !important}#input_text{position:relative !important;width:100% !important;height:auto;padding:0;font-size:14px;border:0;background-color:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-transition:border-color .15s ease-in-out,-moz-box-shadow .15s ease-in-out;-o-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}#input_text:focus-within{border-color:#66afe9;outline:0;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}#attachmentButton{background:transparent !important;box-shadow:0 0px 0px 0 rgba(0,0,0,.26) !important;margin:0px !important;padding-top:1px !important;-webkit-font-smoothing:none !important}i.icon_color{color:red}#sendButton{background:transparent !important;box-shadow:0 0px 0px 0 rgba(0,0,0,.26) !important;margin:0px !important;padding-top:1px !important;-webkit-font-smoothing:none !important}.emojionearea,.emojionearea.form-control{display:block;position:relative !important;width:100%;height:auto;padding:0;font-size:14px;border:0;background-color:#fff;border:0px solid #ccc !important;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 0px 0px rgba(0,0,0,.075) !important;-webkit-box-shadow:inset 0 0px 0px rgba(0,0,0,.075) !important;box-shadow:inset 0 0px 0px rgba(0,0,0,.075) !important;-moz-transition:border-color .15s ease-in-out,-moz-box-shadow .15s ease-in-out;-o-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mdi mdi-attachment mdi-24px mdi-light ng-scope::before{color:#a9a9a9}.mdi-attachment:hover{color:#555 !important}.mdi-24px.mdi-set,.mdi-24px.mdi:before{color:#a9a9a9}.md-button.md-fab.md-mini{line-height:20px !important;min-height:24px !important}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:19px !important;height:19px !important;margin:0 1px !important}.emojionearea .emojionearea-picker{width:100% !important;right:0 !important;height:220px !important;top:0px !important}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:220px !important;width:100% !important}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-100% !important}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-236px !important;width:240px !important;min-width:240px !important;top:0px !important;margin-right:-34px !important}.emojionearea .emojionearea-picker .emojionearea-search>input{width:100px !important;min-width:100px !important}.emojionearea .emojionearea-picker .emojionearea-search{width:100px !important}.emojionearea .emojionearea-picker .emojionearea-search-panel+.emojionearea-scroll-area{height:70% !important}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block{padding:0 !important}.emojionearea .emojionearea-picker .emojionearea-filters{background:#f5f7f9;padding:0 !important;height:40px}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{width:25px !important;padding:7px 3px 0}#id-row,#chat-app{max-width:100%;width:100%;max-height:100%;height:100%}#chat-app{background-color:transparent}#chat-app .header-button{padding:0;margin:0;font-size:18px;cursor:pointer}ui-view{display:block;width:100%;height:100%}#chat-app .chat-toolbar{height:56px;min-height:56px;width:275px;cursor:pointer;outline:0}#chat-app .chat-content{flex-grow:1;height:calc(100% - 56px);background:#fff;border:1px solid #d3d3d3;-ms-overflow-style:none;overflow:hidden}#chat-app .chat-content .chat-messages{height:calc(100% - 60px);overflow:auto;border-bottom:1px solid #d3d3d3}#chat-app .chat-content .chat-online{height:calc(100% - 40px);padding:20px;overflow:hidden}#chat-app .chat-content .chat-unmanaged{height:calc(100% - 40px);padding:20px;overflow:hidden}#chat-app .avatar-wrapper{position:relative;bottom:-3px;right:5px}#chat-app .chat-content .message-row .bubble{word-wrap:break-word;position:relative;max-width:190px;padding:6px 7px 8px 9px;background-color:#fff;border-radius:6px}#chat-app .chat-content .message-row .bubble .message{white-space:pre-wrap}#chat-app .chat-content .message-row .bubble .message-done{color:#dcdcdc}#chat-app .chat-content .message-row .bubble .message-done-all{color:#00bfff}#chat-app .chat-content .message-row .bubble:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);content:"";position:absolute;left:-11px;bottom:3px;width:12px;height:19px;background-position:50% 50%;background-repeat:no-repeat;background-size:contain}#chat-app .chat-content .message-row .bubble .time{font-size:10px;text-align:right;margin-bottom:5px}#chat-app .chat-content .message-row.out .avatar{margin:0 16px 0 0;width:40px;min-width:40px;height:40px;line-height:40px;border-radius:50%;font-weight:500;text-align:center;color:#fff}#chat-app .chat-content .message-row.auto{align-items:flex-end;font-style:italic}#chat-app .chat-content .message-row.auto .avatar{margin:0 16px 0 0;width:40px;min-width:40px;height:40px;line-height:40px;border-radius:50%;font-size:17px;font-style:italic;font-weight:500;text-align:center;color:#fff}#chat-app .chat-content .message-row.in{align-items:flex-end}#chat-app .chat-content .message-row.in2{align-items:flex-end}#chat-app .chat-content .message-row.out{align-items:flex-end}#chat-app .chat-content .message-row.in2 .avatar{margin:0 16px 0 0;width:40px;min-width:40px;height:40px;line-height:40px;border-radius:50%;font-weight:500;text-align:center;color:#fff}#chat-app .chat-content .message-row.in2 .bubble{margin-right:auto;background-color:#e8f5e9;border:1px solid #dfebe0;order:1}#chat-app .chat-content .message-row.in2 .bubble:before{left:-11px;right:auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);-webkit-transform:rotate(180deg);transform:rotate(180deg)}#chat-app .chat-content .message-row.in .avatar{order:2;margin:0 0 0 16px;width:40px;min-width:40px;height:40px;line-height:40px;border-radius:50%;font-weight:500;text-align:center;color:#fff}#chat-app .chat-content .message-row.in .bubble{margin-left:auto;background-color:#e8f5e9;border:1px solid #dfebe0;order:1}#chat-app .chat-content .message-row.in .bubble:before{right:-11px;left:auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=)}#chat-app .chat-footer{width:100%}#waiting{overflow:visible;height:calc(100% - 64px);background:#fff;text-align:center;flex:1 0 auto;padding:32px}#waiting .subtitle{margin:16px 0;max-width:300px;color:rgba(0,0,0,.54)}.sk-fading-circle{width:40px;height:40px;position:relative}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}40%{opacity:1}}md-toast.md-success-toast .md-toast-content{background-color:green}md-toast.md-failure-toast .md-toast-content{background-color:red}@media(min-device-width: 769px){#chat-toolbar .mdi-download,#chat-toolbar .mdi-printer{display:block}}@media(max-device-width: 768px){#chat-toolbar .mdi-download,#chat-toolbar .mdi-printer{display:none}}
22
23 /*# sourceMappingURL=app.css.map*/