.chatmsg{border:solid 1px #dedede;box-sizing:border-box;padding:10px;width:70%;margin:10px;clear:both;line-height:1.4em;}
.chatmsg.from_agent{margin-right:25%;border-radius:10px 10px 10px 0;}
.chatmsg.from_user{margin-left:25%;}

.agentname{clear:both;background:#f0fff0;float:left;margin-bottom:-5px;padding:5px 10px;border-radius:10px;border:solid 2px #66cc66;}

.botchat_wait{width:24px;height:24px;vertical-align:middle;filter:hue-rotate(150deg);}

.chatmsg a{border-bottom:solid 1px;}

.botchatresolver{
	display:block;border:solid 1px #848cf7;border-radius:100%;cursor:pointer;text-align:center;box-sizing:border-box;float:left;
	margin-bottom:5px;margin-right:5px;width:27px;height:27px;
	filter:hue-rotate(245deg);
}
.botchatresolver_{
	font-size:8px;display:block;margin:3px;border-radius:100%;width:20px;height:20px;overflow:hidden;box-sizing:border-box;
	background:transparent url(../app/imgs/chaticons.gif) no-repeat 0 0;
	background-size:640px 40px;
	transition:all 300ms;
}
.botchatresolver:hover .botchatresolver_{margin:0;width:26px;height:26px; background-size:832px 52px;background-position:0 0;}

.botchatresolver_.func_who_am_i{background-position:-80px 0;}
.botchatresolver:hover .botchatresolver_.func_who_am_i{background-position:-104px 0;}

.botchatresolver_.func_my_order_info{background-position:-100px 0;}
.botchatresolver:hover .botchatresolver_.func_my_order_info{background-position:-130px 0;}

.botchatresolver_.func_product_finder{background-position:-40px 0;}
.botchatresolver:hover .botchatresolver_.func_product_finder{background-position:-52px 0;}

.botchatresolver_.func_product_knowledge{background-position:-60px 0;}
.botchatresolver:hover .botchatresolver_.func_product_knowledge{background-position:-78px 0;}

.botchatresolver_.func_topic_details{background-position:-20px 0;}
.botchatresolver:hover .botchatresolver_.func_topic_details{background-position:-26px 0;}

.botchatresolver_.func_date_time{background-position:-220px 0;}
.botchatresolver:hover .botchatresolver_.func_date_time{background-position:-286px 0;}

.botchatbubble .codesnippet{margin:10px;padding:5px;border:dotted 1px #66ff66;color:#008800;}

.chat_product_tile{width:80px;margin:10px;cursor:pointer;display:inline-block;border:solid 1px #dedede;overflow:hidden;border-radius:10px;vertical-align:middle;}
.chat_product_tile img{display:block;width:100%;}

/*
-----------------
*/

.chatlink{transition:color 200ms;}
.chatlink,.chatlink:link,.chatlink:hover,.chatlink:visited{color:#ffffff;}
.chatlink:hover{color:#FFDC91;}
.chatbubble.dir_0,.chatbubble.dir_1{padding:10px;position:relative;}
.chatbubble.dir_0{background:#2F7EC1;word-break: break-word;height: fit-content;}
.chatbubble.dir_1{background:#9f9f9f;}
#botchat_hasagent{
    background:#3C3839;
   	color:white;
	font-size:14px;
	border-radius:0 0 5px 5px;
}
#botchat_chatform{
	position:relative;
 	display: block;
    border: 1px lightgrey solid;
    margin-bottom: 23px;
    margin-top: 23px;
}
#botchat_chatform #botchat_sendbutton {

    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: #dedede;
	text-align: center;
	display:block;
	border:solid 1px #BBC9D5;
	
  
}
.filecontainer, .sendcontainer{
	float:left;
	display:block;
	width:10%;
	margin-right:1%;
	margin-left:1%;
	text-align:center;
	padding-top:5px;
}
.filecontainer{display:none;}
.msgcontainer{float:left; width:86%; margin-right:2%;}
#botchat_chatform button:hover{
	opacity:1;
}
#botchat_chatbox_input {
	border:none;
	resize:none;
	min-height: 100px;
	line-height: 28px;
	font-size: 16px;
	height: 30px;
	outline:none;
	font-family: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
}
  
}
#botchat_chatbox_input:focus-visible{
	outline:none;
}
.chatframe{
   background:#3C3839;
   overflow:hidden;
 
}
.chatframe:hover{
	opacity:1;
}
.chatframe_close{float:right;}
.plug,.plug2{float:left; position:relative; background:transparent url(plug.png) no-repeat; left:0; border:none; height:25px; width:25px; background-size:cover; transition:left 300ms; cursor:pointer;}
.plug2{background:url(plug2.png); border:none; height:25px; width:25px; background-size:cover; /*left:5px;*/}

.sendbutton{background:none; background:url(send.png); height:25px; width:25px; background-size:cover; cursor:pointer;}
.sendbutton:hover{background:url(send2.png); background-size:cover;}
.botchat_addfile{background:none; background:url(attach2.png); height:15px; width:15px; background-size:cover; display:inline-block; cursor:pointer;}
.botchat_addfile:hover{background:url(attach.png); background-size:cover;}
.chatframe_close{background:none; background:url(minimize.png); background-size:contain; height:25px; width:15px; border:none; background-repeat:no-repeat; background-position:center; cursor:pointer;	 }

.chatinputrow{margin-bottom:10px;}
.chatformlabel{margin-bottom:5px;color:#444444;}
.chatinp{display:block;line-height:28px;padding:2px 5px;font-size:16px;height:30px;width:95%;}
textarea.chatinp{vertical-align:middle;}

.botchatmain{text-align:left;z-index:1000;position:fixed;bottom:20px;right:30px;width:40%;min-width:280px;max-width:800px;}
.botchatcontent{width:100%;background:#ffffff;border-left:solid 1px #dedede;border-right:solid 1px #dedede;box-shadow:2px 2px 10x #dedede;padding:0 10px;padding-bottom:5px;border-radius:5px;}
.botchatbox{overflow:auto;}
.chatframe, #botchat_hasagent{margin-left:-10px; margin-right:-10px;  padding:3px 5px;}


.chatentry{margin-bottom:15px;}
.chatentry_0{margin-right:15%;}
.chatentry_1{margin-left:20%;margin-right:2%;}

.chatfrom{font-size:13px;color:#666666;}

.chatbubble{color:#ffffff;border-radius:12px;}
.chatbubble br {display:none;}

.chatbubble.dir_0,.chatbubble.dir_1{padding:10px;}
/*
.chatbubble.dir_0{background:#9F9F9F;}
.chatbubble.dir_1{background:#2EAE7A;}
*/
.chatbadge{ width:180px; animation:badgewiggle 10s infinite; position:absolute;bottom:20px; right:-33px;background-color:#2F7EC1;border:solid 2px #276599;cursor:pointer; border-radius:20px 0 0 20px;padding:5px 0;}
@keyframes badgewiggle {
  0% {bottom: 20px;}
  2% {bottom: 30px;}
  4% {bottom: 20px;}
  8% {bottom: 30px;}
  12% {bottom: 20px;}
}

.chatbadgepic{float:left; margin-right:20px; margin-left:10px; width:45px; height:45px;background-image:url(chat.png);background-size:cover; }
.chatcta{float:left;text-align:center; font-weight:bold; color:#ffffff; margin-top:15px;}
.chatframe{border-radius:5px 5px 0 0;  font-weight:bold; margin-bottom:8px;}

.chatstatus_0 .chathasagent_0 .chatbadge{display:none;}
.chatstatus_0 .chathasagent_1 .chatbadge{display:block;}

.chatframe_popout{float:right;margin-right:10px;width:15px;height:25px;cursor:pointer;background:transparent url(popout.png) no-repeat center center;background-size:contain;border:none;}
.chatstatus_0 .chatframe_popout{display:none;}
.chatstatus_1 .chatframe_popout{display:inline-block;}


.chatstatus_0 .chathasagent_1 .chatviewstate_1 .chatbadge{display:none;}

.chatstatus_1 .chatviewstate_ .chatbadge{display:none;}
.chatstatus_1 .chatviewstate_1 .chatbadge{display:none;}

.chatstatus_1 .chathasagent_1 .chatviewstate_0 .chatbadge{display:block;}

.chatstatus_0 .botchatcontent{display:none;}
.chatstatus_1 .botchatcontent{display:block;}
.chatviewstate_0 .botchatcontent{display:none;}
.chatviewstate_1 .botchatcontent{display:block;}


@media screen and (max-width:420px){
	.chatinp{display:block;width:90%;margin-bottom:5px;}	
}

@media screen and (max-width:380px){
	.botchatmain{min-width:0;max-width:auto;width:80%;}
}