{"version":3,"sources":["file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_main-container.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/helpers/_mixins.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/_variables.scss","styles.css","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-group.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-separator.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-list.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_avatar.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_avatar-group.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_message-input.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_input-toolbox.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_chat-container.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_typing-indicator.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_conversation-header.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_conversation.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_conversation-list.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_status.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_sidebar.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_expansion-panel.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_search.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_buttons.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_loader.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_overlay.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_status-list.scss","file:///home/runner/work/chat-ui-kit-styles/chat-ui-kit-styles/themes/default/components/_perfect-scrollbar.scss"],"names":[],"mappings":"AAGA;EACE,kBAAA;ECaA,aAAA;EACA,mBAAA;EDZA,YAAA;EACA,cAAA;EACA,yBE+WsB;EF9WtB,sBAAA;EACA,0BEiCW;EFhCX,sBEwCY;EFvCZ,eE2XyB;AC5X3B;AHGE;EACE,QAAA;EACA,YAAA;EACA,iBEyX0C;EFxX1C,6BEsW0C;EFrW1C,+BEsW4C;EFrW5C,gCEsW6C;EFrW7C,8BEsW2C;EFrW3C,8CAAA;EACA,kDAAA;EACA,UAAA;AGDJ;AHIE;EACE,QAAA;EACA,YAAA;EACA,gBEgXoC;EF/WpC,eAAA;EACA,+BEyV4C;EFvV5C,kDAAA;EACA,UAAA;AGHJ;AHME;EACE,eAAA;EACA,gBEuWqC;EFtWrC,gBEuWqC;EFrWrC,6BEkVsC;EFjVtC,+BEkVwC;EFjVxC,gCEkVyC;EFjVzC,8BEkVuC;ACvV3C;AHSE;EACE,aAAA;AGPJ;AHUE;EACE,QAAA;EACA,UAAA;EACA,YAAA;EACA,eAAA;EACA,+BEiUyC;ACzU7C;AHWE;EACE,QAAA;EACA,YAAA;EAEA,UAAA;AGVJ;AHcE;EACE,cAAA;EACA,aAAA;EACA,eAAA;AGZJ;AHgBE;EACE,gBAAA;AGdJ;AHiBE;EACE,UAAA;AGfJ;AH0BQ;EACE,aAAA;AGxBV;AH4BU;EACE,aAAA;AG1BZ;AHiCI;EAlBF;IAoBI,uCAAA;EG/BJ;EHiCI;IACE,aAAA;EG/BN;EHkCI;IACE,8BAAA;IACA,6BAAA;EGhCN;EHmCI;IACE,aAAA;EGjCN;EHoCI;IACE,8BAAA;EGlCN;EHyCQ;;IACE,eAAA;EGtCV;EHyCQ;;IACE,aAAA;EGtCV;EHyCQ;;IACE,aAAA;EGtCV;EHyCQ;;IACE,aAAA;EGtCV;EHwCQ;;IACE,kBAAA;IACA,UAAA;IACA,YAAA;IACA,eAAA;EGrCV;EH6CQ;IACE,aAAA;EG3CV;AACF;AHkDI;EA/EF;IAiFI,eAAA;EGhDJ;EHkDI;IACE,aAAA;EGhDN;EHuDQ;IACE,aAAA;EGrDV;AACF;;ACxHA;EAIE,sBAAA;EACA,cF0fkB;EEzflB,mEFWoB;EEVpB,0BF4BW;EE3BX,aAAA;EACA,mBAAA;EACA,UAAA;EACA,6BFsdiB;EErdjB,gBAAA;EAEA,gBFkasB;AC3SxB;ACrHE;EACE,mBF2fwB;ACpY5B;ACpHE;EACE,mBFwf4B;AClYhC;ACnHE;EACE,sBAAA;EACA,iBF4foB;EE3fpB,aAAA;EACA,sBAAA;EACA,yBAnC8B;EAoC9B,WF0emB;ACrXvB;AClHE;EACE,sBAAA;EACA,aAAA;EACA,sBAAA;ADoHJ;ACjHE;EACE,sBAAA;EACA,6BF0bmB;EEzbnB,6BF0bsB;EEzbtB,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,8BAAA;EACA,gBAAA;EACA,2BF+doB;AC5WxB;ACjHI;EACE,sBAAA;EACA,6BF+aiB;EE9ajB,6BF2byB;ACxU/B;AChHI;EACE,sBAAA;EACA,6BFyaiB;EExajB,6BFwbuB;EEvbvB,iBAAA;EACA,mBAAA;ADkHN;AC7GE;EACE,sBAAA;EACA,6BFkamB;EEjanB,6BFkasB;EEjatB,aAAA;EACA,gBAAA;EACA,2BFwcoB;ACzVxB;AC7GI;EACE,sBAAA;EACA,6BFuZiB;EEtZjB,6BFmayB;ACpT/B;AC5GI;EACE,sBAAA;EACA,6BFiZiB;EEhZjB,6BFgauB;EE/ZvB,iBAAA;EACA,mBAAA;AD8GN;ACzGE;EACE,sBAAA;EACA,0BFzDS;EE0DT,yBFvEY;EEwEZ,aFobyB;EEnbzB,oBAAA;EACA,sCFqW4B;EEpW5B,qBAAA;EACA,uBAAA;EACA,sBAAA;EACA,mEFnFkB;EEoFlB,mBF8Z0B;EE7Z1B,iBF8ZwB;EE7ZxB,oBF8Z2B;ACnT/B;ACvGE;EACE,0BFzES;EE0ET,6BFoXe;EEnXf,kBAAA;ADyGJ;ACvGI;EACE,iBFsa2B;AC7TjC;ACnGI;EAII,aAAA;ADkGR;AC9FI;EAII,aAAA;AD6FR;ACxFI;EACE,0BFtGO;EEuGP,yBFpHU;EEqHV,8BF6TmC;ACnOzC;ACrFE;EACE,0BF9GS;EE+GT,6BF2VwB;EE1VxB,iBAAA;EACA,yBAAA;ADuFJ;ACrFI;EACE,QAAA;EACA,iBFgY2B;ACzSjC;ACjFI;EAII,aAAA;ADgFR;AC5EI;EAII,aAAA;AD2ER;ACtEI;EACE,0BF7IO;EE8IP,yBFzJe;EE0Jf,8BFkSmC;AC1NzC;ACnEE;EACE,gBFwPoB;ACnLxB;AClEI;EACE,iBFuVyB;ACnR/B;AC1DI;EAEI,cAAA;AD2DR;ACvDI;EAEI,cAAA;ADwDR;AClDI;EACE,kCFsP0C;AClMhD;AC/CE;EACE,sBF2NmC;AC1KvC;AC9CI;EACE,iBFoTyB;ACpQ/B;AC1CI;EAEI,cAAA;AD2CR;ACvCI;EAEI,cAAA;ADwCR;AClCI;EACE,8BF0NyC;EEzNzC,yBF/NU;ACmQhB;AC/BE;EACE,sBF8LkC;AC7JtC;AClBI;EAII,aAAA;ADiBR;ACbI;EACE,8BF8LwC;AC/K9C;ACVE;EACE,gBFuJoB;AC3IxB;ACTI;EACE,iBFsPyB;AC3O/B;ACKI;EAEI,cAAA;ADJR;ACUI;EACE,kCFiK0C;ACzKhD;ACaE;EACE,sBFmImC;EEjInC,iBFqN2B;ACjO/B;AC2BI;EAEI,cAAA;AD1BR;ACgCI;EACE,8BFoIyC;EEnIzC,yBF/Te;ACiSrB;ACmCE;EACE,sBFqGkC;ACtItC;ACgDI;EAII,aAAA;ADjDR;ACqDI;EACE,kCFwGwC;AC3J9C;ACwDE;EACE,iBA9XqB;ADwUzB;ACyDE;EACE,kBAlYqB;AD2UzB;AC+DI;EACE,2BAAA;EACA,QAAA;EACA,iBF2I6B;EE1I7B,cAAA;AD7DN;ACgEI;EACE,QAAA;AD9DN;ACoEI;EACE,2BAAA;EACA,QAAA;EACA,gBF6H6B;EE5H7B,eAAA;ADlEN;ACoEI;EACE,QAAA;ADlEN;ACwEI;EACE,yBAAA;EACA,QAAA;EACA,gBFgH6B;EE/G7B,eAAA;ADtEN;ACyEI;EACE,QAAA;ADvEN;AC8EI;EACE,yBAAA;EACA,QAAA;EACA,iBFiG6B;EEhG7B,cAAA;AD5EN;AC+EI;EACE,QAAA;AD7EN;ACoFI;EACE,uBAAA;EACA,QAAA;EACA,iBFkF6B;EEjF7B,cAAA;ADlFN;ACqFI;EACE,QAAA;ADnFN;AC0FI;EACE,uBAAA;EACA,QAAA;EACA,gBFmE6B;EElE7B,eAAA;ADxFN;AC2FI;EACE,QAAA;ADzFN;;AE/XA,6BAAA;AACA;EAOE,sBAAA;EJEA,aAAA;EACA,mBAAA;EIDA,mBH4jBqB;AC/LvB;AE3XE;EACE,sBAAA;EJOF,aAAA;EACA,sBAAA;EINE,yBAjBoC;AF+YxC;AE1XE;EACE,sBAAA;EJAF,aAAA;EACA,sBAAA;AE6XF;AE1XE;EACE,sBAAA;EACA,aAAA;EACA,gBHoiB6B;EGniB7B,mEHVkB;EGWlB,yBHQgB;EGPhB,6BHqhB4B;EGphB5B,mBHwiB0B;EGviB1B,UH4iB2B;AChL/B;AEzXE;EACE,sBAAA;EACA,aAAA;EACA,gBH4hB6B;EG3hB7B,mEHrBkB;EGsBlB,yBHHgB;EGIhB,6BH4gB4B;EG3gB5B,mBH8hB0B;EG7hB1B,UHkiB2B;ACvK/B;AExXE;EACE,sBAAA;AF0XJ;AExXI;EACE,aAAA;AF0XN;AErXM;EACE,yBHjCQ;EGkCR,aAAA;AFuXR;AE3WE;EACE,2BAAA;AF6WJ;AE3WI;EACE,iBAAA;EACA,QAAA;AF6WN;AE1WI;EACE,QAAA;AF4WN;AEtWM;EACE,8BHgdqD;ACxG7D;AEpWM;EACE,8BHuc+C;EGtc/C,0BHvDK;EGwDL,yBHrEQ;AC2ahB;AElWM;EACE,8BHscoD;AClG5D;AE/VM;EACE,kCH4bsD;AC3F9D;AEzVE;EACE,yBAAA;EACA,iBAAA;AF2VJ;AEzVI;EACE,gBAAA;EACA,QAAA;AF2VN;AExVI;EACE,QAAA;AF0VN;AErVM;EACE,yBAAA;AFuVR;AEnVM;EACE,8BHyaqD;ACpF7D;AEjVM;EACE,8BHga+C;EG/Z/C,0BHtGK;EGuGL,yBHlHa;ACqcrB;AE/UM;EACE,kCH+ZoD;AC9E5D;AE5UM;EACE,kCHqZsD;ACvE9D;AEnUI;EACE,2BAAA;EACA,QAAA;EACA,iBHsamC;EGranC,cAAA;AFqUN;AElUI;EACE,QAAA;AFoUN;AE/TI;EACE,2BAAA;EACA,QAAA;EACA,gBHyZmC;EGxZnC,eAAA;AFiUN;AE9TI;EACE,QAAA;AFgUN;AE3TI;EACE,yBAAA;EACA,QAAA;EACA,iBH4YmC;EG3YnC,cAAA;AF6TN;AE1TI;EACE,QAAA;AF4TN;AEvTI;EACE,yBAAA;EACA,QAAA;EACA,gBH+XmC;EG9X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AAA;AN0vBF;AMxvBE;EACE,UAAA;AN0vBJ;AMvvBE;EACE,UAAA;ANyvBJ;AMtvBE;EAGE,qBADa;EAEb,oBAFa;ANwvBjB;AMpvBM;EACE,oBAAA;EACA,qBAAA;EACA,WPmEU;EOlEV,YPkEU;EOjEV,ePiEU;EOhEV,gBPgEU;EO/DV,YAAA;EACA,+BAAA;ANsvBR;AMjvBE;EAGE,qBADa;EAEb,oBAFa;ANmvBjB;AM/uBM;EACE,oBAAA;EACA,qBAAA;EACA,WPiDU;EOhDV,YPgDU;EO/CV,eP+CU;EO9CV,gBP8CU;ACmsBlB;AM7uBE;EAGE,sBADa;EAEb,qBAFa;AN+uBjB;AM3uBM;EACE,qBAAA;EACA,sBAAA;EACA,WPkCU;EOjCV,YPiCU;EOhCV,ePgCU;EO/BV,gBP+BU;EO9BV,yBAAA;AN6uBR;AMxuBE;EAGE,sBADc;EAEd,qBAFc;AN0uBlB;AMtuBI;EACE,qBAAA;EACA,sBAAA;EACA,WPiBY;EOhBZ,YPgBY;EOfZ,ePeY;EOdZ,gBPcY;EObZ,yBAAA;ANwuBN;;AO5yBA;ETLE,aAAA;EACA,mBAAA;ESUA,kBAAA;EACA,sBRsBY;EQrBZ,gBR4jByB;EQ3jBzB,kBR4jB2B;EQ3jB3B,mBR4jB4B;EQ3jB5B,iBR4jB0B;EQ3jB1B,sBAAA;EACA,UR0lBsB;EQzlBtB,iBAhCwB;EAiCxB,cAAA;AP4yBF;AO1yBE;EACE,sBAAA;EACA,kBAAA;EACA,yBRZY;EQaZ,SRolB0C;EQnlB1C,oBRolB2C;EQnlB3C,oBR0CoB;EQzCpB,YAAA;AP4yBJ;AO1yBI;EACE,2CRikB2C;EQhkB3C,yBRNc;ACkzBpB;AOvyBE;EACE,sBAAA;EACA,kBAAA;EACA,yBR5BY;EDHd,aAAA;EACA,sBAAA;ESgCE,oBAAA;EACA,gBAAA;EACA,gBAAA;EACA,iBRujB+C;EQtjB/C,mBRykBiD;EQxkBjD,kBAhDiD;EAiDjD,iBA9CiD;EA+CjD,wBRkkB6C;EQjkB7C,mBR+jBoD;AC2OxD;AOxyBI;EACE,yBR3Bc;EQ4Bd,6BAAA;AP0yBN;AOtyBE;EACE,sBAAA;EACA,YAAA;EACA,yBRjDY;EQkDZ,mERvDkB;EQwDlB,UAAA;EACA,kBRohBsC;EQnhBtC,oBRohBwC;EQnhBxC,qBRohByC;EQnhBzC,mBRohBuC;EQnhBvC,iBAjFqC;EAkFrC,0BR5CS;EQ6CT,uBAAA;EACA,sBAAA;APwyBJ;AOvyBI;EACE,6BAAA;EACA,yBRhDc;ACy1BpB;AOpyBE;EACE,sBAAA;EACA,+BAAA;EACA,0BRvDkB;EQwDlB,cAAA;EACA,YAAA;APsyBJ;AOnyBE;ETxFA,aAAA;EACA,mBAAA;ESyFE,sBAAA;APsyBJ;AOryBI;EACE,gBAAA;EACA,aAAA;EACA,gBAAA;APuyBN;AOpyBI;EACE,oBAAA;APsyBN;AOnyBI;EACE,oBAAA;APqyBN;AO/xBI;EACE,cAAA;APiyBN;AO/xBI;EACE,eAAA;APiyBN;AO5xBI;EACE,cAAA;AP8xBN;AO5xBI;EACE,eAAA;AP8xBN;;AQr6BA;EACE,sBAAA;EVaA,aAAA;EACA,mBAAA;EUZA,yBAAA;EACA,STyVqB;ESxVrB,oBTyVsB;ACglBxB;AQv6BE;EVTA,SAAA;EACA,UAAA;EAKA,gBAAA;EACA,YAAA;EUIE,mBTmVuB;ESlVvB,gBT+U0B;AC6lB9B;;ASt7BA;EACE,sBAAA;EXuBA,aAAA;EACA,sBAAA;EWtBA,YAAA;EACA,gBVsMyB;EUrMzB,0BVmCW;EUlCX,sBV0CY;ACg5Bd;ASx7BE;EACE,6BVmLsC;EUlLtC,+BVmLwC;EUlLxC,gCVmLyC;EUlLzC,8BVmLuC;EUhLvC,gBAAA;EACA,0BAAA;EACA,0BVuBS;EUtBT,sBV8BU;AC05Bd;ASt7BI;EACE,kBAAA;ATw7BN;ASr7BI;EACE,mBAAA;ATu7BN;ASl7BE;EACE,SV6NkC;EU5NlC,yBV6NmC;EU5NnC,0BVOS;EUNT,sBVcU;ACs6Bd;;AUt9BA;EACE,uBAAA;EACA,kBX2xB2B;EW1xB3B,mEXmBoB;EDRpB,aAAA;EACA,mBAAA;EYVA,oBAAA;AV09BF;AUx9BE;EACE,mBAAA;EACA,6BX+wBkC;ED1wBpC,aAAA;EACA,mBAAA;EYJE,mBAAA;AV29BJ;AUx9BE;EACE,mBAAA;EACA,kFAAA;UAAA,0EAAA;EACA,mBAAA;EACA,qBAAA;EACA,WX6wBwB;EW5wBxB,UX4wBwB;EW3wBxB,yBXQiB;ACk9BrB;AUv9BE;EACE,iBX0wB2B;AC+M/B;AUt9BE;EACE,mBAAA;AVw9BJ;AUt9BE;EACE,8BAAA;UAAA,sBAAA;AVw9BJ;AUt9BE;EACE,8BAAA;UAAA,sBAAA;AVw9BJ;AUr9BE;EACE,mBAAA;EZVF,gBAAA;EACA,uBAAA;EACA,mBAAA;EYUE,cXZiB;EWajB,6BX4uB6B;EW3uB7B,mBXyvB2B;EWxvB3B,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AVy9BJ;AUt9BE;EACE;IACE,0BAAA;EVw9BJ;EUt9BE;IACE,2BAAA;EVw9BJ;EUt9BE;IACE,0BAAA;EVw9BJ;AACF;AUj+BE;EACE;IACE,0BAAA;EVw9BJ;EUt9BE;IACE,2BAAA;EVw9BJ;EUt9BE;IACE,0BAAA;EVw9BJ;AACF;;AWhhCA;EAIE,sBAAA;EACA,0BZqQ0B;EYpQ1B,yBZsBoB;EYrBpB,mEZeoB;EYdpB,cZ8Q8B;EY7Q9B,cAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EbIA,aAAA;EACA,mBAAA;EaDA,oBAAA;EACA,6BZoP+B;EYnP/B,+BZoPiC;EYnPjC,gCZoPkC;EYnPlC,8BZoPgC;EYnPhC,oBAAA;AX+gCF;AW7gCE;EACE,sBAAA;EACA,mBAAA;EbTF,aAAA;EACA,mBAAA;EaUE,mBAAA;EACA,eAAA;EACA,QAAA;AXghCJ;AW9gCI;EACE,gBAAA;EACA,UAAA;AXghCN;AW5gCE;EACE,sBAAA;EACA,WZ8Dc;EY7Dd,YZ6Dc;EY5Dd,iBAAA;EACA,QAAA;AX8gCJ;AW1gCQ;EACE,qBZjBY;AC6hCtB;AWvgCI;EACE,2BAAA;AXygCN;AWrgCE;EACE,sBAAA;EbhCF,aAAA;EACA,sBAAA;EaiCE,QAAA;EACA,YAAA;EACA,uBAAA;EACA,YZ4NoC;AC4yBxC;AWtgCI;EACE,sBAAA;EbnCJ,gBAAA;EACA,uBAAA;EACA,mBAAA;EamCI,iBAAA;EACA,0BZuMsB;EYtMtB,yBZxCgB;ACkjCtB;AWvgCI;EACE,sBAAA;Eb3CJ,gBAAA;EACA,uBAAA;EACA,mBAAA;Ea2CI,yBZmM2B;EYlM3B,yBZ/CgB;EYgDhB,mBAAA;EACA,gBAAA;AX2gCN;AWtgCE;EACE,sBAAA;EbrEF,aAAA;EACA,mBAAA;EasEE,mBAAA;EACA,0BZ9CS;EY+CT,6BZ2LmC;EY1LnC,mBZoMiC;EYnMjC,QAAA;AXygCJ;AWxgCI;EACE,kBAAA;AX0gCN;AWvgCI;EACE,UAAA;AXygCN;AWtgCI;;;;;;;;EASE,gBAAA;EACA,aZmKoC;EYlKpC,6BZmKuC;ACo2B7C;AWrgCI;EACE,gBAAA;AXugCN;;AYjnCA;EdQE,aAAA;EACA,mBAAA;EcJA,sBAAA;EACA,kBAAA;EACA,mEbSoB;EaRpB,oCAAA;EACA,eAAA;EACA,2BAAA;EACA,0BbuBW;EatBX,sBb8BY;Ea7BZ,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,ab4LwB;Ea3LxB,eb4L0B;Ea3L1B,gBb4L2B;Ea3L3B,cb4LyB;ACs7B3B;AYhnCE;EACE,yBboCa;AC8kCjB;AY9mCQ;EACE,qBb+BO;ACilCjB;AY1mCI;EACE,YAAA;AZ4mCN;AYvmCE;EAEE,0BbLS;EaMT,yBbkBa;EajBb,abqK6B;EapK7B,ebqK+B;EapK/B,gBbqKgC;EapKhC,cbqK8B;ACm8BlC;AYpmCQ;EACE,qBbSO;AC6lCjB;AY/lCE;EAEE,cbGc;EaFd,yBbDa;EaEb,mBbiLiC;EahLjC,abqJgC;EapJhC,ebqJkC;EapJlC,gBbqJmC;EapJnC,cbqJiC;AC28BrC;AY5lCQ;EACE,qBbXO;ACymCjB;AYzlCI;EACE,cbdY;EaeZ,mBbkKoC;ACy7B1C;AYxlCI;EACE,cbnBY;EaoBZ,mBb2JoC;AC+7B1C;AYrlCE;EACE,aAAA;EACA,cAAA;EACA,iBAAA;AZulCJ;AYrlCI;EAEE,kBbnDQ;ACyoCd;AYhlCE;EACE,aAAA;EACA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,2BAAA;EACA,iBAAA;AZklCJ;AY/kCE;EACE,sBAAA;Ed3FF,aAAA;EACA,sBAAA;Ec4FE,gBAAA;EACA,mBAAA;EACA,YAAA;AZklCJ;AY/kCE;EACE,sBAAA;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xzCE;IACE,oCAAA;Ed0zCJ;EcxzCE;IACE,oCAAA;Ed0zCJ;EcxzCE;IAEE,mBAAA;EdyzCJ;AACF;;AeriDA;EAEE,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EjBiBA,aAAA;EACA,sBAAA;AEuhDF;AepiDE;EACE,sBhBmCU;ACmgDd;AeniDE;EACE,sBhB+BU;ACsgDd;AeliDE;EACE,aAAA;AfoiDJ;;AgBzjDA;EAGE,sBAAA;ElBqBA,aAAA;EACA,sBAAA;EkBpBA,0BjBmCW;EiBlCX,sBjB0CY;EiBzCZ,yBjBySuB;EiBvSvB,mEjBaoB;EiBZpB,mBjBwT4B;EiBvT5B,kBjBwT0B;EiBvT1B,oBjBwT6B;ACkwC/B;AgBxjDE;EACE,sBAAA;ElBDF,aAAA;EACA,mBAAA;EkBEE,yBjBwBgB;EiBvBhB,yBjBUkB;EiBTlB,mEjBGkB;EiBFlB,iBjBmTiC;EiBlTjC,iBjBmT+B;EiBlT/B,oBjBmTkC;EiBlTlC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,oBAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;AhB2jDJ;AgBxjDE;EACE,yBjBUgB;EiBThB,yBjB8Ba;AC4hDjB;AgBvjDE;EACE,sBAAA;EACA,YAAA;AhByjDJ;AgBtjDE;EACE,sBAAA;EACA,gBAAA;EACA,mBAAA;AhBwjDJ;AgBrjDE;EACE,aAAA;EACA,0BjBRS;EiBST,sBjBDU;EiBEV,mEjB5BkB;EiB6BlB,mBjByRkC;EiBxRlC,gBjByRgC;EiBxRhC,oBjByRmC;EiBxRnC,oBAAA;AhBujDJ;AgBpjDE;EACE,cAAA;EACA,0BjBnBS;EiBoBT,sBjBZU;ACkkDd;AgBnjDE;EACE,aAAA;AhBqjDJ;AgBljDE;EACI,yBjB3Bc;EiB4Bd,yBjBzCgB;AC6lDtB;AiBznDA;EAEE,sBAAA;EnBYA,aAAA;EACA,mBAAA;EAjBA,SAAA;EACA,UAAA;EmBMA,yBlBsBc;EkBrBd,mBAAA;EACA,kBAAA;EACA,oBlB4EsB;EkB3EtB,oBAAA;EACA,kBlB2rBiB;EkB1rBjB,oBlByrBmB;ACm8BrB;AiB1nDE;EACE,sBAAA;EACA,QAAA;EACA,0BlBwBS;EkBvBT,YAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,mBAAA;EACA,yBlBKY;EkBJZ,gBlBgrBqB;EkB/qBrB,oBlB8qBuB;AC88B3B;AiBznDE;EACE,0BlBckB;EkBblB,yBlBFY;AC6nDhB;AiBxnDE;EACE,0BlBOS;ACmnDb;AiB3nDE;EACE,0BlBOS;ACmnDb;AiBvnDE;EACE,sBAAA;EACA,QAAA;EACA,cAAA;EACA,mBAAA;EACA,clBZiB;ACqoDrB;AiBtnDE;EACE,sBAAA;EAKA,QAAA;EACA,clBtBiB;EkBuBjB,kBAAA;AjBonDJ;AiB1nDI;EACE,+BlB6oB0B;EkB5oB1B,eAAA;AjB4nDN;AiBtnDI;EACE,mBAAA;AjBwnDN;AiBpnDE;EACE,alB6Be;EkB5Bf,0BlBnBkB;EkBoBlB,yBlBnCY;ACypDhB;;AkBrrDA;EAKE,sBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,cnBqBmB;EmBpBnB,6BnBoHgB;EmBnHhB,YAAA;EACA,oBnByEsB;EmBxEtB,mBnB4Hc;EmB3Hd,oBnB4He;EmB3Hf,aAAA;EACA,cnBiHiB;EmBhHjB,gBnBiHmB;ACmkDrB;AkBlrDE;EACE,aAAA;AlBorDJ;AkBjrDE;EACE,anBkEe;ACinDnB;AkBhrDE;EACE,eAAA;AlBkrDJ;AkB/qDE;EACE,yBnByFY;ACwlDhB;AkB9qDE;EACE,YnBiGmB;AC+kDvB;AkB5qDI;EACE,mBAAA;AlB8qDN;AkBzqDI;EACE,kBAAA;AlB2qDN;AkBvqDE;EACE,cnBtBiB;EmBuBjB,6BnByEc;ACgmDlB;AkBtqDE;EACE,cnB3BiB;EmB4BjB,6BnBoEc;AComDlB;AkBrqDE;EACE,cnBhCiB;EmBiCjB,6BnB+Dc;ACwmDlB;AkBpqDE;EACE,cnBrCiB;EmBsCjB,6BnB0Dc;AC4mDlB;AkBnqDE;EACE,cnB1CiB;EmB2CjB,6BnBqDc;ACgnDlB;AkBlqDE;EACE,cnB/CiB;EmBgDjB,6BnBgDc;AConDlB;AkBjqDE;EACE,cnBpDiB;EmBqDjB,6BnB2Cc;ACwnDlB;AkBhqDE;EAC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","file":"styles.css","sourcesContent":["@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-main-container {\n  position:relative;\n  @include flex-row;\n  height: 100%;\n  overflow: auto;\n  border: $main-container-border;\n  box-sizing: border-box;\n  color: $main-container-color;\n  background-color: $main-container-bg-color;\n  font-size: $main-container-font-size;\n  \n  & > .#{$prefix}-conversation-list {\n    order: 0;\n    height: 100%;\n    flex-basis: $main-container-conversation-list-flex-basis;\n    border-top: $main-container-conversation-list-border-top;\n    border-right: $main-container-conversation-list-border-right;\n    border-bottom: $main-container-conversation-list-border-bottom;\n    border-left: $main-container-conversation-list-border-left;\n    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38);\n    /* Hmm without this, box shadow is cut at bottom */\n    z-index:2;\n  }\n\n  & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left {\n    order:0;\n    height:100%;\n    max-width:$main-container-sidebar-left-max-width;\n    flex-basis: 35%;\n    border-right: $main-container-conversation-list-border-right;\n    //box-shadow: 2px 0 5px -2px rgba(0,0,0,0.38);\n    /* Hmm without this, box shadow is cut at bottom */\n    z-index:2;\n  }\n\n  & > .#{$prefix}-sidebar.#{$prefix}-sidebar--right {\n    flex-basis: 25%;\n    min-width: $main-container-sidebar-right-min-width;\n    max-width: $main-container-sidebar-right-max-width;\n\n    border-top: $main-container-sidebar-right-border-top;\n    border-right: $main-container-sidebar-right-border-right;\n    border-bottom: $main-container-sidebar-right-border-bottom;\n    border-left: $main-container-sidebar-right-border-left;\n    \n  }\n  \n  & > .#{$prefix}-sidebar.#{$prefix}-sidebar--left .#{$prefix}-search {\n    margin:0.5em;\n  }\n  \n  & .#{$prefix}-chat-container {\n    order:1;\n    z-index:1;\n    flex-grow: 1;\n    flex-basis: 65%;\n    border-right: $main-container-chat-container-border-right;\n  }\n  \n  & .#{$prefix}-sidebar {\n    order:2;\n    height:100%;\n    //box-shadow: -2px 0px 5px -2px rgba(0,0,0,0.38);\n    z-index:3;\n  }\n\n  // Clear expansion panel border in sidebar\n  & .#{$prefix}-sidebar .#{$prefix}-expansion-panel {\n    border-left:0;\n    border-top:0;\n    border-right:0;\n  }\n\n  // 3 because of scrollbar divs\n  & .#{$prefix}-sidebar .#{$prefix}-expansion-panel:nth-last-child(3) {\n    border-bottom: 0;\n  }\n  \n  & .#{$prefix}-conversation-header {\n    z-index: 1;\n  }\n\n  \n  /////////////////////////////////////////////////////////////\n  /// Responsive\n  &--responsive {\n\n    .#{$prefix}-chat-container {\n      \n      .#{$prefix}-conversation-header {\n        .#{$prefix}-conversation-header__back {\n          display: none;\n        }\n  \n        .#{$prefix}-conversation-header__actions {\n          .#{$prefix}-button--info {\n            display: none;\n          }\n        }\n        \n      }\n    }\n    \n    @media( max-width: map-get($grid-breakpoints, md) ) {\n      \n      min-width: calc( 1.6em + 40px + #{$chat-container-min-width} );  // Horizontal padding from conversation-list plus avatar width plus ChatContainer min-width\n      \n      .#{$prefix}-search {\n        display:none;\n      }\n  \n      > .#{$prefix}-sidebar.#{$prefix}-sidebar--left {\n        flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width\n        min-width: calc(1.6em + 40px);\n      }\n  \n      >.#{$prefix}-sidebar.#{$prefix}-sidebar--right {\n        display: none;\n      }\n      \n      > .#{$prefix}-conversation-list { // Only if conversation-list is direct child of main-container because main-container and conversation-list have different flex-direction\n        flex-basis: calc(1.6em + 40px); // Horizontal padding from conversation-list plus avatar width\n      }\n  \n      .#{$prefix}-conversation-list,\n      .#{$prefix}-sidebar .#{$prefix}-conversation-list {\n  \n        .#{$prefix}-conversation {\n          > .#{$prefix}-avatar {\n            margin-right:0; // Reset right margin\n          }\n  \n          &__content {\n            display:none;\n          }\n  \n          &__operations {\n            display:none;\n          }\n          \n          &__last-activity-time {\n            display: none;\n          }\n          &__unread-dot {\n            position:absolute;\n            top:0.3em;\n            right:0.3em;\n            margin-right:0;\n          }\n        }\n      }\n\n      .#{$prefix}-conversation-header {\n\n        .#{$prefix}-conversation-header__actions {\n          .#{$prefix}-button--info {\n            display: flex;\n          }\n        }\n        \n      }\n      \n    }\n  \n    @media( max-width: map-get($grid-breakpoints, sm) ) {\n\n      min-width: auto;\n      \n      > .#{$prefix}-sidebar.#{$prefix}-sidebar--left {\n        display:none;\n      }\n\n\n      .#{$prefix}-chat-container {\n        // Show back arrow\n        .#{$prefix}-conversation-header {\n          .#{$prefix}-conversation-header__back {\n            display: flex;\n          }\n  \n          .#{$prefix}-conversation-header__info {\n            \n          }\n          \n        }\n      }\n      \n      \n      \n    }\n  }\n  \n/////////////////////////////////////////////////////////////\n  \n}\n","@mixin reset-spacing {\n  margin: 0;\n  padding: 0;\n}\n\n@mixin reset-button {\n  @include reset-spacing;\n  background: none;\n  border: none;\n}\n\n@mixin reset-list {\n  @include reset-spacing;\n  list-style-type: none;\n}\n\n@mixin flex-row {\n  display: flex;\n  flex-direction: row;\n}\n\n@mixin flex-row-reverse {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n@mixin flex-column {\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n// Mixins for status size\n// \n\n$bullet-class: #{$prefix}-status__bullet;\n\n@mixin status-xs {\n  font-size: $status-xs-fontsize;\n  width: $status-xs-width;\n  height: $status-xs-width;\n  .#{$bullet-class} {\n    width: $status-xs-width;\n    height: $status-xs-width;\n  }\n}\n\n@mixin status-sm {\n  font-size: $status-sm-fontsize;\n  .#{$bullet-class} {\n    width: $status-sm-width;\n    height: $status-sm-width;\n  }\n}\n\n@mixin status-md {\n  font-size: $status-md-fontsize;\n  width: $status-md-width;\n  height: $status-md-width;\n  .#{$bullet-class} {\n    width: $status-md-width;\n    height: $status-md-width;\n  }\n}\n\n@mixin status-lg {\n  font-size: $status-lg-fontsize;\n  width: $status-lg-width;\n  height: $status-lg-width;\n  .#{$bullet-class} {\n    width: $status-lg-width;\n    height: $status-lg-width;\n  }\n}\n\n// Tablica z rozmiarami klucz wartość\n$status-sizes: (\n        \"xs\": $status-xs-width,\n        \"sm\": $status-sm-width,\n        \"md\": $status-md-width,\n        \"lg\": $status-lg-width\n);\n\n$status-font-sizes: (\n        \"xs\": $status-xs-fontsize,\n        \"sm\": $status-sm-fontsize,\n        \"md\": $status-md-fontsize,\n        \"lg\": $status-lg-fontsize\n);\n\n@mixin status-size($size, $border-width:0, $named:false) {\n  $element-width: map_get($status-sizes, $size) + 2*$border-width;\n  $bullet-width: $element-width - 2*$border-width;\n  font-size: map_get($status-font-sizes, $size);\n  \n  @if ( $named == false ) {\n    width: $element-width;\n    height: $element-width;\n  } @else {\n    width: auto;\n    height: auto;\n  } \n  \n  .#{$bullet-class} {\n    width: $bullet-width;\n    min-width: $bullet-width;\n    height: $bullet-width;\n  }\n  \n}","// Variables\n//\n//\n\n@import \"helpers/functions\";\n\n// Main class prefix\n$prefix: \"cs\" !default;\n\n// Grid breakpoints\n//\n// Breakpoints for responsive view\n\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1400px\n) !default;\n\n// Default font family\n//\n\n$default-font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n\n// Colors\n//\n\n$color-primary: #c6e3fa !default;\n$color-primary-light: #f6fbff !default;\n$color-primary-dark: #6ea9d7 !default;\n$color-primary-dark: #6EAAD8 !default;\n\n$color-secondary: #91ECEC !default;\n$color-secondary-light: #C2F9F9 !default;\n$color-secondary-dark: #64D3D3 !default;\n\n// Material text colors\n// http://marcodiiga.github.io/rgba-to-rgb-conversion\n// Hex values are calculated based on white background \n// If you change background color rgb color will change, that is why its better to use rgba with opacity!\n$color-text: rgba(0, 0, 0, .87) !default; // #212121\n$color-text-medium: rgba(0, 0, 0, .60) !default; // #666666\n$color-text-disabled: rgba(0, 0, 0, .38) !default; // #9e9e9e\n$color-text-inverted: invert($color-text); \n\n// Base colors\n//\n// It's not recommended to change this colors because white is white and black is... black :)\n$color-white: #fff !default;\n$color-black: #000 !default;\n\n$default-bg-color: $color-white !default;\n\n// Element colors\n//\n\n$default-border-color: rgba-to-rgb(rgba(scale-color($color-primary-dark, $saturation: -55%), 0.4), $default-bg-color) !default;\n\n// State colors\n//\n\n$color-hover: $color-text !default;\n$color-bg-hover: rgba-to-rgb(rgba($color-primary-dark, 0.08), $default-bg-color) !default;\n$color-focus: $color-text !default;\n$color-bg-focus: rgba-to-rgb(rgba($color-primary-dark, 0.24), $color-primary-light) !default;\n$color-selected: darken($color-primary-dark, 25%) !default;\n$color-bg-selected: $color-bg-focus !default;\n$color-activated: darken($color-primary-dark, 25%)  !default;\n$color-bg-activated: $color-bg-focus !default;\n$color-active: $color-primary-dark !default;\n$color-bg-active: $color-bg-activated !default;\n$color-disabled: $color-text-disabled !default;\n$color-bg-disabled: rgba(0, 0, 0, .38) !default;\n\n// Functional colors\n//\n\n$color-danger: #ec1212 !default;\n$color-error: $color-danger !default;\n\n// Border radius\n//\n// Default border radius for elements\n\n$default-border-radius: 0.7em !default;\n\n// Opacity\n//\n\n$disabled-opacity: 0.38 !default;\n\n///////////////////////////////////////// Components /////////////////////////////////////////\n\n// Avatar\n// \n\n// Sizes\n$avatar-xs-width: 16px !default;\n$avatar-sm-width: 26px !default;\n$avatar-md-width: 42px !default;\n$avatar-lg-width: 68px !default;\n$avatar-fluid-width: 100% !default;\n\n// Avatar group\n// \n\n// Sizes\n$avatar-group-xs-width: 16px !default;\n$avatar-group-sm-width: 32px !default;\n$avatar-group-md-width: 100% !default;\n$avatar-group-lg-width: 80px !default;\n$avatar-group-fluid-width: 100% !default;\n\n$avatar-group-md-min-width: 40px !default; \n\n// Buttons\n// \n// General button element and dedicated (function specific) buttons\n\n// Borders\n$button-border: solid 1px $default-border-color !default;\n$button-border-radius: $default-border-radius !default;\n\n// Colors\n$button-color: $color-primary-dark !default;\n$button-bg-color: transparent !default;\n\n// Fonts\n$button-font-size: 1em !default;\n$button-line-height: 1.5 !default;\n\n// Opacity\n$button-hover-opacity: 0.6 !default;\n$button-disabled-opacity: $disabled-opacity !default;\n\n// Spacing\n$button-margin: 0.1em 0.2em !default;\n$button-padding: 0.2em 0.7em !default;\n\n// Add user button \n\n$button-adduser-color: $button-color !default;\n$button-adduser-bg-color: $button-bg-color !default;\n\n// Arrow button\n\n$button-arrow-color: $button-color !default;\n$button-arrow-bg-color: $button-bg-color !default;\n\n// Ellipsis button\n\n$button-ellipis-color: $button-color !default;\n$button-ellipis-bg-color: $button-bg-color !default;\n\n// Info button\n\n$button-info-color: $button-color !default;\n$button-info-bg-color: $button-bg-color !default;\n\n// Star button\n\n$button-star-color: $button-color !default;\n$button-star-bg-color: $button-bg-color !default;\n\n// Video call button\n\n$button-videocall-color: $button-color !default;\n$button-videocall-bg-color: $button-bg-color !default; \n\n// Voice call button\n\n$button-voicecall-color: $button-color !default;\n$button-voicecall-bg-color: $button-bg-color !default;\n\n// Send button\n\n$button-send-color: $button-color !default;\n$button-send-bg-color: $button-bg-color !default;\n\n// Attachment button\n\n$button-attachment-color: $button-color !default;\n$button-attachment-bg-color: $button-bg-color !default;\n\n// Chat container\n//\n\n// Borders\n$chat-container-message-input-border-top: solid 1px $default-border-color !default;\n$chat-container-message-input-border-right: solid 0px $default-border-color !default;\n$chat-container-message-input-border-bottom: solid 0px $default-border-color !default;\n$chat-container-message-input-border-left: solid 0px $default-border-color !default;\n\n// Colors \n$chat-container-color: $color-text !default;\n$chat-container-bg-color: $default-bg-color !default;\n$chat-container-message-input-color: $color-text !default;\n$chat-container-message-input-bg-color: $default-bg-color !default;\n$chat-container-input-toolbox-color: $color-text !default;\n$chat-container-input-toolbox-bg-color: $default-bg-color !default;\n\n// Sizes\n$chat-container-min-width: 180px !default;\n\n// Conversation\n//\n\n// Borders\n$conversation-border-top: 0 !default;\n$conversation-border-right: 0 !default;\n$conversation-border-bottom: 0 !default;\n$conversation-border-left: 0 !default;\n$conversation-active-border-top: 0 !default;\n$conversation-active-border-right: 0 !default;\n$conversation-active-border-bottom: 0 !default;\n$conversation-active-border-left: 0 !default;\n$conversation-activated-border-top: 0 !default;\n$conversation-activated-border-right: 0 !default;\n$conversation-activated-border-bottom: 0 !default;\n$conversation-activated-border-left: 0 !default;\n\n// Colors\n$conversation-color: $color-text !default;\n$conversation-bg-color: $default-bg-color !default;\n$conversation-unread-color: $color-white !default;\n$conversation-unread-bg-color: $color-danger !default;\n$conversation-hover-bg-color: $color-bg-hover !default;\n$conversation-unread-dot-color: #2e63e8 !default;\n$conversation-name-color: $color-text !default;\n$conversation-name-activated-color: $color-activated !default;\n$conversation-info-color: $color-text-medium !default;\n$conversation-info-activated-color: $color-activated !default;\n$conversation-active-color: $conversation-color !default;\n$conversation-active-bg-color: $color-bg-active !default;\n$conversation-activated-color: $color-activated !default;\n$conversation-activated-bg-color: $color-bg-activated !default;\n\n// Fonts\n$conversation-font-family: $default-font-family !default;\n$conversation-unread-font-size: 0.75em !default;\n$conversation-last-sender-name-font-weight: normal !default;\n$conversation-info-content-font-weight: normal !default;\n$conversation-info-activated-font-weight: normal !default;\n$conversation-activated-font-weight: normal !default;\n$conversation-name-activated-font-weight: normal !default;\n\n// Sizes\n$conversation-unread-dot-width: 0.7em !default;\n\n// Spacing\n$conversation-operations-margin: 0 0 0 auto !default;\n$conversation-last-activity-time-margin: 0 0 0 auto !default;\n$chat-container-input-toolbox-margin: 0 !default;\n$chat-container-input-toolbox-padding: 0 0.8em 0.17em 0 !default;\n\n// Conversation header\n//\n\n// Borders\n$conversation-header-border-top: solid 0px $default-border-color !default;\n$conversation-header-border-right: solid 0px $default-border-color !default;\n$conversation-header-border-bottom: solid 1px $default-border-color !default;\n$conversation-header-border-left: solid 0px $default-border-color !default;\n\n// Colors\n$conversation-header-bg-color: $color-primary-light !default;\n$conversation-header-color: color-by-background($conversation-header-bg-color, $color-text, $color-text-inverted) !default;\n$conversation-header-user-name-color: $conversation-header-color !default;\n$conversation-header-user-name-bg-color: $conversation-header-bg-color !default;\n$conversation-header-info-color: color-by-background($conversation-header-bg-color, $color-text-medium, $color-text-inverted) !default;\n$conversation-header-info-bg-color: $conversation-header-bg-color !default;\n$conversation-header-action-button-color: normal !default;\n$conversation-header-action-button-bg-color: transparent !default;\n$conversation-header-actions-color: $color-text !default;\n$conversation-header-actions-bg-color: transparent !default;\n\n// Fonts\n$conversation-header-font-family: $default-font-family !default;\n$conversation-header-font-size: 1em !default;\n\n// Sizes\n$conversation-header-content-min-width: 0 !default;\n\n// Spacing\n$conversation-header-actions-margin: 0 0 0 0.5em !default;\n\n// Conversation list\n//\n\n// Colors\n$conversation-list-color: $color-text !default;\n$conversation-list-bg-color: transparent !default;\n$conversation-list-loading-more-bg-color: transparent !default;\n\n// Sizes\n$conversation-list-loading-more-height: 1.2em !default;\n\n// Spacing\n$conversation-list-loading-more-padding: 2px 0 !default;\n\n// Expansion panel\n//\n\n// Borders\n$expansion-panel-border: solid 1px $default-border-color !default;\n\n// Colors\n$expansion-panel-color: $color-text !default;\n$expansion-panel-bg-color: $default-bg-color !default;\n$expansion-panel-header-color: $color-text-medium !default;\n$expansion-panel-header-bg-color: $color-primary-light !default;\n$expansion-panel-header-hover-color: $expansion-panel-header-color !default;\n$expansion-panel-header-hover-bg-color: $color-bg-hover !default;\n$expansion-panel-header-open-color: $expansion-panel-header-color !default;\n$expansion-panel-header-open-bg-color: $expansion-panel-header-bg-color !default;\n$expansion-panel-content-color: $color-text !default;\n$expansion-panel-content-bg-color: $default-bg-color !default;\n$expansion-panel-content-open-color: $expansion-panel-content-color !default;\n$expansion-panel-content-open-bg-color: $expansion-panel-content-bg-color !default;\n\n// Fonts \n$expansion-panel-font-family: $default-font-family !default;\n$expansion-panel-font-weight: normal !default;\n$expansion-panel-font-size: inherit !default;\n$expansion-panel-font-variant: normal !default;\n\n$expansion-panel-header-font-family: $default-font-family !default;\n$expansion-panel-header-font-weight: bold !default;\n$expansion-panel-header-font-size: 0.75em !default;\n$expansion-panel-header-font-variant: normal !default;\n\n$expansion-panel-content-font-family: $default-font-family !default;\n$expansion-panel-content-font-weight: normal !default;\n$expansion-panel-content-font-size: 0.8em !default;\n$expansion-panel-content-font-variant: normal !default;\n\n\n// Input toolbox\n//\n\n// Colors\n$input-toolbox-send-btn-color: $color-secondary !default;\n$input-toolbox-upload-btn-color: $color-secondary !default;\n\n// Fonts\n$input-toolbox-btn-font-size: 1.2em !default;\n\n// Spacing\n$input-toolbox-btn-margin: 0 0.5em 0 0 !default;\n$input-toolbox-margin: 0 !default;\n$input-toolbox-padding: 0 0 0.4em 0 !default;\n\n// Loader\n//\n\n// Borders\n$loader-border-width: 0.2em !default;\n\n// Colors\n$loader-color: $color-text !default;\n$loader-bg-color: transparent !default;\n$loader-spinner-color: $color-primary-dark !default;\n$loader-spinner-bg-color: $color-primary !default;\n\n// Sizes\n$loader-width: 1.8em !default;\n$loader-height: 1.8em !default;\n\n// Main container\n//\n\n// Borders\n$main-container-border: solid 1px $default-border-color !default;\n$main-container-conversation-list-border-top: solid 0px $default-border-color !default;\n$main-container-conversation-list-border-right: solid 1px $default-border-color !default;\n$main-container-conversation-list-border-bottom: solid 0px $default-border-color !default;\n$main-container-conversation-list-border-left: solid 0px $default-border-color !default;\n$main-container-chat-container-border-right: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-top: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-right: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-bottom: solid 0px $default-border-color !default;\n$main-container-sidebar-right-border-left: solid 1px $default-border-color !default;\n\n// Colors\n$main-container-color: $color-text !default;\n$main-container-bg-color: $default-bg-color !default;\n\n// Fonts\n$main-container-font-size: 1rem !default; // Font size for child elements are relative to this size\n\n// Sizes\n$main-container-conversation-list-flex-basis: 300px !default;\n$main-container-sidebar-width: 300px !default;\n$main-container-sidebar-min-width: $main-container-sidebar-width !default;\n\n$main-container-sidebar-left-max-width: 320px !default;\n$main-container-sidebar-right-min-width: 150px !default;\n$main-container-sidebar-right-max-width: 320px !default;\n\n// Message\n// \n\n// Boolean flags\n$show-message-incoming-sender-name: false !default;\n$show-message-incoming-single-sender-name: true !default;\n$show-message-incoming-first-sender-name: true !default;\n$show-message-incoming-last-sender-name: false !default;\n\n$show-message-outgoing-sender-name: false !default;\n$show-message-outgoing-single-sender-name: false !default;\n$show-message-outgoing-first-sender-name: false !default;\n$show-message-outgoing-last-sender-name: false !default;\n\n$show-message-incoming-sent-time: false !default;\n$show-message-incoming-single-sent-time: true !default;\n$show-message-incoming-first-sent-time: true !default;\n$show-message-incoming-last-sent-time: false !default;\n\n$show-message-outgoing-sent-time: false !default;\n$show-message-outgoing-single-sent-time: true !default;\n$show-message-outgoing-first-sent-time: true !default;\n$show-message-outgoing-last-sent-time: false !default;\n\n// Avatar flags\n$show-message-incoming-avatar: false !default;\n$show-message-incoming-single-avatar: true !default;\n$show-message-incoming-first-avatar: false !default;\n$show-message-incoming-last-avatar: true !default;\n\n$show-message-outgoing-avatar: false !default;\n$show-message-outgoing-single-avatar: true !default;\n$show-message-outgoing-first-avatar: false !default;\n$show-message-outgoing-last-avatar: true !default;\n\n// Borders\n$message-base-radius: $default-border-radius !default;\n\n$message-border-radius: 0 !default;\n\n// Border radius for single incoming message\n$message-incoming-single-border-radius: $message-border-radius !default;\n\n// Border radius for first incoming message\n$message-incoming-first-border-radius: $message-border-radius $message-border-radius $message-border-radius 0 !default;\n\n// Border radius for last incoming message\n$message-incoming-last-border-radius: 0 $message-border-radius $message-border-radius $message-border-radius !default;\n\n// Border radius for single outgoing message\n$message-outgoing-single-border-radius: $message-border-radius !default;\n\n// Border radius for first outgoing message\n$message-outgoing-first-border-radius: $message-border-radius $message-border-radius 0 $message-border-radius !default;\n\n// Border radius for last outgoing message\n$message-outgoing-last-border-radius: $message-border-radius $message-border-radius $message-border-radius $message-border-radius !default;\n\n// Border radius for content\n$message-content-border-radius: $message-base-radius $message-base-radius $message-base-radius $message-base-radius !default;\n\n// Border radius for normal incoming message content\n$message-incoming-content-border-radius: 0 $message-base-radius $message-base-radius 0 !default;\n\n// Border radius for single incoming message content\n$message-incoming-content-single-border-radius: 0 $message-base-radius $message-base-radius $message-base-radius !default;\n\n// Border radius for first incoming message content\n$message-incoming-content-first-border-radius: 0 $message-base-radius $message-base-radius 0 !default;\n\n// Border radius for last incoming message content\n$message-incoming-content-last-border-radius: 0 $message-base-radius 0 $message-base-radius !default;\n\n// Border radius for normal outgoing message content\n$message-outgoing-content-border-radius: $message-base-radius 0 0 $message-base-radius !default;\n\n// Border radius for single outgoing message content\n$message-outgoing-content-single-border-radius: $message-base-radius $message-base-radius 0 $message-base-radius !default;\n\n// Border radius for first outgoing message content\n$message-outgoing-content-first-border-radius: $message-base-radius 0 0 $message-base-radius !default;\n\n// Border radius for last outgoing message content\n$message-outgoing-content-last-border-radius: $message-base-radius 0 $message-base-radius $message-base-radius !default;\n\n// Colors\n$message-color: $color-text !default;\n$message-bg-color: transparent !default;\n\n$message-header-color: lighten($color-text, 30) !default;\n$message-header-bg-color: transparent !default;\n\n$message-footer-color: lighten($color-text, 30) !default;\n$message-footer-bg-color: transparent !default;\n\n$message-incoming-color: $message-color !default;\n$message-incoming-bg-color: $message-bg-color !default;\n\n$message-outgoing-color: $message-color !default;\n$message-outgoing-bg-color: transparent !default;\n\n$message-sender-name-color: $message-header-color !default;\n$message-sender-name-bg-color: transparent !default;\n\n$message-sent-time-color: $message-header-color !default;\n$message-sent-time-bg-color: transparent !default;\n\n$message-content-color: $color-text !default;\n$message-content-bg-color: $color-primary !default;\n\n$message-content-incoming-color: $color-text !default;\n$message-content-incoming-bg-color: $message-content-bg-color !default;\n\n$message-content-outgoing-color: $color-text !default;\n$message-content-outgoing-bg-color: $color-primary-dark !default;\n\n// Fonts\n$message-font-size: 1em !default;\n$message-font-family: $default-font-family !default;\n\n$message-content-font-family: $default-font-family !default;\n$message-content-font-weight: normal !default;\n$message-content-font-size: 0.91em !default;\n$message-content-font-variant: normal !default;\n\n// Sizes\n$message-avatar-width: 42px !default;\n\n// Spacing\n$message-margin:0; // Default margin for message\n$message-only-child-margin: 0.2em 0 0 0 !default;\n$message-not-only-child-margin: 0.2em 0 0 0 !default;\n\n$message-header-margin: 0 0.2em 0.1em 0.2em !default;\n$message-footer-margin: 0.1em 0.2em 0 0.2em !default;\n\n$message-content-margin-top: 0 !default;\n$message-monologue-margin-top: 0.4em !default;\n\n$message-avatar-horizontal-margin: 8px !default; // Pixels because need to calculate with avatar width\n$message-avatar-margin: 0 $message-avatar-horizontal-margin 0 0 !default;\n$message-incoming-avatar-margin: 0 $message-avatar-horizontal-margin 0 0 !default;\n$message-outgoing-avatar-margin: 0 0 0 $message-avatar-horizontal-margin !default;\n\n// Message group\n//\n\n// Borders\n$message-group-message-base-radius: $default-border-radius !default;\n// Border radius for normal incoming message content\n$message-group-incoming-message-content-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius 0 !default;\n// Border radius for single incoming message content\n$message-group-incoming-message-content-single-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius $message-group-message-base-radius !default;\n// Border radius for first message content in incoming group\n$message-group-incoming-message-content-first-border-radius: 0 $message-group-message-base-radius $message-group-message-base-radius 0 !default;\n// Border radius for last message content in incoming group\n$message-group-incoming-message-content-last-border-radius: 0 $message-group-message-base-radius 0 $message-group-message-base-radius !default;\n// Border radius for normal outgoing message content\n$message-group-outgoing-message-content-border-radius: $message-group-message-base-radius 0 0 $message-group-message-base-radius !default;\n// Border radius for single outgoing message content\n$message-group-outgoing-message-content-single-border-radius: $message-group-message-base-radius $message-group-message-base-radius 0 $message-group-message-base-radius !default;\n// Border radius for first message content in outgoing group\n$message-group-outgoing-message-content-first-border-radius: $message-group-message-base-radius 0 0 $message-group-message-base-radius !default;\n// Border radius for last message content in outgoing group\n$message-group-outgoing-message-content-last-border-radius: $message-group-message-base-radius 0 $message-group-message-base-radius $message-group-message-base-radius !default;\n\n//  Colors\n$message-group-header-color: $color-text-medium !default;\n$message-group-header-bg-color: transparent !default;\n$message-group-footer-color: $color-text-medium !default;\n$message-group-footer-bg-color: transparent !default;\n$message-group-message-content-bg-color: $color-primary !default;\n\n$message-group-message-content-incoming-color: $color-text !default;\n$message-group-message-content-incoming-bg-color: $message-group-message-content-bg-color !default;\n\n$message-group-message-content-outgoing-color: $color-text !default;\n$message-group-message-content-outgoing-bg-color: $color-primary-dark !default;\n\n// Fonts\n$message-group-header-font-size: 0.8em !default;\n$message-group-header-font-family: $default-font-family !default;\n\n$message-group-footer-font-size: 0.8em !default;\n$message-group-footer-font-family: $default-font-family !default;\n\n// Spacing\n$message-group-margin: 0.4em 0 0 0 !default;\n$message-group-header-margin: 0 0 0.2em 0 !default;\n$message-group-footer-margin: 0.2em 0 0 0 !default;\n\n$message-group-avatar-horizontal-margin: 8px;\n\n$message-group-header-padding: 0 !default;\n$message-group-footer-padding: 0 !default;\n\n// Message input\n//\n\n// Borders\n$message-input-border-top: none !default;\n$message-input-border-right: none !default;\n$message-input-border-bottom: none !default;\n$message-input-border-left: none !default;\n\n$message-input-content-editor-wrapper-border-radius: $default-border-radius !default;\n\n$message-input-content-editor-border-top-width: 0 !default;    // These variables\n$message-input-content-editor-border-right-width: 0 !default;  // are used\n$message-input-content-editor-border-bottom-width: 0 !default; // for some calculations\n$message-input-content-editor-border-left-width: 0 !default;   // by _message-input.scss\n\n$message-input-content-editor-border-top: $message-input-content-editor-border-top-width none !default;\n$message-input-content-editor-border-right: $message-input-content-editor-border-right-width none !default;\n$message-input-content-editor-border-bottom: $message-input-content-editor-border-bottom-width none !default;\n$message-input-content-editor-border-left: $message-input-content-editor-border-left-width none !default;\n\n// Colors\n$message-input-bg-color: $default-bg-color !default;\n$message-input-content-editor-color: $color-text !default;\n$message-input-content-editor-wrapper-bg-color: $color-primary !default;\n$message-input-content-editor-container-bg-color: $message-input-content-editor-wrapper-bg-color !default;\n$message-input-content-editor-bg-color: $message-input-content-editor-wrapper-bg-color !default;\n$message-input-content-editor-disabled-color: $color-text-medium !default;\n$message-input-content-editor-disabled-bg-color: rgba($message-input-content-editor-bg-color, 0.38) !default;\n\n// Fonts\n$message-input-content-editor-font-family: $default-font-family !default;\n$message-input-content-editor-container-font-size: 0.94em !default;\n\n// Sizes\n$message-input-max-lines: 4;\n\n// Spacing\n$message-input-placeholder-color: $color-text-disabled !default;\n$message-input-padding: 0 !default;\n\n$message-input-content-editor-wrapper-margin: 0 !default;\n$message-input-content-editor-wrapper-padding: 0.6em 0.9em !default;\n$message-input-content-editor-container-padding-top: 0em !default;     // These variables\n$message-input-content-editor-container-padding-right: 0em !default;   // are used \n$message-input-content-editor-container-padding-bottom: 0em !default;  // for some calculations\n$message-input-content-editor-container-padding-left: 0em !default;    // by _message-input.scss\n$message-input-content-editor-container-padding: $message-input-content-editor-container-padding-top $message-input-content-editor-container-padding-right $message-input-content-editor-container-padding-bottom $message-input-content-editor-container-padding-left !default;\n\n// !!! Be careful, when set this to unitless value - calculations below will not work properly\n// Also check if scroll is working properly after changing this value\n$message-input-content-editor-container-line-height: 1.35em !default;\n\n// Message list\n//\n\n// Colors\n$message-list-color: $color-text !default;\n$message-list-bg-color: $default-bg-color !default;\n$message-list-typing-indicator-bg-color: $color-white !default;\n$message-list-loading-more-bg-color: $color-white !default;\n\n// Sizes\n$message-list-loading-more-height: 1.2em !default;\n\n// Spacing\n$message-list-scroll-wrapper-padding: 0 1.2em 0 0.8em !default;\n$message-list-loading-more-padding: 2px 0 !default;\n$message-list-message-separator-margin-top: 1.2em !default;\n\n// Message separator\n//\n\n// Colors\n$message-separator-color: $color-primary-dark !default;\n$message-separator-bg-color: $default-bg-color !default;\n$message-separator-font-size: 0.8em !default;\n$message-separator-font-family: $default-font-family !default;\n\n$message-separator-content-color: $message-separator-color !default;\n$message-separator-content-bg-color: $message-separator-bg-color !default;\n\n$message-separator-line-color: $message-separator-color !default;\n\n// Spacing\n$message-separator-left-line-margin: 0 1em 0 0 !default;\n$message-separator-right-line-margin: 0 0 0 1em !default;\n\n// Overlay\n//\n\n// Colors\n$overlay-bg-color: rgba(198,227,250,0.38) !default;\n\n// Search\n//\n\n// Borders\n$search-border-radius: $default-border-radius !default;\n\n//  Colors\n$search-bg-color: $color-primary !default;\n$search-color: $color-text !default;\n$search-icon-color: $color-primary-dark !default;\n$search-clear-icon-color: $search-icon-color !default;\n$search-clear-icon-color-hover: rgba($color-primary-dark, 0.6) !default;\n$search-placeholder-color: $color-text !default;\n$search-input-bg-color: $search-bg-color !default;\n$search-disabled-color: $color-disabled !default;\n$search-disabled-bg-color: $search-bg-color !default;\n$search-input-disabled-bg-color: $search-disabled-bg-color !default;\n\n// Fonts\n$search-font-family: inherit !default;\n$search-font-size: inherit !default;\n$search-input-font-family: inherit !default;\n$search-input-font-size: 0.8em !default;\n\n// Opacity\n$search-disabled-opacity: $disabled-opacity !default;\n\n// Sidebar\n//\n\n// Colors\n$sidebar-right-bg-color: $default-bg-color !default;\n$sidebar-left-bg-color: $default-bg-color !default;\n\n// Status\n// \n\n// Colors\n$status-available-color: #00a27e !default;\n$status-unavailable-color: #a66d00 !default;\n$status-away-color: #fc8b00 !default;\n$status-dnd-color: $color-danger !default;\n$status-invisible-color: #c2d1d9 !default;\n$status-eager-color: #ffee00 !default;\n\n$status-selected-color: $color-selected !default;\n$status-selected-bg-color: $color-bg-selected !default;\n\n$status-available-name-color: $color-text !default;\n$status-unavailable-name-color: $color-text !default;\n$status-away-name-color: $color-text !default;\n$status-dnd-name-color: $color-text !default;\n$status-invisible-name-color: $color-text !default;\n$status-eager-name-color: $color-text !default;\n\n// Fonts\n$status-xs-fontsize: 1em !default;\n$status-sm-fontsize: 1em !default;\n$status-md-fontsize: 1em !default;\n$status-lg-fontsize: 1em !default;\n\n// Sizes\n$status-xs-width: 4px !default;\n$status-sm-width: 8px !default;\n$status-md-width: 11px !default;\n$status-lg-width: 14px !default;\n$status-fluid-width: 100% !default;\n\n// Spacing\n$status-name-margin: 0 0 0 0.58em !default;\n\n// Status list\n// \n\n// Colors\n$status-list-color: $color-text !default;\n$status-list-bg-color: $default-bg-color !default;\n\n$status-list-margin: 0 !default;\n$status-list-padding: 1em !default;\n\n$status-list-item-margin: 0 !default;\n$status-list-item-padding: 0.4em 0.8em!default;\n\n$status-list-item-hover-color: $color-text-medium !default;\n$status-list-item-hover-bg-color: $color-bg-hover !default;\n\n$status-list-item-focus-color: $color-focus !default;\n$status-list-item-focus-bg-color: $color-bg-focus !default;\n\n$status-list-item-selected-color: $color-selected !default;\n$status-list-item-selected-bg-color: $color-bg-selected !default;\n\n$status-list-item-active-color: $color-text !default;\n$status-list-item-active-bg-color: $color-bg-active !default;\n\n// Typing indicator\n//\n\n// Colors\n$typing-indicator-text-color: $color-primary-dark !default;\n$typing-indicator-text-bg-color: transparent !default;\n\n$typing-indicator-indicator-bg-color: transparent !default;\n$typing-indicator-dot-bg-color: $color-primary-dark !default;\n\n// Fonts\n$typing-indicator-font-family: $default-font-family !default;\n$typing-indicator-font-size: inherit !default;\n\n// Sizes\n$typing-indicator-dot-size: 4px !default;\n\n// Spacing\n$typing-indicator-dot-spacing: 3px !default;\n$typing-indicator-text-margin: 0 0 0 0.5em !default;\n",".cs-main-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: auto;\n  border: solid 1px #d1dbe3;\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n  font-size: 1rem;\n}\n.cs-main-container > .cs-conversation-list {\n  order: 0;\n  height: 100%;\n  flex-basis: 300px;\n  border-top: solid 0px #d1dbe3;\n  border-right: solid 1px #d1dbe3;\n  border-bottom: solid 0px #d1dbe3;\n  border-left: solid 0px #d1dbe3;\n  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.38);\n  /* Hmm without this, box shadow is cut at bottom */\n  z-index: 2;\n}\n.cs-main-container > .cs-sidebar.cs-sidebar--left {\n  order: 0;\n  height: 100%;\n  max-width: 320px;\n  flex-basis: 35%;\n  border-right: solid 1px #d1dbe3;\n  /* Hmm without this, box shadow is cut at bottom */\n  z-index: 2;\n}\n.cs-main-container > .cs-sidebar.cs-sidebar--right {\n  flex-basis: 25%;\n  min-width: 150px;\n  max-width: 320px;\n  border-top: solid 0px #d1dbe3;\n  border-right: solid 0px #d1dbe3;\n  border-bottom: solid 0px #d1dbe3;\n  border-left: solid 1px #d1dbe3;\n}\n.cs-main-container > .cs-sidebar.cs-sidebar--left .cs-search {\n  margin: 0.5em;\n}\n.cs-main-container .cs-chat-container {\n  order: 1;\n  z-index: 1;\n  flex-grow: 1;\n  flex-basis: 65%;\n  border-right: solid 0px #d1dbe3;\n}\n.cs-main-container .cs-sidebar {\n  order: 2;\n  height: 100%;\n  z-index: 3;\n}\n.cs-main-container .cs-sidebar .cs-expansion-panel {\n  border-left: 0;\n  border-top: 0;\n  border-right: 0;\n}\n.cs-main-container .cs-sidebar .cs-expansion-panel:nth-last-child(3) {\n  border-bottom: 0;\n}\n.cs-main-container .cs-conversation-header {\n  z-index: 1;\n}\n.cs-main-container--responsive .cs-chat-container .cs-conversation-header .cs-conversation-header__back {\n  display: none;\n}\n.cs-main-container--responsive .cs-chat-container .cs-conversation-header .cs-conversation-header__actions .cs-button--info {\n  display: none;\n}\n@media (max-width: 768px) {\n  .cs-main-container--responsive {\n    min-width: calc( 1.6em + 40px + 180px );\n  }\n  .cs-main-container--responsive .cs-search {\n    display: none;\n  }\n  .cs-main-container--responsive > .cs-sidebar.cs-sidebar--left {\n    flex-basis: calc(1.6em + 40px);\n    min-width: calc(1.6em + 40px);\n  }\n  .cs-main-container--responsive > .cs-sidebar.cs-sidebar--right {\n    display: none;\n  }\n  .cs-main-container--responsive > .cs-conversation-list {\n    flex-basis: calc(1.6em + 40px);\n  }\n  .cs-main-container--responsive .cs-conversation-list .cs-conversation > .cs-avatar,\n.cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation > .cs-avatar {\n    margin-right: 0;\n  }\n  .cs-main-container--responsive .cs-conversation-list .cs-conversation__content,\n.cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__content {\n    display: none;\n  }\n  .cs-main-container--responsive .cs-conversation-list .cs-conversation__operations,\n.cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__operations {\n    display: none;\n  }\n  .cs-main-container--responsive .cs-conversation-list .cs-conversation__last-activity-time,\n.cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__last-activity-time {\n    display: none;\n  }\n  .cs-main-container--responsive .cs-conversation-list .cs-conversation__unread-dot,\n.cs-main-container--responsive .cs-sidebar .cs-conversation-list .cs-conversation__unread-dot {\n    position: absolute;\n    top: 0.3em;\n    right: 0.3em;\n    margin-right: 0;\n  }\n  .cs-main-container--responsive .cs-conversation-header .cs-conversation-header__actions .cs-button--info {\n    display: flex;\n  }\n}\n@media (max-width: 576px) {\n  .cs-main-container--responsive {\n    min-width: auto;\n  }\n  .cs-main-container--responsive > .cs-sidebar.cs-sidebar--left {\n    display: none;\n  }\n  .cs-main-container--responsive .cs-chat-container .cs-conversation-header .cs-conversation-header__back {\n    display: flex;\n  }\n}\n\n.cs-message {\n  box-sizing: border-box;\n  font-size: 1em;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  color: rgba(0, 0, 0, 0.87);\n  display: flex;\n  flex-direction: row;\n  padding: 0;\n  background-color: transparent;\n  overflow: hidden;\n  border-radius: 0;\n}\n.cs-message:only-child {\n  margin: 0.2em 0 0 0;\n}\n.cs-message:not(:only-child) {\n  margin: 0.2em 0 0 0;\n}\n.cs-message__avatar {\n  box-sizing: border-box;\n  margin: 0 8px 0 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  width: 42px;\n}\n.cs-message__content-wrapper {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.cs-message__header {\n  box-sizing: border-box;\n  color: rgba(77, 77, 77, 0.87);\n  background-color: transparent;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  font-size: 0.8em;\n  margin: 0 0.2em 0.1em 0.2em;\n}\n.cs-message__header .cs-message__sender-name {\n  box-sizing: border-box;\n  color: rgba(77, 77, 77, 0.87);\n  background-color: transparent;\n}\n.cs-message__header .cs-message__sent-time {\n  box-sizing: border-box;\n  color: rgba(77, 77, 77, 0.87);\n  background-color: transparent;\n  margin-left: auto;\n  padding-left: 0.8em;\n}\n.cs-message__footer {\n  box-sizing: border-box;\n  color: rgba(77, 77, 77, 0.87);\n  background-color: transparent;\n  display: flex;\n  font-size: 0.8em;\n  margin: 0.1em 0.2em 0 0.2em;\n}\n.cs-message__footer .cs-message__sender-name {\n  box-sizing: border-box;\n  color: rgba(77, 77, 77, 0.87);\n  background-color: transparent;\n}\n.cs-message__footer .cs-message__sent-time {\n  box-sizing: border-box;\n  color: rgba(77, 77, 77, 0.87);\n  background-color: transparent;\n  margin-left: auto;\n  padding-left: 0.8em;\n}\n.cs-message__content {\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #c6e3fa;\n  margin-top: 0;\n  padding: 0.6em 0.9em;\n  border-radius: 0.7em 0.7em 0.7em 0.7em;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  font-weight: normal;\n  font-size: 0.91em;\n  font-variant: normal;\n}\n.cs-message--incoming {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: transparent;\n  margin-right: auto;\n}\n.cs-message--incoming .cs-message__avatar {\n  margin: 0 8px 0 0;\n}\n.cs-message--incoming .cs-message__sender-name {\n  display: none;\n}\n.cs-message--incoming .cs-message__sent-time {\n  display: none;\n}\n.cs-message--incoming .cs-message__content {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #c6e3fa;\n  border-radius: 0 0.7em 0.7em 0;\n}\n.cs-message--outgoing {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: transparent;\n  margin-left: auto;\n  justify-content: flex-end;\n}\n.cs-message--outgoing .cs-message__avatar {\n  order: 1;\n  margin: 0 0 0 8px;\n}\n.cs-message--outgoing .cs-message__sender-name {\n  display: none;\n}\n.cs-message--outgoing .cs-message__sent-time {\n  display: none;\n}\n.cs-message--outgoing .cs-message__content {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #6ea9d7;\n  border-radius: 0.7em 0 0 0.7em;\n}\n.cs-message.cs-message--incoming.cs-message--single {\n  border-radius: 0;\n}\n.cs-message.cs-message--incoming.cs-message--single:not(:first-child) {\n  margin-top: 0.4em;\n}\n.cs-message.cs-message--incoming.cs-message--single .cs-message__sender-name {\n  display: block;\n}\n.cs-message.cs-message--incoming.cs-message--single .cs-message__sent-time {\n  display: block;\n}\n.cs-message.cs-message--incoming.cs-message--single .cs-message__content {\n  border-radius: 0 0.7em 0.7em 0.7em;\n}\n.cs-message.cs-message--incoming.cs-message--first {\n  border-radius: 0 0 0 0;\n}\n.cs-message.cs-message--incoming.cs-message--first:not(:first-child) {\n  margin-top: 0.4em;\n}\n.cs-message.cs-message--incoming.cs-message--first .cs-message__sender-name {\n  display: block;\n}\n.cs-message.cs-message--incoming.cs-message--first .cs-message__sent-time {\n  display: block;\n}\n.cs-message.cs-message--incoming.cs-message--first .cs-message__content {\n  border-radius: 0 0.7em 0.7em 0;\n  background-color: #c6e3fa;\n}\n.cs-message.cs-message--incoming.cs-message--last {\n  border-radius: 0 0 0 0;\n}\n.cs-message.cs-message--incoming.cs-message--last .cs-message__sent-time {\n  display: none;\n}\n.cs-message.cs-message--incoming.cs-message--last .cs-message__content {\n  border-radius: 0 0.7em 0 0.7em;\n}\n.cs-message.cs-message--outgoing.cs-message--single {\n  border-radius: 0;\n}\n.cs-message.cs-message--outgoing.cs-message--single:not(:first-child) {\n  margin-top: 0.4em;\n}\n.cs-message.cs-message--outgoing.cs-message--single .cs-message__sent-time {\n  display: block;\n}\n.cs-message.cs-message--outgoing.cs-message--single .cs-message__content {\n  border-radius: 0.7em 0.7em 0 0.7em;\n}\n.cs-message.cs-message--outgoing.cs-message--first {\n  border-radius: 0 0 0 0;\n  margin-top: 0.4em;\n}\n.cs-message.cs-message--outgoing.cs-message--first .cs-message__sent-time {\n  display: block;\n}\n.cs-message.cs-message--outgoing.cs-message--first .cs-message__content {\n  border-radius: 0.7em 0 0 0.7em;\n  background-color: #6ea9d7;\n}\n.cs-message.cs-message--outgoing.cs-message--last {\n  border-radius: 0 0 0 0;\n}\n.cs-message.cs-message--outgoing.cs-message--last .cs-message__sent-time {\n  display: none;\n}\n.cs-message.cs-message--outgoing.cs-message--last .cs-message__content {\n  border-radius: 0.7em 0 0.7em 0.7em;\n}\n.cs-message--incoming.cs-message--avatar-spacer {\n  margin-left: 50px;\n}\n.cs-message--outgoing.cs-message--avatar-spacer {\n  margin-right: 50px;\n}\n.cs-message--avatar-tl .cs-message__avatar {\n  justify-content: flex-start;\n  order: 0;\n  margin-right: 8px;\n  margin-left: 0;\n}\n.cs-message--avatar-tl .cs-message__message-wrapper {\n  order: 1;\n}\n.cs-message--avatar-tr .cs-message__avatar {\n  justify-content: flex-start;\n  order: 1;\n  margin-left: 8px;\n  margin-right: 0;\n}\n.cs-message--avatar-tr .cs-message__message-wrapper {\n  order: 0;\n}\n.cs-message--avatar-br .cs-message__avatar {\n  justify-content: flex-end;\n  order: 1;\n  margin-left: 8px;\n  margin-right: 0;\n}\n.cs-message--avatar-br .cs-message__message-wrapper {\n  order: 0;\n}\n.cs-message--avatar-bl .cs-message__avatar {\n  justify-content: flex-end;\n  order: 0;\n  margin-right: 8px;\n  margin-left: 0;\n}\n.cs-message--avatar-bl .cs-message__message-wrapper {\n  order: 1;\n}\n.cs-message--avatar-cl .cs-message__avatar {\n  justify-content: center;\n  order: 0;\n  margin-right: 8px;\n  margin-left: 0;\n}\n.cs-message--avatar-cl .cs-message__message-wrapper {\n  order: 1;\n}\n.cs-message--avatar-cr .cs-message__avatar {\n  justify-content: center;\n  order: 1;\n  margin-left: 8px;\n  margin-right: 0;\n}\n.cs-message--avatar-cr .cs-message__message-wrapper {\n  order: 0;\n}\n\n/********** Styles **********/\n.cs-message-group {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  margin: 0.4em 0 0 0;\n}\n.cs-message-group__avatar {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n.cs-message-group__content {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.cs-message-group__header {\n  box-sizing: border-box;\n  display: flex;\n  font-size: 0.8em;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  color: rgba(0, 0, 0, 0.6);\n  background-color: transparent;\n  margin: 0 0 0.2em 0;\n  padding: 0;\n}\n.cs-message-group__footer {\n  box-sizing: border-box;\n  display: flex;\n  font-size: 0.8em;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  color: rgba(0, 0, 0, 0.6);\n  background-color: transparent;\n  margin: 0.2em 0 0 0;\n  padding: 0;\n}\n.cs-message-group__messages {\n  box-sizing: border-box;\n}\n.cs-message-group__messages .cs-message:first-child {\n  margin-top: 0;\n}\n.cs-message-group__messages .cs-message .cs-message__content {\n  background-color: #c6e3fa;\n  margin-top: 0;\n}\n.cs-message-group--incoming {\n  justify-content: flex-start;\n}\n.cs-message-group--incoming .cs-message-group__avatar {\n  margin-right: 8px;\n  order: 0;\n}\n.cs-message-group--incoming .cs-message-group__content {\n  order: 1;\n}\n.cs-message-group--incoming .cs-message-group__messages .cs-message:first-child .cs-message__content {\n  border-radius: 0 0.7em 0.7em 0;\n}\n.cs-message-group--incoming .cs-message-group__messages .cs-message .cs-message__content {\n  border-radius: 0 0.7em 0.7em 0;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #c6e3fa;\n}\n.cs-message-group--incoming .cs-message-group__messages .cs-message:last-child .cs-message__content {\n  border-radius: 0 0.7em 0 0.7em;\n}\n.cs-message-group--incoming .cs-message-group__messages .cs-message:only-child .cs-message__content {\n  border-radius: 0 0.7em 0.7em 0.7em;\n}\n.cs-message-group--outgoing {\n  justify-content: flex-end;\n  margin-left: auto;\n}\n.cs-message-group--outgoing .cs-message-group__avatar {\n  margin-left: 8px;\n  order: 1;\n}\n.cs-message-group--outgoing .cs-message-group__content {\n  order: 0;\n}\n.cs-message-group--outgoing .cs-message-group__messages .cs-message {\n  justify-content: flex-end;\n}\n.cs-message-group--outgoing .cs-message-group__messages .cs-message:first-child .cs-message__content {\n  border-radius: 0.7em 0 0 0.7em;\n}\n.cs-message-group--outgoing .cs-message-group__messages .cs-message .cs-message__content {\n  border-radius: 0.7em 0 0 0.7em;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #6ea9d7;\n}\n.cs-message-group--outgoing .cs-message-group__messages .cs-message:last-child .cs-message__content {\n  border-radius: 0.7em 0 0.7em 0.7em;\n}\n.cs-message-group--outgoing .cs-message-group__messages .cs-message:only-child .cs-message__content {\n  border-radius: 0.7em 0.7em 0 0.7em;\n}\n.cs-message-group--avatar-tl .cs-message-group__avatar {\n  justify-content: flex-start;\n  order: 0;\n  margin-right: 8px;\n  margin-left: 0;\n}\n.cs-message-group--avatar-tl .cs-message-group__content {\n  order: 1;\n}\n.cs-message-group--avatar-tr .cs-message-group__avatar {\n  justify-content: flex-start;\n  order: 1;\n  margin-left: 8px;\n  margin-right: 0;\n}\n.cs-message-group--avatar-tr .cs-message-group__content {\n  order: 0;\n}\n.cs-message-group--avatar-bl .cs-message-group__avatar {\n  justify-content: flex-end;\n  order: 0;\n  margin-right: 8px;\n  margin-left: 0;\n}\n.cs-message-group--avatar-bl .cs-message-group__content {\n  order: 1;\n}\n.cs-message-group--avatar-br .cs-message-group__avatar {\n  justify-content: flex-end;\n  order: 1;\n  margin-left: 8px;\n  margin-right: 0;\n}\n.cs-message-group--avatar-br .cs-message-group__content {\n  order: 0;\n}\n.cs-message-group--avatar-cl .cs-message-group__avatar {\n  justify-content: center;\n  order: 0;\n  margin-right: 8px;\n  margin-left: 0;\n}\n.cs-message-group--avatar-cl .cs-message-group__content {\n  order: 1;\n}\n.cs-message-group--avatar-cr .cs-message-group__avatar {\n  justify-content: center;\n  order: 1;\n  margin-left: 8px;\n  margin-right: 0;\n}\n.cs-message-group--avatar-cr .cs-message-group__content {\n  order: 0;\n}\n\n.cs-message-separator {\n  box-sizing: border-box;\n  color: #6ea9d7;\n  background-color: #fff;\n  font-size: 0.8em;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.cs-message-separator::before, .cs-message-separator::after {\n  box-sizing: border-box;\n  content: \"\";\n  background-color: #6ea9d7;\n  display: block;\n  flex-grow: 1;\n  height: 1px;\n}\n.cs-message-separator:not(:empty)::before {\n  margin: 0 1em 0 0;\n}\n.cs-message-separator:not(:empty)::after {\n  margin: 0 0 0 1em;\n}\n\n.cs-message-list {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 1.25em;\n  position: relative;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n}\n.cs-message-list__scroll-wrapper {\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  /*overflow-y: scroll*/\n  padding: 0 1.2em 0 0.8em;\n}\n.cs-message-list__scroll-to:first-child {\n  box-sizing: border-box;\n  float: left;\n  clear: both;\n  height: 0;\n}\n.cs-message-list__scroll-wrapper > .cs-message:nth-last-child(4) {\n  margin-bottom: 2.65em;\n}\n.cs-message-list__scroll-wrapper > .cs-message-group:nth-last-child(4) {\n  margin-bottom: 2.65em;\n}\n.cs-message-list .cs-typing-indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 15px;\n  background-color: #fff;\n  padding: 0.5em 0.5em;\n  font-size: 0.9em;\n  height: 1.25em;\n  line-height: 1.25em;\n}\n.cs-message-list__scroll-wrapper > .cs-message, .cs-message-list__scroll-wrapper > .cs-message-group {\n  max-width: 85%;\n}\n.cs-message-list .cs-message.cs-message--incoming, .cs-message-list .cs-message-group.cs-message-group--incoming {\n  margin-right: auto;\n}\n.cs-message-list .cs-message.cs-message--outgoing, .cs-message-list .cs-message-group.cs-message-group--outgoing {\n  margin-left: auto;\n}\n.cs-message-list .cs-message-separator:not(:first-child) {\n  margin-top: 1.2em;\n}\n.cs-message-list__loading-more {\n  box-sizing: content-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  position: absolute;\n  background-color: #fff;\n  padding: 2px 0;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1.2em;\n  z-index: 1;\n}\n.cs-message-list__loading-more .cs-loader {\n  width: 1.2em;\n  height: 1.2em;\n}\n.cs-message-list__loading-more .cs-loader::before,\n.cs-message-list__loading-more .cs-loader::after {\n  width: 100%;\n  height: 100%;\n}\n.cs-message-list__loading-more--bottom {\n  top: initial;\n  bottom: 0;\n}\n.cs-message-list .ps__rail-y {\n  z-index: 2;\n}\n\n.cs-avatar {\n  position: relative;\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n.cs-avatar > img {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n.cs-avatar:hover > img {\n  filter: brightness(115%);\n}\n.cs-avatar.cs-avatar--xs {\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n}\n.cs-avatar.cs-avatar--sm {\n  width: 26px;\n  height: 26px;\n  min-width: 26px;\n  min-height: 26px;\n}\n.cs-avatar.cs-avatar--md {\n  width: 42px;\n  height: 42px;\n  min-width: 42px;\n  min-height: 42px;\n}\n.cs-avatar.cs-avatar--lg {\n  width: 68px;\n  height: 68px;\n  min-width: 68px;\n  min-height: 68px;\n}\n.cs-avatar.cs-avatar--fluid {\n  width: 100%;\n  height: 100%;\n}\n.cs-avatar.cs-avatar--fluid .cs-status {\n  right: 5%;\n  width: 22%;\n  height: 22%;\n}\n.cs-avatar .cs-status {\n  box-sizing: border-box;\n  position: absolute;\n  right: -1px;\n  bottom: 3%;\n}\n.cs-avatar .cs-status__bullet {\n  box-sizing: content-box;\n  border: solid 2px #fff;\n}\n.cs-avatar .cs-status--xs, .cs-avatar .cs-status--xs:not(.cs-status--named) {\n  font-size: 1em;\n  width: 6px;\n  height: 6px;\n  right: 0;\n  bottom: 0;\n}\n.cs-avatar .cs-status--xs .cs-status__bullet, .cs-avatar .cs-status--xs:not(.cs-status--named) .cs-status__bullet {\n  width: 4px;\n  min-width: 4px;\n  height: 4px;\n}\n.cs-avatar .cs-status--sm, .cs-avatar .cs-status--sm:not(.cs-status--named) {\n  font-size: 1em;\n  width: 12px;\n  height: 12px;\n  right: -3px;\n  bottom: -1px;\n}\n.cs-avatar .cs-status--sm .cs-status__bullet, .cs-avatar .cs-status--sm:not(.cs-status--named) .cs-status__bullet {\n  width: 8px;\n  min-width: 8px;\n  height: 8px;\n}\n.cs-avatar .cs-status--md, .cs-avatar .cs-status--md:not(.cs-status--named) {\n  font-size: 1em;\n  width: 15px;\n  height: 15px;\n}\n.cs-avatar .cs-status--md .cs-status__bullet, .cs-avatar .cs-status--md:not(.cs-status--named) .cs-status__bullet {\n  width: 11px;\n  min-width: 11px;\n  height: 11px;\n}\n.cs-avatar .cs-status--lg, .cs-avatar .cs-status--lg:not(.cs-status--named) {\n  font-size: 1em;\n  width: 18px;\n  height: 18px;\n  bottom: 4%;\n}\n.cs-avatar .cs-status--lg .cs-status__bullet, .cs-avatar .cs-status--lg:not(.cs-status--named) .cs-status__bullet {\n  width: 14px;\n  min-width: 14px;\n  height: 14px;\n}\n.cs-avatar-group {\n  display: flex;\n  flex-direction: row-reverse;\n  overflow: visible;\n  position: relative;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  min-width: 40px;\n  align-content: flex-start;\n  justify-content: flex-end;\n}\n.cs-avatar-group .cs-avatar--active {\n  z-index: 1;\n}\n.cs-avatar-group .cs-avatar--active-on-hover:hover {\n  z-index: 2;\n}\n.cs-avatar-group--xs {\n  padding-left: 6.112px;\n  padding-top: 6.112px;\n}\n.cs-avatar-group--xs .cs-avatar {\n  margin-top: -6.112px;\n  margin-left: -6.112px;\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n  border: none;\n  border-right: 1px solid #f2f2f2;\n}\n.cs-avatar-group--sm {\n  padding-left: 9.932px;\n  padding-top: 9.932px;\n}\n.cs-avatar-group--sm .cs-avatar {\n  margin-top: -9.932px;\n  margin-left: -9.932px;\n  width: 26px;\n  height: 26px;\n  min-width: 26px;\n  min-height: 26px;\n}\n.cs-avatar-group--md {\n  padding-left: 16.044px;\n  padding-top: 16.044px;\n}\n.cs-avatar-group--md .cs-avatar {\n  margin-top: -16.044px;\n  margin-left: -16.044px;\n  width: 42px;\n  height: 42px;\n  min-width: 42px;\n  min-height: 42px;\n  border: 2px solid #f2f2f2;\n}\n.cs-avatar-group--lg {\n  padding-left: 25.976px;\n  padding-top: 25.976px;\n}\n.cs-avatar-group--lg .cs-avatar {\n  margin-top: -25.976px;\n  margin-left: -25.976px;\n  width: 68px;\n  height: 68px;\n  min-width: 68px;\n  min-height: 68px;\n  border: 2px solid #f2f2f2;\n}\n\n.cs-message-input {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  background-color: #fff;\n  border-top: none;\n  border-right: none;\n  border-bottom: none;\n  border-left: none;\n  box-sizing: border-box;\n  padding: 0;\n  overflow: visible;\n  flex-shrink: 0;\n}\n.cs-message-input__content-editor-wrapper {\n  box-sizing: border-box;\n  position: relative;\n  background-color: #c6e3fa;\n  margin: 0;\n  padding: 0.6em 0.9em;\n  border-radius: 0.7em;\n  flex-grow: 1;\n}\n.cs-message-input--disabled .cs-message-input__content-editor-wrapper {\n  background-color: rgba(198, 227, 250, 0.38);\n  color: rgba(0, 0, 0, 0.6);\n}\n.cs-message-input__content-editor-container {\n  box-sizing: border-box;\n  position: relative;\n  background-color: #c6e3fa;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  overflow: hidden;\n  overflow-y: auto;\n  font-size: 0.94em;\n  line-height: 1.35em;\n  min-height: 1.35em;\n  max-height: 5.4em;\n  padding: 0em 0em 0em 0em;\n  scroll-padding: 0em;\n}\n.cs-message-input--disabled .cs-message-input__content-editor-container {\n  color: rgba(0, 0, 0, 0.6);\n  background-color: transparent;\n}\n.cs-message-input__content-editor {\n  box-sizing: border-box;\n  flex-grow: 1;\n  background-color: #c6e3fa;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  outline: 0;\n  border-top: 0 none;\n  border-right: 0 none;\n  border-bottom: 0 none;\n  border-left: 0 none;\n  overflow: visible;\n  color: rgba(0, 0, 0, 0.87);\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.cs-message-input--disabled .cs-message-input__content-editor {\n  background-color: transparent;\n  color: rgba(0, 0, 0, 0.6);\n}\n.cs-message-input__content-editor[data-placeholder]:empty:before {\n  box-sizing: border-box;\n  content: attr(data-placeholder);\n  color: rgba(0, 0, 0, 0.38);\n  display: block;\n  cursor: text;\n}\n.cs-message-input__tools {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n}\n.cs-message-input__tools .cs-button {\n  font-size: 1.2em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.cs-message-input__tools .cs-button--send {\n  align-self: flex-end;\n}\n.cs-message-input__tools .cs-button--attachment {\n  align-self: flex-end;\n}\n.cs-message-input__tools:first-child .cs-button:first-child {\n  margin-left: 0;\n}\n.cs-message-input__tools:first-child .cs-button:last-child {\n  margin-right: 0;\n}\n.cs-message-input__tools:last-child .cs-button:first-child {\n  margin-left: 0;\n}\n.cs-message-input__tools:last-child .cs-button:last-child {\n  margin-right: 0;\n}\n\n.cs-input-toolbox {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  margin: 0;\n  padding: 0 0 0.4em 0;\n}\n.cs-input-toolbox .cs-button {\n  margin: 0;\n  padding: 0;\n  background: none;\n  border: none;\n  margin: 0 0.5em 0 0;\n  font-size: 1.2em;\n}\n\n.cs-chat-container {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 180px;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n}\n.cs-chat-container .cs-message-input {\n  border-top: solid 1px #d1dbe3;\n  border-right: solid 0px #d1dbe3;\n  border-bottom: solid 0px #d1dbe3;\n  border-left: solid 0px #d1dbe3;\n  margin-top: auto;\n  padding: 0.3em 0 0.3em 0em;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n}\n.cs-chat-container .cs-message-input .cs-message-input__content-editor-wrapper:first-child {\n  margin-left: 0.8em;\n}\n.cs-chat-container .cs-message-input .cs-message-input__content-editor-wrapper:last-child {\n  margin-right: 0.8em;\n}\n.cs-chat-container .cs-input-toolbox {\n  margin: 0;\n  padding: 0 0.8em 0.17em 0;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n}\n\n.cs-typing-indicator {\n  box-sizing: content-box;\n  font-size: inherit;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n.cs-typing-indicator__indicator {\n  box-sizing: inherit;\n  background-color: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.cs-typing-indicator__dot {\n  box-sizing: inherit;\n  animation: cs-typing-indicator__typing-animation 1.5s infinite ease-in-out;\n  border-radius: 100%;\n  display: inline-block;\n  height: 4px;\n  width: 4px;\n  background-color: #6ea9d7;\n}\n.cs-typing-indicator__dot:not(:last-child) {\n  margin-right: 3px;\n}\n.cs-typing-indicator__dot:nth-child(1) {\n  box-sizing: inherit;\n}\n.cs-typing-indicator__dot:nth-child(2) {\n  animation-delay: 300ms;\n}\n.cs-typing-indicator__dot:nth-child(3) {\n  animation-delay: 400ms;\n}\n.cs-typing-indicator__text {\n  box-sizing: inherit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: #6ea9d7;\n  background-color: transparent;\n  margin: 0 0 0 0.5em;\n  user-select: none;\n}\n@keyframes cs-typing-indicator__typing-animation {\n  0% {\n    transform: translateY(0px);\n  }\n  28% {\n    transform: translateY(-5px);\n  }\n  44% {\n    transform: translateY(0px);\n  }\n}\n\n.cs-conversation-header {\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #f6fbff;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  font-size: 1em;\n  flex-shrink: 0;\n  user-select: none;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  border-top: solid 0px #d1dbe3;\n  border-right: solid 0px #d1dbe3;\n  border-bottom: solid 1px #d1dbe3;\n  border-left: solid 0px #d1dbe3;\n  padding: 0.6em 0.9em;\n}\n.cs-conversation-header__back {\n  box-sizing: border-box;\n  margin-right: 0.5em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  order: 1;\n}\n.cs-conversation-header__back button {\n  font-size: 1.4em;\n  padding: 0;\n}\n.cs-conversation-header__avatar {\n  box-sizing: border-box;\n  width: 42px;\n  height: 42px;\n  margin-right: 1em;\n  order: 2;\n}\n.cs-conversation-header__avatar > .cs-avatar > .cs-status > .cs-status__bullet {\n  border-color: #f6fbff;\n}\n.cs-conversation-header__avatar .cs-avatar-group {\n  padding-right: 0 !important;\n}\n.cs-conversation-header__content {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  order: 3;\n  flex-grow: 2;\n  justify-content: center;\n  min-width: 0;\n}\n.cs-conversation-header__content .cs-conversation-header__user-name {\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #f6fbff;\n}\n.cs-conversation-header__content .cs-conversation-header__info {\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: rgba(0, 0, 0, 0.6);\n  background-color: #f6fbff;\n  font-weight: normal;\n  font-size: 0.9em;\n}\n.cs-conversation-header__actions {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: transparent;\n  margin: 0 0 0 0.5em;\n  order: 4;\n}\n.cs-conversation-header__actions .cs-button:not(:first-child) {\n  margin-left: 0.2em;\n}\n.cs-conversation-header__actions .cs-button {\n  padding: 0;\n}\n.cs-conversation-header__actions .cs-button.cs-button--arrow,\n.cs-conversation-header__actions .cs-button.cs-button--info,\n.cs-conversation-header__actions .cs-button.cs-button--voicecall,\n.cs-conversation-header__actions .cs-button.cs-button--videocall,\n.cs-conversation-header__actions .cs-button.cs-button--star,\n.cs-conversation-header__actions .cs-button.cs-button--adduser,\n.cs-conversation-header__actions .cs-button.cs-button--ellipsis,\n.cs-conversation-header__actions .cs-button.cs-button--ellipsis {\n  font-size: 1.4em;\n  color: normal;\n  background-color: transparent;\n}\n.cs-conversation-header__actions .cs-button.cs-button--ellipsis {\n  font-size: 1.3em;\n}\n\n.cs-conversation {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  position: relative;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  padding: 0.675em 0.8em 0.675em 0.8em;\n  cursor: pointer;\n  justify-content: flex-start;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n  user-select: none;\n  border-top: 0;\n  border-right: 0;\n  border-bottom: 0;\n  border-left: 0;\n}\n.cs-conversation:hover {\n  background-color: #f3f8fc;\n}\n.cs-conversation:hover > .cs-avatar > .cs-status > .cs-status__bullet {\n  border-color: #f3f8fc;\n}\n.cs-conversation:hover > .cs-avatar > img {\n  filter: none;\n}\n.cs-conversation.cs-conversation:active {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #d5e7f5;\n  border-top: 0;\n  border-right: 0;\n  border-bottom: 0;\n  border-left: 0;\n}\n.cs-conversation.cs-conversation:active > .cs-avatar > .cs-status > .cs-status__bullet {\n  border-color: #d5e7f5;\n}\n.cs-conversation.cs-conversation--active {\n  color: #2b6a9b;\n  background-color: #d5e7f5;\n  font-weight: normal;\n  border-top: 0;\n  border-right: 0;\n  border-bottom: 0;\n  border-left: 0;\n}\n.cs-conversation.cs-conversation--active > .cs-avatar > .cs-status > .cs-status__bullet {\n  border-color: #d5e7f5;\n}\n.cs-conversation.cs-conversation--active .cs-conversation__name {\n  color: #2b6a9b;\n  font-weight: normal;\n}\n.cs-conversation.cs-conversation--active .cs-conversation__info {\n  color: #2b6a9b;\n  font-weight: normal;\n}\n.cs-conversation > .cs-avatar {\n  width: 42.1px;\n  height: 42.1px;\n  margin-right: 1em;\n}\n.cs-conversation > .cs-avatar > .cs-status {\n  border-color: #fff;\n}\n.cs-conversation > .cs-avatar-group {\n  width: 42.1px;\n  height: 42.1px;\n  min-width: 42.1px;\n  min-height: 42.1px;\n  padding-right: 0 !important;\n  margin-right: 1em;\n}\n.cs-conversation__content {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  margin-right: 1.1em;\n  flex-grow: 1;\n}\n.cs-conversation__operations {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0 0 0 auto;\n  color: rgba(179, 179, 179, 0.87);\n  visibility: hidden;\n}\n.cs-conversation__operations--visible {\n  visibility: visible;\n}\n.cs-conversation__operations:hover {\n  color: rgba(102, 102, 102, 0.87);\n}\n.cs-conversation:hover .cs-conversation__operations {\n  visibility: visible;\n}\n.cs-conversation__name {\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, 0.87);\n  font-size: 1em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cs-conversation__info {\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, 0.6);\n  font-size: 0.8em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cs-conversation__last-sender {\n  box-sizing: border-box;\n  display: inline;\n  font-weight: normal;\n}\n.cs-conversation__info-content {\n  box-sizing: border-box;\n  display: inline;\n  font-weight: normal;\n}\n.cs-conversation__last-activity-time {\n  box-sizing: border-box;\n  margin: 0 0 0 auto;\n  font-size: 0.8em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.cs-conversation__last-activity-time + .cs-conversation__operations {\n  margin-left: 0.5em;\n}\n.cs-conversation__unread-dot {\n  box-sizing: content-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-right: 0.5em;\n  align-self: center;\n  border-radius: 50%;\n  width: 0.7em;\n  min-width: 0.7em;\n  height: 0.7em;\n  box-shadow: 1px 1px 1px 0px #b3b3b3;\n  perspective: 200px;\n  perspective-origin: 50% 50%;\n  background: radial-gradient(circle at 3px 3px, #7c9df1, #2e63e8);\n}\n.cs-conversation__unread-dot:hover::before {\n  content: \"\";\n  position: absolute;\n  top: 1%;\n  left: 5%;\n  border-radius: 50%;\n  z-index: 2;\n  filter: blur(0);\n  height: 80%;\n  width: 40%;\n  background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);\n  transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);\n}\n.cs-conversation__unread-dot:hover::after {\n  content: \"\";\n  position: absolute;\n  top: 5%;\n  left: 10%;\n  width: 80%;\n  height: 80%;\n  border-radius: 100%;\n  filter: blur(1px);\n  z-index: 2;\n  transform: rotateZ(-30deg);\n  display: block;\n  background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);\n  animation: cs-unread-anim 2s ease-out infinite;\n}\n.cs-conversation__unread {\n  box-sizing: border-box;\n  position: absolute;\n  right: 0.8em;\n  top: 0.3em;\n  padding: 0.01em 0.3em;\n  border-radius: 0.3em;\n  font-size: 0.75em;\n  font-weight: 600;\n  color: #fff;\n  background-color: #ec1212;\n  max-width: 30em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  z-index: 100;\n  /* For grouped Avatar */\n}\n@keyframes cs-unread-anim {\n  0% {\n    transform: scale(1);\n  }\n  20% {\n    transform: scaleY(0.95) scaleX(1.05);\n  }\n  48% {\n    transform: scaleY(1.1) scaleX(0.9);\n  }\n  68% {\n    transform: scaleY(0.98) scaleX(1.02);\n  }\n  80% {\n    transform: scaleY(1.02) scaleX(0.98);\n  }\n  97%, 100% {\n    transform: scale(1);\n  }\n}\n\n/********** Colors **********/\n/********** Fonts **********/\n/********** Styles **********/\n.cs-conversation-list {\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: transparent;\n}\n.cs-conversation-list > div > ul {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n.cs-conversation-list__loading-more {\n  box-sizing: content-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  position: absolute;\n  background-color: transparent;\n  padding: 2px 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1.2em;\n  z-index: 1;\n}\n.cs-conversation-list__loading-more .cs-loader {\n  width: 1.2em;\n  height: 1.2em;\n}\n.cs-conversation-list__loading-more .cs-loader::before,\n.cs-conversation-list__loading-more .cs-loader::after {\n  width: 100%;\n  height: 100%;\n}\n.cs-conversation-list .ps__rail-y {\n  z-index: 2;\n}\n\n.cs-status {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: nowrap;\n  font-size: 1em;\n}\n.cs-status .cs-status__bullet {\n  box-sizing: content-box;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  position: relative;\n  perspective: 200px;\n  perspective-origin: 50% 50%;\n}\n.cs-status--selected {\n  color: #2b6a9b;\n  background-color: #d5e7f5;\n}\n.cs-status--named {\n  width: auto;\n  height: auto;\n}\n.cs-status__name {\n  margin: 0 0 0 0.58em;\n  line-height: 1.5;\n}\n.cs-avatar:hover .cs-status__bullet:before, .cs-status:hover .cs-status__bullet:before {\n  box-sizing: border-box;\n  content: \"\";\n  position: absolute;\n  top: 1%;\n  left: 5%;\n  border-radius: 50%;\n  z-index: 2;\n  filter: blur(0);\n  height: 80%;\n  width: 40%;\n  background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);\n  transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);\n}\n\n.cs-avatar:hover .cs-status__bullet:after, .cs-status:hover .cs-status__bullet:after {\n  box-sizing: border-box;\n  content: \"\";\n  position: absolute;\n  top: 5%;\n  left: 10%;\n  width: 80%;\n  height: 80%;\n  border-radius: 100%;\n  filter: blur(1px);\n  z-index: 2;\n  transform: rotateZ(-30deg);\n  display: block;\n  background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);\n  animation: cs-bubble-anim 2s ease-out infinite;\n}\n\n.cs-status--available .cs-status__bullet {\n  background: radial-gradient(circle at 3px 3px, #00d5a6, #00a27e);\n}\n.cs-status--available .cs-status__name {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-status--unavailable .cs-status__bullet {\n  background: radial-gradient(circle at 3px 3px, #ffb527, #a66d00);\n}\n.cs-status--unavailable .cs-status__name {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-status--away .cs-status__bullet {\n  background: radial-gradient(circle at 3px 3px, #ffdbb0, #fc8b00);\n}\n.cs-status--away .cs-status__name {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-status--dnd .cs-status__bullet {\n  background-color: #ec1212;\n  background: radial-gradient(circle at 3px 3px, #f89f9f, #ec1212);\n}\n.cs-status--dnd .cs-status__name {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-status--invisible .cs-status__bullet {\n  background-color: #c2d1d9;\n  background: radial-gradient(circle at 3px 3px, white, #c2d1d9);\n}\n.cs-status--invisible .cs-status__name {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-status--eager .cs-status__bullet {\n  background: radial-gradient(circle at 3px 3px, #fffccc, #ffee00);\n}\n.cs-status--eager .cs-status__name {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-status--xs:not(.cs-status--named) {\n  font-size: 1em;\n  width: 4px;\n  height: 4px;\n}\n.cs-status--xs:not(.cs-status--named) .cs-status__bullet {\n  width: 4px;\n  min-width: 4px;\n  height: 4px;\n}\n.cs-status--sm:not(.cs-status--named) {\n  font-size: 1em;\n  width: 8px;\n  height: 8px;\n}\n.cs-status--sm:not(.cs-status--named) .cs-status__bullet {\n  width: 8px;\n  min-width: 8px;\n  height: 8px;\n}\n.cs-status--md:not(.cs-status--named) {\n  font-size: 1em;\n  width: 11px;\n  height: 11px;\n}\n.cs-status--md:not(.cs-status--named) .cs-status__bullet {\n  width: 11px;\n  min-width: 11px;\n  height: 11px;\n}\n.cs-status--lg:not(.cs-status--named) {\n  font-size: 1em;\n  width: 14px;\n  height: 14px;\n}\n.cs-status--lg:not(.cs-status--named) .cs-status__bullet {\n  width: 14px;\n  min-width: 14px;\n  height: 14px;\n}\n.cs-status--fluid {\n  width: 100%;\n  height: 100%;\n}\n.cs-status--fluid .cs-status__bullet {\n  width: 100%;\n  min-width: 100%;\n  height: 100%;\n}\n@keyframes cs-bubble-anim {\n  0% {\n    transform: scale(1);\n  }\n  20% {\n    transform: scaleY(0.95) scaleX(1.05);\n  }\n  48% {\n    transform: scaleY(1.1) scaleX(0.9);\n  }\n  68% {\n    transform: scaleY(0.98) scaleX(1.02);\n  }\n  80% {\n    transform: scaleY(1.02) scaleX(0.98);\n  }\n  97%, 100% {\n    transform: scale(1);\n  }\n}\n\n.cs-sidebar {\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.cs-sidebar--left {\n  background-color: #fff;\n}\n.cs-sidebar--right {\n  background-color: #fff;\n}\n.cs-sidebar .cs-expansion-panel + .cs-expansion-panel {\n  border-top: 0;\n}\n\n.cs-expansion-panel {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n  border: solid 1px #d1dbe3;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  font-weight: normal;\n  font-size: inherit;\n  font-variant: normal;\n}\n.cs-expansion-panel__header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  color: rgba(0, 0, 0, 0.6);\n  background-color: #f6fbff;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  font-weight: bold;\n  font-size: 0.75em;\n  font-variant: normal;\n  user-select: none;\n  padding: 0.8em 0.8em;\n  align-items: center;\n  user-select: none;\n  cursor: pointer;\n}\n.cs-expansion-panel__header:hover {\n  color: rgba(0, 0, 0, 0.6);\n  background-color: #f3f8fc;\n}\n.cs-expansion-panel__title {\n  box-sizing: border-box;\n  flex-grow: 1;\n}\n.cs-expansion-panel__icon {\n  box-sizing: border-box;\n  margin-left: 1em;\n  margin-right: 0.5em;\n}\n.cs-expansion-panel__content {\n  display: none;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;\n  font-weight: normal;\n  font-size: 0.8em;\n  font-variant: normal;\n  padding: 0.4em 0.8em;\n}\n.cs-expansion-panel--open .cs-expansion-panel__content {\n  display: block;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n}\n.cs-expansion-panel--closed .cs-expansion-panel__content {\n  display: none;\n}\n.cs-expansion-panel--open .cs-expansion-panel__header {\n  color: rgba(0, 0, 0, 0.6);\n  background-color: #f6fbff;\n}\n.cs-search {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  margin: 0;\n  padding: 0;\n  background-color: #c6e3fa;\n  align-items: center;\n  position: relative;\n  border-radius: 0.7em;\n  padding: 0.6em 0.9em;\n  font-size: inherit;\n  font-family: inherit;\n}\n.cs-search__input {\n  box-sizing: border-box;\n  order: 1;\n  color: rgba(0, 0, 0, 0.87);\n  border: none;\n  width: 100%;\n  min-width: 0;\n  outline: 0;\n  margin-right: 0.5em;\n  background-color: #c6e3fa;\n  font-size: 0.8em;\n  font-family: inherit;\n}\n.cs-search__input:disabled {\n  color: rgba(0, 0, 0, 0.38);\n  background-color: #c6e3fa;\n}\n.cs-search__input::placeholder {\n  color: rgba(0, 0, 0, 0.87);\n}\n.cs-search__search-icon {\n  box-sizing: border-box;\n  order: 0;\n  display: block;\n  margin-right: 0.5em;\n  color: #6ea9d7;\n}\n.cs-search__clear-icon {\n  box-sizing: border-box;\n  order: 2;\n  color: #6ea9d7;\n  visibility: hidden;\n}\n.cs-search__clear-icon:hover {\n  color: rgba(110, 169, 215, 0.6);\n  cursor: pointer;\n}\n.cs-search__clear-icon--active {\n  visibility: visible;\n}\n.cs-search--disabled {\n  opacity: 0.38;\n  color: rgba(0, 0, 0, 0.38);\n  background-color: #c6e3fa;\n}\n\n.cs-button {\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  color: #6ea9d7;\n  background-color: transparent;\n  border: none;\n  border-radius: 0.7em;\n  margin: 0.1em 0.2em;\n  padding: 0.2em 0.7em;\n  outline: none;\n  font-size: 1em;\n  line-height: 1.5;\n}\n.cs-button:focus {\n  outline: none;\n}\n.cs-button:disabled {\n  opacity: 0.38;\n}\n.cs-button:not(:disabled) {\n  cursor: pointer;\n}\n.cs-button.cs-button--border {\n  border: solid 1px #d1dbe3;\n}\n.cs-button:hover:not(:disabled) {\n  opacity: 0.6;\n}\n.cs-button.cs-button--right > svg[data-icon]:first-child {\n  margin-right: 0.5em;\n}\n.cs-button.cs-button--left > svg[data-icon]:last-child {\n  margin-left: 0.5em;\n}\n.cs-button--adduser {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--arrow {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--ellipsis {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--info {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--star {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--videocall {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--voicecall {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--send {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n.cs-button--attachment {\n  color: #6ea9d7;\n  background-color: transparent;\n}\n\n.cs-loader {\n  box-sizing: border-box;\n  display: inline-flex;\n  position: relative;\n  font-size: 1em;\n  width: 1.8em;\n  height: 1.8em;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: transparent;\n}\n.cs-loader::before, .cs-loader::after {\n  box-sizing: border-box;\n  display: block;\n  width: 1.8em;\n  height: 1.8em;\n  margin: 0 0 0 -0.9em;\n}\n.cs-loader::before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 50%;\n  border-radius: 50%;\n  border-color: #c6e3fa;\n  border-style: solid;\n  border-width: 0.2em;\n}\n.cs-loader::after {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 50%;\n  animation: loader-default 0.6s linear;\n  animation-iteration-count: infinite;\n  border-radius: 50%;\n  border-color: #6ea9d7 transparent transparent transparent;\n  border-style: solid;\n  border-width: 0.2em;\n  box-shadow: 0 0 0 transparent;\n}\n.cs-loader--content {\n  width: auto;\n  height: auto;\n  padding-top: 2.6em;\n}\n@keyframes loader-default {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.cs-overlay {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  backdrop-filter: blur(10%);\n}\n.cs-overlay__content {\n  z-index: 220;\n}\n.cs-overlay::before {\n  box-sizing: border-box;\n  content: \"\";\n  background-color: rgba(198, 227, 250, 0.38);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 200;\n}\n.cs-overlay--blur::before {\n  backdrop-filter: blur(2px);\n}\n.cs-overlay--grayscale::before {\n  backdrop-filter: grayscale(50%);\n}\n\n.cs-status-list {\n  box-sizing: border-box;\n  list-style-type: none;\n  margin: 0;\n  padding: 1em;\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #fff;\n}\n.cs-status-list > li {\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n}\n.cs-status-list > li > .cs-status {\n  margin: 0;\n  padding: 0.4em 0.8em;\n  width: auto;\n  height: auto;\n}\n.cs-status-list > li .cs-status--selected {\n  color: #2b6a9b;\n  background-color: #d5e7f5;\n}\n.cs-status-list > li .cs-status--selected .cs-status__name {\n  color: #2b6a9b;\n  background-color: #d5e7f5;\n}\n.cs-status-list > li:hover {\n  color: rgba(0, 0, 0, 0.6);\n  background-color: #f3f8fc;\n}\n.cs-status-list > li:focus {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #d5e7f5;\n}\n.cs-status-list > li:active {\n  color: rgba(0, 0, 0, 0.87);\n  background-color: #d5e7f5;\n}\n.cs-status-list--xs > li > .cs-status {\n  font-size: 1em;\n  width: auto;\n  height: auto;\n}\n.cs-status-list--xs > li > .cs-status .cs-status__bullet {\n  width: 4px;\n  min-width: 4px;\n  height: 4px;\n}\n.cs-status-list--sm > li > .cs-status {\n  font-size: 1em;\n  width: auto;\n  height: auto;\n}\n.cs-status-list--sm > li > .cs-status .cs-status__bullet {\n  width: 8px;\n  min-width: 8px;\n  height: 8px;\n}\n.cs-status-list--md > li > .cs-status {\n  font-size: 1em;\n  width: auto;\n  height: auto;\n}\n.cs-status-list--md > li > .cs-status .cs-status__bullet {\n  width: 11px;\n  min-width: 11px;\n  height: 11px;\n}\n.cs-status-list--lg > li > .cs-status {\n  font-size: 1em;\n  width: auto;\n  height: auto;\n}\n.cs-status-list--lg > li > .cs-status .cs-status__bullet {\n  width: 14px;\n  min-width: 14px;\n  height: 14px;\n}\n\n.ps {\n  overflow: hidden !important;\n  overflow-anchor: none;\n  -ms-overflow-style: none;\n  touch-action: auto;\n  -ms-touch-action: auto;\n}\n\n.ps__rail-x {\n  display: none;\n  opacity: 0;\n  transition: background-color 0.2s linear, opacity 0.2s linear;\n  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;\n  height: 15px;\n  bottom: 0px;\n  position: absolute;\n}\n\n.ps__rail-y {\n  display: none;\n  opacity: 0;\n  transition: background-color 0.2s linear, opacity 0.2s linear;\n  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;\n  width: 15px;\n  right: 0;\n  left: auto !important;\n  position: absolute;\n}\n\n.ps--active-x > .ps__rail-x,\n.ps--active-y > .ps__rail-y {\n  display: block;\n  background-color: transparent;\n}\n\n.ps:hover > .ps__rail-x,\n.ps:hover > .ps__rail-y,\n.ps--focus > .ps__rail-x,\n.ps--focus > .ps__rail-y,\n.ps--scrolling-x > .ps__rail-x,\n.ps--scrolling-y > .ps__rail-y {\n  opacity: 0.6;\n}\n\n.ps .ps__rail-x:hover,\n.ps .ps__rail-y:hover,\n.ps .ps__rail-x:focus,\n.ps .ps__rail-y:focus,\n.ps .ps__rail-x.ps--clicking,\n.ps .ps__rail-y.ps--clicking {\n  background-color: #eee;\n  background-color: #f6fbff;\n  opacity: 0.9;\n}\n\n.ps__thumb-x {\n  background-color: #6ea9d7;\n  border-radius: 6px;\n  transition: background-color 0.2s linear, height 0.2s ease-in-out;\n  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;\n  height: 6px;\n  bottom: 2px;\n  position: absolute;\n}\n\n.ps__thumb-y {\n  background-color: #c6e3fa;\n  border-radius: 6px;\n  transition: background-color 0.2s linear, width 0.2s ease-in-out;\n  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;\n  width: 6px;\n  right: 2px;\n  position: absolute;\n}\n\n.ps__rail-x:hover > .ps__thumb-x,\n.ps__rail-x:focus > .ps__thumb-x,\n.ps__rail-x.ps--clicking .ps__thumb-x {\n  background-color: #c6e3fa;\n  height: 11px;\n}\n\n.ps__rail-y:hover > .ps__thumb-y,\n.ps__rail-y:focus > .ps__thumb-y,\n.ps__rail-y.ps--clicking .ps__thumb-y {\n  background-color: #c6e3fa;\n  width: 11px;\n}\n\n@supports (-ms-overflow-style: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n.scrollbar-container {\n  position: relative;\n  height: 100%;\n}\n\n/*# sourceMappingURL=styles.css.map */","@import \"../variables\";\n\n$_message-avatar-justify-content: flex-end;\n\n// How far message avatar should be postponed from message (and message from avatar for outgoing)\n$_message-avatar-offset: $message-avatar-width + $message-avatar-horizontal-margin;\n\n\n.#{$prefix}-message {\n  // Local alias\n  $message-class: &;\n\n  box-sizing: border-box;\n  font-size: $message-font-size;\n  font-family: $message-font-family;\n  color: $message-color;\n  display: flex;\n  flex-direction: row;\n  padding: 0;\n  background-color: $message-bg-color;\n  overflow: hidden;\n\n  border-radius: $message-border-radius;\n  \n  &:only-child {\n    margin: $message-only-child-margin;\n  }\n  \n  &:not(:only-child) {\n    margin: $message-not-only-child-margin;\n  }\n\n  &__avatar {\n    box-sizing: border-box;\n    margin: $message-avatar-margin;\n    display: flex;\n    flex-direction: column;\n    justify-content: $_message-avatar-justify-content;\n    width: $message-avatar-width;\n  }\n  \n  &__content-wrapper {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__header {\n    box-sizing: border-box;\n    color: $message-header-color;\n    background-color: $message-header-bg-color;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    font-size: 0.8em;\n    margin: $message-header-margin;\n\n    #{$message-class}__sender-name {\n      box-sizing: border-box;\n      color: $message-sender-name-color;\n      background-color: $message-sender-name-bg-color;\n    }\n\n    #{$message-class}__sent-time {\n      box-sizing: border-box;\n      color: $message-sent-time-color;\n      background-color: $message-sent-time-bg-color;\n      margin-left: auto;\n      padding-left: 0.8em;\n    }\n    \n  }\n\n  &__footer {\n    box-sizing: border-box;\n    color: $message-footer-color;\n    background-color: $message-footer-bg-color;\n    display: flex;\n    font-size: 0.8em;\n    margin: $message-footer-margin;\n\n    #{$message-class}__sender-name {\n      box-sizing: border-box;\n      color: $message-sender-name-color;\n      background-color: $message-sender-name-bg-color;\n    }\n\n    #{$message-class}__sent-time {\n      box-sizing: border-box;\n      color: $message-sent-time-color;\n      background-color: $message-sent-time-bg-color;\n      margin-left: auto;\n      padding-left: 0.8em;\n    }\n    \n  }\n  \n  &__content {\n    box-sizing: border-box;\n    color: $message-content-color;\n    background-color: $message-content-bg-color;\n    margin-top: $message-content-margin-top;\n    padding: 0.6em 0.9em;\n    border-radius: $message-content-border-radius;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    word-break: break-word; // break-word value is deprecated, but it's necessary for Safari\n    font-family: $message-content-font-family;\n    font-weight: $message-content-font-weight;\n    font-size: $message-content-font-size;\n    font-variant: $message-content-font-variant;\n  }\n\n  // Modifier: Incoming message\n  &--incoming {\n    color: $message-incoming-color;\n    background-color: $message-incoming-bg-color;\n    margin-right: auto;\n\n    & #{$message-class}__avatar {\n      margin: $message-incoming-avatar-margin;\n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-sender-name {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    // Incoming message content\n    & #{$message-class}__content {\n      color: $message-content-incoming-color;\n      background-color: $message-content-incoming-bg-color;\n      border-radius: $message-incoming-content-border-radius;\n    }\n  }\n\n  // Modifier: Outgoing message\n  &--outgoing {\n    color: $message-outgoing-color;\n    background-color: $message-outgoing-bg-color;\n    margin-left: auto;\n    justify-content: flex-end;\n\n    & #{$message-class}__avatar {\n      order: 1;\n      margin: $message-outgoing-avatar-margin;\n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-sender-name {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    // Outgoing message content\n    & #{$message-class}__content {\n      color: $message-content-outgoing-color;\n      background-color: $message-content-outgoing-bg-color;\n      border-radius: $message-outgoing-content-border-radius;\n    }\n  }\n\n  // Modifier: Single incoming message\n  &#{$message-class}--incoming#{$message-class}--single {\n    border-radius: $message-incoming-single-border-radius;\n\n    // Top margin for monologue (only when its not first message in conversation)\n    &:not(:first-child) {\n      margin-top: $message-monologue-margin-top;\n    }\n\n    & #{$message-class}__avatar {\n\n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-single-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-single-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-incoming-content-single-border-radius;\n    }\n  }\n\n  // Modifier: First incoming message\n  &#{$message-class}--incoming#{$message-class}--first {\n    border-radius: $message-incoming-first-border-radius;\n\n    // Top margin for monologue (only when its not first message in conversation)\n    &:not(:first-child) {\n      margin-top: $message-monologue-margin-top;\n    }\n    \n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-first-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-first-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-incoming-content-first-border-radius;\n      background-color: $message-content-incoming-bg-color;\n    }\n  }\n\n  // Modifier: Last incoming message\n  &#{$message-class}--incoming#{$message-class}--last {\n    border-radius: $message-incoming-last-border-radius;\n\n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-incoming-last-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-incoming-last-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-incoming-content-last-border-radius;\n    }\n  }\n\n  // Modifier: Single outgoing message\n  &#{$message-class}--outgoing#{$message-class}--single {\n    border-radius: $message-outgoing-single-border-radius;\n\n    // Top margin for monologue (only when its not first message in conversation)\n    &:not(:first-child) {\n      margin-top: $message-monologue-margin-top;\n    }\n\n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-single-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-single-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-outgoing-content-single-border-radius;\n    }\n  }\n\n  // Modifier: First outgoing message\n  &#{$message-class}--outgoing#{$message-class}--first {\n    border-radius: $message-outgoing-first-border-radius;\n    \n    margin-top: $message-monologue-margin-top;\n    \n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-first-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-first-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-outgoing-content-first-border-radius;\n      background-color: $message-content-outgoing-bg-color;\n    }\n  }\n\n  // Modifier: Last outgoing message\n  &#{$message-class}--outgoing#{$message-class}--last {\n    border-radius: $message-outgoing-last-border-radius;\n\n    & #{$message-class}__avatar {\n      \n    }\n\n    & #{$message-class}__content-wrapper {\n    }\n\n    & #{$message-class}__sender-name {\n      @if $show-message-outgoing-last-sender-name {\n        display: block;\n      }\n    }\n\n    & #{$message-class}__sent-time {\n      @if $show-message-outgoing-last-sent-time {\n        display: block;\n      } @else {\n        display: none;\n      }\n    }\n\n    #{$message-class}__content {\n      border-radius: $message-outgoing-content-last-border-radius;\n    }\n  }\n  \n  // Free space instead of avatar\n  &--incoming#{$message-class}--avatar-spacer {\n    margin-left: $_message-avatar-offset;\n  }\n\n  &--outgoing#{$message-class}--avatar-spacer {\n    margin-right: $_message-avatar-offset;\n  }\n  \n  // Avatar position\n  // By default incoming and default message has avatar on left and outoging has avatar on right.\n  // This can be changed by adding --avatar-left or avatar-right modifier\n  &--avatar-tl {\n\n    #{$message-class}__avatar {\n      justify-content:flex-start;\n      order:0;\n      margin-right: $message-avatar-horizontal-margin;\n      margin-left:0;\n    }\n    \n    #{$message-class}__message-wrapper {\n      order:1;\n    }\n\n  }\n\n  &--avatar-tr {\n    #{$message-class}__avatar {\n      justify-content:flex-start;\n      order:1;\n      margin-left: $message-avatar-horizontal-margin;\n      margin-right:0;\n    }\n    #{$message-class}__message-wrapper {\n      order:0;\n    }\n  }\n\n  &--avatar-br {\n\n    #{$message-class}__avatar {\n      justify-content:flex-end;\n      order:1;\n      margin-left: $message-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:0;\n    }\n\n  }\n\n  &--avatar-bl {\n\n    #{$message-class}__avatar {\n      justify-content:flex-end;\n      order:0;\n      margin-right: $message-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:1;\n    }\n\n  }\n\n  &--avatar-cl {\n\n    #{$message-class}__avatar {\n      justify-content:center;\n      order:0;\n      margin-right: $message-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:1;\n    }\n\n  }\n\n  &--avatar-cr {\n\n    #{$message-class}__avatar {\n      justify-content:center;\n      order:1;\n      margin-left: $message-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$message-class}__message-wrapper {\n      order:0;\n    }\n\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n\n// Positions\n$_message-group-avatar-justify-content: flex-end;\n\n/********** Styles **********/\n.#{$prefix}-message-group {\n  \n  // Local alias\n  $group-class: &;\n  $message-class: #{$prefix}-message;\n  $avatar-class: #{$prefix}-avatar;\n\n  box-sizing: border-box;\n  @include flex-row;\n  margin: $message-group-margin;\n  \n  &__avatar {\n    box-sizing: border-box;\n    @include flex-column;\n    justify-content: $_message-group-avatar-justify-content;\n  }\n  \n  // Container for header, message and footer\n  &__content {\n    box-sizing: border-box;\n    @include flex-column;\n  }\n  \n  &__header {\n    box-sizing: border-box;\n    display:flex;\n    font-size: $message-group-header-font-size;\n    font-family: $message-group-header-font-family;\n    color: $message-group-header-color;\n    background-color: $message-group-header-bg-color;\n    margin: $message-group-header-margin;\n    padding: $message-group-header-padding;\n  }\n  \n  &__footer {\n    box-sizing: border-box;\n    display:flex;\n    font-size: $message-group-footer-font-size;\n    font-family: $message-group-footer-font-family;\n    color: $message-group-footer-color;\n    background-color: $message-group-footer-bg-color;\n    margin: $message-group-footer-margin;\n    padding: $message-group-footer-padding;\n  }\n  \n  &__messages {\n    box-sizing: border-box;\n    // First message in group\n    .#{$prefix}-message:first-child {\n      margin-top:0;\n    }\n\n    // Every message in group\n    .#{$prefix}-message {\n      .#{$message-class}__content {\n        background-color: $message-group-message-content-bg-color;\n        margin-top:0;\n      }\n    }\n    \n    // Last message in group\n    .#{$prefix}-message:last-child {\n\n    }\n\n  }\n  \n  // Modifier - group of incoming messages\n  &--incoming {\n    justify-content: flex-start;\n\n    & #{$group-class}__avatar {\n      margin-right: 8px;\n      order: 0;\n    }\n    \n    & #{$group-class}__content {\n      order:1;\n    }\n    \n    & #{$group-class}__messages {\n      \n      // First message in incoming group\n      & .#{$message-class}:first-child .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-first-border-radius;\n      }\n\n      // Message in incoming group\n      & .#{$message-class} .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-border-radius;\n        color: $message-group-message-content-incoming-color;\n        background-color: $message-group-message-content-incoming-bg-color;\n      }\n      \n      // Last message in incoming group\n      & .#{$message-class}:last-child .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-last-border-radius;\n      }\n\n      // Single message in incoming group\n      // !!! only-child must be placed after last-child\n      .#{$prefix}-message:only-child .#{$message-class}__content {\n        border-radius: $message-group-incoming-message-content-single-border-radius;\n      }\n      \n    }\n    \n  }\n\n  // Modifier - group of outgoing messages\n  &--outgoing  {\n    justify-content: flex-end;\n    margin-left: auto;\n    \n    & #{$group-class}__avatar {\n      margin-left: 8px;\n      order: 1;\n    }\n\n    & #{$group-class}__content {\n      order:0;\n    }\n\n    & #{$group-class}__messages {\n\n      & .#{$message-class} {\n        justify-content: flex-end;\n      }\n      \n      // First message in outgoing group\n      & .#{$message-class}:first-child .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-first-border-radius;\n      }\n\n      // Message in outgoing group\n      & .#{$message-class} .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-border-radius;\n        color: $message-group-message-content-outgoing-color;\n        background-color: $message-group-message-content-outgoing-bg-color;\n      }\n\n      // Last message in outgoing group\n      & .#{$message-class}:last-child .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-last-border-radius;\n      }\n\n      // Single message in outgoing group\n      // !!! only-child must be placed after last-child\n      .#{$prefix}-message:only-child .#{$message-class}__content {\n        border-radius: $message-group-outgoing-message-content-single-border-radius;\n      }\n\n    }\n  }\n  \n  // Avatar position\n  // By default incoming and default message has avatar on left and outgoing has avatar on right.\n  // This can be changed by adding --avatar-left or avatar-right modifier\n  &--avatar-tl {\n    \n    #{$group-class}__avatar {\n      justify-content: flex-start;\n      order:0;\n      margin-right: $message-group-avatar-horizontal-margin;\n      margin-left:0;\n    }\n    \n    #{$group-class}__content {\n      order:1;\n    }\n  }\n\n  &--avatar-tr {\n    #{$group-class}__avatar {\n      justify-content: flex-start;\n      order:1;\n      margin-left: $message-group-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$group-class}__content {\n      order:0;\n    }\n  }\n\n  &--avatar-bl {\n    #{$group-class}__avatar {\n      justify-content: flex-end;\n      order:0;\n      margin-right: $message-group-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$group-class}__content {\n      order:1;\n    }\n  }\n\n  &--avatar-br {\n    #{$group-class}__avatar {\n      justify-content: flex-end;\n      order:1;\n      margin-left: $message-group-avatar-horizontal-margin;\n      margin-right:0;\n    }\n    \n    #{$group-class}__content {\n      order:0;\n    }\n  }\n\n  &--avatar-cl {\n    \n    #{$group-class}__avatar {\n      justify-content: center;\n      order:0;\n      margin-right: $message-group-avatar-horizontal-margin;\n      margin-left:0;\n    }\n\n    #{$group-class}__content {\n      order:1;\n    }\n  }\n\n  &--avatar-cr {\n    #{$group-class}__avatar {\n      justify-content: center;\n      order:1;\n      margin-left: $message-group-avatar-horizontal-margin;\n      margin-right:0;\n    }\n\n    #{$group-class}__content {\n      order:0;\n    }\n  }\n  \n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-message-separator {\n  box-sizing: border-box;\n  color: $message-separator-color;\n  background-color: $message-separator-bg-color;\n  font-size: $message-separator-font-size;\n  font-family: $message-separator-font-family;\n  text-align: center;\n  @include flex-row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  \n  &::before,\n  &::after {\n    box-sizing: border-box;\n    content: \"\";\n    background-color: $message-separator-color;\n    display: block;\n    flex-grow: 1;\n    height: 1px;\n  }\n  \n  &:not(:empty)::before {\n    margin: $message-separator-left-line-margin;\n  }\n\n  &:not(:empty)::after {\n    margin: $message-separator-right-line-margin;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-message-list {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  min-height: 1em + (1em * 0.25); // Place for typing indicator\n  position: relative;\n  color: $message-list-color;\n  background-color: $message-list-bg-color;\n\n  &__scroll-wrapper {\n    box-sizing: border-box;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    /*overflow-y: scroll*/; // TODO: Uncomment this when not using fancy scroll\n    padding: $message-list-scroll-wrapper-padding;\n  }\n\n  // Scroll-to point for sticky scroll\n  &__scroll-to:first-child {\n    box-sizing: border-box;\n    float: left;\n    clear: both;\n    height: 0;\n  }\n\n  // Last message must have place for typing indicator when scrolled down to be able to read last message\n  // TODO: If fancy scroll is not used it should be nth-last-child(2).\n  //  Value 4 is set because PerfectScrollbar ads two divs at the end of container \n  &__scroll-wrapper > .#{$prefix}-message:nth-last-child(4) {\n    margin-bottom: 1.4em + (1em * 0.25) + 1em;\n  }\n\n  &__scroll-wrapper > .#{$prefix}-message-group:nth-last-child(4) {\n    margin-bottom: 1.4em + (1em * 0.25) + 1em;\n  }\n  \n  // Typing indicator (when exists)\n  & .#{$prefix}-typing-indicator {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    // !!!! TODO: set to 20px when not using fancy scroll\n    right: 15px; \n    background-color: $message-list-typing-indicator-bg-color;\n    padding: 0.5em 0.5em;\n    font-size: 0.9em;\n    height: 1em + (1em * 0.25);\n    line-height: 1em + (1em * 0.25);\n  }\n  \n  // Because message in group cant have max-width, only if its direct child of list\n  &__scroll-wrapper > .#{$prefix}-message,\n  &__scroll-wrapper > .#{$prefix}-message-group\n  {\n    max-width: 85%;\n  }\n\n  & .#{$prefix}-message.#{$prefix}-message--incoming,\n  & .#{$prefix}-message-group.#{$prefix}-message-group--incoming,\n  {\n    margin-right: auto;\n  }\n  \n  & .#{$prefix}-message.#{$prefix}-message--outgoing,\n  & .#{$prefix}-message-group.#{$prefix}-message-group--outgoing,\n  {\n    margin-left: auto;\n  }\n\n  & .#{$prefix}-message-separator:not(:first-child) {\n    margin-top: $message-list-message-separator-margin-top;\n  }\n\n  &__loading-more {\n    box-sizing: content-box;\n    @include flex-row;\n    justify-content: center;\n    position:absolute;\n    background-color: $message-list-loading-more-bg-color;\n    padding: $message-list-loading-more-padding;\n    top:0;\n    left:0;\n    right:0;\n    height: $message-list-loading-more-height;\n    z-index: 1;\n\n    .#{$prefix}-loader {\n      width:$message-list-loading-more-height;\n      height:$message-list-loading-more-height;\n    }\n    .#{$prefix}-loader::before,\n    .#{$prefix}-loader::after\n    {\n      width:100%;\n      height:100%;\n    }\n    \n    &--bottom {\n      top:initial;\n      bottom:0;\n    }\n    \n  }\n  \n  // Perfect scrollbar fix to hide loading more indicator\n  .ps__rail-y {\n    z-index:2;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-avatar {\n  \n  $avatar-class: &;\n  \n  position: relative;\n  width: $avatar-md-width;\n  height: $avatar-md-width;\n  border-radius: 50%;\n  box-sizing: border-box;\n  \n  & > img {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n  }\n\n  &:hover {\n    > img {\n      filter: brightness(115%);\n    }\n  }\n\n  &#{&}--xs {\n    width: $avatar-xs-width;\n    height: $avatar-xs-width;\n    min-width: $avatar-xs-width;;\n    min-height: $avatar-xs-width;\n  }\n\n  &#{&}--sm {\n    width: $avatar-sm-width;\n    height: $avatar-sm-width;\n    min-width: $avatar-sm-width;;\n    min-height: $avatar-sm-width;\n  }\n  \n  &#{&}--md\n  {\n    width: $avatar-md-width;\n    height: $avatar-md-width;\n    min-width: $avatar-md-width;;\n    min-height: $avatar-md-width;\n  }\n\n  &#{&}--lg {\n    width: $avatar-lg-width;\n    height: $avatar-lg-width;\n    min-width: $avatar-lg-width;;\n    min-height: $avatar-lg-width;\n  }\n  \n    &#{&}--fluid {\n    width: $avatar-fluid-width;\n    height: $avatar-fluid-width;\n    .#{$prefix}-status {\n      right: 5%;\n      width: 22%;\n      height: 22%\n    }\n  }\n  \n  // Status position and size\n  & .#{$prefix}-status {\n    box-sizing: border-box;\n    position: absolute;\n    right:-1px;\n    bottom: 3%;\n    \n    &__bullet  {\n      box-sizing: content-box;\n      border: solid 2px #fff;\n    }\n\n    $status-class: #{$prefix}-status;\n    $bullet-class: #{$prefix}-status__bullet;\n    \n    &--xs,\n    &--xs:not(.#{$status-class}--named) {\n      \n      @include status-size(\"xs\", 1);\n      right: 0;\n      bottom: 0;\n      \n    }\n\n    &--sm,\n    &--sm:not(.#{$status-class}--named) {\n      \n      @include status-size(\"sm\", 2);\n      \n      right: -3px;\n      bottom: -1px;\n    }\n    \n    &--md,\n    &--md:not(.#{$status-class}--named) {\n      @include status-size(\"md\", 2);\n    }\n\n    &--lg,  \n    &--lg:not(.#{$status-class}--named) {\n\n      @include status-size(\"lg\", 2);\n      bottom:4%;\n      \n    }\n    \n  }\n  \n  &#{$avatar-class}--active {\n    \n  }\n}\n","@import \"../variables\";\n\n$avatar-width-short-factor: 0.618;\n\n.#{$prefix}-avatar-group {\n  $class-name: &;\n  \n  @include flex-row-reverse;\n  overflow:visible;\n  position:relative;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  min-width: $avatar-group-md-min-width;\n  align-content: flex-start;\n  justify-content: flex-end;\n  \n  .#{$prefix}-avatar--active {\n    z-index:1;\n  }\n\n  .#{$prefix}-avatar--active-on-hover:hover {\n    z-index:2;\n  }\n  \n  &--xs {\n    \n    $xs-padding: $avatar-xs-width - $avatar-xs-width * $avatar-width-short-factor;\n    padding-left: $xs-padding;\n    padding-top: $xs-padding;\n    \n      .#{$prefix}-avatar {\n        margin-top: - $xs-padding;\n        margin-left:- $xs-padding;\n        width: $avatar-xs-width;\n        height: $avatar-xs-width;\n        min-width: $avatar-xs-width;\n        min-height: $avatar-xs-width;\n        border: none;\n        border-right: 1px solid rgb(242, 242, 242);\n      }\n    \n  }\n  \n  &--sm {\n    \n    $sm-padding: $avatar-sm-width - $avatar-sm-width * $avatar-width-short-factor;\n    padding-left: $sm-padding;\n    padding-top: $sm-padding;     \n    \n      .#{$prefix}-avatar {\n        margin-top: - $sm-padding;\n        margin-left:- $sm-padding;\n        width: $avatar-sm-width;\n        height: $avatar-sm-width;\n        min-width: $avatar-sm-width;\n        min-height: $avatar-sm-width;\n      }\n  }\n\n  &--md {\n    \n    $md-padding: $avatar-md-width - $avatar-md-width * $avatar-width-short-factor;\n    padding-left: $md-padding;\n    padding-top: $md-padding;\n    \n      .#{$prefix}-avatar {\n        margin-top: - $md-padding;\n        margin-left:- $md-padding;\n        width: $avatar-md-width;\n        height: $avatar-md-width;\n        min-width: $avatar-md-width;\n        min-height: $avatar-md-width;\n        border: 2px solid rgb(242, 242, 242);\n      }\n        \n  }\n  \n  &--lg {\n    \n    $lg-padding:  $avatar-lg-width - $avatar-lg-width * $avatar-width-short-factor;\n    padding-left: $lg-padding;\n    padding-top: $lg-padding;\n    \n    .#{$prefix}-avatar {\n      margin-top: - $lg-padding;\n      margin-left:- $lg-padding;\n      width: $avatar-lg-width;\n      height: $avatar-lg-width;\n      min-width: $avatar-lg-width;\n      min-height: $avatar-lg-width;\n      border: 2px solid rgb(242, 242, 242);\n    }\n    \n  }\n  \n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n// Overflows\n$_message-input-overflow: visible;\n$_message-input-content-editor-overflow: visible;\n\n// Don to override this value (no !default)\n$_message-input-content-editor-border-vertical-width: $message-input-content-editor-border-top-width + $message-input-content-editor-border-bottom-width;\n// Don to override this value (no !default)\n$_message-input-content-editor-border-horizontal-width: $message-input-content-editor-border-left-width + $message-input-content-editor-border-right-width;\n\n// Calculated - do not override\n$_message-input-content-editor-padding-vertical: $message-input-content-editor-container-padding-top + $message-input-content-editor-container-padding-bottom;\n$_message-input-content-editor-padding-horizontal: $message-input-content-editor-container-padding-left + $message-input-content-editor-container-padding-right;\n\n// Calculated - do not override\n$_message-input-content-editor-container-min-height: $message-input-content-editor-container-line-height + $_message-input-content-editor-padding-vertical + $_message-input-content-editor-border-vertical-width;\n\n// Calculated - do not override\n$_message-input-content-editor-container-max-height: $message-input-max-lines * $message-input-content-editor-container-line-height + $_message-input-content-editor-padding-vertical + $_message-input-content-editor-border-vertical-width;\n\n.#{$prefix}-message-input {\n\n  // Local alias\n  $message-input-class: &;\n  \n  @include flex-row;\n  position: relative;\n  background-color: $message-input-bg-color;\n  border-top: $message-input-border-top;\n  border-right: $message-input-border-right;\n  border-bottom: $message-input-border-bottom;\n  border-left: $message-input-border-left;\n  box-sizing: border-box;\n  padding: $message-input-padding;\n  overflow: $_message-input-overflow;\n  flex-shrink: 0;\n\n  &__content-editor-wrapper {\n    box-sizing: border-box;  \n    position: relative;\n    background-color: $message-input-content-editor-wrapper-bg-color;\n    margin: $message-input-content-editor-wrapper-margin;\n    padding: $message-input-content-editor-wrapper-padding;\n    border-radius: $message-input-content-editor-wrapper-border-radius;\n    flex-grow:1;\n\n    #{$message-input-class}--disabled & {\n      background-color: $message-input-content-editor-disabled-bg-color;\n      color: $message-input-content-editor-disabled-color;\n    }\n    \n  }\n  \n  &__content-editor-container {\n    box-sizing: border-box;\n    position:relative;\n    background-color: $message-input-content-editor-container-bg-color;\n    @include flex-column;\n    align-items: stretch;\n    overflow:hidden;\n    overflow-y:auto;\n    font-size: $message-input-content-editor-container-font-size;\n    line-height: $message-input-content-editor-container-line-height;\n    min-height: $_message-input-content-editor-container-min-height;\n    max-height: $_message-input-content-editor-container-max-height;\n    padding: $message-input-content-editor-container-padding;\n    scroll-padding: $message-input-content-editor-container-padding-bottom;\n    \n    #{$message-input-class}--disabled & {\n      color: $message-input-content-editor-disabled-color;\n      background-color: transparent;\n    }\n  }\n  \n  &__content-editor {\n    box-sizing: border-box;\n    flex-grow:1;\n    background-color: $message-input-content-editor-bg-color;\n    font-family: $message-input-content-editor-font-family;\n    outline: 0;\n    border-top: $message-input-content-editor-border-top;\n    border-right: $message-input-content-editor-border-right;\n    border-bottom: $message-input-content-editor-border-bottom;\n    border-left: $message-input-content-editor-border-left;\n    overflow: $_message-input-content-editor-overflow;\n    color: $message-input-content-editor-color;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    #{$message-input-class}--disabled & {\n      background-color: transparent; // Because bg color is from parent and we are using alpha\n      color: $message-input-content-editor-disabled-color;\n    }\n    \n  }\n  \n  &__content-editor[data-placeholder]:empty:before {\n    box-sizing: border-box;\n    content: attr(data-placeholder);\n    color: $message-input-placeholder-color;\n    display: block;\n    cursor:text;\n  }\n  \n  &__tools {\n    @include flex-row;\n    box-sizing: border-box;\n    .#{$prefix}-button {\n      font-size:1.2em;\n      margin-top:0;\n      margin-bottom:0;\n    }\n    \n    .#{$prefix}-button--send {\n      align-self: flex-end;\n    }\n\n    .#{$prefix}-button--attachment {\n      align-self: flex-end;\n    }\n    \n  }\n\n  &__tools:first-child {\n    .#{$prefix}-button:first-child {\n      margin-left: 0;\n    }\n    .#{$prefix}-button:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__tools:last-child {\n    .#{$prefix}-button:first-child {\n      margin-left: 0;\n    }\n    .#{$prefix}-button:last-child {\n      margin-right: 0;\n    }\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-input-toolbox {\n  box-sizing: border-box;\n  @include flex-row;\n  justify-content: flex-end;\n  margin: $input-toolbox-margin;\n  padding: $input-toolbox-padding;\n\n  & .#{$prefix}-button {\n    @include reset-button;\n    margin: $input-toolbox-btn-margin;\n    font-size: $input-toolbox-btn-font-size;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-chat-container {\n  box-sizing: border-box;\n  @include flex-column;\n  height: 100%;\n  min-width: $chat-container-min-width; // Required for ellipsis in child elements\n  color: $chat-container-color;\n  background-color: $chat-container-bg-color;\n  \n  & .#{$prefix}-message-input {\n    border-top: $chat-container-message-input-border-top;\n    border-right: $chat-container-message-input-border-right;\n    border-bottom: $chat-container-message-input-border-bottom;\n    border-left: $chat-container-message-input-border-left;\n    \n    //box-shadow: 0px -4px 5px -5px rgba(0, 0, 0, 0.38);\n    margin-top:auto; // Message input and following elements (input toolbox) will be placed at the bottom of the chat-container\n    padding: 0.3em 0 0.3em 0em;\n    color: $chat-container-message-input-color;\n    background-color: $chat-container-message-input-bg-color;\n    \n    & .#{$prefix}-message-input__content-editor-wrapper:first-child {\n      margin-left:0.8em;\n    }\n\n    & .#{$prefix}-message-input__content-editor-wrapper:last-child {\n      margin-right:0.8em;\n    }\n    \n  }\n\n  & .#{$prefix}-input-toolbox {\n    margin: $chat-container-input-toolbox-margin;\n    padding: $chat-container-input-toolbox-padding;\n    color: $chat-container-input-toolbox-color;\n    background-color: $chat-container-input-toolbox-bg-color;\n  }\n  \n}\n\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-typing-indicator {\n  box-sizing: content-box;\n  font-size: $typing-indicator-font-size;\n  font-family: $typing-indicator-font-family;\n  @include flex-row;\n  align-items: stretch;\n  \n  &__indicator {\n    box-sizing: inherit;\n    background-color: $typing-indicator-indicator-bg-color;\n    @include flex-row;\n    align-items: center;\n  }\n\n  &__dot {\n    box-sizing: inherit;\n    animation: #{$prefix}-typing-indicator__typing-animation 1.5s infinite ease-in-out;\n    border-radius: 100%;\n    display: inline-block;\n    height: $typing-indicator-dot-size;\n    width: $typing-indicator-dot-size;\n    background-color: $typing-indicator-dot-bg-color;\n  }\n\n  &__dot:not(:last-child) {\n    margin-right: $typing-indicator-dot-spacing;\n  }\n\n  &__dot:nth-child(1) {\n    box-sizing: inherit;\n  }\n  &__dot:nth-child(2) {\n    animation-delay: 300ms;\n  }\n  &__dot:nth-child(3) {\n    animation-delay: 400ms;\n  }\n\n  &__text {\n    box-sizing: inherit;\n    @include text-truncate;\n    color: $typing-indicator-text-color;\n    background-color: $typing-indicator-text-bg-color;\n    margin: $typing-indicator-text-margin;\n    user-select: none;\n  }\n\n  @keyframes #{$prefix}-typing-indicator__typing-animation {\n    0% {\n      transform: translateY(0px);\n    }\n    28% {\n      transform: translateY(-5px);\n    }\n    44% {\n      transform: translateY(0px);\n    }\n  }\n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-conversation-header {\n  \n  $class-name: &;\n  \n  box-sizing: border-box;\n  color: $conversation-header-color;\n  background-color: $conversation-header-bg-color;\n  font-family: $conversation-header-font-family;\n  font-size: $conversation-header-font-size;\n  flex-shrink: 0;\n  user-select: none;\n  //box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.38);\n  \n  @include flex-row;\n  align-items: stretch;\n  border-top: $conversation-header-border-top;\n  border-right: $conversation-header-border-right;\n  border-bottom: $conversation-header-border-bottom;\n  border-left: $conversation-header-border-left;\n  padding: 0.6em 0.9em;\n\n  &__back {\n    box-sizing: border-box;\n    margin-right:0.5em;\n    @include flex-row;\n    align-items: center;\n    cursor: pointer;\n    order: 1;\n    \n    button {\n      font-size: 1.4em;\n      padding:0;\n    }\n  }\n  \n  &__avatar {\n    box-sizing: border-box;\n    width: $avatar-md-width;\n    height: $avatar-md-width;\n    margin-right: 1em;\n    order: 2;\n\n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-header-bg-color;\n        }\n      }\n    }\n\n    .#{$prefix}-avatar-group {\n      padding-right:0 !important;\n    }\n  }\n\n  &__content {\n    box-sizing: border-box;\n    @include flex-column;\n    order: 3;\n    flex-grow: 2;\n    justify-content: center;\n    min-width: $conversation-header-content-min-width; // Required for ellipsis in child elements\n    \n    #{$class-name}__user-name {\n      box-sizing: border-box;\n      @include text-truncate;\n      font-weight: bold;\n      color: $conversation-header-user-name-color;\n      background-color: $conversation-header-user-name-bg-color;\n    }\n\n    #{$class-name}__info {\n      box-sizing: border-box;\n      @include text-truncate;\n      color: $conversation-header-info-color;\n      background-color: $conversation-header-info-bg-color;\n      font-weight: normal;\n      font-size: 0.9em;\n    }\n    \n  }\n  \n  &__actions {\n    box-sizing: border-box;\n    @include flex-row;\n    align-items: center;\n    color: $conversation-header-actions-color;\n    background-color: $conversation-header-actions-bg-color;\n    margin: $conversation-header-actions-margin;\n    order: 4;\n    .#{$prefix}-button:not(:first-child) {\n      margin-left:0.2em;\n    }\n    \n    .#{$prefix}-button {\n      padding:0;\n    }\n    \n    .#{$prefix}-button.#{$prefix}-button--arrow,\n    .#{$prefix}-button.#{$prefix}-button--info,\n    .#{$prefix}-button.#{$prefix}-button--voicecall,\n    .#{$prefix}-button.#{$prefix}-button--videocall,\n    .#{$prefix}-button.#{$prefix}-button--star,\n    .#{$prefix}-button.#{$prefix}-button--adduser,\n    .#{$prefix}-button.#{$prefix}-button--ellipsis,\n    .#{$prefix}-button.#{$prefix}-button--ellipsis\n    {\n      font-size: 1.4em;\n      color:$conversation-header-action-button-color;\n      background-color: $conversation-header-action-button-bg-color;\n    }\n    .#{$prefix}-button.#{$prefix}-button--ellipsis {\n      font-size: 1.3em;\n    }\n    \n  }\n  \n  \n}\n","@use \"sass:math\";\n@import \"../variables\";\n@import \"../helpers/mixins\";\n@import \"../helpers/functions\";\n\n// Positions\n$_conversation-unread-top: 0.3em;\n$_conversation-unread-right: 0.8em;\n\n.#{$prefix}-conversation {\n\n  $class-name: &;\n  \n  @include flex-row;\n  box-sizing: border-box;\n  position: relative;\n  font-family: $conversation-font-family;\n  padding:  math.div($conversation-unread-font-size,2) + $_conversation-unread-top 0.8em math.div($conversation-unread-font-size,2) + $_conversation-unread-top 0.8em;\n  cursor: pointer;\n  justify-content: flex-start;\n  color: $conversation-color;\n  background-color: $conversation-bg-color;\n  user-select: none;\n  border-top: $conversation-border-top;\n  border-right: $conversation-border-right;\n  border-bottom: $conversation-border-bottom;\n  border-left: $conversation-border-left;\n\n  &:hover {\n    background-color: $conversation-hover-bg-color;\n    \n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-hover-bg-color;\n        }\n      }\n    }\n\n    // Reset avatar brightness on hover\n    & > .#{$prefix}-avatar > img {\n      filter: none;\n    }\n    \n  }\n  \n  &#{&}:active {\n    \n    color: $conversation-active-color;\n    background-color: $conversation-active-bg-color;\n    border-top: $conversation-active-border-top;\n    border-right: $conversation-active-border-right;\n    border-bottom: $conversation-active-border-bottom;\n    border-left: $conversation-active-border-left;\n    \n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-active-bg-color;\n        }\n      }\n    }\n    \n  }\n\n  &#{&}--active {\n    \n    color: $conversation-name-activated-color;\n    background-color: $conversation-activated-bg-color;\n    font-weight: $conversation-activated-font-weight;\n    border-top: $conversation-activated-border-top;\n    border-right: $conversation-activated-border-right;\n    border-bottom: $conversation-activated-border-bottom;\n    border-left: $conversation-activated-border-left;\n    \n    > .#{$prefix}-avatar {\n      > .#{$prefix}-status {\n        > .#{$prefix}-status__bullet {\n          border-color: $conversation-activated-bg-color;\n        }\n      }\n    }\n\n    #{$class-name}__name {\n      color: $conversation-name-activated-color;\n      font-weight: $conversation-name-activated-font-weight;\n    }\n    \n    #{$class-name}__info {\n      color: $conversation-info-activated-color;\n      font-weight: $conversation-info-activated-font-weight;\n    }\n    \n  }\n  \n  > .#{$prefix}-avatar {\n    width: $avatar-md-width + 0.1px;\n    height: $avatar-md-width + 0.1px;\n    margin-right: 1em;\n    \n    > .#{$prefix}-status {\n      \n      border-color: $conversation-bg-color;\n      \n    }\n    \n  }\n\n  > .#{$prefix}-avatar-group {\n    width: $avatar-md-width + 0.1px;\n    height: $avatar-md-width + 0.1px;\n    min-width: $avatar-md-width + 0.1px;\n    min-height: $avatar-md-width + 0.1px;\n    padding-right:0 !important;\n    margin-right: 1em;\n  }\n\n  &__content {\n    box-sizing: border-box;\n    @include flex-column;\n    overflow: hidden;\n    margin-right: 1.1em;\n    flex-grow:1;\n  }\n  \n  &__operations {\n    box-sizing: border-box;\n    @include flex-row;\n    align-items: center;\n    margin: $conversation-operations-margin;\n    color: lighten($color-text, 70);\n    visibility: hidden;\n  }\n\n  &__operations--visible {\n    visibility: visible;\n  }\n  \n  &__operations:hover {\n    color: lighten($color-text, 40);\n  }\n\n  &:hover &__operations {\n    visibility: visible;\n  }\n\n  &__name {\n    box-sizing: border-box;\n    color: $conversation-name-color;\n    font-size: 1em;\n    @include text-truncate;\n  }\n\n  &__info {\n    box-sizing: border-box;\n    color: $conversation-info-color;\n    font-size: 0.8em;\n    @include text-truncate;\n  }\n\n  &__last-sender {\n    box-sizing: border-box;\n    display:inline;\n    font-weight: $conversation-last-sender-name-font-weight;\n  }\n\n  &__info-content {\n    box-sizing: border-box;\n    display:inline;\n    font-weight: $conversation-info-content-font-weight;\n  }\n\n  &__last-activity-time {\n    box-sizing: border-box;\n    margin: $conversation-last-activity-time-margin;\n    font-size: 0.8em;\n    @include flex-row;\n    align-items: center;\n  }\n  \n  &__last-activity-time + &__operations {\n    margin-left:0.5em;\n  }\n  \n  &__unread-dot {\n    box-sizing: content-box;\n    @include flex-row;\n    align-items: center;\n    margin-right: 0.5em;\n    align-self: center;\n\n    border-radius: 50%;\n    width: $conversation-unread-dot-width;\n    min-width: $conversation-unread-dot-width;\n    height: $conversation-unread-dot-width;\n    box-shadow: 1px 1px 1px 0px rgba(179, 179, 179, 1);\n    perspective: 200px;\n    perspective-origin: 50% 50%;\n\n    background: radial-gradient(\n                    circle at 3px 3px,\n                    lighten($conversation-unread-dot-color, 17),\n                    $conversation-unread-dot-color\n    );\n    \n  }\n\n  &__unread-dot {\n    \n    &:hover::before {\n      content: \"\";\n      position: absolute;\n      top: 1%;\n      left: 5%;\n      border-radius: 50%;\n      z-index: 2;\n\n      filter: blur(0);\n      height: 80%;\n      width: 40%;\n      background: radial-gradient(\n                      circle at 130% 130%,\n                      rgba(255, 255, 255, 0) 0,\n                      rgba(255, 255, 255, 0) 46%,\n                      rgba(255, 255, 255, 0.8) 50%,\n                      rgba(255, 255, 255, 0.8) 58%,\n                      rgba(255, 255, 255, 0) 60%,\n                      rgba(255, 255, 255, 0) 100%\n      );\n\n      transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);\n    }\n    \n    &:hover::after {\n      content: \"\";\n      position: absolute;\n      top: 5%;\n      left: 10%;\n      width: 80%;\n      height: 80%;\n      border-radius: 100%;\n      filter: blur(1px);\n      z-index: 2;\n      transform: rotateZ(-30deg);\n\n      display: block;\n      background: radial-gradient(\n                      circle at 50% 80%,\n                      rgba(255, 255, 255, 0),\n                      rgba(255, 255, 255, 0) 74%,\n                      white 80%,\n                      white 84%,\n                      rgba(255, 255, 255, 0) 100%\n      );\n\n\n      animation: #{$prefix}-unread-anim 2s ease-out infinite;\n    }\n    \n  }\n  \n  // Without max width text will not be truncated\n  &__unread {\n    box-sizing: border-box;\n    position: absolute;\n    right: $_conversation-unread-right;\n    top: $_conversation-unread-top;\n    padding: 0.01em 0.3em;\n    border-radius: 0.3em;\n    font-size: $conversation-unread-font-size;\n    font-weight: 600;\n    color: $conversation-unread-color;\n    background-color: $conversation-unread-bg-color;\n    max-width: 40 * $conversation-unread-font-size;\n    @include text-truncate;\n    z-index:100; /* For grouped Avatar */\n    \n  }\n\n  &__unread:hover::before {\n    \n  }\n  \n  @keyframes #{$prefix}-unread-anim {\n    0% {\n      transform: scale(1);\n    }\n    20% {\n      transform: scaleY(0.95) scaleX(1.05);\n    }\n    48% {\n      transform: scaleY(1.1) scaleX(0.9);\n    }\n    68% {\n      transform: scaleY(0.98) scaleX(1.02);\n    }\n    80% {\n      transform: scaleY(1.02) scaleX(0.98);\n    }\n    97%,\n    100% {\n      transform: scale(1);\n    }\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n/********** Colors **********/\n\n/********** Fonts **********/\n\n/********** Styles **********/\n.#{$prefix}-conversation-list {\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  color: $conversation-list-color;\n  background-color: $conversation-list-bg-color;\n\n  & > div > ul {\n    @include reset-list;\n  }\n  \n  &__loading-more {\n    box-sizing: content-box;\n    @include flex-row;\n    justify-content: center;\n    position:absolute;\n    background-color: $conversation-list-loading-more-bg-color;\n    padding: $conversation-list-loading-more-padding;\n    bottom:0;\n    left:0;\n    right:0;\n    height: $conversation-list-loading-more-height;\n    z-index: 1;\n\n    .#{$prefix}-loader {\n      width:$conversation-list-loading-more-height;\n      height:$conversation-list-loading-more-height;\n    }\n    .#{$prefix}-loader::before,\n    .#{$prefix}-loader::after\n    {\n      width:100%;\n      height:100%;\n    }\n\n  }\n\n  // Perfect scrollbar fix to hide loading more indicator\n  .ps__rail-y {\n    z-index:2;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-status {\n\n  box-sizing: border-box;\n  $status-class: &;\n  $bullet-class: #{$status-class}__bullet;\n  $name-class: #{$status-class}__name;\n  \n  position:relative;\n  @include flex-row;\n  align-items: center;\n  flex-wrap: nowrap;\n  font-size: $status-md-fontsize;\n  \n  #{$bullet-class} {\n    box-sizing: content-box;\n    width: $status-md-width;\n    height: $status-md-width;\n    border-radius: 50%;\n    position: relative;\n\n    // Bubble\n    perspective: 200px;\n    perspective-origin: 50% 50%;\n    // End Bubble\n    \n  }\n  \n  &--selected {\n    color: $status-selected-color;\n    background-color: $status-selected-bg-color;\n  }\n  \n  &--named {\n    width: auto;\n    height:auto;\n  }\n  \n  &__name {\n    margin: $status-name-margin;\n    line-height: 1.5;\n  }\n  \n  @at-root .#{$prefix}-avatar:hover #{$bullet-class}:before,\n  &:hover #{$bullet-class}:before {\n    box-sizing: border-box;\n    content: \"\";\n    position: absolute;\n    top: 1%;\n    left: 5%;\n    border-radius: 50%;\n    z-index: 2;\n\n    filter: blur(0);\n    height: 80%;\n    width: 40%;\n    background: radial-gradient(\n                    circle at 130% 130%,\n                    rgba(255, 255, 255, 0) 0,\n                    rgba(255, 255, 255, 0) 46%,\n                    rgba(255, 255, 255, 0.8) 50%,\n                    rgba(255, 255, 255, 0.8) 58%,\n                    rgba(255, 255, 255, 0) 60%,\n                    rgba(255, 255, 255, 0) 100%\n    );\n\n    transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);\n  }\n  \n  @at-root .#{$prefix}-avatar:hover #{$bullet-class}:after, // For hover on parent avatar\n  &:hover #{$bullet-class}:after {\n    box-sizing: border-box;\n    content: \"\";\n    position: absolute;\n    top: 5%;\n    left: 10%;\n    width: 80%;\n    height: 80%;  \n    border-radius: 100%;\n    filter: blur(1px);\n    z-index: 2;\n    transform: rotateZ(-30deg);\n\n    display: block;\n    background: radial-gradient(\n                    circle at 50% 80%,\n                    rgba(255, 255, 255, 0),\n                    rgba(255, 255, 255, 0) 74%,\n                    white 80%,\n                    white 84%,\n                    rgba(255, 255, 255, 0) 100%\n    );\n    \n\n    animation: #{$prefix}-bubble-anim 2s ease-out infinite;\n  }\n  \n  \n  &--available {\n\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-available-color, 10),\n                      $status-available-color\n      );\n    }\n    \n    #{$name-class} {\n      color: $status-available-name-color;\n    }\n    \n  }\n     \n  &--unavailable {\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-unavailable-color, 25),\n                      $status-unavailable-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-unavailable-name-color;\n    }\n    \n  }\n  \n  &--away {\n\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-away-color, 35),\n                      $status-away-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-away-name-color;\n    }\n    \n  }\n  \n  &--dnd {\n\n    #{$bullet-class} {\n      background-color: $status-dnd-color;\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-dnd-color, 30),\n                      $status-dnd-color\n      );\n    }\n    \n    #{$name-class} {\n      color: $status-dnd-name-color;\n    }\n    \n  }\n\n  &--invisible {\n    #{$bullet-class} {\n      background-color: $status-invisible-color;\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-invisible-color, 25),\n                      $status-invisible-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-invisible-name-color;\n    }\n  }\n  \n  // Eager to chat\n  &--eager {\n    #{$bullet-class} {\n      background: radial-gradient(\n                      circle at 3px 3px,\n                      lighten($status-eager-color, 40),\n                      $status-eager-color\n      );\n    }\n\n    #{$name-class} {\n      color: $status-eager-name-color;\n    }\n    \n  }\n  \n  // Sized\n  &--xs:not(&--named) {\n    @include status-size(\"xs\");\n  }\n\n  &--sm:not(&--named) {\n    @include status-size(\"sm\");\n  }\n\n  &--md:not(&--named) {\n    @include status-size(\"md\");\n  }\n\n  &--lg:not(&--named) {\n    @include status-size(\"lg\");\n  }\n\n  &--fluid {\n    width: $status-fluid-width;\n    height: $status-fluid-width;\n    #{$bullet-class} {\n      width: $status-fluid-width;\n      min-width: $status-fluid-width;\n      height: $status-fluid-width;\n    }\n  }\n  \n  @keyframes #{$prefix}-bubble-anim {\n    0% {\n      transform: scale(1);\n    }\n    20% {\n      transform: scaleY(0.95) scaleX(1.05);\n    }\n    48% {\n      transform: scaleY(1.1) scaleX(0.9);\n    }\n    68% {\n      transform: scaleY(0.98) scaleX(1.02);\n    }\n    80% {\n      transform: scaleY(1.02) scaleX(0.98);\n    }\n    97%,\n    100% {\n      transform: scale(1);\n    }\n  }\n    \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n// Sidebar variables\n\n.#{$prefix}-sidebar {\n\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  @include flex-column;\n  \n  \n  // For now left and right modifiers are only for indicate on what side sidebar should be placed inside container\n  &--left {\n    background-color: $sidebar-left-bg-color;\n  }\n  \n  &--right {\n    background-color: $sidebar-right-bg-color;\n  }\n  \n  & .#{$prefix}-expansion-panel + .#{$prefix}-expansion-panel {\n    border-top:0;\n  }\n  \n}\n","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-expansion-panel {\n\n  $panel-class: &;\n  box-sizing: border-box;\n  @include flex-column;\n  color: $expansion-panel-color;\n  background-color: $expansion-panel-bg-color;\n  border: $expansion-panel-border;\n  \n  font-family: $expansion-panel-font-family;\n  font-weight: $expansion-panel-font-weight;\n  font-size: $expansion-panel-font-size;\n  font-variant: $expansion-panel-font-variant;\n  \n  &__header {\n    box-sizing: border-box;\n    @include flex-row;\n    color: $expansion-panel-header-color;\n    background-color: $expansion-panel-header-bg-color;\n    font-family: $expansion-panel-header-font-family;\n    font-weight: $expansion-panel-header-font-weight;\n    font-size: $expansion-panel-header-font-size;\n    font-variant: $expansion-panel-header-font-variant;\n    user-select: none;\n    padding: 0.8em 0.8em;\n    align-items: center;\n    user-select:none;\n    cursor:pointer;\n  }\n\n  &__header:hover {\n    color:$expansion-panel-header-hover-color;\n    background-color: $expansion-panel-header-hover-bg-color;\n  }\n\n  &__title {\n    box-sizing: border-box;\n    flex-grow:1;\n  }\n\n  &__icon {\n    box-sizing: border-box;\n    margin-left:1em;\n    margin-right:0.5em;\n  }\n  \n  &__content {\n    display:none;\n    color: $expansion-panel-content-color;\n    background-color: $expansion-panel-content-bg-color;\n    font-family: $expansion-panel-content-font-family;\n    font-weight: $expansion-panel-content-font-weight;\n    font-size: $expansion-panel-content-font-size;\n    font-variant: $expansion-panel-content-font-variant;\n    padding: 0.4em 0.8em;\n  }\n  \n  &--open &__content {\n    display:block;\n    color: $expansion-panel-content-open-color;\n    background-color:$expansion-panel-content-open-bg-color;\n  }\n\n  &--closed &__content {\n    display:none;\n  }\n  \n  &--open &__header {\n      color: $expansion-panel-header-open-color;\n      background-color:$expansion-panel-header-open-bg-color;\n  }\n  \n  &--closed {\n    \n  }\n  \n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-search {\n\n  box-sizing: border-box;\n  @include flex-row;\n  @include reset-spacing;\n  background-color: $search-bg-color;\n  align-items: center;\n  position: relative;\n  border-radius: $search-border-radius;\n  padding: 0.6em 0.9em;\n  font-size: $search-font-size;\n  font-family: $search-font-family;\n  \n  &__input {\n    box-sizing: border-box;\n    order:1;\n    color: $search-color;\n    border:none;\n    width:100%;\n    min-width: 0; // FF fix\n    outline:0;\n    margin-right:0.5em;\n    background-color:$search-input-bg-color;\n    font-size: $search-input-font-size;\n    font-family: $search-input-font-family;\n  }\n\n  &__input:disabled {\n    color: $search-disabled-color;\n    background-color:$search-input-disabled-bg-color;\n  }\n\n  &__input::placeholder {\n    color: $search-placeholder-color;\n  }\n  \n  &__search-icon {\n    box-sizing: border-box;\n    order:0;\n    display:block;\n    margin-right:0.5em;\n    color: $search-icon-color;\n  }\n\n  &__clear-icon {\n    box-sizing: border-box;\n    &:hover {\n      color: $search-clear-icon-color-hover;\n      cursor: pointer;\n    }\n    order: 2;\n    color: $search-clear-icon-color;\n    visibility:hidden;\n    \n    &--active {\n      visibility: visible;\n    }\n  }\n  \n  &--disabled {\n    opacity: $search-disabled-opacity;\n    color: $search-disabled-color;\n    background-color: $search-disabled-bg-color;\n  }\n  \n}\n","@import \"../variables\";\n\n.#{$prefix}-button {\n  \n  // Local alias\n  $button-class: &;\n\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  color: $button-color;\n  background-color: $button-bg-color;\n  border: none;\n  border-radius: $button-border-radius;\n  margin: $button-margin;\n  padding: $button-padding;\n  outline: none;\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n\n  &:focus {\n    outline:none;\n  }\n  \n  &:disabled {\n    opacity: $button-disabled-opacity;\n  }\n  \n  &:not(:disabled) {\n    cursor:pointer;\n  }\n\n  &#{$button-class}--border {\n    border: $button-border;  \n  }\n  \n  &:hover:not(:disabled) {\n    opacity: $button-hover-opacity;\n  }\n  \n  &#{$button-class}--right {\n    > svg[data-icon]:first-child {\n      margin-right:0.5em;\n    }\n  }\n\n  &#{$button-class}--left {\n    >svg[data-icon]:last-child {\n      margin-left:0.5em;\n    }\n  }\n\n  &--adduser {\n    color: $button-adduser-color;\n    background-color: $button-adduser-bg-color;\n  }\n  \n  &--arrow {\n    color: $button-arrow-color;\n    background-color: $button-arrow-bg-color;\n  }\n\n  &--ellipsis {\n    color: $button-ellipis-color;\n    background-color: $button-ellipis-bg-color;\n  }\n  \n  &--info {\n    color: $button-info-color;\n    background-color: $button-info-bg-color;\n  }\n\n  &--star {\n    color: $button-star-color;\n    background-color: $button-star-bg-color;\n  }\n\n  &--videocall {\n    color: $button-videocall-color;\n    background-color: $button-videocall-bg-color;\n  }\n  \n  &--voicecall {\n    color: $button-voicecall-color;\n    background-color: $button-voicecall-bg-color;\n  }\n\n  &--send {\n    color: $button-send-color;\n    background-color: $button-send-bg-color;\n  }\n\n  &--attachment {\n    color: $button-attachment-color;\n    background-color: $button-attachment-bg-color;\n  }\n  \n}\n\n","@use \"sass:math\";\n@import \"../variables\";\n\n.#{$prefix}-loader {\n  box-sizing: border-box;\n  display:inline-flex;\n  position:relative;\n  font-size:1em;\n  width:$loader-width;\n  height: $loader-height;\n  color: $loader-color;\n  background-color: $loader-bg-color;\n  \n  &::before,\n  &::after {\n    box-sizing: border-box;\n    display:block;\n    width: $loader-width;\n    height: $loader-height;\n    margin: 0 0 0 ( math.div($loader-width, 2) * -1 ); // Center horizontally\n  }\n  \n  // Background circle\n  &::before {\n    position: absolute;\n    content: \"\";\n    top: 0;\n    left: 50%;\n    border-radius:50%;\n    border-color: $loader-spinner-bg-color;\n    border-style: solid;\n    border-width: $loader-border-width;\n    //box-shadow: 0 0 2px $loader-spinner-bg-color;\n  }\n  \n  // Animated \"circle\"\n  &::after {\n    position: absolute;\n    content: \"\";\n    top: 0;\n    left: 50%;\n    animation: loader-default .6s linear;\n    animation-iteration-count: infinite;\n    border-radius: 50%;\n    border-color: $loader-spinner-color  transparent transparent transparent;\n    border-style: solid;\n    border-width: $loader-border-width;\n    box-shadow: 0 0 0 transparent;\n  }\n  \n  &--content {\n    width:auto;\n    height:auto;\n    padding-top: $loader-height + 0.8em;\n  }\n  \n  // Variant or future use\n  &--variant-default {\n    \n  }\n  \n}\n\n@keyframes loader-default {\n  to { transform: rotate(360deg); }\n}\n","@import \"../variables\";\n\n.#{$prefix}-overlay {\n\n  box-sizing: border-box;\n  @include flex-row;\n  justify-content: center;\n  align-items: center;\n  position:absolute;\n  top:0;\n  left:0;\n  right:0;\n  bottom:0;\n  backdrop-filter: blur(10%);\n\n  // Content must be above opacity layer\n  &__content {\n    z-index: 220;\n  }\n  \n  // Opacity layer\n  &::before {\n    box-sizing: border-box;\n    content: \"\";\n    background-color: $overlay-bg-color;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 200;\n  }\n  \n  &--blur::before {\n    backdrop-filter: blur(2px);\n  }\n  \n  &--grayscale::before {\n    backdrop-filter: grayscale(50%);\n  }\n}","@import \"../variables\";\n@import \"../helpers/mixins\";\n\n.#{$prefix}-status-list {\n  \n  $status-class: #{$prefix}-status;\n\n  box-sizing: border-box;\n  list-style-type: none;\n  margin: $status-list-margin;\n  padding: $status-list-padding;\n  color: $status-list-color;\n  background-color: $status-list-bg-color;\n  \n  > li {\n    box-sizing: border-box;\n    cursor:pointer;\n    user-select: none;\n\n    > .#{$status-class} {\n\n      margin: $status-list-item-margin;\n      padding: $status-list-item-padding;\n      width:auto;\n      height:auto;\n\n    }\n\n    .#{$status-class}--selected {\n      color: $status-list-item-selected-color;\n      background-color: $status-list-item-selected-bg-color;\n\n      .#{$status-class}__name {\n        color: $status-list-item-selected-color;\n        background-color: $status-list-item-selected-bg-color;\n      }\n      \n    }\n  \n    &:hover {\n      color: $status-list-item-hover-color;\n      background-color: $status-list-item-hover-bg-color;  \n    }\n    \n    &:focus {\n      color: $status-list-item-focus-color;\n      background-color: $status-list-item-focus-bg-color;\n    }\n    \n    &:active {\n      color: $status-list-item-active-color;\n      background-color: $status-list-item-active-bg-color;\n    }\n  }\n  \n  &--xs {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"xs\", $named: true);\n      }\n    }\n  }\n  \n  &--sm {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"sm\", $named: true);\n      }\n    }\n  }\n\n  &--md {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"md\", $named: true);\n      }\n    }\n  }\n  \n  \n  &--lg {\n    >  li  {\n      > .#{$status-class} {\n        @include status-size(\"lg\", $named: true);\n      }\n    }\n  }\n  \n}","@import \"../variables\";\n\n// Container style\n.ps {\n  overflow: hidden !important;\n  overflow-anchor: none;\n  -ms-overflow-style: none;\n  touch-action: auto;\n  -ms-touch-action: auto;\n}\n\n// Scrollbar rail styles\n.ps__rail-x {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  height: 15px;\n  // there must be 'bottom' or 'top' for ps__rail-x\n  bottom: 0px;\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps__rail-y {\n  display: none;\n  opacity: 0;\n  transition: background-color .2s linear, opacity .2s linear;\n  -webkit-transition: background-color .2s linear, opacity .2s linear;\n  width: 15px;\n  // there must be 'right' or 'left' for ps__rail-y\n  right: 0;\n  // https://github.com/mdbootstrap/perfect-scrollbar/issues/792#issue-335195410\n  // Ugly but working fix\n  left:auto !important;\n  // end of ugly fix\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps--active-x > .ps__rail-x,\n.ps--active-y > .ps__rail-y {\n  display: block;\n  background-color: transparent;\n}\n\n.ps:hover > .ps__rail-x,\n.ps:hover > .ps__rail-y,\n.ps--focus > .ps__rail-x,\n.ps--focus > .ps__rail-y,\n.ps--scrolling-x > .ps__rail-x,\n.ps--scrolling-y > .ps__rail-y {\n  opacity: 0.6;\n}\n\n.ps .ps__rail-x:hover,\n.ps .ps__rail-y:hover,\n.ps .ps__rail-x:focus,\n.ps .ps__rail-y:focus,\n.ps .ps__rail-x.ps--clicking,\n.ps .ps__rail-y.ps--clicking {\n  background-color: #eee;\n  background-color: $color-primary-light;\n  opacity: 0.9;\n}\n\n// Scrollbar thumb styles\n.ps__thumb-x {\n  background-color: $color-primary-dark;\n  border-radius: 6px;\n  transition: background-color .2s linear, height .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, height .2s ease-in-out;\n  height: 6px;\n  // there must be 'bottom' for ps__thumb-x\n  bottom: 2px;\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps__thumb-y {\n  background-color: $color-primary;\n  border-radius: 6px;\n  transition: background-color .2s linear, width .2s ease-in-out;\n  -webkit-transition: background-color .2s linear, width .2s ease-in-out;\n  width: 6px;\n  // there must be 'right' for ps__thumb-y\n  right: 2px;\n  // please don't change 'position'\n  position: absolute;\n}\n\n.ps__rail-x:hover > .ps__thumb-x,\n.ps__rail-x:focus > .ps__thumb-x,\n.ps__rail-x.ps--clicking .ps__thumb-x {\n  background-color: $color-primary;\n  height: 11px;\n}\n\n.ps__rail-y:hover > .ps__thumb-y,\n.ps__rail-y:focus > .ps__thumb-y,\n.ps__rail-y.ps--clicking .ps__thumb-y {\n  background-color: $color-primary;\n  width: 11px;\n}\n\n// MS supports\n@supports (-ms-overflow-style: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .ps {\n    overflow: auto !important;\n  }\n}\n\n.scrollbar-container {\n  position: relative;\n  height: 100%;\n}\n"]}