﻿.chatframe{
    background:#e0e0de;
    height:450px;
    overflow:hidden;
    padding:0;
}
.chatframe > div:last-of-type{
    position:absolute;bottom:0;width:100%;display:flex;
}


.chatcol-sm-3 {
	max-width: 100% !important;
}

.ncbdiv{
	background-color:#2A5FAA; 
	color:#FFFBF0; 
	font-size:16px; 
	font-weight:600; 
	padding-top:10px; 
	padding-bottom:20px; 
	position:absolute; 
	z-index: 10; 
	width:345px;
}

#ncblogo{
	/*float:left; 
	width:100px; 
	margin-top:10px;*/
	margin-left:20px;
	float:left; 
	width:100px;
	height:100px;
	margin-top:10px;
	background-color:#FFFFFF;
	border-radius: 50%;
}

#ncbtitle{
	float:left; 
	width:200px; 
	margin-top:20px;
}

#screensize{
	padding-top:0px !important;
	margin:auto !important;
	max-width:345px !important;
}


@media screen and (max-width: 1680px) {
  .open-button {
	  top:650px !important;
  }
}

@media screen and (max-width: 1600px) {
  .open-button {
	  top:650px !important;
  }
}

@media screen and (max-width: 1440px) {
  .open-button {
	  top:640px !important;
  }
}

@media screen and (max-width: 1366px) {
  .open-button {
	  top:600px !important;
  }
}

@media screen and (max-width: 1280px) {
  .open-button {
	  top:560px !important;
  }
}

@media screen and (max-width: 1080px) {
  .open-button {
	  top:400px !important;
  }
  .chat-popup {
	  bottom: 40px;
  }

}

@media screen and (max-width: 800px) {
  .open-button {
	  top:510px !important;
  }
  /*  .chat-popup {
	  bottom: 140px !important;
  }*/
  
}

@media screen and (max-width: 640px) {
  #screensize{
	max-width:345px !important;
  }
  .open-button {
	  top:190px !important;
	  right:30px !important;
  }
  /*.chat-popup {
	  bottom: -100px !important;
  }*/

}


@media screen and (max-width: 480px) {
  #screensize{
	max-width:345px !important;
  }
  .open-button {
	  top:275px !important;
	  right:350px !important;
  }
  .chat-popup {
	  right: 130px !important;
  }

}


@media screen and (max-width: 420px) {
  #screensize{
	max-width:345px !important;
  }
  .open-button {
	  top:240px !important;
	  right:320px !important;
  }
  .chat-popup {
	  right: 70px !important;
  }
  
}


@media screen and (max-width: 360px) {
  #screensize{
	max-width:345px !important;
  }
  .open-button {
	  top:205px !important;
	  right:230px !important;
  }
  .chat-popup {
	  right: 12px !important;
  }
}




/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  /*background-color: #555;
  color: white;*/
  background-color: transparent !important;
  padding: 16px 20px !important;
  border: none !important;
  cursor: pointer !important;
  /*
  position: -webkit-sticky !important;
  position: sticky !important;
  */
  position: fixed !important;
  /*top:880px !important;*/
  /*top: 800px;*/
  top: 675px;
  bottom: 23px !important;
  /*right: 0px !important;*/
  right: 30px;
  /*width: 100px !important;
  height: 100px !important;*/
  width: 100px;
  height: 100px;
  /*border-radius: 30%;*/
  background-image:url('/SiteAssets/GovStyles/chatbot/chatbot.png') !important;
  background-repeat:no-repeat !important;
  float:right !important;
  opacity: 0.9 !important;
  filter: alpha(opacity=70) !important; /* For IE8 and earlier */
  z-index: 8000 !important;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed !important;
  bottom: 0;
  right: 0px;
  border: 3px solid #f1f1f1 !important;
  z-index: 9000 !important;
}

/* Add styles to the form container */
.chatform-container {
  width: 345px !important;
  /*padding: 10px;*/
  padding-bottom:10px !important;
  background-color: #FFF !important;
}

.closechat {
  color:#000000 !important;
  font-size: 28px !important;
  padding-left: 320px !important;
  cursor:pointer !important;
}

td#result {
    vertical-align: top !important;
}

.tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px 0;
  right: 0px;
  top: -33px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 8100;
}

.open-button:hover .tooltiptext {
  visibility: visible;
}

.server-response{ 
	background-color: #000000 !important;
}


