/* New Styles */

body {
  /* background: #171f26; */
  font-size: 13px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #444;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button {
/* border-color: 'rgba(23, 155, 119, 1)' !important;
color: '#dbdee1' !important;
min-height: 32px;
width: 100%;
width: 188px; */
border-radius: 5px 5px 5px 5px !important;
/* border: 2px solid 'rgba(23, 155, 119, 1)' !important;
padding: 0 16px; */
}
.page {
  margin: 20px;
}

.faq > h4 {
  font-size: 1.3em;
}

.faq {
  line-height: 1.6;
}

#chat-open-btn {
  /* border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 25px;
  right: 30px;
	z-index:100;
  background: white;
  border-radius: 15px 15px 0px 15px !important;
  color: #1ab188;  */
  /* border-bottom: 3px solid #1ab188; */
}
#chat-open-btn:hover {
  opacity: 0.9;
  color: green;
}
.open-button {
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 25px;
  right: 30px;
	z-index:100;
  background: white;
  border-radius: 15px 15px 0px 15px !important;
  color: #1ab188;
}
.open-button-with-offset1 {
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 75px;
  right: 30px;
	z-index:100;
  background: white;
  border-radius: 15px 15px 0px 15px !important;
  color: #1ab188;
}

.open-button-with-offset2 {
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 75px;
  right: 20px;
	z-index:100;
  background: white;
  border-radius: 15px 15px 0px 15px !important;
  color: #1ab188;
  /* border-bottom: 3px solid #1ab188; */
}

.chat-container {
  position: fixed;
  right: 0px;
  /* bottom: -20px; */
  bottom: 0px;
	/* height: 665px; */
	/* height:700px; */
  width: 430px;
  z-index: 1050;
}

.chat-container .chat-panel {
	position: relative;
	bottom: 10px;
	padding-left:0px;
	display: none;
	box-shadow: 0 5px 20px rgba(23, 155, 119, .3);
}
/*
.chat-container {
  position: fixed;
  right: 80px;
  bottom: 150px;
  right: -480px;
	height: 565px;
  width: 500px;
  z-index: 100;
}

.chat-container .chat-panel {
	position: relative;
	bottom: -40px;
  right: 560px;
	display: none;
} */

.chat-container .chat-panel #webchat >div:last-child > div:nth-child(2) li button{
  border: none !important;
  color: black;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
  background-color: rgba(23, 155, 119, .3);
  border-radius: 20px 20px 20px 20px !important;
}
.chat-container .chat-panel #webchat >div:last-child > div:nth-child(2) li button:hover{
  border: none !important;
  color: black;
  box-shadow: 0 15px 15px rgba(0, 0, 0, .5);
  background-color: rgba(23, 155, 119, .3);
  border-radius: 20px 20px 20px 20px !important;
}
.chat-container .chat-panel #webchat >div:last-child > div:nth-child(2) li button:focus {outline:0;}

.chat-container .chat-panel #webchat >div:last-child > div:nth-child(2) ul {display:inline-flex;}

.chat-container .chat-panel button .ac-pushButton {
  border: 1px solid rgb(40, 50, 111);
  color: black;
  /* box-shadow: 0 5px 20px rgba(23, 155, 119, .3); */
  background-color: white;
  border-radius: 20px 20px 20px 20px !important;
}

.chat-container .header {
	position: relative;
	padding: 20px;
	color: white;
	background-color: #179b77;
	border-radius: 10px 10px 0px 0px;
  box-shadow: 0 -5px 20px rgba(23, 155, 119, .3);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, .1);
  z-index: 1000;
}
.chat-container .brandfooter {
	background-color: white; border-radius: 0px 0px 0px 0px; padding: 0px; color: grey;
}
.chat-container .brandlink {
	color: #179b77;text-decoration:none;
}
.chat-container .brandlink .image{
	background-image: url('//therighthand.men/widgets/images/TheRHMBotAppLogo.png'); border-radius: 5px; width: 40px; height: 28px; background-size: cover; background-position: center; display: inline-flex;margin-top: 2px;
}
.header-embed {
	/* width:393px; */
}
.chat-container .header .icon {
  position: relative;
	width: 35px;
	height: 35px;
  border-radius: 17px 17px 17px 17px;
  opacity: .7;
}

.chat-container .header .title{
	position: relative;
	top: -7px;
	font-weight: bold;
}

/* #webchat,
#webchat > * {
	height: 565px;
	z-index: 10;

}
 */
#webchat,
#webchat > * {
	height: 565px;
	z-index: 10;

}

/* .chat-container .chat-panel .close-btn {
  cursor: pointer;
  opacity: 0.9;
  position: fixed;
  bottom: 75px;
  right: 39px;
	z-index:100;
} */
.chat-container .chat-panel .close-btn {
	position: fixed;
	text-align: center;
/* 	bottom: 635px; */
	bottom: 600px;
	right: 35px;
	cursor: pointer;
	color: rgba(255, 255, 255, 1);
	z-index: 1051;
}

.from-user .avatar:after {
  /* content : '<img src="/img/call_agent.png" alt="logo">'; */
  /* background-image : url('/img/call_agent.png') !important; */
  /* background-size: 300px 100px; */
}
.from-user .avatar {
  background-color: #179b77 !important;
  background-image : none !important;
  /* border: 0px !important; */
  /* box-shadow: none !important; */
  box-shadow: 0 5px 10px rgba(0, 0, 0, .3) !important;
  color: white !important;
}
/* .avatar:after {
  content : "";
} */
.avatar {
  background-color: black !important;
  background-image : url('/chat/img/logo.png') !important;
  background-size: 40px 44px !important;
  background-repeat: no-repeat !important;
  /* border: 1px solid rgb(34, 154, 120) !important; */
  box-shadow: 0 5px 10px rgba(0, 0, 0, .3) !important;
  color: black !important;
}

