Chat box with sidebar

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>

<body>
    <section>
        <div class="chatBoxLftSide">
            <div class="SearchBox-main-Div-sticky">
                <div class="LeftMenuMobileClosBtnDiv d-block d-lg-none d-md-none">
                    <i class="fa-solid fa-xmark"></i>
                </div>
                <div class="SearchBox">
                    <input type="text" class="form-control" placeholder="Search by name">
                    <img src="https://www.teknowize.com/attachments/file_1658670439.svg" alt="Search Box" width="30" height="30">
                </div>
            </div>
            <div class="already-chated-scroll-Div">
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>Hariom Prajapati</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671141.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>Hariom Prajapati</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="deactiveUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671252.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>sumit sarkar</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="deactiveUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>5</p>
                    </div>
                </div>

<div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671291.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>parvez ahmed</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671341.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>shriram prajapati</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671141.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>virat prajapati</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>ram charan singh</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671291.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>ramu kaka</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671252.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>rohit</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671341.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>Hariom Prajapati</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
                <div class="AlreadyChatUser">
                    <div class="AlreadyChatUserLftPart">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671141.png" alt="">
                        </div>
                        <div class="NameOnlineDiv">
                            <div class="UserNameDiv">
                                <p>rajesh mishra</p>
                            </div>
                            <div class="OnlineDotAndtxt">
                                <div class="activeUser"></div>
                                <p>Online</p>
                            </div>
                        </div>
                    </div>
                    <div class="UnreadeMsgIconNumberDiv">
                        <img src="https://www.teknowize.com/attachments/file_1658670499.svg" alt="" srcset="">
                        <p>1</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightChatBoxMessageMainDiv">
            <div class="chatBoxRhtHeadDiv">
                <div class="ChatBoxRightSideImgTxtDiv">
                    <div class="ChatBoxMobileBar d-block d-lg-none d-md-none">
                        <i class="fa-solid fa-bars sideBarOpenBar"></i>
                    </div>
                    <div class="RightOnlineDotAndImg">
                        <div class="AlreadyChatUserImgDiv">
                            <img src="https://www.teknowize.com/attachments/file_1658671291.png" class="m-0 p-0" alt="">
                        </div>
                        <div class="rightactiveUser"></div>
                    </div>
                    <div class="ChatBoxNameOnlinemainDiv">
                        <div>
                            <p>Hariom Prajapati</p>
                        </div>
                        <div>
                            <p>Online Now</p>
                        </div>
                    </div>
                </div>
                <div class="company-nav-dropdown">
                    <a aria-current="page" href="javascript:void(0)">
                        <div class="ChatBoxRhtThreeDots">
                            <svg width="29" height="30" viewBox="0 0 29 46" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15 18.1177C14.2121 18.1177 13.4319 18.2569 12.7039 18.5274C11.9759 18.7979 11.3145 19.1944 10.7574 19.6941C10.2002 20.1939 9.75825 20.7873 9.45672 21.4403C9.15519 22.0933 9 22.7932 9 23.5C9 24.2068 9.15519 24.9067 9.45672 25.5597C9.75825 26.2127 10.2002 26.8061 10.7574 27.3059C11.3145 27.8056 11.9759 28.2021 12.7039 28.4726C13.4319 28.7431 14.2121 28.8823 15 28.8823C16.5913 28.882 18.1173 28.3146 19.2422 27.305C20.3672 26.2954 20.999 24.9262 20.9986 23.4988C20.9983 22.0713 20.3658 20.7024 19.2403 19.6933C18.1148 18.6841 16.5886 18.1174 14.9973 18.1177H15ZM15 11.7597C15.7876 11.7594 16.5674 11.6199 17.2949 11.3492C18.0223 11.0786 18.6833 10.682 19.2399 10.1822C19.7966 9.68246 20.238 9.08921 20.5391 8.43637C20.8401 7.78353 20.9949 7.0839 20.9945 6.37741C20.9942 5.67091 20.8387 4.9714 20.537 4.31881C20.2353 3.66622 19.7932 3.07333 19.2361 2.57399C18.6789 2.07465 18.0176 1.67865 17.2898 1.40858C16.5621 1.13852 15.7821 0.999679 14.9945 1C13.404 1.00065 11.8788 1.56808 10.7546 2.57745C9.63044 3.58683 8.99928 4.95547 9 6.3823C9.00072 7.80912 9.63327 9.17725 10.7585 10.1857C11.8837 11.1942 13.4094 11.7603 15 11.7597ZM15 35.2354C13.4087 35.2354 11.8826 35.8025 10.7574 36.8118C9.63214 37.8212 9 39.1902 9 40.6177C9 42.0452 9.63214 43.4142 10.7574 44.4236C11.8826 45.4329 13.4087 46 15 46C16.5913 46 18.1174 45.4329 19.2426 44.4236C20.3679 43.4142 21 42.0452 21 40.6177C21 39.1902 20.3679 37.8212 19.2426 36.8118C18.1174 35.8025 16.5913 35.2354 15 35.2354Z"
                                    fill="white" />
                            </svg>

