/* Chat */
.fab-container { position:fixed; bottom: 10px; margin-left: -20px;/*right: 2em;*/ cursor:pointer; z-index: 20; }
.fab-container .fab-button a, .fab-container .fab-button a i{-webkit-backface-visibility:hidden;display:block}
.fab-container .fab-button{width:84px; height:84px; position:relative; display:flex; flex-direction:column; flex-wrap:wrap; transform:scale(.6); transform-origin:100% 50%; transition:transform .4s;}
.fab-container .fab-button.loading a { background: lightgray; }
.fab-container .fab-button a {position:relative; width:100%; padding-bottom:50%; background: rgb(54 187 239); transition:border-radius .3s,transform .2s,width .25s, background-color .25s;}
.fab-container .fab-button a i {width:14px; height:14px; position:absolute; left:50%; top:50%; margin:-7px 0 0 -7px; opacity:0; fill: var(--color-white); transform:scale(.6); transition:.15s;}
.fab-container .fab-button a:first-child {border-radius:4.5em 4.5em 0 0;}
.fab-container .fab-button a:nth-child(2) {border-radius:0 0 4.5em 4.5em;}
.fab-container .fab-button a.single:first-child {border-radius:1.5em 1.5em; min-height: 5.5em;}
.fab-container .fab-button:before {content:"\f27a"; font-family:Icons; border-radius:3px; color: var(--color-white); font-size:2em; position:absolute; left:50%; top:51%; display:block; z-index:1; transform-origin:50% 50%; transition:transform .25s; transform:translate(-50%,-50%)}
.fab-container .fab-button:not(.loading):hover {transform:scale(1); transition:transform .4s .1s;}
.fab-container .fab-button:not(.loading):hover:before {transform:scaleY(0) scaleX(0)}
.fab-container .fab-button:not(.loading):hover a {--scale:1.05; pointer-events:none; border-radius:50%; animation:0s linear .4s forwards pointerEvent; transition:border-radius .15s .1s,transform .25s .15s,width .15s,background-color .55s; min-height: unset;}
.fab-container .fab-button:not(.loading):hover a:first-child {transform:translate(100%, -1em) scale(var(--scale)); width:50%}
.fab-container .fab-button:not(.loading):hover a:nth-child(2) {transform:translate(100%, 0) scale(var(--scale)); background-color: var(--color-dark-blue); width:50%}
.fab-container .fab-button:not(.loading):hover a i {color: var(--color-white); opacity:.9; transition:.3s .2s; transform:scale(1)}
.fab-container .fab-button:not(.loading):hover a:hover {--scale:0.92; transition:border-radius .2s .1s,transform .25s; padding-bottom: 50%;}
.fab-container .fab-button:not(.loading):hover a:hover i {opacity:1; transition:.3s}
.fab-container .fab-button:not(.loading):hover #total-chat-unread-count { display: none; }
.fab-container .fab-button:not(.loading):hover #management-chat-unread-count { font-size: 0.7em; top:-1em; display: inline-block; }
.fab-container .fab-button:not(.loading):hover #quality-chat-unread-count { font-size: 0.7em; top:-1em; display: inline-block; }
.fab-container #total-chat-unread-count { font-size: 1.1em; top:-0.7em; right:.1em;}
.fab-container #management-chat-unread-count { display: none; }
.fab-container #quality-chat-unread-count { display: none; }

.fab-container-single { position:fixed; bottom: 5.4em; right: 2em; cursor:pointer; z-index: 20; }
.fab-container-single #management-chat-fab { background: rgb(54 187 239); border-radius: 50%; padding: 1.4em 1.1em 1.1em 1.1em; position: relative; color: var(--color-white);}
.fab-container-single #quality-chat-fab i, .fab-container-single #management-chat-fab i {margin: 0; font-size: 1.3em;}
.fab-container-single #quality-chat-fab .circular.label, .fab-container-single #management-chat-fab .circular.label { font-size: .7em; }
.fab-container-single #quality-chat-fab { background: var(--color-dark-blue); border-radius: 50%; padding: 1.3em 1.1em; position: relative; color: var(--color-white);}

