@charset "utf-8";

/* Set variables */

:root {
	
	--ai-border-offset: 4px;
	--ai-option-border-offset: 2px;
	
	--color-highlight-glow-100: rgba(66,196,249,1.0);
	--color-highlight-glow-t75: rgba(66,196,249,0.75);
	--color-highlight-glow-75: rgba(113,211,251,1.0);
	--color-highlight-glow-t66: rgba(66,196,249,0.566);
	--color-highlight-glow-66: rgba(130,216,251,1.0);
	--color-highlight-glow-t50: rgba(66,196,249,0.5);
	--color-highlight-glow-50: rgba(160,225,252,1.0);
	--color-highlight-glow-t33: rgba(66,196,249,0.33);
	--color-highlight-glow-33: rgba(193,236,253,1.0);
	--color-highlight-glow-t25: rgba(66,196,249,0.25);
	--color-highlight-glow-25: rgba(208,240,253,1.0);
	--color-highlight-glow-t10: rgba(66,196,249,0.1);
	--color-highlight-glow-10: rgba(236,249,254,1.0);
		
	--button-background: linear-gradient(to bottom right, 
		var(--color-highlight-glow-100), 
		var(--color-highlight-glow-100), 
		var(--color-highlight-glow-50)
	);
	
}

/* override default chatbot components */

.bpFab {
	display: none;	
}

.bpOpen {
	min-width: 40vw;
	bottom: 1rem;
}


/* Set  Enciana sytles */
.enciana {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
	max-width: var(--max-width);
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1em;
	width:100vw;
	font-size:0.8em;
}

.enciana.floating {
	z-index: 777;
	position: fixed;
	bottom: 0;
	right: 0%;
	max-width: 1000px;
}

