/**
*
* PB Search Assistant CSS
*
*/

/* Styles for the chat widget */
.chat-widget {
	position: fixed;
	bottom: 205px;
	right: 20px;
	width: 280px;
	max-height: 450px;
	z-index: 10000;
	background-color: #ffffff;
	border: 3px solid #0A519C;
	border-radius: 10px;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
	transform: translateX(600px);
	background: #fff url(../images/EyeBackground.png) 100% 100% no-repeat;
	background-size: 180px;
	font-family: 'Oswald', sans-serif;
}

.chat-widget.opened {
	/*display: block;*/ /* Displayed when opened */
	animation: in 0.5s both;
		-webkit-animation: in 0.5s both;
}

.chat-widget.closed {
		animation: out 0.5s both;
		-webkit-animation: out 0.5s both;
		/*display: none;*/ /* Hidden when closed */
}

@-webkit-keyframes in {
  100% {
    transform: translateX(0);
  }
}
@keyframes in {
  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes out {
  0% {
    transform: translateX(0);
  }
  100% {
    /*transform: translateX(-310px);*/
    transform: translateX(600px);
  }
}
@keyframes out {
  0% {
    transform: translateX(0);
  }
  100% {
  	/*transform: translateX(-310px);*/
    transform: translateX(600px);
  }
}

.chat-widget .header {
	position: relative;
}

.chat-widget .header h3 {
	background-color: #0A519C;
	text-align: center;
	margin: 0;
	padding: 5px 10px;
	color: #fff;
}

.chat-widget .header .close {
	position: absolute;
	top: 5px;
	right: 10px;
	text-decoration: none;
	font-size: 18px;
	cursor: pointer;
}

.chat-widget .content {
	padding:5px 20px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%);
}

.trending-title {
	font-size: 1.25rem;
	font-weight: bold;
	color:#2FB6A5;
	margin: 5px 0 10px;
}
.trending-title i {
	color:#c9c9c9;
	margin-right: 5px;
}

/* Styles for the floating chat button */
.chat-toggle-btn {
	position: fixed;
	bottom: 85px;
	right: 20px;
	display: inline-block;
	cursor: pointer;
	z-index: 10000;
}

.chat-toggle-btn img {
	height:80px;
	max-width:100px;	
}

/* Styles for the preliminary chat box */
.preliminary-chat-box {
	position: fixed;
	bottom: 20px;
	right: 100px;
	padding: 30px;
	display: none;
	z-index: 9998;
	background-color: #ffffff;
	border-width: 1px;
	border-color: #ececec;
	border-radius: 0px;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
	border-style: solid;
	text-align:center;
}

.preliminary-chat-box p {
	margin: 0 0 10px; /* Added margin */
}

.preliminary-chat-box button {
	margin-right: 10px; /* Added margin */
}

/* Styles for the preliminary chat box */
.search-chat-box {
	position: fixed;
	bottom: 20px;
	right: 100px;
	padding: 30px;
	display: none;
	z-index: 9998;
	background-color: #ffffff;
	border-width: 1px;
	border-color: #ececec;
	border-radius: 0px;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
	border-style: solid;		
}

.search-chat-box p {
	margin: 0 0 10px;
}

.search-chat-box button {
	margin-right: 10px;
}

#chat-content a.chat-tags {
	font-size: 1.25rem;
	font-style: italic;
	display: block;
	color: #0A519C;
}
.chat-tags:before{
	content: ">";
	font-style: normal;
	color: #2FB6A5;
	float: left;
}

.chat-none {
	margin-top:10px;
}

.close {
	cursor:pointer;
	float:right;
}

.clearfix {
    display: block;
    content: "";
    clear: both;
}

.search-container {
    display:inline-block;
    position: relative;
    width:100%;
	padding: 20px 10px 5px;
}

/*.search-container::after {
	font-family: 'font awesome 5 free';
	font-weight: 900;
    content: "\f002";
    position: absolute;
    right: 12px;		
    bottom:6px;
}*/

.chat-widget .search-field {
	border: 2px solid #c9c9c9;
	border-radius: 8px;
	color: #666;
	padding: 3px;
	width:100%;
	display: block;
}

.pb-button {
	display: inline-block;
    text-decoration: none;
    line-height: 1.2;
    border: 1px solid #0098c9;
    border-radius: 15px;
    padding: 5px 30px;
    color: #0098c9;		
}

.pb-button-primary {
    background-color:#0098c9;
    color: #ffffff;
}

.powered-by{
	font-weight: bold;
	color: #9B9C9F;
	margin-top: 20px;
}

.pbsearchassistant-form {
	position: relative;
}
.pbsearchassistant-form .btn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: #2FB6A5;
	border-radius: 0 8px 8px 0;
	padding: 5px;
}
.pbsearchassistant-form .btn img {
	height: 18px;`
}

.chat-widget-bg {
	position: fixed;
	top: 0;
	bottom: 0;
	right: -320px;
	width: 320px;
	background-color: #00ada2;
	opacity: 0.6;
	z-index: 9999;
	transition: all 0.5s;
}
.chat-widget-bg.opened {
	right: 0;
}

.chat-widget .close{
	position: absolute;
    top: -30px;
    right: -20px;
    z-index: 999;
    color: #fff;
    padding-bottom: 5px;
    border: 2px solid #fff;
    border-radius: 50%;
	display: flex;
    align-items: center;
    justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
}

/* Mobile devices (max-width: 768px) */
@media only screen and (max-width: 768px) {
    /* Your mobile-specific styles here */
	.chat-toggle-btn{display: none;}


	/* Styles for the floating chat button */
	/*.chat-toggle-btn {
		position: fixed;
		bottom: 45px;
		right: 10px;
		display: inline-block;
		cursor: pointer;
		z-index: 10000;
	}
	.chat-toggle-btn img {
		height:50px;
	}*/

}