/* скрываем оригинальный виджет - чтобы не было два ярлыка на экране*/
#jivo_chat_widget {
    display: none !important;
}

/* стиль по умолчанию - для оффлайн сообщений, если никого нет в онлайне */
#jivo_custom_widget {
    position: fixed;
    right: 20px;
    bottom: 50px;
    width: 93px;
    background-color: #000;
    z-index: 300000;
    cursor: pointer;

    height: 48px;
    background-size: contain;
    background-position: left;
    background-image: url(images/jivo_widget_online.png);
    background-repeat: no-repeat;
    border-radius: 25%;

    transition: 0.2s ease-in-out;
}

#jivo_custom_widget::before {
    content: 'Chat';
    position: fixed;
    right: 63px;
    bottom: 60px;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
}

.pulse {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 93px;
    height: 48px;
    border-radius: 25%;
    z-index: 299999;
    -webkit-animation: sploosh 2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes sploosh {
    0% {
        box-shadow: 0 0 0 0 rgba(140, 140, 140, 0.7);
        background: rgba(140, 140, 140, 0.7);
    }
    80% {
        background: rgba(66, 166, 223, 0);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(66, 166, 223, 0);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.2);
    }
    3.3% {
        -webkit-transform: scale(0.4);
    }
    16.5% {
        -webkit-transform: scale(0.3);
    }
    33% {
        -webkit-transform: scale(0.4);
    }
    100% {
        -webkit-transform: scale(0.2);
    }
}

/* если есть операторы в онлайне - показываем другой ярлык*/
#jivo_custom_widget.jivo_online {
    background-image: url(images/jivo_widget_online.png);
}

@media (max-width: 1023px) {
    #jivo_custom_widget {
        bottom: 25px;
        right: -30px;

        width: 100px;
        height: 50px;

        background-image: url(images/jivo_widget_online.png);
        background-size: contain;
        background-position: left;

        transition: 0.2s ease-in;
        opacity: 1;
        border-radius: 25%;
    }

    #jivo_custom_widget::before {
        right: 62px;
        bottom: 37px;
    }

    /* если есть операторы в онлайне - показываем другой ярлык*/
    #jivo_custom_widget.jivo_online {
        background-image: url(images/jivo_widget_online.png);
        opacity: 1;
    }

    .pulse {
        bottom: 26px;
        right: 15px;
    }
}

@media (min-width: 1024px) {
    #jivo_custom_widget {
        right: 50px;
        bottom: 50px;
    }
}