</div>
                    </a>
                    <div class="ChatBoxHeaderDropdown">
                        <a href="javascript:void(0)">View Profile</a>
                        <a href="javascript:void(0)">Delete Messages</a>
                        <a href="javascript:void(0)">Block User</a>
                    </div>
                </div>
            </div>
            <div class="chatBoxChatedPaddingDiv">
                <div class="w-100 m-0 p-0">
                    <div class="opponentChatMainDiv">
                        <div class="opponentChatImgNameTimeDiv">
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671141.png" width="40"
                                    height="40" alt="">
                            </div>
                            <div class="RightUserChatedNameDiv mt-3">
                                <div>
                                    <p>Hariom Prajapati</p>
                                </div>
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbslt"></div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv ChatBoxOutGoingMsg">
                        <div class="opponentChatImgNameTimeDiv justify-content-end">
                            <div class="RightOwnChatedNameDiv mt-3">
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                                <div>
                                    <p>Sumit Sarkar</p>
                                </div>
                            </div>
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671252.png" width="40"
                                    height="40" alt="">
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbsltUserMsg"></div>
                        </div>

</div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv">
                        <div class="opponentChatImgNameTimeDiv">
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671141.png" width="40"
                                    height="40" alt="">
                            </div>
                            <div class="RightUserChatedNameDiv mt-3">
                                <div>
                                    <p>Hariom Prajapati</p>
                                </div>
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbslt"></div>
                        </div>

