html,
        body {
            height: 100%;
            font-family: "Open Sans", sans-serif;
        }
        
        body {
            background: url("/images/bg-img.jpg");
            /* background-image: linear-gradient(180deg, #01002E 0%, #720101 100%); */
            background-size: contain;
        }
        
        .css-eycyw2 {
            background-color: #0000000a;
        }
        
        .main {
            background-color: #F1F0F0;
            margin: 15px;
        }
        
        .css-eycyw2 .main {
            border-top: none;
        }
        
        .css-1vieo9r {
            background-color: #F1F0F0;
        }
        
        .css-o3xlyv {
            background-color: #fff;
            font-size: 14px;
            line-height: 20px;
        }
        
        .css-1s8geyi,
        [data-css-1s8geyi] {
            color: #000;
        }
        
        .chat-window {
            display: flex;
        }
        
        .chat-window .logo {
            width: 70%;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgb(255 255 255 / 90%);
        }
        
        .chat-window .logo img {
            height: 220px;
        }
        
        .from-user .css-o3xlyv {
            background-color: #071b49;
            color: #fff;
        }
        
        .css-mhj5i1.from-user,
        [data-css-mhj5i1].from-user {
            border-radius: 6px;
            border: none;
        }
        
        .css-mhj5i1:not(.from-user),
        [data-css-mhj5i1]:not(.from-user) {
            border-radius: 6px;
        }
        
        body {
            margin: 0;
        }
        
        #chatwindow {
            width: 30%;
            padding: 30px;
        }
        
        .chat-section {
            height: calc(100vh - 60px);
            overflow: hidden;
            background-color: #23cddc;
            border-radius: 10px;
            box-shadow: 0 0 10px #0000002b;
        }
        
        .css-nil {
            background: #23cedd;
        }
        
        #heading {
            height: 50px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 0 12px;
            background-color: #ffffff5e;
        }
        
        .css-1fyy09s {
            background-color: transparent;
        }
        
        h1 {
            margin: 0;
            font-size: 18px;
            line-height: 30px;
        }
        
        #webchat {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            height: calc(100% - 50px);
            overflow: hidden;
        }
        
        #webchat * {
            font-family: "Open Sans", sans-serif !important;
        }
        
        .css-2p02md > .content > .webchat__row > .bubble,
        [data-css-2p02md] > .content > .webchat__row > .bubble,
        .css-2p02md > .content > .webchat__row > .timestamp,
        [data-css-2p02md] > .content > .webchat__row > .timestamp {
            max-width: 90% !important;
        }

        .css-2p02md > .content > .webchat__row > .bubble.from-user,
        [data-css-2p02md] > .content > .webchat__row > .bubble.from-user,
        .css-2p02md > .content > .webchat__row > .timestamp,
        [data-css-2p02md] > .content > .webchat__row > .timestamp {
            max-width: 70% !important;
        }
        
        .css-1tdb3h1>img,
        [data-css-1tdb3h1]>img {
            transform: translate(-50%, -50%);
            height: 26px;
            width: auto;
        }
        
        .css-1dgbgmu,
        [data-css-1dgbgmu] {
            background: #fff;
        }
        
        .css-u4skb7>button,
        [data-css-u4skb7]>button {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 13px;
            height: auto;
        }
        
        .css-u4skb7>button:not(:disabled),
        [data-css-u4skb7]>button:not(:disabled) {
            border: 1px solid #fff;
            color: #071b49;
            font-weight: 600;
            cursor: pointer;
        }
        
        @media screen and (max-width:991px) {
            .chat-window .logo {
                width: 50%;
            }
            #chatwindow {
                width: 50%;
            }
        }
        
        @media screen and (max-width:767px) {
            .chat-window {
                flex-wrap: wrap;
            }
            #chatwindow {
                width: 100%;
            }
            .chat-window .logo {
                width: 100%;
            }
            .chat-window .logo img {
                height: 60px;
            }
            .chat-section {
                height: calc(100vh - 150px);
            }
        }