/* Gabby */
.gabby-wrapper {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    cursor: pointer;
    z-index: 9;
}
.gabby-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 200ms ease-out;
}
.gabby-bg.anim {
    transform: rotate(-20deg);
    transition: 200ms ease-out;
}
.gabby-anim {
    position: relative;
    margin-bottom: 10px;
    width: 50px;
    z-index: 10;
}
.gabby-g {
    position: relative;
    background-image: url("/includes/livechat/images/g-cropped.png");
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-bottom: 10px;
    transition: width 300ms ease-out;
}
.gabby-face {
    position: relative;
    height: 23px;
    width: 2px;
    margin-bottom: 10px;
    transition: width 300ms ease-out;
    opacity: 0;
}
.gabby-face.visible {
    width: 30px;
    opacity: 1;
}
.gabby-intro-bubble {
    position: absolute;
    top: 10px;
    right: -999px;
    width: 163px;
    transition: right 1s ease-out;
}
.gabby-intro-bubble.visible {
    right: 75px;
}
.gabby-intro-bubble img {
    width: 100%;
}
.gabby-wrapper .icon-close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -32px;
    top: 17px;
    color: #fff;
    width: 30px;
    height: 30px;
    opacity: 0;
    transition: opacity 1s;
}
@media all and (min-width: 768px) {
    .gabby-wrapper {
        bottom: 32px;
        right: 32px;
        width: 100px;
        height: 100px;
    }
    .gabby-g {
        background-size: 50px;
        width: 50px;
        height: 38px;
    }
    .gabby-face {
        height: 38px;
    }
    .gabby-face.visible {
        width: 50px;
    }
    .gabby-intro-bubble {
        top: 14px;
        width: 218px;
    }
    .gabby-intro-bubble.visible {
        right: 100px;
    }
}

/* Page modifications */
.to-top-arrow {
    display: none !important;
}

.gabby-wrapper.push-top {
    bottom: 7rem;
    transition: bottom 0.3s;
}

.gabby-wrapper.push-bottom {
    bottom: 0;
    transition: bottom 0.3s;
}