@import "https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css";
.chat-container {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--chat-window-total-width: 40%;
	/*--chat-window-height: 80%;*/
	--chat-window-color-theme: #1e90ff;
	--chat-window-bg-color: rgba(240,240,240);
	--chat-send-button: #1e90ff;
	--chat-user-msg-bg: #ddd;
	--chat-header-bg: linear-gradient(160deg, dodgerblue 0%, #80d0c7 100%);
	--rating-models-bg: #80d0c7;
	--right-button-position: 50px;
	--bottom-button-position: 30px;
	--chat-bot-img-size: 45px;
	--chat-bot-top-img-size: 100px;
	--chat-bot-top-img-margin: 0px;
	--chat-bot-top-header-margin: 65px;
	--chat-transparent-quarter-three: rgba(240,240,240,0.97) !important;
}
/*! MAIN CONTENT*/
/*#region Main Content*/
.chat-header {
	/* background-color: dodgerblue; */
	background-color: var(--chat-window-color-theme);
	background-image: var(--chat-header-bg);
	color: white;
	display: flex;
	justify-content: space-between;
	padding: 10px;
	/* margin-bottom: 10px; */
	align-items: center;
	max-height: 50px;
	border-radius: 14px 14px 0 0;
	z-index: 3000;
}
.chatbot-title-header {
	display: flex;
	align-items: left;
    width:80%;
	margin-left: var(--chat-bot-top-header-margin);
}
.bot-title {
	margin-right: 15px;
	display: flex;
	align-items: center;
}
.chat-menu {
	display: flex;
	justify-content: flex-end;
	align-items: end;
	width: 100%;
	padding: 5px;
}
.chat-icon {
	width: 30px;
	height: auto;
}
.chat-popup {
	font-family: Arial, Helvetica, sans-serif;
	display: none;
	position: fixed;
	bottom: 80px;
	top: 80px;
	right: 120px;
	/*height: var(--chat-window-height);*/
	width: var(--chat-window-total-width);
	background-color: var(--chat-transparent-quarter-three);
	/* display: flex; */
	flex-direction: column;
	justify-content: space-between;
	/* padding: 0.75rem; */
	border: 1px solid #ccc;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	border-radius: 15px 15px 10px 10px;
	transition: all 0.5s ease-out;
	z-index: 3000;
}
.top-bot-main-margin {
	margin: var(--chat-bot-top-img-margin);
}
.chat-area {
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: transparent;
	z-index: 2999;
	border-radius: 14px 14px 0 0;
	background-color: transparent;
	align-content: flex-end;
}
/*#endregion*/
/*! BOT IMG*/
/*#region Bot Img*/
.bot-img {
	width: var(--chat-bot-img-size);
	margin-right: 0;
	border-radius: var(--chat-bot-top-img-size);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	border: 3px solid var(--chat-window-color-theme);
	background-color: white;
	padding: 2px;
	/*Vertical alignment*/
	align-self: flex-end;
}
.top-bot-img {
	width: var(--chat-bot-top-img-size);
	border-radius: var(--chat-bot-top-img-size);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	border: 3px solid var(--chat-window-color-theme);
	background-color: white;
	padding: 2px;
}
/*#endregion*/
/*! BOT MESSAGES*/
/*#region Bot Messages*/
.bot-msg {
	display: flex;
	align-items: center;
	margin: 15px;
	align-self: flex-end;
}
.bot-msg .msg {
	background-color: var(--chat-window-color-theme);
	color: white;
	padding: 0.5rem;
	border-radius: 10px 20px 20px 5px ;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	max-width: 90%;
    padding-left: 35px;
    padding-right: 25px;
	padding-top: 10px;
}
.bot-msg .msg {
	--r: 1em;  /* the radius */
	--t: 0.8em; /* the size of the tail */
	
	padding: 1em;
	border-inline: var(--t) solid #0000;
	border-radius: calc(var(--r) + var(--t))/var(--r);
	mask: 
	  radial-gradient(95% 78% at var(--_p) 0,#0000 101%,#000 115%) 
		var(--_p) 100%/var(--t) var(--t) no-repeat,
	  linear-gradient(#000 0 0) padding-box;
}
.bot-msg .msg {
	--_p: 0;
	border-bottom-left-radius: 0 0;
	place-self: start;
}  
.bot-msg a {
	color: white;
}
.bot-thought {
	display:flex;
	background-color:#fff;
	padding:20px;
	border-radius:30px;
	min-width:40px;
	max-width:220px;
	min-height:40px;
	margin:20px;
	position:relative;
	align-items:center;
	justify-content:center;
	text-align:center;
}
.bot-thought:before,
.bot-thought:after {
	content:"";
	background-color:#fff;
	border-radius:50%;
	display:block;
	position:absolute;
	z-index:-1;
}
.bot-thought:before {
	width:44px;
	height:44px;
	top:-12px;
	left:28px;
	box-shadow:-50px 30px 0 -12px #fff;
}
.bot-thought:after {
	bottom:-10px;
	right:26px;
	width:30px;
	height:30px;
	box-shadow:40px -34px 0 0 #fff,
			   -28px -6px 0 -2px #fff,
			   -24px 17px 0 -6px #fff,
			   -5px 25px 0 -10px #fff;
	
}
/*#endregion*/
/*! USER MESSAGES*/
/*#region User Messages*/
.user-msg {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 15px;
	max-width: 100%;
	align-self: flex-end;
	margin-left: var(--chat-bot-img-size);
}
.user-msg .msg {
	background-color: var(--chat-user-msg-bg);
	color: black;
	margin: 0.8rem;
	padding: 1.0rem;
	border-radius: 50px 5px 50px 50px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	word-break: break-all;

}
.user-msg .msg {
	--r: 1em;  /* the radius */
	--t: 0.8em; /* the size of the tail */
	
	padding: 1em;
	border-inline: var(--t) solid #0000;
	border-radius: calc(var(--r) + var(--t))/var(--r);
	mask: 
	  radial-gradient(100% 78% at var(--_p) 0,#0000 101%,#000 115%) 
		var(--_p) 100%/var(--t) var(--t) no-repeat,
	  linear-gradient(#000 0 0) padding-box;
}
.user-msg .msg{
	--_p: 100%;
	border-bottom-right-radius: 0 0;
	place-self: end;
}
.msg-image {
	max-width: 90%;
	max-height: 400px;
}
/*#endregion*/
/*! INTERACT*/
/*#region Interact*/
.chat-input-area {
	position: relative;
	display: flex;
	justify-content: center;
    height: auto;
}
.chat-border-rounded {
	border-radius: 13px !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    width: 100%;
    margin:15px;
	height: auto;
	display: flex;
    padding:10px;
}
.chat-input {
	width: 100%;
	margin:auto 0;
	font-size: 15px;
	border: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    resize: none;
	height: 30px;
    max-height: 500px;
	background-color: var(--chat-transparent-quarter);
	border-radius: 6px;
}
.chat-input:focus {
	outline: none;
}
.chat-submit {
	background-color: transparent;
	/*color:var(--chat-send-button);*/
	border: none;
	outline: none;
	cursor: pointer;
	transition: opacity 0.4s !important;
	opacity: 0.8;
    margin:auto;
    margin-left:30px;
    height: 30px;
    width: 30px;
    right:0;
}
.chat-submit:hover {
	background-color: transparent; /*var(--rating-models-bg);*/
	opacity: 1;
}
/*#endregion*/
/*! PARALLAX*/
/*#region Parallax*/
.chat-parent {
	position: relative;
	width: 90%;
	margin: 10px;
    display: flex;
}
.chat-head-parent {
	height: 100px !important;
}
.chat-head-parent-img {
	height: 100%;
	width: 100%;
	/*Image cover*/
	object-fit: cover;
}
.chat-child1 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.chat-child2 {
    position: absolute;
	z-index: 1;
	width: 50px;
    right:0;
	height: 100%;
	margin: auto;
    position: absolute;
    margin: auto;
    display: flex;
    justify-content: flex-end;
}
/*#endregion*/
/*! Containers */
/*#region Containers*/
.chat-container-inline {
	display: flex !important;
	justify-content: left !important;
	align-items: center !important;
}
.chat-container-inline-spaced {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}
.chat-container-inline-spaced-full-h {
	display: flex !important;
	justify-content: space-between !important;
	align-items: stretch !important;
}
.chat-container-inline-right {
	display: flex !important;
	justify-content: right !important;
	align-items: center !important;
}
.chat-container-inline-centered {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}
.show {
	display: flex;
}
/*#endregion*/
/*! Buttons */
/*#region Buttons*/
.chat-btn-primary {
	cursor: pointer;
	background-color: var(--chat-window-bg-color) !important;
	color: var(--chat-window-color-theme) !important;
	opacity: 0.8;
	transition-duration: 0.4s;
}
.chat-btn-primary:hover {
	opacity: 1;
}

.chat-btn {
	position: fixed;
	right: var(--right-button-position);
	bottom: var(--bottom-button-position);
	border: none;
	outline: none;
	cursor: pointer;
	background-color: var(--chat-window-color-theme);
	color: white;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	opacity: 0.8;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
	z-index: 10;
	transition-duration: 0.4s;
}
.chat-btn:hover {
	opacity: 1;
}
.chat-btn:hover,
.chat-submit:hover {
	opacity: 1;
}
.chat-btn-primary {
	/* background-color: #0096fe; */
	border: 1px solid var(--chat-window-color-theme);
	outline: none;
	display: inline-block;
	color: var(--chat-window-color-theme);
	padding: 5px 15px;
	border-radius: 4px;
	cursor: pointer;
	margin: 5px;
	font-weight: bold;
}
.chat-btn-primary:hover {
	background-color: #0096fe;
	color: #fff;
	transform: scale(1.1);
}

.chat-btn-secondary {
	cursor: pointer;
	background-color: var(--chat-window-color-theme);
	color: var(--chat-window-bg-color) !important;
	opacity: 0.8;
	transition-duration: 0.4s;
}
.chat-btn-secondary:hover {
	opacity: 1;
}
.chat-btn-secondary {
	/* background-color: #0096fe; */
	border: 1px solid var(--chat-window-color-theme);
	outline: none;
	display: inline-block;
	padding: 5px 15px;
	border-radius: 4px;
	cursor: pointer;
	margin: 5px;
	font-weight: bold;
}
.chat-btn-secondary:hover {
	transform: scale(1.1);
}
.chat-btn-rounded{
	border-radius: 50px;
	margin:0 !important;
	padding: 5px;
}
.chat-dev-close-btn{
    display: none;
}
.chat-dev-close-btn {
	width: 40px;
	background-color: transparent;
	color: white;
	border: none;
	outline: none;
	cursor: pointer;
	margin: 0 10px;
}
.chat-dev-close-btn:hover {
	transform: scale(1.2);
	outline: none;
	border: none;
}
.expand-chat-window {
	width: 50px;
	background-color: transparent;
	color: white;
	border: none;
	outline: none;
	cursor: pointer;
}
.expand-chat-window:hover {
	transform: scale(1.2);
	outline: none;
	border: none;
}
.help-chat-window {
	width: 40px;
	background-color: transparent;
	color: white;
	border: none;
	outline: none;
	cursor: pointer;
	margin: 0 10px;
}
.help-chat-window:hover {
	transform: scale(1.2);
	outline: none;
	border: none;
}
.command-chat-window {
	width: 40px;
	background-color: transparent;
	color: white;
	border: none;
	outline: none;
	cursor: pointer;
	margin: 0 10px;
}
.command-chat-window:hover {
	transform: scale(1.2);
	outline: none;
	border: none;
}
/*#endregion*/
/*! SVG */
/*#region SVG*/
.chat-svg-stroke {
	stroke: currentColor;
}
/*#endregion*/
/*! Video */
/*#region Video*/
.chat-video {
	width: 100% !important;
	height: auto !important;
	min-height: 250px;
	border-radius: 6px!important;
}
/*#endregion*/
/*! Bot message over */
/*#region Bot message over*/
.chat-over{
	position:relative;		
}
.chat-over.right{
	margin-left:10px;
	margin-right: 0 !important;
}
.chat-over.left{
	margin-right:10px;
	margin-left: 0 !important;
}
/*#endregion*/
/*! REVIEW */
/*#region Review */
/* ====================== Review Form ====================== */
#rating-modal {
	/* position: absolute;
  left: 10vh;
  top: 10vh; */
	/* fix exactly center: https://css-tricks.com/considerations-styling-modal/ */
	/* begin css tricks */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* end css tricks */
	/* z-index: -10; */
	z-index: 3501;
	display: flex;
	flex-direction: column;
	/* width: 80vw; */
	/* height: 80vh; */
	border: 1px solid #666;
	border-radius: 5px;
	opacity: 0;
	transition: all 0.3s;
	overflow: hidden;
	background-color: #eee;
	/* visibility: hidden; */
	display: none;
	width: 90%;
	max-width: 700px;
	padding: 10px;
	max-height: 700px;
}

.chat-modal-header {
	height: var(--chat-bot-top-img-size);
	width: 100%;
	margin: 5px;
}

#rating-modal.show {
	/* visibility: visible;   */
	opacity: 1;
	/* z-index: 10; */
	display: flex;
}

.rating-modal-overlay {
	width: 100%;
	height: 100%;
	z-index: 3500; /* places the modalOverlay between the main page and the modal dialog */
	background-color: #000;
	opacity: 0;
	transition: all 0.3s;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	margin: 0;
	padding: 0;
}

.rating-modal-overlay.show {
	display: block;
	opacity: 0.5;
}

#rating-modal .close-btn {
	align-self: flex-end;
	font-size: 1.4em;
	margin: 8px;
	cursor: pointer;
}

#review-form {
	position: relative;
	max-width: 900px;
	padding: 10px;
}
/* 
input,
label {
  display: block;
  width: 100%;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
} */

.rate {
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: inset 0 1px 1px #e1e1e1;
	font-size: 16px;
	padding: 8px;
	width: 100% !important;
	height: 100% !important;
}

.rate-btn-valid {
	background: var(--chat-window-color-theme);
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: inset 0 1px 1px var(--chat-window-color-theme);
	font-size: 16px;
	padding: 8px;
	width: 100%;
	color: white;
	opacity: 0.8;
}
.rate-btn {
	background: var(--rating-models-bg);
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: inset 0 1px 1px var(--rating-models-bg);
	font-size: 16px;
	padding: 8px;
	width: 100%;
	color: white;
	opacity: 0.8;
}

.review-header {
	background: var(--rating-models-bg);
}

.rate-btn:hover,
.rate-btn-valid:hover {
	opacity: 1;
}

input[type="radio"].rate {
	box-shadow: none;
}

button#submit-review-btn,
button#close-review-btn {
	min-height: 40px;
	max-height: 40px;
}

