@import url(https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap);#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}#nav{padding:30px}#nav a{font-weight:700;color:#2c3e50}#nav a.router-link-exact-active{color:#42b983}.invisible[data-v-4ef9dfac],.invisible[data-v-5ba33708]{visibility:hidden}@media (min-width:320px) and (max-width:480px){.invisible[data-v-4ef9dfac]{visibility:visible}.chat-wrapper .chat-body .chat-body-left[data-v-4ef9dfac],.main-wrapper .leftbar[data-v-4ef9dfac]{display:none}.main-wrapper .rightbar[data-v-4ef9dfac]{width:100vw}.chat-wrapper .chat-body .chat-body-right[data-v-4ef9dfac]{width:100%;display:block}}*{margin:0;padding:0;font-family:Nunito,sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}::-webkit-scrollbar{width:0}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}::-webkit-scrollbar-thumb{background-color:#a9a9a9;outline:1px solid #708090}.rounded{border-radius:50%}.cursor-pointer{cursor:pointer}.chat-body-left .chat-head-wrap .chat-name,.text-capitalize{text-transform:capitalize}hr.light{height:1px;background-color:rgba(73,81,90,.17);border:none;margin:5px 0 10px 0}.text-dark{font-size:12px;font-weight:700;color:rgba(73,81,90,.75)}.main-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.main-wrapper .leftbar{width:180px}.main-wrapper .leftbar,.main-wrapper .leftbar .sidebar-wrapper{height:100vh;background:rgba(225,226,252,.66)}.main-wrapper .rightbar{width:calc(100vw - 180px);background:rgba(225,226,252,.43)}.links-wrapper .nav-items .nav-item-wrapper,.main-wrapper .rightbar{text-align:left}.leftbar .sidebar-wrapper .profile-wrapper{padding:40px 20px}.sidebar-wrapper .profile-wrapper .profile-image{padding:10px 0}.sidebar-wrapper .profile-wrapper .profile-image img{width:60%}.chat-body-left .chat-head-wrap .chat-head img,.sidebar-wrapper .profile-wrapper .profile-image img{border-radius:50%}.sidebar-wrapper .profile-wrapper .profile-name{color:#49515a;font-size:16px;font-weight:700}.sidebar-wrapper .profile-wrapper .profile-name a{text-decoration:none;color:inherit}.sidebar-wrapper .profile-wrapper .profile-name svg{position:relative;top:1px;-webkit-transform:scale(.75);transform:scale(.75)}.links-wrapper .nav-items .nav-item-wrapper{padding:3px 15px;color:rgba(73,81,90,.53);border-left:2px solid transparent;font-weight:700;margin:10px 0}.links-wrapper .nav-items .nav-item-wrapper.active{color:#2f8df2;border-left:2px solid #2f8df2}.links-wrapper .nav-items .nav-item{text-decoration:none;color:inherit;font-size:13px}.links-wrapper .nav-items .nav-item svg{width:20%}.rightbar .chat-wrapper .chat-body{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100vh}.chat-wrapper .chat-body .chat-body-left{width:30%}.chat-wrapper .chat-body .chat-body-right{width:70%;padding:25px}.chat-body .chat-body-left .chat-header{padding:25px 25px 0 25px}.chat-body .chat-body-left .chat-head-search{padding:0 25px}.chat-body .chat-body-left hr{margin:10px 25px}.chat-body .chat-body-left .chat-heads{overflow-y:scroll;height:75vh}.chat-body .chat-body-left .chat-head-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:5px;-webkit-box-shadow:5px 5px 15px rgba(0,0,0,.12);box-shadow:5px 5px 15px rgba(0,0,0,.12);padding:12px 15px;margin:0 25px 10px 25px;background:#fff;cursor:pointer}.chat-body-left .chat-head-wrap .chat-head,.chat-body .chat-body-left .chat-head-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chat-body-left .chat-head-wrap p,.text-light{font-size:12px;font-weight:700;color:rgba(73,81,90,.53)}.chat-body-left .chat-head-wrap .chat-head,.chat-body-left .chat-head-wrap .chat-info{width:15%}.chat-body-left .chat-head-wrap .chat-name{width:70%;padding:0 10px}.chat-body-left .chat-head-wrap .chat-name h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-body-left .chat-head-wrap .chat-name p,.chat-head-wrap .chat-info .tag.tag-red{margin-top:5px}.chat-body-left .chat-head-wrap .chat-info{text-align:right;font-size:10px}.chat-body-left .chat-head-wrap .chat-info p{font-size:10px}.chat-head-wrap .chat-info .tag{color:#fff;display:inline-block;padding:1px 5px}.chat-head-wrap .chat-info .tag:empty{opacity:0}.chat-body-left .chat-head-wrap .chat-head,.chat-wrapper .chat-body .chat-body-right,.chat .chat-info .chat-time,.chat.chat-right{position:relative;background:#fff}.chat-body-left .chat-head-wrap .chat-head img{width:45px}.chat-head-wrap .chat-head .status{padding:4px;position:absolute;top:0;right:0;border:3px solid #fff;border-radius:50%}.chat-head-wrap .chat-head .status.online{background:#7cd62a}.chat-head-wrap .chat-head .status.offline,.chat-head-wrap .chat-info .tag.tag-red{background:#fa474f}.chat-body-left .chat-head-wrap.active .chat-head,.chat-body .chat-body-left .chat-head-wrap.active{background:#2a8bf2;color:#fff}.chat-body .chat-body-left .chat-head-wrap.active .text-light{color:hsla(0,0%,100%,.8)}.chat-body .chat-body-right .chat-right-body{height:70vh}.chat-body .chat-body-right .chat-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.chat-body .chat-body-right .chat-header p{padding:8px 0}.chat-body-right .chat-right-wrap.flex{height:80vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chat-body-right .chat-right-wrap.flex p{margin:20px 10px;font-weight:700}.chat{display:-webkit-box;display:-ms-flexbox;display:flex;widows:100%;margin-bottom:10px}.chat.chat-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.chat.chat-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.chat .chat-info .chat-img img{width:30px;border-radius:50%}.chat .chat-info .chat-time .text-dark{top:-5px}.chat .chat-message{max-width:80%}.chat .chat-message .message{background:#eae8ed;padding:5px 10px;border-radius:20px}.chat.chat-left .chat-message .message{margin-left:8px}.chat.chat-right .chat-message .message{background:#2a8bf2;color:#fff}.chat.chat-right .chat-time{text-align:right}.chat-right-footer{width:100%}.chat-right-footer .chat-text{display:-webkit-box;display:-ms-flexbox;display:flex;padding:5px;background:rgba(225,226,252,.43);-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chat-right-footer .chat-text .chat-box{width:85%}.chat-right-footer .chat-text input{padding:10px 10px;border:0;margin:0 10px;width:100%;background:rgba(225,226,252,.43)}.chat-right-footer .chat-text input:focus{outline:none}.chat-right-footer .left{width:5%}.chat-right-footer .left,.chat-right-footer .right{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.chat-right-footer .right{width:10%}.chat-head-search{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;color:#979797}.chat-head-search input{background:none;border:none;outline:none;padding:10px 15px;width:100%}.chat-head-search .icon{width:10%;text-align:center}.chat-head-search .text{width:90%}@media (min-width:768px) and (max-width:1024px){.chat-wrapper .chat-body .chat-body-left{width:40%}.chat-wrapper .chat-body .chat-body-right{width:60%}}@media (min-width:481px) and (max-width:768px){.main-wrapper .leftbar{display:none}.main-wrapper .rightbar{width:100vw}.chat-wrapper .chat-body .chat-body-left{width:40%}.chat-wrapper .chat-body .chat-body-right{width:60%}.chat-body-left .chat-head-wrap .chat-head img{width:40px}}@media (min-width:320px) and (max-width:480px){.chat-wrapper .chat-body .chat-body-right,.main-wrapper .leftbar{display:none}.main-wrapper .rightbar{width:100vw}.chat-wrapper .chat-body .chat-body-left{width:100%}}