#SupportChatOnline {
    position: sticky;
    bottom: 60px;
    right: 20px;
    z-index: 998;
    transition: 2s all ease-in-out;
}

    #SupportChatOnline i {
        font-size: 50px;
    }

.chatOnline {
    position: sticky;
    width: 380px;
    height: 500px;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    transition: 2s all ease-in-out;
    display: none;
}

    .chatOnline .chatBox {
        width: 95%;
        margin: 10px auto;
    }

    .chatOnline .card {
        border-radius: 10px;
        border: unset !important;
        background-color: #fff;
        height: 100%;
        -webkit-box-shadow: 0.5px 0.5px 17.5px -3px #000000;
        -moz-box-shadow: 0.5px 0.5px 17.5px -3px #000000;
        box-shadow: 0.5px 0.5px 17.5px -3px #000000;
    }

        .chatOnline .card .card-header {
            border-radius: 10px 10px 0 0;
            padding: 20px 0;
            text-align: center;
            background-color: var(--primary1);
            color: #fff;
        }

            .chatOnline .card .card-header .headsetIcon {
                position: absolute;
                top: 2%;
                right: 20px;
                width: 40px;
                height: 40px;
                background-repeat: no-repeat;
                font-size: 40px;
                background-size: contain;
            }

            .chatOnline .card .card-header #btnCloseChat {
                content: "";
                position: absolute;
                top: 1%;
                left: 8px;
                font-size: 40px;
                cursor: pointer;
            }

            /*  .chatOnline .card .card-header::before {
                content: "";
                background-image: url(../image/baseline-close.svg);
                position: absolute;
                top: 5%;
                left: 20px;
                width: 25px;
                height: 25px;
                background-repeat: no-repeat;
                background-size: contain;
            }*/

            .chatOnline .card .card-header:hover::before {
                cursor: pointer;
            }

        .chatOnline .card .card-body {
            overflow: scroll;
            overflow-x: hidden;
            scrollbar-width: thin;
        }

    .chatOnline #sendButton {
        position: absolute;
        bottom: 10px;
        right: 18px;
    }

        .chatOnline #sendButton:hover {
            cursor: pointer;
        }

#messageInput {
    padding: 10px 45px 10px 10px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #fff !important;
    font-size: 14px;
}

#sendButton {
    background-color: transparent;
    border: none;
}


.chatOnline .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(234, 226, 226, 0.25) !important;
}
/* Chat containers */
.chat-container {
    display: flex;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 5px;
}

/* Darker chat container */
.darker {
    border-color: #ccc;
    background-color: #ddd;
}

/* Clear floats */
.chat-container::after {
    content: "";
    clear: both;
    display: table;
}

/* Style images */
.chat-container img {
    float: left;
    max-width: 40px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
}

    /* Style the right image */
    .chat-container img.right {
        float: right;
        margin-left: 20px;
        margin-right: 0;
    }

/* Style time text */
.time-right {
    margin-right: auto;
    color: #aaa;
}

/* Style time text */
.time-left {
    margin-right: auto;
    color: #999;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.bi-send::before {
    font-size: 1.5rem !important;
    transform: rotate(45deg) !important;
    color: var(--primary1) !important;
}