.whatsapp-widget {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 999
}

    .whatsapp-widget .whatsapp-btn {
        display: block;
        padding: 15px;
        background-color: #fff;
        border-radius: 50%;
        line-height: 1;
        cursor: pointer;
        -webkit-box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        -moz-box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        box-shadow: 0 3px 12px rgba(0,0,0,0.15)
    }

        .whatsapp-widget .whatsapp-btn, .whatsapp-widget .whatsapp-btn svg, .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn, .whatsapp-widget .whatsapp-window {
            -webkit-transition: all ease-in-out .3s;
            -moz-transition: all ease-in-out .3s;
            -ms-transition: all ease-in-out .3s;
            -o-transition: all ease-in-out .3s;
            transition: all ease-in-out .3s
        }

            .whatsapp-widget .whatsapp-btn.focused, .whatsapp-widget .whatsapp-btn:hover {
                background-color: #4FCE5D;
                -webkit-box-shadow: 0 3px 22px rgba(0,0,0,0.35);
                -moz-box-shadow: 0 3px 22px rgba(0,0,0,0.35);
                box-shadow: 0 3px 22px rgba(0,0,0,0.35)
            }

                .whatsapp-widget .whatsapp-btn.focused svg, .whatsapp-widget .whatsapp-btn:hover svg {
                    fill: #fff
                }

    .whatsapp-widget .whatsapp-window {
        position: absolute;
        top: 0;
        left: -258px;
        display: block;
        min-width: 320px;
        max-width: 320px;
        opacity: 0;
        visibility: hidden;
        -webkit-box-shadow: 0 12px 24px 0 rgba(0,0,0,0.1);
        -moz-box-shadow: 0 12px 24px 0 rgba(0,0,0,0.1);
        box-shadow: 0 12px 24px 0 rgba(0,0,0,0.1)
    }

        .whatsapp-widget .whatsapp-window.opened {
            opacity: 1;
            visibility: visible
        }

        .whatsapp-widget .whatsapp-window .whatsapp-header {
            background-color: #095e54;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            padding: 15px;
            -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
            -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2)
        }

            .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 20px;
                height: 20px;
                opacity: .4;
                cursor: pointer;
                outline: transparent;
                display: -webkit-flex;
                display: flex;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center
            }

                .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn::before, .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn::after {
                    content: '';
                    position: absolute;
                    width: 12px;
                    height: 2px;
                    background-color: #fff;
                    display: block;
                    border-radius: 2px
                }

                .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn:hover {
                    opacity: .8
                }

                .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn::before {
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg)
                }

                .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-close-btn::after {
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg)
                }

            .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-user-container {
                position: relative;
                display: block;
                width: 52px;
                height: 52px;
                -webkit-flex-shrink: 0;
                flex-shrink: 0
            }

                .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-user-container::before {
                    content: '';
                    bottom: 0;
                    right: 0;
                    display: block;
                    width: 12px;
                    height: 12px;
                    box-sizing: border-box;
                    background-color: #4ad504;
                    position: absolute;
                    z-index: 1;
                    border-radius: 50%;
                    border: 2px solid #095e54
                }

                .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-user-container .whatsapp-user-inner {
                    height: 100%;
                    width: 100%;
                    background-color: #fff;
                    overflow: hidden;
                    border-radius: 50%;
                    position: relative;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-align-items: center;
                    align-items: center
                }

                    .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-user-container .whatsapp-user-inner::after {
                        border-radius: 50%;
                        border: 1px solid rgba(0,0,0,0.1);
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        position: absolute;
                        content: '';
                        overflow: hidden
                    }

                    .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-user-container .whatsapp-user-inner .whatsapp-user-image {
                        min-width: 100%;
                        height: 100%;
                        -webkit-flex-shrink: 0;
                        flex-shrink: 0;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-image: url(../../../images/apple-touch-icon.png)
                    }

            .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-header-info {
                margin-left: 16px;
                margin-right: 16px;
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                color: #fff
            }

        .whatsapp-widget .whatsapp-window .whatsapp-content {
            position: relative;
            display: block;
            padding: 20px;
            background-color: #e6ddd4
        }

            .whatsapp-widget .whatsapp-window .whatsapp-content::before {
                display: block;
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                background-image: url(../../../images/whatsapp-chat-bg.png);
                z-index: 0;
                opacity: .08
            }

            .whatsapp-widget .whatsapp-window .whatsapp-content .whatsapp-content-message {
                display: -webkit-flex;
                display: flex;
                z-index: 1
            }

                .whatsapp-widget .whatsapp-window .whatsapp-content .whatsapp-content-message .whatsapp-content-message-text {
                    position: relative;
                    padding: 7px 14px 6px;
                    background-color: #fff;
                    border-radius: 0 8px 8px 8px;
                    z-index: 2;
                    box-shadow: 0 1px .5px rgba(0,0,0,0.13);
                    margin-top: 4px;
                    max-width: calc(100% - 30px)
                }

                    .whatsapp-widget .whatsapp-window .whatsapp-content .whatsapp-content-message .whatsapp-content-message-text p {
                        display: block;
                        font-size: 14px;
                        line-height: 19px;
                        color: #111;
                        margin: 0 0 10px
                    }

                        .whatsapp-widget .whatsapp-window .whatsapp-content .whatsapp-content-message .whatsapp-content-message-text p:last-child {
                            margin-bottom: 0
                        }

                    .whatsapp-widget .whatsapp-window .whatsapp-content .whatsapp-content-message .whatsapp-content-message-text::before {
                        position: absolute;
                        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURUxpccPDw9ra2m9vbwAAAAAAADExMf///wAAABoaGk9PT7q6uqurqwsLCycnJz4+PtDQ0JycnIyMjPf3915eXvz8/E9PT/39/RMTE4CAgAAAAJqamv////////r6+u/v7yUlJeXl5f///5ycnOXl5XNzc/Hx8f///xUVFf///+zs7P///+bm5gAAAM7Ozv///2fVensAAAAvdFJOUwCow1cBCCnqAhNAnY0WIDW2f2/hSeo99g1lBYT87vDXG8/6d8oL4sgM5szrkgl660OiZwAAAHRJREFUKM/ty7cSggAABNFVUQFzwizmjPz/39k4YuFWtm55bw7eHR6ny63+alnswT3/rIDzUSC7CrAziPYCJCsB+gbVkgDtVIDh+DsE9OTBpCtAbSBAZSEQNgWIygJ0RgJMDWYNAdYbAeKtAHODlkHIv997AkLqIVOXVU84AAAAAElFTkSuQmCC);
                        background-position: 50% 50%;
                        background-repeat: no-repeat;
                        background-size: contain;
                        content: '';
                        top: 0;
                        left: -12px;
                        width: 12px;
                        height: 19px
                    }

        .whatsapp-widget .whatsapp-window .whatsapp-footer {
            display: block;
            padding: 15px;
            background-color: #fff
        }

            .whatsapp-widget .whatsapp-window .whatsapp-footer a {
                padding: 8px 20px 8px 0;
                border: none;
                background-color: #4fce5d;
                border-radius: 18px;
                color: #fff;
                font-size: 15px;
                font-weight: 700;
                line-height: 20px;
                text-decoration: none;
                outline: none;
                cursor: pointer;
                position: relative;
                display: -webkit-flex;
                display: flex;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center;
                overflow: hidden
            }

                .whatsapp-widget .whatsapp-window .whatsapp-footer a svg {
                    margin-right: 10px
                }

                .whatsapp-widget .whatsapp-window .whatsapp-footer a svg, .whatsapp-widget .whatsapp-window .whatsapp-footer a span {
                    position: relative;
                    z-index: 9
                }

                .whatsapp-widget .whatsapp-window .whatsapp-footer a::before {
                    content: '';
                    position: absolute;
                    display: block;
                    opacity: 0;
                    -webkit-transform: scale(1);
                    transform: scale(1);
                    background-color: #000;
                    z-index: 0;
                    transition: .2s ease all;
                    border-radius: 20px;
                    width: 10px;
                    height: 10px;
                    bottom: -5px
                }

                .whatsapp-widget .whatsapp-window .whatsapp-footer a:hover::before {
                    -webkit-transform: scale(40);
                    transform: scale(40);
                    opacity: .1;
                    border-radius: 8px
                }

@media screen and (max-width:640px) {
    .whatsapp-widget .whatsapp-btn {
        padding: 10px
    }

        .whatsapp-widget .whatsapp-btn svg {
            width: 20px;
            height: 20px
        }

    .whatsapp-widget .whatsapp-window {
        left: -218px;
        min-width: 260px;
        max-width: 260px
    }

        .whatsapp-widget .whatsapp-window .whatsapp-header {
            padding: 10px
        }

            .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-user-container {
                width: 40px;
                height: 40px
            }

            .whatsapp-widget .whatsapp-window .whatsapp-header .whatsapp-header-info {
                font-size: 14px
            }

        .whatsapp-widget .whatsapp-window .whatsapp-content .whatsapp-content-message .whatsapp-content-message-text p {
            font-size: 12px
        }
}