.chat-card{
        background: transparent;
        /* Note: currently only Safari supports backdrop-filter */
        backdrop-filter: blur(30px);
        --webkit-backdrop-filter: blur(30px);
        background-color: rgba(255, 255, 255, 0.05);
        width: 300px;
        height: 350px;

    }
    .chat .chat-dailog{
        transition: width 0.25s, opacity 0.25s, transform 0.25s;
            position: absolute;
    bottom: 120%;
    
    }
html[dir='ltr'] .chat .chat-dailog{right: 7%;}
html[dir='rtl'] .chat .chat-dailog{left: 7%;}
    .chat .chat-dailog .card-header{
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between;
                align-items: center;
                background: transparent;
                backdrop-filter: blur(30px);
                --webkit-backdrop-filter: blur(30px);
                background-color: rgba(255, 255, 255, 0.05);

    }
    .chat .chat-dailog .card-header .avatar{

        background: #f9c03f5e;
        backdrop-filter: blur(0px);
        --webkit-backdrop-filter: blur(0px);
        padding: .3rem!important;
        top: -18px;
        border-radius: 50%;
    }
    .chat .chat-dailog .card-header .avatar div{
        background: #2d2c28e0;
        border-radius: 50%;
        backdrop-filter: blur(0px);
        --webkit-backdrop-filter: blur(0px);
        
    }
    .chat .chat-dailog .card-header .avatar div svg{
        width: 1.5rem;
        height: 1.5rem;
        
    }
    .chat .chat-dailog .card-header .close-dailog{
    
       background: transparent;
                backdrop-filter: blur(30px);
                --webkit-backdrop-filter: blur(30px);
                background-color: rgba(255, 255, 255, 0.05);
                color: firebrick;
                cursor: pointer;
    }
    .chat .chat-dailog .chat-massage{
            padding: .5rem;
            border-radius: 0.3rem;
            backdrop-filter: blur(0px);
            --webkit-backdrop-filter: blur(0px);
    }
    .chat .chat-dailog .chat-massage.sent-massage{
            background: #f9c03f96;
    }
    .chat .chat-dailog .chat-massage.recived-massage{
            background: #2d2c28e0;
    }
    .chat .chat-dailog .welcom-text{
            padding: 1rem;
            font-size: 12px;
    }
    .chat .chat-dailog .form-control{
                border: 0;
                background: transparent;
    }
    .chat .chat-dailog .input-group-text{
                background: transparent;
                border: 1px solid #f9c03f;
                border-radius: 5rem !important;
    }
    .chat .chat-dailog .input-group-text svg{
                stroke: #f9c03f;
    }
    .hidden{
        display: none ;
    }
        .send_msg{

       border-radius: 10px 0px 10px 10px;
    background: #f9c03f96;
        /* Note: currently only Safari supports backdrop-filter */
        backdrop-filter: blur(0px);
        --webkit-backdrop-filter: blur(0px);
        /* (plus shape's fill blended on top as a separate layer with 50% opacity) */

    }
    .rescived_msg{
     border-radius: 0px 10px 10px 10px;
        background: #2d2c28e0;
        /* Note: currently only Safari supports backdrop-filter */
        backdrop-filter: blur(0px);
        --webkit-backdrop-filter: blur(0px);
    }