/*Body Images for Demo*/

body {
	background-size: cover; 
	background-image: url(bg-mobile.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

@media (min-width: 550px) {
	body {
		background-image: url(bg-tablet.jpg);
	}
}


@media (min-width: 1000px) {
	body {
		background-image: url(bg-desktop.jpg);
	}
}

/*Change this to control the size and location of the chat button*/
#myChatButton span.icon {
	background-image: url(Tui-bubble.png);
	width: 200px !important;
    height: 200px !important;	
}

#myChatButton{
	width:200px !important;
	height:200px !important;
}



/*Message container*/
#chatBoxWrapper {
       
}

/*Message header*/
#chatBoxWrapper .chatBoxHeader {
	background: #26C4F1 !important;
}

#chatBoxWrapper .chatBoxHeader .sub-heading{
   
}

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

/*Header buttons*/
/*Feedback*/
#chatBoxWrapper .chatBoxHeader span.icon.feedback {

}

/*Close Chat button (change background-image to change the button)(!important required)*/
#chatBoxWrapper .chatHeaderClose {

}

/*Message panel background */
#chatBoxWrapper .chatBoxContent {
 
}

/*Message input area*/
#chatBoxWrapper#chatBoxWrapper .chatBoxContent input:focus {
    
}

/*Message background for feedback buttons, for best results  the colour should match #chatBoxWrapper .chatBoxContent */
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane.show-actions .wc-suggested-actions .wc-hscroll ul {
    
}

/*Feedback buttons on button panel*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane.show-actions .wc-suggested-actions .wc-hscroll ul li button {
    color: #26C4F1;
}

/*Feeback buttons on button panel - Active */
.wc-suggested-actions .wc-hscroll>ul>li button:active {
	color: white !important;
	background: #9CBD3A !important;
   
}

/*Button background colour for site search Next/Prev buttons*/
#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 {
    
}

/*Button text colour for site search Next/Prev buttons*/
#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 svg {
    
}

/*Buttons used in messages from the bot*/
#chatBoxWrapper .wc-card button:active, .wc-card button,
#chatBoxWrapper .wc-card button:active, .wc-card button:hover{
	background: white !important;
	color: #26C4F1 !important;
    
}

/*Border Radius removal */
#chatBoxWrapper,.wc-message-content,.chatBoxHeader {
	
}

/*Speech bubble colour for messages from the Bot*/
#chatBoxWrapper .wc-message-from-bot .wc-message-content
{	
    background: #26C4F1 !important;
}

/*Speech bubble animation for both - Bot & User message*/
@keyframes animationFrames{
	  0% {
	    opacity: 0;
	    bottom: -40px
	  }
	  20% {
	    bottom: 0;
	  }
	  40% {
	    opacity: 1;
	  }
	  100% {
	    
	  }
}

/*Card Bubble P Text */
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups .wc-message-group-content .wc-message-wrapper.carousel .wc-carousel .wc-hscroll ul .wc-carousel-item .wc-card.wc-adaptive-card .ac-container .ac-container p {
    
}

/*Speech bubble colour for messages from the Bot - for best results fill colour should match #chatBoxWrapper .wc-message-from-bot .wc-message-content*/
#chatBoxWrapper .wc-message-from-bot svg.wc-message-callout path{
	fill: #26C4F1 !important;
}

/*Speech bubble colour for messages from the the user*/
#chatBoxWrapper .wc-message-from-me .wc-message-content {
	background: #9CBD3A !important;
	
}

/*Speech bubble colour for messages from the user - for best results fill colour should match #chatBoxWrapper .wc-message-from-me .wc-message-content*/
#chatBoxWrapper .wc-message-from-me svg.wc-message-callout path{
	fill: #9CBD3A !important;
}

/*Message panel scrollbar background*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups::-webkit-scrollbar-track,
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups::-webkit-scrollbar
 {
    
}

/*Message panel scrollbar colour*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-message-pane .wc-message-groups::-webkit-scrollbar-thumb {
    background: #26C4F1 !important;
    
}

/*Send message button*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-console svg {    
		
}

/*Search Results bubble background color(!important required)*/
#chatBoxWrapper .carousel .wc-message-from-bot .wc-message-content {

}

/*Search Results bubble triangle - for best results fill colour should match .carousel .wc-message-from-bot .wc-message-content*/
#chatBoxWrapper .carousel .wc-message-from-bot svg.wc-message-callout path {

}

/*Search Results carousel scroll button */
#chatBoxWrapper .carousel .wc-message-from-bot .wc-message-content .wc-carousel .scroll {
	background: #9CBD3A !important;
	
}
/*Search Results carousel scroll button arrow */
#chatBoxWrapper .carousel .wc-message-from-bot .wc-message-content .wc-carousel .scroll svg path {

}

/*Search Results carousel Read More button */
#chatBoxWrapper .carousel .wc-message-from-bot .wc-message-content .wc-carousel .wc-hscroll ul .wc-carousel-item .wc-card .ac-pushButton {
	    
}

/*Links*/
#chatBoxWrapper a,
#chatBoxWrapper a:hover,
#chatBoxWrapper a:visited {
    
}

/*Console (Message input Box Border)*/
.wc-console {
    background: #9CBD3A !important;
}

/*Console (Message input Box) */
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-console .wc-textbox input[type=text] {
    
}

/*Console (Send Message Button)*/
#chatBoxWrapper .chatBoxContent .wc_narrow .wc-chatview-panel .wc-console button.wc-send {
    
}