button#submit-review-btn,
button#close-review-btn {
	font-weight: bold;
	cursor: pointer;
	padding: 0 16px;
}

.fieldset {
	margin-top: 20px;
}

#review-form-container {
	width: 100%;
	/* background-color: #eee; */
	padding: 0;
	color: #333;
	overflow-y: auto;
	overflow-x: hidden;
}

#review-form-container h2 {
	margin: 0 0 0 6px;
}

#review-form {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

#review-form label,
#review-form input {
	display: block;
	/* width: 100%; */
}

#review-form label {
	font-weight: bold;
	margin-bottom: 5px;
}

#review-form .rate label,
#review-form .rate input,
#review-form .rate1 label,
#review-form .rate1 input {
	display: inline-block;
}
/* Modified from: https://codepen.io/tammykimkim/pen/yegZRw */
.rate {
	/* float: left; */
	/* display: inline-block; */
	height: 50px;
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: flex-end;
	width: 95%;
}

.rate-btn {
	/* float: left; */
	/* display: inline-block; */
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

textarea.rate {
	height: 50%;
	margin-bottom: 10px;
	width: 100%;
}

#review-form .rate > label {
	margin-bottom: 0;
	margin-top: 10px;
	height: 50px;
}

.rate:not(:checked) > input {
	/* position: absolute; */
	top: -9999px;
	margin-left: -24px;
	width: 20px;
	padding-right: 14px;
	z-index: -10;
}

