.bb_va_popup{
    position: fixed;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: end;
    justify-content: flex-end;
    height: 62vh;
    min-height: 200px;
    width: 350px;
    z-index: 999999;
    background:#fff;
    position: fixed;
    right: 30px;
    bottom: 110px;
    box-shadow:  rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 5px 30px 0px, rgba(0, 0, 0, 0.05) 0px 3px 3px 0px;
    transition: 0.4s ease all;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    &.active{
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }
    .popup-header{
        border-radius: 4px 4px 0px 0px;
        height: 48px;
        width: 100%;
        background-color: rgb(39, 148, 218);
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight:500;
    }
    .popup-body{
        background: #f9fafa;
        padding: 10px;
        max-height: calc(62vh - 102px);
        height: 100%;
        width: 100%;
        flex: 1 1 auto;
        overflow:auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none; 
        }
        .popup-body-command{
            cursor: pointer;
            border-radius: 4px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(193, 203, 212, 0.7) 0px 0px 0px 1px inset, rgb(193, 203, 212) 0px -1px 0px 0px inset;
            padding:20px;
            margin-bottom: 3px;
            transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
            font-size: 13px;
            line-height: 19.5px;
            background-color: white;
            will-change: box-shadow;
            &.hiden{
                opacity: 0;
                visibility: hidden;
                height: 0px;
                padding:unset;
                margin:unset;
                box-shadow:unset;
                .popup-body-command-title{
                    color: transparent;
                }
                .popup-body-command-description{
                    color: transparent;
                }
            }
            &:hover {
                box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.14), rgba(193, 203, 212, 0.7) 0px 0px 0px 1px inset, #c1cbd4 0px -1px 0px 0px inset;
                transform: translate(0px, -2px);
                border-width: initial;
                border-style: none;
                border-color: initial;
                border-image: initial;
            }
            .popup-body-command-title{
                font-weight:500;
                margin-bottom: 5px;
                color: rgb(0, 119, 204);
            }
            .popup-body-command-description{
                color: rgb(114, 128, 142);
            }
        }
    }
    .popup-footer{
        box-shadow: 
        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
        0px -11px 8px -10px rgba(0, 0, 0, 0.14); 
        border-radius:0px 0px 4px 4px;
        display:flex;
        height: 54px;
        background:#fff;
        width: 100%;
        border-top: 1px solid #cdcdcd;
        input[type=text]{
            box-shadow: unset;
            outline: none;
            padding-right: 0px;
            width: 84%;
            height: 100%;
            border: unset;
            border-radius:0px 0px 0px 4px;
            font-size: 13px;
        }
        a{
            padding: 16.5px;
            font-size: 16px;
            color: #bab7b2;
        }
        .wpva-button-micro.active {
            color: #0077cc; 
        }
    }
}


.bb_va_button_popup{
    border-radius: 60px;
    height: 60px;
    width: 60px;
    z-index: 999999;
    background:#2794DA;
    position: fixed;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    box-shadow: 0px 6px 8px 2px rgba(0, 0, 0, 0.14);
    .bb_vs_popup_icon{
        &:before{
            content: '';
            position: absolute;
            opacity: 1;
            z-index: 1;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: transparent url(../images/search.svg) center center no-repeat;
            background-size: 25px auto;
            transition: 0.4s ease all;
        }
        &:after{
            content: '';
            opacity: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            left: 0; 
            top: 0;
            background: transparent url(../images/cancel.svg) center center no-repeat;
            background-size: 14px auto;
            transition: 0.4s ease all;
            transform: scale(0) rotate(-360deg);
        }
    }
    &.active{
        .bb_vs_popup_icon{
            &:before{
                opacity: 0;
                transform: scale(0) rotate(360deg);
            }
            &:after{
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }
    }
}