/* Styling the buttons within cards.*/
.ac-pushButton {
  border: 1px solid #179b77 !important;
  color: black !important;
  /* box-shadow: 0 5px 20px rgba(23, 155, 119, .3); */
  background-color: white !important;
  border-radius: 20px 20px 20px 20px !important;

}

/* Styling the cards which are inside the li element. but this also skews the style of options listed as text.*/
.chat-container .chat-panel #webchat .content ul li{
  /* box-shadow: 0 5px 10px rgba(0, 0, 0, .3); */
}

/* this prevents the chat messages from taking the style of <p> tags defined in the web page. */
.webchat__row p {
	font-family: Calibri, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
}

@media (max-width: 480px) {

  /* ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  GROUP 3 */

	.chat-container {
	  width: 100%;
	  right: 0px !important;
	  z-index: 2000 !important;
	  bottom: -10px;
	  /* top:20px; */
	}
	.chat-container .chat-panel .close-btn {
		/* top:35px; */
		bottom: 590px;

	}



}
@media  (min-height: 640px) and (max-height: 700px) {

  /* ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  GROUP 1 */

	.chat-container .header {
		font-size: .9em;
	}
	#webchat,
	#webchat > * {
		/* height: 545px; */
		height: 505px;
	}
	.chat-container {
	  /* height: 645px; */
	  height: 580px;
	  bottom: -10px;
	  /* top:20px; */
	}

	.chat-container .chat-panel .close-btn {
		/* bottom: 603px; */
		/* bottom: 653px; */

		bottom: 530px;
		/* top:35px; */

	}


}
@media  (min-height: 551px) and (max-height: 639px) {

  /* ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  GROUP 2.1 */

	.chat-container .header {
		font-size: .9em;
	}
	#webchat,
	#webchat > * {
		height: 405px;
	}
	.chat-container {
	  /* height: 445px; */
	  height: 545px;
	  bottom: -75px;
 		/* top: 10px; */
	}

	.chat-container .chat-panel .close-btn {
 		bottom: 430px;
 		/* top: 25px; */
		/* right: 15px; */
	}


}
@media   (max-height: 550px) {

  /* ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  GROUP 2.2 */

	.chat-container .header {
		font-size: .9em;
	}
	#webchat,
	#webchat > * {
		height: 405px;
	}
	.chat-container {
	  /* height: 445px; */
	  height: 545px;
	  bottom: -75px;
	}

	.chat-container .chat-panel .close-btn {
 		bottom: 429px;
 		/* top: 25px; */
		/* right: 15px; */
	}


}

/* @media(max-width:415px) {
  .chat-container {
    position: fixed;
    right: 80px;
    bottom: 150px;
    right: -480px;
    height: 400px;
    width: 375px;
    z-index: 100;
  }

  .chat-container .chat-panel {
    position: relative;
    bottom: -40px;
    right: 500px;
    display: none;
  }

  #webchat,
  #webchat > * {
  	height: 400px;
  	z-index: 10;

  }
  .chat-container .chat-panel .close-btn {
  	position: relative;
  	text-align: center;
  	top: 10px;
    cursor: pointer;
    opacity: 0.9;
    position: fixed;
    bottom: 470px;
    right: 34px;
  	z-index:1001;
  }
}
@media(max-width:375px) {
  .chat-container {
    position: fixed;
    right: 80px;
    bottom: 150px;
    right: -480px;
    height: 400px;
    width: 320px;
    z-index: 100;
  }

  .chat-container .chat-panel {
    position: relative;
    bottom: -40px;
    right: 500px;
    display: none;
  }

  #webchat,
  #webchat > * {
  	height: 400px;
  	z-index: 10;

  }
  .chat-container .chat-panel .close-btn {
  	position: relative;
  	text-align: center;
  	top: 10px;
    cursor: pointer;
    opacity: 0.9;
    position: fixed;
    bottom: 470px;
    right: 34px;
  	z-index:1001;
  }
}
@media(max-width:361px) {
  .chat-container {
    position: fixed;
    right: 80px;
    bottom: 150px;
    right: -480px;
    height: 400px;
    width: 320px;
    z-index: 100;
  }

  .chat-container .chat-panel {
    position: relative;
    bottom: -40px;
    right: 500px;
    display: none;
  }

  #webchat,
  #webchat > * {
  	height: 400px;
  	z-index: 10;

  }
  .chat-container .chat-panel .close-btn {
  	position: relative;
  	text-align: center;
  	top: 10px;
    cursor: pointer;
    opacity: 0.9;
    position: fixed;
    bottom: 470px;
    right: 34px;
  	z-index:1001;
  }
}
@media(max-width:320px) {
  .chat-container {
    position: fixed;
    right: 80px;
    bottom: 150px;
    right: -480px;
    height: 390px;
    width: 280px;
    z-index: 100;
  }

  .chat-container .chat-panel {
    position: relative;
    bottom: -80px;
    right: 490px;
    display: none;
  }

  #webchat,
  #webchat > * {
  	height: 390px;
  	z-index: 10;

  }
  .chat-container .chat-panel .close-btn {
  	position: relative;
  	text-align: center;
  	top: 10px;
    cursor: pointer;
    opacity: 0.9;
    position: fixed;
    bottom: 430px;
    right: 34px;
  	z-index:1001;
  }
  .chat-container .header {
  	padding: 10px;
  }
} */