</div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv ChatBoxOutGoingMsg">
                        <div class="opponentChatImgNameTimeDiv justify-content-end">
                            <div class="RightOwnChatedNameDiv mt-3">
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                                <div>
                                    <p>Sumit sarkar Sarkar</p>
                                </div>
                            </div>
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671252.png" width="40"
                                    height="40" alt="">
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbsltUserMsg"></div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv">
                        <div class="opponentChatImgNameTimeDiv">
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671141.png" width="40"
                                    height="40" alt="">
                            </div>
                            <div class="RightUserChatedNameDiv mt-3">
                                <div>
                                    <p>Hariom Prajapati</p>
                                </div>
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbslt"></div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv ChatBoxOutGoingMsg">
                        <div class="opponentChatImgNameTimeDiv justify-content-end">
                            <div class="RightOwnChatedNameDiv mt-3">
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                                <div>
                                    <p>Sumit Sarkar</p>
                                </div>
                            </div>
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671252.png" width="40"
                                    height="40" alt="">
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbsltUserMsg"></div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv">
                        <div class="opponentChatImgNameTimeDiv">
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671141.png" width="40"
                                    height="40" alt="">
                            </div>
                            <div class="RightUserChatedNameDiv mt-3">
                                <div>
                                    <p>Hariom Prajapati</p>
                                </div>
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbslt"></div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv">
                        <div class="opponentChatImgNameTimeDiv">
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671141.png" width="40"
                                    height="40" alt="">
                            </div>
                            <div class="RightUserChatedNameDiv mt-3">
                                <div>
                                    <p>Hariom Prajapati</p>
                                </div>
                                <div>
                                    <p>Mar 12 at 01:29 PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbslt"></div>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="opponentChatMainDiv">
                        <div class="opponentChatImgNameTimeDiv">
                            <div class="opponentChatImg">
                                <img src="https://www.teknowize.com/attachments/file_1658671141.png" width="40"
                                    height="40" alt="">
                            </div>
                            <div class="RightUserChatedNameDiv mt-3">
                                <div>
                                    <p>Hariom Prajapati</p>
                                </div>
                                <div>
                                    <p>Today at 01:29 PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="ChatBoxMainMessage">
                            <div class="ChatBoxMainMessageTextPara">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                            </div>
                            <div class="ChatBoxMainMessageTopAbslt"></div>
                        </div>
                    </div>
                </div>
                <div class="TypingAnimation">
                    <div class="typing typing-d-none mt-5">
                        <div>Typing </div>
                        <div class="bubble">
                            <div class="ellipsis dot_1"></div>
                            <div class="ellipsis dot_2"></div>
                            <div class="ellipsis dot_3"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ChatBoxmsgInputMainDiv">
                <div class="RighrMsgTypingInputAndAll">
                    <div><input type="text" class="form-control" placeholder="Type Your Message..."></div>
                    <div><img src="https://www.teknowize.com/attachments/file_1658670879.svg" alt=""></div>
                    <div><img src="https://www.teknowize.com/attachments/file_1658669808.svg" alt=""></div>
                    <div><a href="Javascript:void"><button class="btn"><img src="https://www.teknowize.com/attachments/file_1658670797.svg" alt=""></button></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

</html>

