.floating-wpp
{
    position:fixed;
    bottom:15px;
    left:15px;
    font-size:14px;
    transition:bottom .2s
}

@media(max-width:820px)
{
    .floating-wpp
    {
        position:fixed;
        bottom:45px;
        margin-right:-10px;
        font-size:14px;
        transition:bottom .2s
    }   
}

.floating-wpp .floating-wpp-button
{
    position:relative;
    border-radius:5%;
    box-shadow:1px 1px 4px rgba(60,60,60,.4);
    transition:box-shadow .2s;
    cursor:pointer;
    overflow:hidden;
    width: 142px;
    height: 45px;
    background-color: rgb(37, 211, 102);
}
    
.floating-wpp .floating-wpp-button img,.floating-wpp .floating-wpp-button svg
{
    position:absolute;
    width:25%;
    height:auto;
    object-fit:cover;
    top:50%;
    left:17%;
    transform:translate3d(-50%,-50%,0)
}
    
.floating-wpp:hover
{
    bottom:17px
}

@media(max-width:820px)
{
    .floating-wpp:hover
    {
        bottom:45px
    }
    
    
    .floating-wpp .floating-wpp-popup
    {
        border-radius:6px;
        background-color:#E5DDD5;
        position:absolute;
        overflow:hidden;
        padding:0;
        box-shadow:1px 2px 8px rgba(60,60,60,.25);
        width:0;
        height:0;
        bottom:45px;
        opacity:0;
        transition:bottom .1s ease-out,opacity .2s ease-out;
        transform-origin:bottom
    }
    
    .floating-wpp .floating-wpp-popup.active
    {
        padding:0 12px 12px;
        width:260px;
        height:auto;
        bottom:107px;
        opacity:1
    }
}

.floating-wpp:hover .floating-wpp-button
{
    box-shadow:1px 2px 8px rgba(60,60,60,.4)
}
    
.floating-wpp .floating-wpp-popup
{
    border-radius:6px;
    background-color:#E5DDD5;
    position:absolute;
    overflow:hidden;
    padding:0;
    box-shadow:1px 2px 8px rgba(60,60,60,.25);
    width:0;
    height:0;
    bottom:0;
    opacity:0;
    transition:bottom .1s ease-out,opacity .2s ease-out;
    transform-origin:bottom
}

.floating-wpp .floating-wpp-popup.active
{
    padding:0 12px 12px;
    width:260px;
    height:auto;
    bottom:82px;
    opacity:1
}

.floating-wpp .floating-wpp-popup .floating-wpp-message
{
    background-color:#fff;
    padding:8px;
    border-radius:0 5px 5px;
    box-shadow:1px 1px 1px rgba(0,0,0,.15);
    opacity:0;
    transition:opacity .2s
}

.floating-wpp .floating-wpp-popup.active .floating-wpp-message
{
    opacity:1;transition-delay:.2s
}

.floating-wpp .floating-wpp-popup .floating-wpp-head
{
    text-align:right;
    color:#fff;
    margin:0 -15px 10px;
    padding:6px 12px;
    display:flex;
    justify-content:space-between;
    cursor:pointer
}

.floating-wpp .floating-wpp-input-message
{
    background-color:#fff;
    margin:10px -15px -15px;
    padding:0 15px;
    display:flex;
    align-items:center
}

.floating-wpp .floating-wpp-input-message textarea
{
    border:1px solid #ccc;
    border-radius:4px;
    box-shadow:none;
    padding:8px;
    margin:10px 0;
    width:100%;
    max-width:100%;
    font-family:inherit;
    font-size:inherit;
    resize:none
}

.floating-wpp .floating-wpp-btn-send
{
    margin-left:12px;
    font-size:0;
    cursor:pointer
}