.a21chat_v4 {
    position: relative;

    .a21chat:hover .a21chat-body {
        display: block;
    }
    
    .a21chat-icon {
        position: relative;
        cursor: pointer;
        z-index: 9999;
        visibility: visible;
    
        a {
            white-space: nowrap;

            &:hover {
                background-color: #fff;
            }
        }
    }
    
    .a21chat-icon-in {
        display:none;
        box-shadow: none;
    }
    
    .a21chat-body {
        width: 200px;
        height: 170px;
        position: absolute;
        background: rgba(255, 255, 255, 1);
        padding: 30px 10px 10px;
        max-width: 400px;
        margin: 0 auto;
        box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.2);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 40px;
        z-index: 20;
        transition-duration: 1s;
        top:15px;
        left: 0;
        right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        overflow: hidden;

        h3 {
            text-align: center;;
        }

        h5 {
            text-align: center;
            font-size: 16px;
        }

        p {
            font-size: 10px;
            color: #888;
            text-align: center;
        }
        
        ul {
            opacity: 1;
            transition-delay: 1s;
            transition: opacity 1s;
            display: flex;
            justify-content: space-around;
            padding-top: 10px;

            li {
                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #fab41d;
                    color: #000;
                    border: 1px solid #fab41d;
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;
                    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%)!important;
                    border: none!important;

                    &:hover {
                        background-color: #fff;
                        color: #fff;
                    }
                }
            }
        }
        img {
            opacity: 1;
            transition-delay: 1s;
            transition: opacity 1s;
        }
    }
    
    .a21chat-body-hidden{
        visibility: hidden;
        width: 205px;
        height: 0;
        transition-duration: 1s;
        padding: 0 10px 0;
    
        ul {
            opacity: 0;
            transition-delay: 1s;
            transition: opacity 1s;
        }
        img {
            opacity: 0;
            transition-delay: 1s;
            transition: opacity 1s;
        }
    }
    
    .a21chat-logo {
        text-align: center;
        img {
            height: 45px !important;
        }
    }
    
    .a21chat-body li {
        height: 55px;
        text-align: center;
        p {
            padding: 0px;
            font-size: 10px;
            text-align: center;
            margin: 0px;
        }
        img {
            max-width: 40px;
            max-height: 40px;
            padding: 2px;
            margin-bottom:-5px;
        }
    }
    
    .a21chat-close {
        display: inline-block;
        position: relative;
        top: -33px;
        right: -10px;
        font-size: 26px;
        font-weight: 900;
        float: right;
        cursor: pointer;
        padding: 5px 10px;
        margin-bottom: -39px;
    }
}


.sidebar-info {
    .a21chat_v4 {
        .a21chat-icon {
            position: relative;
            cursor: pointer;
            z-index: 9999;
            visibility: visible;
        
            a {
                white-space: nowrap;
    
                &:hover {
                    background-color: #fff!important;
                    border-color: #fab41d!important;
                    color: #000!important;
                }
            }
        }

        .a21chat-body {
            right: unset;
        }
    }
}