html,
        body {
            height: 100% !important;
            font-family: "Open Sans", sans-serif !important;
        }

        body {
            background: url("/images/bg-image.png") !important;
            /* background-image: linear-gradient(180deg, #01002E 0%, #720101 100%) !important; */
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
        }

        .css-eycyw2 {
            background-color: #0000000a !important;
        }

        .main {
            background-color: #F1F0F0 !important;
            margin: 15px !important;
        }

        .css-eycyw2 .main {
            border-top: none !important;
            border-radius: 5px !important;
            width: calc(100% - 81.5px) !important;
        }

        .css-115fwte svg, [data-css-115fwte] svg {
            fill: #4f0218 !important;
        }

        .css-1vieo9r {
            background-color: #F1F0F0 !important;
        }

        .css-o3xlyv {
            background-color: #fff !important;
            font-size: 14px !important;
            line-height: 20px !important;
        }

        .css-1s8geyi,
        [data-css-1s8geyi] {
            color: #b9b9b9 !important;
        }

        .chat-window {
            display: flex !important;
        }

        .chat-window .logo {
            width: 70% !important;
            padding: 15px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .chat-window .logo img {
            height: 160px !important;
        }

        .from-user .css-o3xlyv {
            background-color: #b93947 !important;
            color: #fff !important;
        }

        .css-mhj5i1.from-user,
        [data-css-mhj5i1].from-user {
            border-radius: 6px !important;
            border: none !important;
        }

        .css-mhj5i1:not(.from-user),
        [data-css-mhj5i1]:not(.from-user) {
            border-radius: 6px !important;
        }

        body {
            margin: 0 !important;
        }

        #chatwindow {
            width: 30% !important;
            padding: 30px !important;
        }

        .chat-section {
            height: calc(100vh - 60px) !important;
            overflow: hidden !important;
            background-color: #4f0218 !important;
            border-radius: 10px !important;
            box-shadow: 0 0 10px #0000002b !important;
            position: relative !important;
        }

        .css-nil {
            background: #23cedd !important;
        }

        #heading {
            height: 50px !important;
            overflow: hidden !important;
            display: flex !important;
            align-items: center !important;
            padding: 0 12px !important;
            background-color: #eb9388 !important;
        }

        .css-1fyy09s {
            background-color: transparent !important;
        }

        h1 {
            margin: 0 !important;
            font-size: 18px !important;
            line-height: 30px !important;
        }

        #webchat {
            border-bottom-left-radius: 4px !important;
            border-bottom-right-radius: 4px !important;
            height: calc(100% - 50px) !important;
            overflow: hidden !important;
        }

        #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%) !important;
            height: 26px !important;
            width: auto !important;
        }

        .css-1dgbgmu,
        [data-css-1dgbgmu] {
            background: #fff !important;
        }

        .css-u4skb7>button,
        [data-css-u4skb7]>button {
            padding: 5px 10px !important;
            border-radius: 20px !important;
            font-size: 13px !important;
            height: auto !important;
        }

        .css-u4skb7>button:not(:disabled),
        [data-css-u4skb7]>button:not(:disabled) {
            border: 1px solid #fff !important;
            color: #071b49 !important;
            font-weight: 600 !important;
            cursor: pointer !important;
        }

        .css-1vieo9r .ac-pushButton,
        [data-css-1vieo9r] .ac-pushButton {
            background-color: rgb(215 215 215) !important;
            border-width: 0 !important;
            color: #4f0218 !important;
        }

        .voice-button {
            background-color: #eb9389 !important;
            color: #4f0218 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .voice-button img {
            height: 22px !important;
        }

        .stop-button {
            background-color: #f1f0f0 !important;
        }

        .wave-button {
            position: absolute !important;
            left: 10px !important;
            top: 0 !important;
            bottom: 0 !important;
            display: flex !important;
            align-items: center !important;
        }

        .wave-button img {
            height: 41.5px !important;
        }

        @media screen and (max-width:991px) {
            .chat-window .logo {
                width: 50% !important;
            }

            #chatwindow {
                width: 50% !important;
            }
        }

        @media screen and (max-width:767px) {
            .chat-window {
                flex-wrap: wrap !important;
            }

            #chatwindow {
                width: 100% !important;
            }

            .chat-window .logo {
                width: 100% !important;
            }

            .chat-window .logo img {
                height: 60px !important;
            }

            .chat-section {
                height: calc(100vh - 150px) !important;
            }
        }

        .button-container {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 15px 0 !important;
            position: absolute !important;
            z-index: 9 !important;
            bottom: 0 !important;
            right: 10px !important;
        }

        .button-container.voice-control {
            background: #370410 !important;
            left: 0 !important;
            right: 0 !important;
        }

        .button-container button {
            background-color: #d7d7d7 !important;
            border: none !important;
            color: #4f0218 !important;
            padding: 2px 5px !important;
            border-radius: 20px !important;
            cursor: pointer !important;
            font-size: 18px !important;
            height: 41.5px !important;
            width: 41.5px !important;
        }

        .button-container button:disabled {
            background-color: #b9b9b9 !important;
            cursor: not-allowed !important;
        }
        .d-none {
            display: none !important;
        }