.rate:not(:checked) > label {
	float: right;
	width: 1em;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	font-size: 30px;
	color: #ccc;
}
/* #star1:focus{

} */
.rate2 {
	float: none;
}

.rate:not(:checked) > label::before {
	content: "★ ";
	position: relative;
	top: 0;
	left: 2px;
}

.rate > input:checked ~ label {
	color: var(--chat-window-color-theme);
	/* outline: -webkit-focus-ring-color auto 5px; */
}

.rate > input:checked:focus + label,
.rate > input:focus + label {
	outline: -webkit-focus-ring-color auto 5px;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
	color: var(--chat-window-color-theme);
	/* outline: -webkit-focus-ring-color auto 5px; */
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
	color: var(--chat-window-color-theme);
}
/*#endregion*/
/*! SPINNER */
/*#region Spinner*/
.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-ellipsis div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--chat-window-color-theme);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}
@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}
@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(24px, 0);
	}
}
/*#endregion*/
/*! Animations */
/*#region Animations*/
/*main button*/
.chat-shk {
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	animation-name: chatShake;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes chatShake {
	2%,
	18% {
		transform: translate3d(-5px, 0, 0);
	}
	4%,
	16% {
		transform: translate3d(5px, 0, 0);
	}
	6%,
	10%,
	14% {
		transform: translate3d(-5px, 0, 0);
	}
	8%,
	12% {
		transform: translate3d(5px, 0, 0);
	}
	18.1% {
		transform: translate3d(0px, 0, 0);
	}
}
/*effects*/
.chat-animate {
	animation-duration: 0.75s;
	animation-delay: 0.1s;
	animation-name: chat-animate-grow;
	animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
	animation-fill-mode: backwards;
}
.chat-animate-left {
	animation-name: chat-animate-left;
}
@keyframes chat-animate-left {
	0% {
		opacity: 0.5;
		transform: translate(-10px, 0);
	}
	100% {
		opacity: 1;
		transform: translate(5px, 0);
	}
}
.animate-right {
	animation-name: chat-animate-right;
}
@keyframes chat-animate-right {
	0% {
		opacity: 0.5;
		transform: translate(10px, 0);
	}
	100% {
		opacity: 1;
		transform: translate(-5px, 0);
	}
}
/* Fade In */
.chat-animate.fade {
	animation-name: chat-animate-fade;
	animation-timing-function: ease;
}
@keyframes chat-animate-fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* Pop In */
.chat-animate.pop {
	animation-name: chat-animate-pop;
}
@keyframes chat-animate-pop {
	0% {
		opacity: 0;
		transform: scale(0.5, 0.5);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
/* Blur In */
.chat-animate.blur {
	animation-name: chat-animate-blur;
	animation-timing-function: ease;
}
@keyframes chat-animate-blur {
	0% {
		opacity: 0;
		filter: blur(15px);
	}
	100% {
		opacity: 1;
		filter: blur(0px);
	}
}
/* Glow In */
.chat-animate.glow {
	animation-name: chat-animate-glow;
	animation-timing-function: ease;
}
@keyframes chat-animate-glow {
	0% {
		opacity: 0;
		filter: brightness(3) saturate(3);
		transform: scale(0.8, 0.8);
	}
	100% {
		opacity: 1;
		filter: brightness(1) saturate(1);
		transform: scale(1, 1);
	}
}
/* Grow In */
.chat-animate.grow {
	animation-name: chat-animate-grow;
}
@keyframes chat-animate-grow {
	0% {
		opacity: 0;
		transform: scale(1, 0);
		visibility: hidden;
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
/* Splat In */
.chat-animate.splat {
	animation-name: chat-animate-splat;
}
@keyframes chat-animate-splat {
	0% {
		opacity: 0;
		transform: scale(0, 0) rotate(20deg) translate(0, -30px);
	}
	70% {
		opacity: 1;
		transform: scale(1.1, 1.1) rotate(15deg);
	}
	85% {
		opacity: 1;
		transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1) rotate(0) translate(0, 0);
	}
}
/* Roll In */
.chat-animate.roll {
	animation-name: chat-animate-roll;
}
@keyframes chat-animate-roll {
	0% {
		opacity: 0;
		transform: scale(0, 0) rotate(360deg);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1) rotate(0deg);
	}
}
/* Flip In */
.chat-animate.flip {
	animation-name: chat-animate-flip;
	transform-style: preserve-3d;
	perspective: 1000px;
}
@keyframes chat-animate-flip {
	0% {
		opacity: 0;
		transform: rotateX(-120deg) scale(0.9, 0.9);
	}
	100% {
		opacity: 1;
		transform: rotateX(0deg) scale(1, 1);
	}
}
/* Spin In */
.chat-animate.spin {
	animation-name: chat-animate-spin;
	transform-style: preserve-3d;
	perspective: 1000px;
}
@keyframes chat-animate-spin {
	0% {
		opacity: 0;
		transform: rotateY(-120deg) scale(0.9, 0.9);
	}
	100% {
		opacity: 1;
		transform: rotateY(0deg) scale(1, 1);
	}
}
/* Slide In */
.chat-animate.slide {
	animation-name: chat-animate-slide;
}
@keyframes chat-animate-slide {
	0% {
		opacity: 0;
		transform: translate(0, 20px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
/* Drop In */
.chat-animate.drop {
	animation-name: chat-animate-drop;
	animation-timing-function: cubic-bezier(0.77, 0.14, 0.91, 1.25);
}
@keyframes chat-animate-drop {
	0% {
		opacity: 0;
		transform: translate(0, -300px) scale(0.9, 1.1);
	}
	95% {
		opacity: 1;
		transform: translate(0, 0) scale(0.9, 1.1);
	}
	96% {
		opacity: 1;
		transform: translate(10px, 0) scale(1.2, 0.9);
	}
	97% {
		opacity: 1;
		transform: translate(-10px, 0) scale(1.2, 0.9);
	}
	98% {
		opacity: 1;
		transform: translate(5px, 0) scale(1.1, 0.9);
	}
	99% {
		opacity: 1;
		transform: translate(-5px, 0) scale(1.1, 0.9);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1, 1);
	}
}
/* Animation Delays */
.chat-delay-1 {
	animation-delay: 0.2s;
}
.chat-delay-2 {
	animation-delay: 0.3s;
}
.chat-delay-3 {
	animation-delay: 0.4s;
}
.chat-delay-4 {
	animation-delay: 0.5s;
}
.chat-delay-5 {
	animation-delay: 0.6s;
}
.chat-delay-6 {
	animation-delay: 0.7s;
}
.chat-delay-7 {
	animation-delay: 0.8s;
}
.chat-delay-8 {
	animation-delay: 0.9s;
}
.chat-delay-9 {
	animation-delay: 1s;
}
.chat-delay-10 {
	animation-delay: 1.1s;
}
.chat-delay-11 {
	animation-delay: 1.2s;
}
.chat-delay-12 {
	animation-delay: 1.3s;
}
.chat-delay-13 {
	animation-delay: 1.4s;
}
.chat-delay-14 {
	animation-delay: 1.5s;
}
.chat-delay-15 {
	animation-delay: 1.6s;
}
.chat-delay-16 {
	animation-delay: 1.7s;
}
.chat-delay-17 {
	animation-delay: 1.8s;
}
.chat-delay-18 {
	animation-delay: 1.9s;
}
.chat-delay-19 {
	animation-delay: 2s;
}
.chat-delay-20 {
	animation-delay: 2.1s;
}
@media screen and (prefers-reduced-motion: reduce) {
	.chat-animate {
		animation: none !important;
	}
}
/*#endregion*/
/*! Mobile */
/*#region Mobile*/
@media (max-width: 500px) {
    .chat-dev-close-btn{
        display: flex;
    }
	.chat-popup {
		top: 60px;
		bottom: 10px;
		right: 1%;
		width: 95%;
		/*height: 100%;*/
	}
	.top-bot-img {
		width: 100px;
	}
	.top-bot-main-margin {
		margin: -120px -25px;
	}
	.bot-img {
		width: 60px;
	}
}
/*#endregion*/