/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.raptive-chat-button{
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 106px;
    right: 20px;
    background-color: purple;
    border-radius: 300px;
    text-align: center;
    padding: 10px 20px;
    color: white;
    transition: all 200ms;
    z-index: 2147483645; /* Video ad has a z index of 2147483644. Setting our z index higher to ensure clicking on the chatbot button doesn't accidentally close the video ad. code: https://github.com/cafemedia/adthrive-video/blob/2db8e83b5d927284470805b3eeaf6efc680a6318/js/jwp_non_collapse.js#L106 */
}

.raptive-chat-button.raptive-chat-button-with-slickstream, .raptive-chat-holder.raptive-chat-holder-with-slickstream{
    right: 65px;
}

.raptive-chat-button.raptive-chat-button-with-video{
    translate: 0 -200px;
}

.show-chat-popup.raptive-chat-holder.raptive-chat-holder-with-video{
    translate: 0 -185px;
    height: min(704px, 85% - 280px) !important;
}

@media (max-width: 896px) {
    .raptive-chat-button, .raptive-chat-holder {
        display: none !important;
    }
}

.raptive-chat-button:hover{
    transform: scale(1.05);
}

.raptive-chat-button:active{
    transform: scale(.95);
}

.raptive-chat-button.raptive-chat-button-active{
    padding: 10px 11px;
    line-height:1;
}

.raptive-chat-holder{
    z-index: -1;
    position: fixed;
    bottom: 174px;
    right: 20px;
    width: 0;
    height: 0;
    opacity:0;
    transition: width 200ms ease 0s, height 300ms ease 0s, max-height 200ms ease 0s, transform 300ms cubic-bezier(0, 1.2, 1, 1) 0s, opacity 83ms ease-out 0s;
    display:none;
}

.raptive-chat-popup {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: all;
    height:100%;
}

.show-chat-popup.raptive-chat-holder{
    z-index: 9999;
    width: 400px;
    opacity: 1;
    height: min(704px, 85% - 104px);
    min-height: 80px;
    max-height: 704px;
    transform-origin: right bottom;
    display:block;
}

.show-chat-popup .raptive-chat-popup{
    background: white;
}

.raptive-chat-notice-link-holder{
    position: absolute;
    top: -40px;
    right: 0;
    display:none;
}

.raptive-chat-holder.show-chat-popup .raptive-chat-notice-link-holder{
    display: none;
}

.raptive-chat-notice-link, .raptive-chat-notice-link:active, .raptive-chat-notice-link:focus{
    background-color: white;
    z-index: 9999;
    opacity: 1;
    padding: 4px 7px;
    border-radius: 9px;
    color: #9ca3b0;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 9px;
    font-size:0.9rem;
    text-decoration: none;
    transition: all 200ms;
    display:flex;
}

.raptive-chat-notice-link:hover{
    transform: scale(1.05);
}


.raptive-chat-powered-by-link-holder{
    position: absolute;
    bottom: -36px;
    left: 0;
    display:none;
}

.raptive-chat-holder.show-chat-popup .raptive-chat-powered-by-link-holder{
    display: block;
}

.raptive-chat-powered-by-link-holder svg{
    display: inline-block;
    width: 100px;
    margin-left: 5px;
    margin-top: 2px;
    height: 17px;
}

.raptive-chat-powered-by-link, .raptive-chat-powered-by-link:active, .raptive-chat-powered-by-link:focus{
    background-color: white;
    z-index: 9999;
    opacity: 1;
    padding: 4px 7px;
    border-radius: 9px;
    color: #9ca3b0;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 9px;
    font-size:0.9rem;
    text-decoration: none;
    display:flex;
    transition: all 200ms;
}

.raptive-chat-powered-by-link:hover{
    transform: scale(1.05);
}

#raptiveChatFrame {
    width: 100%;
    height: 100%;
    position: relative;
}



/*Dedicated chat page*/

.raptive-chatbot{
    margin-bottom:20px;
}

.raptive-chatbot-shortcode-iframe{
    opacity:0;
    transition:opacity 300ms;
    transition-delay:300ms;
    border: none;
    min-height:500px;
    transition: all .3s;
}

.raptive-chatbot-shortcode-iframe-active{
    opacity:1;
}

@media (max-width: 768px) {
    .raptive-chatbot-shortcode-iframe{
        min-height: 400px;
    }
}

.raptive-chatbot-separate-page-extra-links{
    display: flex;
    justify-content: center;
    margin-bottom:30px;
}

.raptive-chatbot-powered-by, .raptive-chat-notice-link-on-chat-page{
    border-radius: 4px;
    height:30px;
}

.raptive-chatbot-powered-by{
    padding: 2px 2px;
    opacity:1;
    line-height:1;
    margin-left:5px;
}

.raptive-chatbot-powered-by svg {
    width: 165px;
    height: 17px;
    margin-top:4px;
}

.raptive-chat-notice-link-on-chat-page{
    opacity: 1;
    font-size: 15px;
    padding: 3px 13px;
}