.enciana.show {	
	animation-name: showEnciana;	
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.enciana.hide {	
	animation-name: hideEnciana;	
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}


.enciana-feedback {
	border-top: solid var(--ai-border-offset) var(--color-highlight-glow-100);
	border-left: solid var(--ai-border-offset) var(--color-highlight-glow-100);
	border-bottom: solid var(--ai-border-offset) var(--color-highlight-glow-50);
	border-right: solid var(--ai-border-offset) var(--color-highlight-glow-50);
	border-radius: 2.0em;
	
	border-bottom: solid 0 var(--color-highlight-glow-50);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	
	display:block;
	position: relative;
	
    align-self: stretch;
	grid-area: 2 / 1 / 3 / 2;
	
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
}

.enciana-feedback.floating {
	/*display: none;*/
	background: white;
	border-bottom: solid var(--ai-border-offset) var(--color-highlight-glow-50);
	border-bottom-left-radius: 2.0em;
	border-bottom-right-radius: 2.0em;
	margin-bottom: 1em;
	opacity: 0;
}

.enciana-feedback.show {	
	animation-name: showEncianaFeedback;	
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.enciana-feedback.hide {	
	animation-name: hideFeedback;	
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.enciana-feedback-content {
	/*height: 11em;*/
	text-align: center;
    justify-content: center;
	align-items: center;
	margin: auto;
	padding: 1em;
	padding-top: 1.5em;
	padding-bottom: 0;
	flex: 1;
}

.enciana-feedback-content.floating {
	padding-top: 1em;
	padding-bottom: 1em;
}

.enciana-feedback-content.floating > h1 {
	font-size: 1em;
}

.enciana-feedback-target {
	word-wrap: none;
}

.enciana-input {
	z-index: 999;
	margin-top: 0em;
	margin-bottom: 1em;
	border-top: solid var(--ai-border-offset) var(--color-highlight-glow-100);
	border-left: solid var(--ai-border-offset) var(--color-highlight-glow-100);
	border-bottom: solid var(--ai-border-offset) var(--color-highlight-glow-50);
	border-right: solid var(--ai-border-offset) var(--color-highlight-glow-50);
	border-radius: 2.0em;
	border-top: solid 0 var(--color-highlight-glow-50);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	/*background-color: var(--color-white);*/

	display: block;
	position: relative;
	align-self: stretch;
	grid-area: 3 / 1 / 3 / 2;
	display: flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	padding: 0.5em;
}

.enciana-input.floating {
	background: white;
	border-top: solid var(--ai-border-offset) var(--color-highlight-glow-100);
	border-radius: 2.0em;
}

.enciana-input-content {
	position: relative;
	width: 100%;
}


.enciama-input-message {
	flex: 1; /* Make input field take the available space */
	border: none;
	outline: none;
	padding: 1em;
	font-size: 16px;
	border-radius: 0.5em; /* Curved edges */
	background-color: transparent;
}


.enciana-submit-button {
	padding: 10px 15px;
	background: var(--button-background); /* Button background color */
	color: white;
	border: none;
	border-radius: 1em; /* Matching curved edges */
	cursor: pointer;
	flex-shrink: 0; /* Prevent button from shrinking */
	/*float: right;*/
	font-size: 1.2em;
	font-weight: 600;
	width: 100%;
	margin-top: 0.5em;
}

.enciana-submit-button:hover {
  background-color: var(--color-highlight-glow-100); /* Slightly darker blue on hover */
}

.enciana-option-button {
	padding: 10px 15px;
	background: transparent; 
	color: var(--color-highlight-glow-100);
	border-top: solid var(--ai-option-border-offset) var(--color-highlight-glow-100);
	border-left: solid var(--ai-option-border-offset) var(--color-highlight-glow-100);
	border-bottom: solid var(--ai-option-border-offset) var(--color-highlight-glow-50);
	border-right: solid var(--ai-option-border-offset) var(--color-highlight-glow-50);
	border-radius: 1em; /* Matching curved edges */
	cursor: pointer;
	flex-shrink: 0; /* Prevent button from shrinking */
	/*float: right;*/
	font-size: 1.5em;
	width: 100%;
	margin-top: 0.5em;
}

.enciana-option-button:hover {
  background-color: var(--color-highlight-glow-25); /* Slightly darker blue on hover */
}

.enciana-ai-avatar-container {
	/*margin-top: -1em;
	margin-bottom: -2.5em;*/
	
	display:block;
	position: relative;
	
    align-self: stretch;
	grid-area: 1 / 1 / 2 / 2;
	
	display: flex;
	justify-content: left;
	-ms-align-items: center;
	width: 100%;
	
	max-height: 3em;
}

.enciana-ai-avatar-container.floating {
	margin-top: -2.5em;
	margin-bottom: -2.5em;
	margin-left: -0em;
	grid-area: 3/ 1 / 3 / 2;
}

.enciana-ai-avatar {
	z-index: 2222;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 5em;
	height: 5em;
  	flex-shrink: 0; 
	content: '';
	margin-bottom: -1em;
}

@keyframes showEnciana {
	from {  opacity: 1;	left: -1000px; } to { opacity: 1; left: 0px; }
}


@keyframes hideEnciana {
	from { opacity: 1; left: 0px; } to { opacity: 1; left: -1000px; }
}

@keyframes showEncianaFeedback {
	from { opacity: 0; } to { opacity: 1; }
}


@keyframes hideEncianaFeedback {
	from { opacity: 1; } to { opacity: 0; }
}



@media only screen and (max-width: 249.98px) {

}

@media only screen and (min-width: 250px) {

}

@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 360px) {

}

@media only screen and (min-width: 375px) {

}

@media only screen and (min-width: 385px) {

}

@media only screen and (min-width: 390px) {

}

@media only screen and (min-width: 414px) {

.enciana-input-content {
	text-align: center;
}

.enciana-submit-button {
	max-width: 10em;
}

}

@media only screen and (min-width: 527px) {

.enciana-option-button {
	max-width: 49%;
}

}

@media only screen and (min-width: 640px) {

/**/

}

@media only screen and (min-width: 768px)  {

/**/

.enciana-submit-button {
	max-width: 8em;
}

.enciana-option-button {
	max-width: 24%;
	margin-bottom: 0.5em;
}

}

@media only screen and (min-width: 1024px) {

/**/

.enciana.floating {
	padding-left: 4em;
}

.enciama-input-message {
	max-width: calc(100% - 8em);
}

.enciana-submit-button {
	max-width: 6em;
	float: right;
	margin-right: 0.5em;
}

.enciana-ai-avatar-container.floating {
	margin-left: -2em;
}

}

@media only screen and (min-width: 1366px) {

}

@media only screen and (min-width: 1440px) {

}

@media only screen and (min-width: 1680px) {

}

@media only screen and (min-width: 1920px) {

}

@media only screen and (min-width: 2560px)  {

}