/*Change this to control the size and location of the chat button*/
#myChatButton {
    width: 200px;
    bottom: 4vh;
    right: 2vw;
}

/*Change this to control chat button*/
    #myChatButton span.icon {
        /*display:none;*/
        background-image: url(chat-button-icon.svg);
    }


/*Message header icon*/
    #chatBoxWrapper .chatBoxHeader .chatHeaderIcon span.icon {
        background-image: url(chat-header-icon.svg);
    }
    

    
    input.wc-shellinput, .wc-message-content button{
    font-size: 16px;
}


/*Message header*/
#chatBoxWrapper .chatBoxHeader {
    background: #E31B22;
    border-radius:0;
}

/*Bot message*/
.wc-message-from-bot .wc-message-content {
    background-color: #3A4247!important; 
    color: #fff;
}

.wc-message-from-bot .wc-message-content p{
    background-color: #3A4247!important; 
    color: #fff;
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
}


/*Bot Callout*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups .wc-message.wc-message-from-bot .wc-message-content svg.wc-message-callout {
    display: none;
}
.wc-message-from-bot .wc-message-content {
    border-radius: 13px 13px 13px 0 !important;    
    background-color: #3A4247!important;
    color: #fff;
}

#chatBoxWrapper .wc-card button:active, .wc-card button, .wc-card button:hover {
    background-color: #E31B22!important;
}

/*User Callout*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups .wc-message.wc-message-from-me .wc-message-content svg.wc-message-callout {
    display: none;
}
.wc-message-from-me .wc-message-content {
    border-radius: 13px 13px 0px 13px !important;
    background-color: #E31B22;
    color: #eceff1;
}


#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-console {
    border: none !important;
    border-radius: 0 !important;
    background: #E31B22 !important;
    overflow: hidden;
    -webkit-transition: all .8s ease-out;
    -o-transition: all .8s ease-out;
    transition: all .8s ease-out;
}

/*Carousel Button Colour*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups .wc-message-group-content .wc-message-wrapper.carousel .wc-carousel button.scroll {
    background-color: #E31B22 !important;
}

/*Click button*/
#chatBoxWrapper .ac-pushButton:active {
    transform: scale(0.97) !important;
    line-height: 1.4 !important;
}

/*Hover on button*/
#chatBoxWrapper .ac-pushButton:hover {
    transform: scale(0.99) !important;
}

/*Spacing between messages*/
#chatBoxWrapper .wc-message-wrapper {
    margin-bottom: 0;
}

/*Width of chatbox - desktop*/
#chatBoxWrapper {
    width: 380px;
}

/*Height of chat box - desktop*/
#chatBoxWrapper .chatBoxContent {
    height: 535px;
}

@media only screen and (max-height: 700px) {
    #chatBoxWrapper .chatBoxContent {
        height: 77vh;
    }
}

/*Top chat gradient fadeaway*/
#chatBoxWrapper .chatBoxHeader::after {
    background: linear-gradient(180deg,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,0));;
}

/*Chat header icon wrapper*/
#chatBoxWrapper .chatBoxHeader .chatHeaderIcon {
    width:auto;
}

/*Chat header title wrapper*/
#chatBoxWrapper .chatBoxHeader .chatHeaderTitle {
    text-align:left;
    padding-left: 15px;
}

#chatBoxWrapper .chatBoxHeader .chatHeaderTitle h1{
    line-height:35px !important;
}

/*Chrome custom scrollbar*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups::-webkit-scrollbar-thumb {
    background: #3A4247;
}

/*Toms fix for overriding styles on chat boxes*/
#chatBoxWrapper .wc-message-from-bot .wc-message-content p{
    background-color: #3A4247!important; 
    color: #fff;
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
}

/*Mobile icon styles*/ 
@media only screen and (max-width:768px) {
    #myChatButton  {
        width:180px !important;
    }
}