.chat-container { position: fixed; bottom: 9em; right: 2em; height: 0; opacity:0; width: 0; z-index: 20; border: 1px solid lightgray; border-radius: 3%; overflow: hidden; transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }
.chat-container.hidden { height: 0; width: 0; transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }
.chat-container.show { height: 50%; width: 27%; opacity: 1; transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }
#chatlist { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; }
#topmenu { border-bottom: 1px solid #d8dfe3; padding: 0.7em; padding-left: 1em; color: #597a96; display: grid; grid-template-columns: 95% 5%; align-items: center; }
#topmenu h3 { margin-bottom: 0; }
#topmenu i { cursor: pointer; }
#chats { overflow-y: scroll; height: 85%; }
.chat { height: 5.1em; border-bottom: 1px solid #e7ebee; position: relative; padding: 0.5em; display: flex; align-items: center; }
.chat[data-arrived="1"] { opacity: .6; }
.chat.chat-new { background: rgb(237 237 237); }
.chat:hover, .chat.chat-new:hover { background: #f1f4f6; cursor: pointer; }
.chat .initials { background: lightgray; width: 3.3em; border-radius: 50%; font-weight: bold; text-align: center; height: 3.2em; vertical-align: super; display: flex; justify-content: center; align-items: center; }
.chat .initials i { margin-right: 0; }
.chat .title-container { padding-left: 1em; width: 65%; }
.chat .last-message { font-size: 0.8em; color: gray; width: 25%; padding-left: .6em; padding-right: .8em; text-align: right; }
.chat .participants { color: #aab8c2; }
.chat .title { font-weight: 600; font-size: 15px; color: #597a96; }
#search { background: #e3e9ed; height: 4em; width: 100%; position: absolute; bottom: 0; left: 0; display: grid; grid-template-columns: 3em auto 9em; align-items: center; }
#search .search.icon { margin-left: 1em; color: grey; }
#searchfield-chat { background: #e3e9ed; border: none; padding: 0; font-size: 14px; font-weight: 400; color: #8198ac; }
#searchfield-chat:focus { outline: 0; }
#chatview { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: var(--color-white); }
#chatview #profile { background: rgb(54 187 239); }  /*orange -> rgb(239 148 54)*/
#profile { height: 11%; overflow: hidden; text-align: center; color: var(--color-white); }
#profile .title { display: flex; justify-content: center; align-items: center; height: 100%; font-weight: 600; opacity: 0; margin-top: 4em; transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }
#profile .title.animate { opacity: 1; margin-top: 0; transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }
#profile .title.animate a { color: white; }
#chatview #participants { background: unset; height: 9%; border-bottom: 1px solid #e7ebee; display: flex; align-items: center; padding: 0.3em 0.9em; column-gap: 0.5em; overflow-y: hidden; overflow-x: auto; }
#chatview #participants::-webkit-scrollbar { height: .3em; }
#chatview #participants .participant .participant-initials { border-radius: 50%; background: lightgray; height: 2em; width: 2em; display: flex; justify-content: center; align-items: center; font-size: 1em; padding: 1.2em; }
#chat-messages { opacity: 0; margin-top: 2em; width: 100%; height: 70%; overflow-y: scroll; overflow-x: hidden; padding-right: 1em; padding-top: 1em; transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }
#chat-messages.animate { opacity: 1; margin-top: 0; }
#chat-messages label { color: #aab8c2; font-weight: 600; font-size: 12px; text-align: center; margin: 15px 0; width: 100%; display: block; }
#chat-messages div.chat-message { padding: 0 0 1em 1em; clear: both; margin-bottom: .2em; display: grid; grid-template-columns: 13% 66%; grid-column-gap: 1em; justify-content: left; }
#chat-messages div.chat-message.right { padding: 0 1em 1em 0; margin-right: -1.5em; margin-left: 1em; grid-template-columns: 66% 13%; justify-content: right; }
#chat-messages .chat-message .initials { border-radius: 50%; background: lightgray; height: 2.5em; width: 2.5em; display: flex; justify-content: center; align-items: center; font-size: 1em; padding: 1.4em; align-self: flex-end; }
#chat-messages div.chat-message.right .initial-container { margin-top: 0.5em; grid-column: 2; }
#chat-messages div.chat-message.right .bubble { border-radius: 5px 5px 0px 5px; grid-column: 1; grid-row: 1; justify-self: right; }
.chat-message .initial-container { display: grid; grid-template-columns: 1.4em 3em;; align-items: end; }
.chat-message.right .initial-container { display: grid; grid-template-columns: 3em 2em; }
.chat-message .initial-container > div:nth-child(1) { grid-column: 2; }
.chat-message .initial-container > div:nth-child(2) { grid-column: 1; grid-row: 1; margin-bottom: 0.6em;}
.chat-message.right .initial-container > div:nth-child(1) { grid-column: 1; grid-row: 1;}
.chat-message.right .initial-container > div:nth-child(2) { grid-column: 2; grid-row: 1; margin-bottom: 0.6em;}
.chat-message .message-dropdown .delete-message { color: var(--color-red) !important; }
.chat-message .message-dropdown .ellipsis { color: #8495a3; }
.chat-message .bubble { background: #f0f4f7; font-size: 13px; font-weight: 600; padding: 12px 13px; border-radius: 5px 5px 5px 0px; color: #8495a3; position: relative; width: fit-content; }
.chat-message .attachments { grid-column: 1 /3; display: grid; grid-template-columns: repeat(auto-fit, 25%); justify-content: start; grid-column-gap: .5em; margin-top: 2em;  margin-left: 3em;}
.chat-message.right .attachments { justify-content: end; margin-right: 3.7em; }
.chat-message .attachments .chat-file { cursor: pointer; }
.bubble .corner { position: absolute; width: 2px; height: 6px; left: -7px; bottom: 0; border-bottom-left-radius: 27px 0.5rem; border-right: 1rem solid #f0f4f7; transform: translate(0, 0rem); }
div.chat-message.right .corner { border-bottom-right-radius: 5em 3em; border-left: 1rem solid #f0f4f7; border-right: 0; left: auto; right: -5px; }
div.chat-message.right .bubble span.message-info { right: 0; left: unset; text-align: right; margin-right: 0em; }
.bubble span.message-info { color: #aab8c2; font-size: 11px; position: absolute; bottom: -22px; left: 0; text-align: left; width: 23em; }
#sendmessage { height: 10%; border-top: 1px solid #e7ebee; position: absolute; bottom: 0; right: 0px; width: 100%; background: var(--color-white); }
#sendmessage #message-input { background: var(--color-white); margin: 1em 0 0 1em; border: none; padding: 0; font-size: 14px; color: #aab8c2; width: 75%; }
#sendmessage #message-input:focus { outline: 0; }
#sendmessage button { width: 2em; height: 1.5em; position: absolute; right: 0.7em; top: 0.5em; border: none; background: white; color: gray; font-size: 1.3em; }
#sendmessage button:hover { cursor: pointer; color: black; }
#sendmessage button:focus { outline: 0; }
#sendmessage #attachment { right: 2.2em; }
#sendmessage .file-input { display: none; }
#close-chat { position: absolute; top: 0.625em; opacity: 0.8; right: 0.625em; width: 1.250em; height: 1.250em; cursor: pointer; }
#close-chat:hover { opacity: 1; }
.cx, .cy { background: var(--color-white); position: absolute; width: 0px; top: 15px; right: 15px; height: 3px; transition: all 250ms ease-in-out; }
.cx.s1, .cy.s1 { right: 0; width: 1.250em; transition: all 100ms ease-out; }
.cy.s2 { transform: rotate(50deg); transition: all 100ms ease-out; }
.cy.s3 { transform: rotate(45deg); transition: all 100ms ease-out; }
.cx.s1 { right: 0; width: 1.250em; transition: all 100ms ease-out; }
.cx.s2 { transform: rotate(140deg); transition: all 100ms ease-out; }
.cx.s3 { transform: rotate(135deg); transition: all 100ms ease-out; }
#chatview, #sendmessage { overflow: hidden; border-radius: 6px; }
#chat-message-example { display: none !important; }
#chatview #participants-available, #chatview #attachments { position: absolute; max-height: 0%; bottom: 0; width: 100%; bottom: 10%; background: white; border-top: 1px solid #e7ebee; transition: all 300ms cubic-bezier(0.000, 0.195, 0.990, 1.000);}
#chatview #participants-available.show, #chatview #attachments.show { max-height: 45% !important; }
#chatview #participants-available .participant { display: grid; grid-template-columns: 15% auto; padding: .5em 1em; align-items: center; }
#chatview #participants-available .participant:hover { background: #f1f4f6; cursor: pointer; }
#chatview #participants-available .participant .participant-initials { border-radius: 50%; background: lightgray; height: 2.5em; width: 2.5em; display: flex; justify-content: center; align-items: center; font-size: 1em; padding: 1.4em; align-self: flex-end; }
#chatview #attachments { display: grid; grid-template-columns: repeat(4, 25%); grid-row-gap: 1em; padding: 0em 1em; }
#chatview #attachments.show { padding: .5em 1em; }
#chatview #attachments:not(.show) .chat-file .file-remove-icon { display: none; }

.chat-container .chat-file { position: relative; }
.chat-container .chat-file .file-icon { font-size: 2.5em; text-align: center; }
.chat-container .chat-file .file-icon.loading { font-size: 1em; }
.chat-container .chat-file .file-name { text-align: center;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8em; }
.chat-container .chat-file .file-remove-icon { position: absolute; right: 6%; top: -20%; background: var(--color-red); border-radius: 50%; color: white; font-size: 0.8em; padding: 0em 0.3em; cursor: pointer; }
.chat-container .chat-file .file-remove-icon .icon { margin: 0; }
.chat-container .chat-file.example { display: none; }
.chat-container.management #sendmessage #attachment { display: none; }
.chat-container #topmenu { transition: background-color 250ms ease-out; }
.chat-container.quality #topmenu, .chat-container.quality #chatview #profile { background-color: var(--color-dark-blue); color: white; }
.chat-container.quality #search .checkbox { display: none; }
.chat-container.quality .message-dropdown { display: none; }