.fqb-holder {
	position: fixed;
	bottom: 0;
	right: 0;
	height: 0;
	width: 0;
	z-index: 1018;
	transition: opacity 250ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s, top, bottom;
}

.fqb-button {
	border-radius: 0.2rem;
	background-color: var(--dark-teal);
	color: #fff;
	font-size: 1.1rem;
	font-family: var(--font-family-headers);
	cursor: pointer;
	padding: 10px;
	position: relative;
	height: 50px;
	width: 112px;
	bottom: calc( 50px + 20px );
	right: calc( 112px + 20px );
	transition-duration: 120ms;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.fqb-button:hover {
	background-color: var(--middle-teal);
}

.fqb-button img {
	float: left;
	max-height: 50px;
	margin: 0 0 6px -10px;
}

.fqb-button span {
	margin: 2px 0 0 0;
}

.fqb-minimize {
	background-color: var(--dark-teal);
	color: var(--white);
	width: 25px;
	border-radius: 1rem;
	height: 25px;
	position: fixed;
	text-align: center;
	bottom: 608px;
	right: 3px;
	z-index: 999997;
	cursor: pointer;
}

.fqb-minimize > .fas {
	margin-top: 5px;
	display: inherit;
}

#quealbot-widget {
	position: fixed;
    bottom: 20px;
    right: 30px;
}

.quealbot-holder {
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	border-radius: 0.2rem;
}
	
.quealbot-holder > div {
	background-color: rgba(234, 234, 234, 0.98);
	border-radius: 0.2rem;
	overflow-x: hidden;
	overflow-y: auto;
	height: 600px;
    width: 400px;
}

.quealbot-holder > div::-webkit-scrollbar-button{ 
	display: none;
	height: 13px;
	border-radius: 0px;
	background-color: var(--middle-teal);
} 

.quealbot-holder > div::-webkit-scrollbar-button:hover{
	background-color: var(--teal);
}

.quealbot-holder > div::-webkit-scrollbar-thumb{
	background-color: var(--teal);
	border-radius: .2rem;
} 

.quealbot-holder > div::-webkit-scrollbar-thumb:hover{
	background-color: var(--teal);
	border-radius: .2rem;
}

.quealbot-holder > div::-webkit-scrollbar-track{
	background-color: var(--light-grey);
	border-radius: 0.2rem;
}

.quealbot-holder > div::-webkit-scrollbar-track:hover{
	background-color: var(--light-grey);
}

.quealbot-holder > div::-webkit-scrollbar{
	width: 7px;
	height: 7px;
}

.quealbot-holder .speech-bubble {
	position: relative;
	background: var(--white);
	border-radius: .2rem;
	padding: 10px;
	min-height: 50px;
	margin: 10px 0px;
	display: table;
}

.quealbot-holder .user .speech-bubble {
	background: var(--highlight-teal);
}

.quealbot-holder .speech-bubble.image-bubble {
	background: transparant;
	padding: 0;
}

.quealbot-holder .image-bubble img {
	max-height: 150px;
	max-width: 100%;
	border-radius: 0.2rem;
}

.quealbot-holder .line {
	display: inline-flex;
	width: 100%;
}

.quealbot-holder .quealbot .line {
	justify-content: flex-start;
	padding-left: 50px;
}

.quealbot-holder .user .line {
	justify-content: flex-end;
	padding-right: 50px;
}

.quealbot-holder .quealbot .line .speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 18px;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-right-color: var(--white);
	border-left: 0;
	border-bottom: 0;
	margin-top: -7px;
	margin-left: -14px;
}

.quealbot-holder .user .line .speech-bubble:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 18px;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-left-color: var(--highlight-teal);
	border-right: 0;
	border-bottom: 0;
	margin-top: -7px;
	margin-right: -14px;
}

.quealbot-holder .quealbot-avatar {
	float: left;
	position: relative;
	bottom: 40px;
	height: 0;
	width: 0;
	animation-duration: 0.3s;
}

.quealbot-holder .user-avatar {
	float: right;
	position: relative;
	bottom: 40px;
	right: 30px;
	height: 0;
	width: 0;
	animation-duration: 0.3s;
}

.quealbot-holder .quealbot-avatar .img,
.quealbot-holder .user-avatar .img {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 0.2rem;
	background-color: var(--highlight-grey);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.quealbot-holder .prompts {
	padding: 0px 60px;
	display: none;
}

.quealbot-holder .prompts .choose-option {
	color: var(--secondary)!important;
	text-transform: uppercase;
	font-size: 75%;
	font-family: var(--font-family-headers);
}

.quealbot-holder .prompts .options {
	text-align: left;
}

.quealbot-holder .prompts .options button {
	margin-bottom: 10px;
	margin-right: 10px;
	text-align: left;
}

.typing-wait {
	display: inline-block;
	position: relative;
	width: 29px;
	height: 24px;
}
.typing-wait div {
	position: absolute;
	top: 18px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--dark-grey);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.typing-wait div:nth-child(1) {
	left: 3px;
	animation: typing-wait1 0.6s infinite;
}
.typing-wait div:nth-child(2) {
	left: 3px;
	animation: typing-wait2 0.6s infinite;
}
.typing-wait div:nth-child(3) {
	left: 13px;
	animation: typing-wait2 0.6s infinite;
}
.typing-wait div:nth-child(4) {
	left: 22px;
	animation: typing-wait3 0.6s infinite;
}
@keyframes typing-wait1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes typing-wait3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes typing-wait2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(9px, 0);
	}
}

.quealbot-holder .templates {
	display: none;
}


@media(max-width: 575px) {
	#quealbot-widget {
		top: var(--top-bar-height);
		left: 15px;
		bottom: unset;
		right: unset;
	}
	
	.fqb-minimize {
		top: calc( var(--top-bar-height) + 3px );
		bottom: unset;
		right: 10px;
	}
	
	.quealbot-holder > div {
		background-color: rgba(234, 234, 234, 0.98);
		border-radius: 0.2rem;
		overflow-x: hidden;
		overflow-y: auto;
		height: 450px;
		width: 300px;
		/*height: calc ( 100vh - var(--top-bar-height) );*/
		width: 100vw;
	}
}