CSS Copied

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .chatBoxLftSide {
            position: fixed;
            padding: 0 1rem;
            width: 300px;
            height: 100%;
            left: 0;
            overflow-y: auto;
            background: #4D71C3;
        }
        .chatBoxLftSide::-webkit-scrollbar {
            width: 0;
        }
        .rightChatBoxMessageMainDiv {
            padding-left: 300px;
        }
        /* ------ */
        .SearchBox-main-Div-sticky {
            position: fixed;
            padding: 1rem 1rem 1rem 1rem;
            width: 300px;
            left: 0;
            background: #4D71C3;
            z-index: 3;
            margin-top: 0;
            margin-bottom: 0;
            border: 1px solid#4D71C3;
        }
        .SearchBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            border-radius: 50px;
            overflow: hidden;
            padding: 0.5rem 1.5rem;
            margin-top: 0;
            margin-bottom: 0;
        }
        .SearchBox input {
            background: transparent;
            border: none;
        }
        .SearchBox input:focus {
            outline: none;
            box-shadow: none;
        }
        .SearchBox input::placeholder {
            font-size: 18px;
            font-weight: 400;
            color: #848484;
        }
        .SearchBox img {
            cursor: pointer;
        }
        .already-chated-scroll-Div {
            height: 100vh;
            overflow-y: auto;
            margin-top: 5rem;
        }
        .already-chated-scroll-Div::-webkit-scrollbar {
            width: 0;
        }
        .AlreadyChatUser {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 1.5rem;
        }
        .AlreadyChatUserLftPart {
            display: flex;
            align-items: center;
        }
        .AlreadyChatUserImgDiv {
            width: 60px;
            height: 60px;
            background: rgb(199, 190, 190);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin: 0;
        }
        .NameOnlineDiv {
            margin-left: 1.5rem;
            padding: 0;
        }
        .UserNameDiv {
            padding: 0 0 10px 0;
        }
        .UserNameDiv p {
            font-size: 18px;
            font-weight: 700;
            color: white;
            margin: 0;
            padding: 0;
            text-transform: capitalize;
        }
        .OnlineDotAndtxt {
            display: flex;
            align-items: center;
        }
        .OnlineDotAndtxt .activeUser {
            width: 16px;
            height: 16px;
            background: #05FF00;
            border-radius: 50%;
            margin: 0;
            padding: 0;
        }
        .OnlineDotAndtxt .deactiveUser {
            width: 16px;
            height: 16px;
            background: #F70607;
            border-radius: 50%;
            margin: 0;
            padding: 0;
        }
        .OnlineDotAndtxt p {
            font-size: 16px;
            font-weight: 400;
            color: white;
            margin: 0;
            padding: 0;
            margin-left: 1rem;
        }
        .UnreadeMsgIconNumberDiv {
            position: relative;
        }
        .UnreadeMsgIconNumberDiv p {
            position: absolute;
            margin: 0;
            padding: 0;
            top: 0;
            left: 50%;
            transform: translate(-50%);
            font-size: 14px;
            font-weight: 700;
            color: #001585;
        }
        /* Right Part Start */
        .chatBoxRhtHeadDiv {
            background: #00C6FF;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem 0.5rem 1rem;
            position: sticky;
            top: 0;
            z-index: 5;
        }
        .ChatBoxRightSideImgTxtDiv {
            display: flex;
            align-items: center;
        }
        .RightOnlineDotAndImg {
            display: flex;
            align-items: center;
            position: relative;
        }
        .RightOnlineDotAndImg .rightactiveUser {
            position: absolute;
            width: 16px;
            height: 16px;
            background: #05FF00;
            border-radius: 50%;
            margin: 0;
            padding: 0;
            bottom: 2px;
            right: 0px;
        }
        .RightOnlineDotAndImg .rightdeactiveUser {
            position: absolute;
            width: 16px;
            height: 16px;
            background: #F70607;
            border-radius: 50%;
            margin: 0;
            padding: 0;
            bottom: 2px;
            right: 0px;
        }
        .ChatBoxNameOnlinemainDiv {
            margin: 0;
            padding: 0;
            padding-left: 1rem;
        }
        .ChatBoxNameOnlinemainDiv div {
            padding: 0;
            margin: 0;
        }
        .ChatBoxNameOnlinemainDiv div:first-child p {
            margin: 0;
            padding: 0;
            font-size: 24px;
            font-weight: 900;
            color: white;
        }
        .ChatBoxNameOnlinemainDiv div:last-child p {
            margin: 0;
            padding: 0;
            color: #F4F4F4;
            font-size: 16px;
            font-weight: 400;
        }
        .ChatBoxRhtThreeDots {
            cursor: pointer;
        }
        .ChatBoxRhtThreeDots svg:hover path {
            fill: #eeebeb;
        }
        .chatBoxChatedPaddingDiv {
            padding: 1.5rem;
            margin: 0;
        }
        .opponentChatMainDiv {
            position: relative;
            width: 50%;
            margin: 2rem 0;
        }
        .ChatBoxOutGoingMsg {
            margin-left: auto;
        }
        .chatBoxChatedPaddingDiv div .opponentChatMainDiv .opponentChatImgNameTimeDiv {
            display: flex;
            align-items: center;
            justify-content: start;
            margin-bottom: 0.2rem;
        }
        .opponentChatImg {
            width: 40px;
            height: 40px;
            background: rgb(199, 190, 190);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin: 0;
        }
        .RightUserChatedNameDiv {
            display: flex;
            align-items: center;
        }
        .RightUserChatedNameDiv div {
            margin: 0 0.5rem;
        }
        .opponentChatMainDiv .RightUserChatedNameDiv div:nth-child(1) p {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            text-transform: capitalize;
        }
        .opponentChatMainDiv .RightUserChatedNameDiv div:nth-child(2) p {
            font-size: 18px;
            font-weight: 500;
            color: #BDBDBD;
        }
        .opponentChatMainDiv .RightUserChatedNameDiv div:nth-child(2) p:first-letter {
            text-transform: capitalize
        }
        .opponentChatMainDiv .RightOwnChatedNameDiv div:nth-child(2) p {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            text-transform: capitalize;
        }
        .opponentChatMainDiv .RightOwnChatedNameDiv div:nth-child(1) p {
            font-size: 18px;
            font-weight: 500;
            color: #BDBDBD;
        }
        .opponentChatMainDiv .RightOwnChatedNameDiv div:nth-child(1) p:first-letter {
            text-transform: capitalize
        }
        .RightOwnChatedNameDiv {
            display: flex;
            align-items: center;
        }
        .RightOwnChatedNameDiv div {
            margin-right: 0.5rem;
        }
        .chatBoxChatedPaddingDiv .opponentChatMainDiv .ChatBoxMainMessage {
            position: relative;
        }
        .chatBoxChatedPaddingDiv .opponentChatMainDiv .ChatBoxMainMessage {
            position: relative;
        }
        .ChatBoxMainMessageTextPara {
            background: #E9F0FE;
            padding: 1rem;
            border-radius: 10px;
        }
        .chatBoxChatedPaddingDiv .ChatBoxOutGoingMsg .ChatBoxMainMessageTextPara {
            background: rgba(148, 238, 250, 0.91);
            padding: 1rem;
            border-radius: 10px;
        }
        .ChatBoxMainMessageTextPara {
            font-size: 18px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }
        .chatBoxChatedPaddingDiv .opponentChatMainDiv .ChatBoxMainMessageTopAbslt {
            position: absolute;
            width: 32px;
            height: 32px;
            background: #E9F0FE;
            transform: rotate(45deg);
            top: -10px;
            left: 30px;
            z-index: -1;
        }
        .chatBoxChatedPaddingDiv .ChatBoxOutGoingMsg .ChatBoxMainMessageTopAbsltUserMsg {
            position: absolute;
            width: 32px;
            height: 32px;
            background: rgba(148, 238, 250, 0.91);
            transform: rotate(45deg);
            top: -10px;
            right: 30px;
            z-index: -1;
        }
        .typing-d-flex {
            display: flex !important;
            align-items: center !important;
        }
        .typing-d-none {
            display: none;
        }
        @keyframes bounce {
            50% {
                transform: translate(0, 5px);
            }

100% {
                transform: translate(0, 0);
            }
        }
        .ellipsis {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #b7b7b7;
        }
        .dot_1 {
            /* animation: name duration timing-function delay iteration-count */
            animation: bounce 0.8s linear 0.1s infinite;
        }
        .dot_2 {
            animation: bounce 0.8s linear 0.2s infinite;
        }
        .dot_3 {
            animation: bounce 0.8s linear 0.3s infinite;
        }
        .RighrMsgTypingInputAndAll {
            display: flex;
            align-items: center;
            border: 1px solid #00E1FF;
            border-radius: 50px;
            overflow: hidden;
            padding: 0rem 0rem 0rem 1rem;
            width: 100%;
        }
        .RighrMsgTypingInputAndAll div:nth-child(1) {
            width: 100%;
        }
        .RighrMsgTypingInputAndAll div input {
            width: 100%;
            border: none;
            box-shadow: none;
        }
        .RighrMsgTypingInputAndAll div input:focus {
            border: none;
            box-shadow: none;
        }
        .RighrMsgTypingInputAndAll div input::placeholder {
            font-size: 18px;
            font-weight: 500;
            color: #BDBDBD;
        }
        .RighrMsgTypingInputAndAll div:nth-child(2) {
            margin: 0 0.6rem;
            cursor: pointer;
        }
        .RighrMsgTypingInputAndAll div:nth-child(3) {
            margin: 0 0.6rem;
            cursor: pointer;
        }
        .RighrMsgTypingInputAndAll div:nth-child(4) {
            margin-left: 0.6rem;
        }
        .RighrMsgTypingInputAndAll div:nth-child(4) button {
            margin: 0;
            padding: auto;
            background: #00E1FF;
            padding: 0.5rem 2.5rem 0.5rem 2.5rem;
            border-radius: 50px;
            border: none;
            box-shadow: none;
            outline: none;
        }
        .RighrMsgTypingInputAndAll div:nth-child(4) button:hover {
            margin: 0;
            padding: auto;
            background: #00ccff;
            border-radius: 50px;
        }
        .RighrMsgTypingInputAndAll div:nth-child(4) button:focus {
            border: none;
            box-shadow: none;
            outline: none;
        }
        .ChatBoxmsgInputMainDiv {
            padding: 1rem 1.5rem 1.5rem 1.5rem;
            background: white;
            position: sticky;
            bottom: 0;
        }
        .ChatBoxHeaderDropdown {
            display: none;
            position: absolute;
            right: 28px;
            min-width: 250px;
            z-index: 1;
            background: #FFFFFF;
            overflow: hidden;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
            border-radius: 10px;
        }
        .ChatBoxHeaderDropdown a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            white-space: nowrap;
            border-top: 1px solid rgba(198, 207, 250, 0.35);
        }
        .ChatBoxHeaderDropdown a:first-child {
            border-top: none;
        }
        .ChatBoxHeaderDropdown a:hover {
            background: rgb(250, 248, 248);
            color: #2B5E9F;
        }
        .company-nav-dropdown:hover .ChatBoxHeaderDropdown {
            display: block;
        }
        .ChatBoxMobileBar {
            margin: 0 1rem;
        }
        .ChatBoxMobileBar i {
            color: white;
        }
        .LeftMenuMobileClosBtnDiv {
            float: right;
            margin: 0.5rem 0 0.5rem 0.8rem;
        }
        .LeftMenuMobileClosBtnDiv i {
            font-size: 28px;
            font-weight: 900;
            color: white;
            cursor: pointer;
        }
        @media (max-width:1200px) {
            .opponentChatMainDiv {
                position: relative;
                width: 85%;
            }
        }
        @media (max-width:768px) {
            .chatBoxLftSide {
                display: none;
                width: 100%;
            }
            .rightChatBoxMessageMainDiv {
                padding-left: 0;
            }
            .ChatBoxNameOnlinemainDiv div:first-child p {
                margin: 0;
                padding: 0;
                font-size: 18px;
                font-weight: 900;
                color: white;
            }
            .ChatBoxNameOnlinemainDiv div:last-child p {
                margin: 0;
                padding: 0;
                color: #F4F4F4;
                font-size: 12px;
                font-weight: 400;
            }
            .opponentChatMainDiv {
                position: relative;
                width: 100%;
            }
            .SearchBox-main-Div-sticky {
                width: 100%;
            }
            .opponentChatMainDiv .RightUserChatedNameDiv div:nth-child(1) p {
                font-size: 14px;
                font-weight: 500;
                color: #000000;
            }
            .opponentChatMainDiv .RightUserChatedNameDiv div:nth-child(2) p {
                font-size: 14px;
                font-weight: 500;
                color: #BDBDBD;
            }
            .opponentChatMainDiv .RightOwnChatedNameDiv div:nth-child(2) p {
                font-size: 14px;
                font-weight: 500;
                color: #000000;
            }
            .opponentChatMainDiv .RightOwnChatedNameDiv div:nth-child(1) p {
                font-size: 14px;
                font-weight: 500;
                color: #BDBDBD;
            }
            .ChatBoxmsgInputMainDiv {
                padding: 1rem 0.8rem 1rem 0.8rem;
                background: white;
                position: sticky;
                bottom: 0;
            }
            .RighrMsgTypingInputAndAll img {
                width: 20px;
                height: auto;
            }
            .RighrMsgTypingInputAndAll div input::placeholder {
                font-size: 14px;
                font-weight: 500;
                color: #BDBDBD;
            }
            .RighrMsgTypingInputAndAll div:nth-child(2) {
                margin: 0 0.4rem;
            }
            .RighrMsgTypingInputAndAll div:nth-child(3) {
                margin: 0 0.4rem;
            }
            .RighrMsgTypingInputAndAll div:nth-child(4) {
                margin-left: 0.4rem;
            }
            .RighrMsgTypingInputAndAll div:nth-child(4) button {
                background: #00E1FF;
                padding: 0.5rem 1.6rem 0.5rem 1.6rem;
                border-radius: 50px;
                border: none;
                box-shadow: none;
                outline: none;
                margin: 0 !important;
            }
            .SearchBox {
                padding: 0.3rem 1.5rem;
            }
            .SearchBox img {
                width: 20px;
                height: 20px;
            }
        }