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

.chatmsg.from_agent button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:8px 14px;
	margin:4px 6px 4px 0;
	color:#026939;
	background:#ffffff;
	border:solid 1px #026939;
	border-radius:999px;
	font-size:13px;
	font-weight:700;
	line-height:1.2;
	cursor:pointer;
	transition:background-color 120ms,border-color 120ms,color 120ms,transform 120ms;
}

.chatmsg.from_agent button:hover{
	border-color:#81BB03;
	background:#026939;
	color:#ffffff;
	transform:translateY(-1px);
}

.chatmsg a, .chatmsg a:hover, .chatmsg a:visited, .chatmsg a:link{color:#026939;transition:color 200ms;}
.chatmsg a:hover{color:#7FBD00;}


@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
:root {
  --border-size: 4px;           /* thickness of the ring */
  --glow: 24px;                  /* outer glow radius */
  --speed: 2s;                   /* rotation speed */
}
.glam-border {
  position: relative;
  isolation: isolate;            /* keeps glows tidy */
  box-shadow:
    0 0 calc(var(--glow) * 0.25) #ffffff20 inset,
    0 5px 10px #0007;
}
.glam-border::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--border-size));
  border-radius: inherit;
  /* Rotating conic gradient ring */
  background:
    conic-gradient(from var(--angle),
    #7FBD00 0%,
    #1D794C 33%,
    #046A38 66%,
    #7FBD00 100%
   );
  /* Sparkles layered on top of the ring */
  background-blend-mode: screen;
  /* Soft neon glow */
  filter: drop-shadow(0 0 var(--glow) #8a5cff) drop-shadow(0 0 calc(var(--glow) * 0.6) #4be4ff);

  /* Punch a hole so only the border shows */
  padding: var(--border-size);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* Animate the angle variable */
  animation: spin var(--speed) linear infinite;
}

@keyframes spin {
  to { --angle: 1turn; }
}
@keyframes twinkle {
  0%   { opacity: .65; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.02); }
}

#botchat_transcriptemail{line-height:26px;height:28px;}

.chatmsg.from_user{margin-left:25%;border-radius:10px;}

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

.botchat_wait{width:100px;height:30px;vertical-align:middle;filter_x: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_format_entity{background-position:-280px 0;}
.botchatresolver:hover .botchatresolver_.func_format_entity{background-position:-364px 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:inline-block;
	border:solid 1px #BBC9D5;  
}

#botchat_chatform #botchat_sendfile {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: #dedede;
	text-align: center;
	display:none;
	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;
}
.chatendbutton{
	display:inline-block;
	background:#ff5a5f;
	border:1px solid #d94b4f;
	border-radius:4px;
	color:#ffffff;
	padding:6px 12px;
	font-size:14px;
	cursor:pointer;
}
.chatendbutton:hover{
	background:#e24d52;
}

.endchatrow{
	clear:both;
	text-align:right;
	margin-top:5px;
        margin-bottom:3px;
	padding-right:3px;
}
.chatframe{
   background:#026939;
   overflow:hidden;
   border-top:solid 1px #7FBD00;
   box-shadow:0 -2px 4px #111111;
}
.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?v=1); height:25px; width:25px; background-size:25px 25px; transform:rotate(-5deg); cursor:pointer; transition:transform 300ms;}
.sendbutton:hover{transform:rotate(20deg);transform-origin:50% 50%;}
/*.sendbutton:hover{background:url(send2.png); background-size:cover;}*/

.sendbutton.file{background:none; background:url(attach.png); height:25px; width:25px; background-size:25px 25px; transform:rotate(5deg); cursor:pointer;transition:transform 300ms;}
.sendbutton.file:hover{transform:rotate(-20deg);transform-origin:50% 50%;}

.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:10px;right:30px;width:40%;min-width:280px;max-width:520px;}
.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;
	position:relative; /* shopify fix */
	right:-20px;  /* shopify fix */
}
.botchatbox{overflow:auto;}
.chatframe, #botchat_hasagent{margin-left:-10px; margin-right:-10px;  padding:3px 5px;}

.botchat_newmsg{
	display:block;
	position:relative;
	margin:12px auto 8px;
	padding:10px 24px;
	border:none;
	border-radius:22px;
	background:#026939;
	color:#ffffff;
	font-size:15px;
	font-weight:600;
	box-shadow:0 3px 8px rgba(0,0,0,0.24);
	cursor:pointer;
	transition:transform 150ms ease-in-out, opacity 150ms ease-in-out;
}
.botchat_newmsg:hover{
	opacity:0.9;
	transform:translateY(-1px);
}
.botchat_newmsg.hidden{
	display:none;
}


.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:-28px;background-color:#026939;border:solid 2px #82BA03;cursor:pointer; border-radius: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:12px; margin-left:10px; width:45px; height:45px;background-image:url(chat.png?v=1);background-size:cover; }
.chatcta{float:left;text-align:center; font-weight:bold; color:#ffffff; margin-top:8px;}
.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;max-width:auto;width:85%;margin-bottom:5px;}	
}

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