@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap);::-webkit-scrollbar{width:5px;height:10px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.bodyWhatsapp{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#ccc}.background-green{position:absolute;top:0;width:100%;height:20%;background-color:#009688}.main-container{position:relative;width:80%;max-width:100%;height:calc(100vh - 40px);background:#fff;display:flex;box-shadow:0 1px 1px 0 rgba(0,0,0,.5),0 2px 5px 0 rgba(0,0,0,.6)}.main-container .left-container{display:flex;flex-direction:column;min-width:360px;width:30%;height:100%;flex:30%;background:#fff;overflow:hidden}.main-container .right-container{position:relative;width:100%;height:100%;background:#e5ddd5}.main-container .right-container:before{width:100%;height:100%;background:url(https://camo.githubusercontent.com/854a93c27d64274c4f8f5a0b6ec36ee1d053cfcd934eac6c63bed9eaef9764bd/68747470733a2f2f7765622e77686174736170702e636f6d2f696d672f62672d636861742d74696c652d6461726b5f61346265353132653731393562366237333364393131306234303866303735642e706e67);opacity:.5}.header{position:relative;display:flex;align-items:center;width:100%;height:60px;background:#ededed;padding:0 15px;justify-content:space-between}.user-img{position:relative;width:40px;height:40px;overflow:hidden;border-radius:50%}.dp{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;cursor:pointer}.nav-icons{display:flex;justify-content:flex-end;padding-left:110px}.nav-icons li{list-style:none;display:flex;cursor:pointer;color:#51585c;margin-left:22px;font-size:18px}.notif-box{display:flex;width:100%;height:70px;background:#76daff;align-items:center;font-size:.8em;text-decoration:none;justify-content:space-around;flex-direction:row}.notif-box i{background:#fff;padding:10px;width:42px;height:auto;font-size:20px;border-radius:55%;cursor:pointer;color:#76daff}.notif-box .fa-xmark{text-align:center;background:#76daff;color:#fff}.notif-text a{text-decoration:none;color:#333;font-size:.9em}.search-container{width:100%;background:#f6f6f6;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:15px 0}.search-container .divInput{display:flex;width:90%;height:45px;background:#fff;padding:10px;border-radius:10px;font-size:12px;align-items:center}.search-container .divInput input{width:100%;outline:none;border:none;background:#fff;padding:10px;height:100%;border-radius:10px;font-size:12px;margin:10px}.search-container .divInput i{color:#bbb;width:20px;font-size:.8em}.chat-list{position:relative;height:calc(100% - 170px);overflow-y:auto}.chat-list .chat-box{position:relative;width:100%;display:flex;align-items:center;cursor:pointer;padding:15px;border-bottom:1px solid #eee}.chat-list .chat-box .img-box{position:relative;width:55px;height:45px;overflow:hidden;border-radius:50%}.chat-list .chat-box .chat-details{width:100%;margin-left:10px}.chat-list .chat-box .chat-details .text-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.chat-list .chat-box .chat-details .text-head h4{font-size:1.1em;font-weight:600;color:#000}.chat-list .chat-box .chat-details .text-head .time{font-size:.8em;color:#aaa}.chat-list .chat-box .chat-details .text-message{display:flex;justify-content:space-between;align-items:center}.chat-list .chat-box .chat-details .text-message p{color:#aaa;font-size:.9em;overflow:hidden;max-height:20px}img{width:100%;-o-object-fit:cover;object-fit:cover}.chat-list .chat-box .chat-details .text-message b{background:#06e744;color:#fff;min-width:20px;height:20px;border-radius:50%;font-size:.8em;font-weight:400;display:flex;justify-content:center;align-items:center}.chat-list .active{background:#ebebeb}.chat-list .chat-box:hover{background:#f5f5f5}.chat-list .chat-box .chat-details .text-head .unread{color:#06e744}.chat_empty{display:flex;flex-direction:column;justify-content:center;width:100%;align-items:center;background:#f8f9fa}.chat_empty img{border-radius:999px;height:15rem;width:15rem;margin-bottom:1.5rem}.chat_empty h2{font-size:1.5rem;color:#333;font-weight:200;margin-bottom:1rem;text-align:center}.right-container .header{display:flex;justify-content:space-between;align-items:center}.right-container .header .img-text .user-img .dp{position:relative;left:0;width:40px;height:auto;overflow:hidden;-o-object-fit:cover;object-fit:cover}.right-container .header .img-text{position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer}.right-container .header .img-text h4{font-weight:500;line-height:1.2em;margin-left:15px}.right-container .header .img-text h4 span{font-size:.8em;color:#555}.right-container .header .nav-icons{position:relative;margin-right:0}.right-container .header .nav-icons i{padding:10px}.chat-container{width:100%;height:calc(100% - 120px);padding:25px;padding-right:15px;overflow-y:auto}.message-box{position:relative;display:flex;width:100%;margin:5px 0}.message-box p{position:relative;right:0;text-align:right;max-width:90%;padding:12px;background:#dcf8c6;border-radius:10px;font-size:.9em}.message-box.my-message p:before{content:"";position:absolute;top:0;right:-12px;width:20px;height:20px;background:linear-gradient(135deg,#dcf8c6,#dcf8c6 50%,transparent 0,transparent)}.message-box p span{display:block;margin-top:5px;font-size:.8em;opacity:.5}.my-message{justify-content:flex-end}.friend-message p{background:#fff}.friend-message{justify-content:flex-start}.chat-container .my-message i{color:#ff0}.message-box.friend-message:before{content:"";position:absolute;top:0;left:-12px;width:20px;height:20px;background:linear-gradient(225deg,#fff,#fff 50%,transparent 0,transparent)}.chatbox-input{position:relative;width:100%;height:60px;background:#f0f0f0;display:flex;justify-content:space-between;align-items:center}.chatbox-input i{cursor:pointer;font-size:1.8em;color:#515855}.chatbox-input i:first-child{margin:15px}.chatbox-input i:last-child{margin-right:25px}.chatbox-input input{position:relative;width:90%;margin:0 20px;padding:10px 20px;border-radius:10px;font-size:1em;border:none;outline:none}