body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}#root,body,html{height:100%}#root{align-items:center;background-color:#f0f0f0;display:flex;justify-content:center}.__main{border-radius:10px;margin:auto;max-width:90%;min-height:80vh;padding:20px 20px 20px 0;width:100%}.__main,.btn{background-color:#fff;display:flex}.btn{border:none;border-radius:5px;box-shadow:2px 2px 10px rgba(0,0,0,.02);cursor:pointer;height:47px;line-height:47px;outline:none;padding:0;transition:all .3s ease-in-out;width:230px}.btn:hover{background-color:#4664ff;color:#fff;-webkit-transform:scale(1.02);transform:scale(1.02)}.btn i{border-right:1px solid #ebe7fb;flex:0.2 1;font-size:18px;height:100%}.btn i,.btn span{align-items:center;display:flex;justify-content:center}.btn span{flex:0.8 1}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#6c84ff;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#3b5bfe}.nav{display:flex;flex-direction:column;justify-content:space-between;max-width:100px;padding:30px 25px 0}.nav img{cursor:pointer;display:block;max-width:100%}.main__chatbox{background-color:#f4f3f8;border-radius:10px;display:flex;flex-grow:1;padding:15px 20px}.main__chatlist{border-right:1px solid #ebe7fb;padding:0 40px 0 0}.chatlist__heading{align-items:center;display:flex;justify-content:space-between}.btn-nobg{background-color:initial;border:none;box-shadow:none;color:#010101;cursor:pointer;font-size:18px;outline:none;padding:10px}.search_wrap{background-color:#e6e5ea;border-radius:5px}.search_wrap input{padding:15px 0 15px 15px;width:80%}.search-btn,.search_wrap input{background-color:initial;border:none;outline:none}.search-btn{cursor:pointer;font-size:20px;height:46px;width:20%}.chatlist__items{margin-top:30px;max-height:50vh;overflow:auto}.chatlist__item{-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:showIn;animation-name:showIn;-webkit-animation-timing-function:cubic-bezier(.88,.19,.37,1.11);animation-timing-function:cubic-bezier(.88,.19,.37,1.11);border-bottom:1px solid #ebe7fb;cursor:pointer;display:flex;margin-top:10px;padding:10px 10px 10px 20px;-webkit-transform:scale(0);transform:scale(0);transition:all .3s cubic-bezier(.88,.19,.37,1.11)}.chatlist__item:first-child{margin-top:0}.avatar{border-radius:50%;height:40px;margin-right:20px;position:relative;width:40px}.avatar img{max-width:100%;object-fit:cover}.chatlist__item .userMeta p{color:#000;font-size:14px;font-weight:600;margin:0;padding:0}.chatlist__item .userMeta span{color:#ceccd3;display:block;font-size:12px;font-weight:400;margin:0;padding:0}.chatlist__item.active,.chatlist__item:hover{background:#fff;border-radius:10px}.isOnline{background-color:#ddd;border:2px solid #fff;border-radius:50%;bottom:0;height:10px;position:absolute;right:0;width:10px}.isOnline.active{background-color:#20ec09}.avatar-img{border-radius:50%;height:100%;overflow:hidden;width:100%}.main__chatcontent{border-right:1px solid #ebe7fb;flex-grow:1;max-width:63%;padding:20px 40px}.content__header{border-bottom:1px solid #ebe7fb;padding-bottom:15px}.current-chatting-user{align-items:center;display:flex}.current-chatting-user p{font-weight:600;margin:0}.content__header{align-items:center;display:flex;justify-content:space-between}.settings .btn-nobg{color:#000}.content__body{max-height:50vh;overflow:auto}.chat__item{align-items:flex-end;-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:showIn;animation-name:showIn;-webkit-animation-timing-function:cubic-bezier(.88,.19,.37,1.11);animation-timing-function:cubic-bezier(.88,.19,.37,1.11);display:flex;justify-content:flex-end;margin-bottom:15px;padding-right:15px;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:right;transform-origin:right;transition:all .3s ease}@-webkit-keyframes showIn{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes showIn{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}.chat__item .avatar{background:#fff;margin-left:15px;margin-right:0;padding:1px}.chat__item__content{background-color:#4462ff;border-radius:10px 10px 0 10px;color:#fff;max-width:50%;min-width:215px;padding:15px}.chat__item__content .chat__meta{display:flex;justify-content:space-between;margin-top:10px}.chat__item__content .chat__meta span{color:#8693d3;font-size:14px}.chat__item__content .chat__meta span,.chat__msg{-webkit-user-select:none;user-select:none}.chat__item.other{flex-direction:row-reverse;-webkit-transform-origin:left;transform-origin:left}.chat__item.other .chat__item__content{background-color:#fff;border-radius:10px 10px 10px 0;color:#000;max-width:50%}.chat__item.other .avatar{margin-left:0;margin-right:20px}.chat__item.other .chat__item__content .chat__meta span{color:#d1d1d1}.content__footer{padding-top:30px}.sendNewMessage{background-color:#fff;border-radius:8px;display:flex;justify-content:space-between;padding:10px}.sendNewMessage button{background-color:#ecefff;border:none;border-radius:5px;box-shadow:none;color:#4665ff;cursor:pointer;font-size:16px;height:36px;line-height:36px;outline:none;padding:0;transition:all .3s cubic-bezier(.88,.19,.37,1.11);width:36px}.sendNewMessage button:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.sendNewMessage button i{display:block}.sendNewMessage input{background-color:initial;border:none;flex-grow:1;outline:none;padding:0 15px}#sendMsgBtn{background-color:#3b5bfe;color:#fff}.main__userprofile{overflow:hidden;padding:0 20px 0 40px;position:relative;transition:all .3s ease-in-out;width:20%}.profile__card{align-items:center;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:showIn;animation-name:showIn;-webkit-animation-timing-function:cubic-bezier(.17,.67,.12,1.53);animation-timing-function:cubic-bezier(.17,.67,.12,1.53);background-color:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:center;margin-bottom:15px;-webkit-transform:scale(0);transform:scale(0)}.profile__card.user__profile__image{padding:20px}.profile__card .profile__image{border-radius:50%;height:100px;overflow:hidden;width:100px}.profile__card .profile__image img{max-width:100%;object-fit:cover}.profile__card h4{margin-bottom:0}.profile__card p{color:#acb3b9;font-size:14px;margin-top:10px}.profile__card .card__header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:15px 20px;width:100%}.profile__card .card__header h4{margin:0}.profile__card .card__header i{font-size:20px}.card__content{-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:showIn;animation-name:showIn;-webkit-animation-timing-function:cubic-bezier(.88,.19,.37,1.11);animation-timing-function:cubic-bezier(.88,.19,.37,1.11);border-top:1px solid #ebe7fb;color:#6d6a6a;display:none;font-size:14px;overflow:auto;padding:15px 20px;-webkit-transform-origin:top;transform-origin:top;width:100%}.profile__card.open .card__content{display:block}.profile__card.open .card__header i:before{content:"\f106"}
/*# sourceMappingURL=main.4edb568b.css.map*/