#splash {
	position:absolute;
	display:none;
	top: 10%; left:3%;
	width: 100%;
	height: 100%;
	text-align: center;
	/* orig background: #ff0; */
	background: url("../../images/live-chat/splash.png") no-repeat;
	opacity: 1;
}


#messages a.avaorange {
	color: rgb(255,69,0);
	font-style: italic; 
	
}
#messages a.avaorangeinline {
	color: rgb(255,69,0);
	font-style: italic; 
	display:inline
	
}
#messages a.avablue {
	color: rgb(0,191,255);
	font-style: italic; 
}
#messages p.avawhite {
	color: white;
	font-style: italic; 
	
}
.noagentsavail {
    text-decoration: underline;
    color: blue;
}
.liveAgtIconHide {
	visibility:hidden;
}
.liveAgtIconShow {
	visibility:visible;
}
/* output from chatbot as list */
#messages { color:#eee; }
#messages ul { font-size:13px; padding-left:2px; }
#messages ul li { }
#messages ul li ol { list-style-image: url("/grt/images/live-chat/nested.png"); padding:5px 0 5px 18px; font-size:11px; }
#messages ul li ol li { color:#bfe1f1; height:14px; margin-left:10px; }

#messages ol p {
	padding-top: 3px;
	margin-top: 8px;
}
.chatbotnewcontent {
    width: 100%;
    height: 100%;
    background-color: #4a4a4a;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}
 
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: #4a4a4a;}
    to {background-color: #C8C8C8 ;}
}
 
/* Standard syntax */
@keyframes example {
    from {background-color: #4a4a4a;}
    to {background-color: #424242 ;}
	from {background-color: #424242;}
	to {background-color: #4a4a4a ;}
}



/* bubbles */
.fromcustbubble {
position: relative;
background: white;
border-radius: .4em;
max-width: 98%;
padding: 5px;
display:inline-table;
}

.fromcustbubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 12px;
	width: 0;
	height: 5px;
	border: 13px solid transparent;
	border-bottom-color: white;
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -13px;
}

.fromagentbubble {
position: relative;
background: black;
border-radius: .4em;
max-width: 98%;
padding: 5px;
display:inline-table;
}

.fromagentbubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 12px;
	width: 0;
	height: 5px;
	border: 13px solid transparent;
	border-bottom-color: black;
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -13px;
}
/* end bubbles */



/* chatInterface - messages background color gradients */

#chatInterface {
display:block;

	  
	  background: #ff4d4d; /* For browsers that do not support gradients */
	      background: -webkit-linear-gradient(#ff4d4d, grey); /* For Safari 5.1 to 6.0 */
	      background: -o-linear-gradient(#ff4d4d, grey); /* For Opera 11.1 to 12.0 */
	      background: -moz-linear-gradient(#ff4d4d, grey); /* For Firefox 3.6 to 15 */
	    background: linear-gradient(#ff4d4d, grey); /* Standard syntax */
  /* end gradients */
  border-style: inset;
  border-color: crimson;
  border-right: blue;
  }




.whileInCoBrowse {

position:absolute;

top:5%;
right:0%;
width:600px;
background: url("../../images/live-chat/LiveChat2arrowIN.png") no-repeat;
/* background-repeat: no-repeat; */
background-color:#4a4a4a;
padding-left:20px;


}

.newMsgWhileInCoBrowse {
background-color: white;
animation-name: whileHide;
animation-duration: 5s;
animation-delay: 1s;
animation-iteration-count: infinite;

}

@keyframes whileHide {
from {background-color: white; }
to {background-color: red; }
}



.hidden {
}

.whileHideInCoBrowse {

position:absolute;

top:5%;
right:1%;
width:800px;
background: url("../../images/live-chat/LiveChat2arrow_out.png") no-repeat;
/* background-repeat: no-repeat; */
background-color:#4a4a4a;
padding-left:20px;


}

.chatUIHelpersClass {
    position: absolute;
    background: #ff4d4d;
    /* top: 5%; */
    display: inline;
    height: 363px;
    width: 25px;
    background-size:contain;
    z-index: 1000;
    left: 0px;
    }


/*OPTIONAL: Popout chat to new window css fix*/
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #4a4a4a;
    font-family: Arial, san-serif;
	font-size: 12px;
}

.Waitbg-1 {
	background: #ECEFF1;
	color: #37474f;
}


/* Wait button style */
.Waitbutton {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.Waitbutton:focus {
	outline: none;
}
.Waitbutton > span {
	vertical-align: middle;
}

/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */
.Waitbg-1 .Waitbutton {
	/* color: #37474f; */
	color: darkorange;
	/* border-color: #37474f; */
	border-color: darkgoldenrod; 
}



.Waitbutton--round-s {
	border-radius: 5px;
}

/* Borders */
.Waitbutton--border-thin {
	border: 1px solid;
}




/* Waitoptions */
.Waitbutton--Waitoptions {
	overflow: hidden;
	/* padding: 0; */
	padding: 8;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.Waitbutton--Waitoptions::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	color: #3f51b5;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.Waitbutton--Waitoptions > span {
	display: block;
}
.Waitbutton--Waitoptions.button--inverted {
	color: #7986cb;
}
.Waitbutton--Waitoptions.button--inverted:after {
	color: #fff;
}
.Waitbutton--Waitoptions::after,
.Waitbutton--Waitoptions > span {
	padding: 1em 2em;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.Waitbutton--Waitoptions:hover {
	border-color: #3f51b5;
	background-color: rgba(63, 81, 181, 0.1);
}
.Waitbutton--Waitoptions.button--inverted:hover {
	border-color: #21333C;
	background-color: #21333C;
}
.Waitbutton--Waitoptions:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.Waitbutton--Waitoptions:hover > span {
	opacity: 0;
	-webkit-transform: translate3d(0, -25%, 0);
	transform: translate3d(0, -25%, 0);
}

/* for cust sent url links - i.e copy paste url links */
#live-chat #messages .sent.fromcustbubble a {
	color:blue;
}