/* hide the original widget - that there were no two labels on the screen*/
#jivo_chat_widget{
    display: none;
}
#jivo_custom_widget{
    transition: all 300ms linear;
    position: fixed;
    bottom: 190px;
    right: -40px;
    width: 35px;
    z-index: 30;
    cursor: pointer;
    height: 35px;
    background-image: url(images/jivo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#jivo_custom_widget2{
    transition: all 300ms linear;
    position: fixed;
    bottom: 150px;
    right: -40px;
    width: 35px;
    z-index: 31;
    cursor: pointer;
    height: 35px;
    background-image: url(images/Telegram.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#jivo_custom_widget3 {
    height: 50px;
    width: 50px;

    position: fixed;
    bottom: 50px;
    right: 10px;
    
    cursor: pointer;
    
    overflow: hidden;
    z-index: 30;
}

#jivo_custom_widget3::before,
#jivo_custom_widget3::after {
    content: '';
    position: absolute;
    inset: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    transition: opacity 300ms linear;
}

#jivo_custom_widget3::before {
    background-image: url(images/help.svg);
    opacity: 1;
}

#jivo_custom_widget3::after {
    background-image: url(images/close.png);
    opacity: 0;
}

#jivo_custom_widget4{
    transition: all 300ms linear;
    position: fixed;
    bottom: 110px;
    right: -40px;
    width: 35px;
    z-index: 31;
    cursor: pointer;
    height: 35px;
    background-image: url(images/whatsapp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#jivo_custom_widget.widget_active{
    right: 17.5px;
}
#jivo_custom_widget2.widget_active{
    right: 17.5px;
}
#jivo_custom_widget3.widget_active::before {
    opacity: 0;
}
#jivo_custom_widget3.widget_active::after {
    opacity: 1;
}
#jivo_custom_widget4.widget_active{
    right: 17.5px;
}

#jivo_custom_widget,
#jivo_custom_widget2,
#jivo_custom_widget3,
#jivo_custom_widget4 {
    transition: opacity 0.3s ease-in, bottom 0.3s ease-in;
}

@media (max-width: 630px) {
    #jivo_custom_widget {
        bottom: 180px;
        display: none !important;
    }
    #jivo_custom_widget2 {
        display: none !important;
        bottom: 140px;
    }
    #jivo_custom_widget3 {
        display: none;
        bottom: 80px;
    }
    #jivo_custom_widget4 {
        display: none;
    }
    jdiv {
        display: none;
    }
}