/***********************************************************************************************************
* AI Assistant App using Ajax and PHP
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info@vasplus.info

**********************************Copyright Information*****************************************************
* This is a paid script and must not be sold by any client
*************************************************************************************************************/
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	font-family: arial;
	font-size: 14px;
	color: #000 !important;
	word-wrap: break-word;
	background-color: #f6f6f6 !important;
}

h2,p
{
	padding: 10px;
	padding-bottom:0px;
}


.vChatWrapper {bottom: 15px;left: 15px;position: fixed;z-index: 9999;}
.iconInner {-ms-align-items: center;align-items: center;background: #a64bf4;background: linear-gradient(to left, #00dbde, #fc00ff, #00dbde, #fc00ff);background-position: 50%;background-size: 300%;border-radius: 50%;color: #fff;cursor: pointer;display: flex;flex-wrap: wrap;font-size: 1.7em;height: 2em;justify-content: center;width: 2em;}
.botSubject, .messages, .showBotSubject .vChatContainer, .showMessenger .vChatContainer {display: none;}


.vChatWrapper .Messages, .vChatWrapper .app_vchat_display_response {flex-grow: 1;}
.chat_close_icon {color: #fff;cursor: pointer;font-size: 16px;position: absolute;right: 12px;z-index: 9;}
.chat_on {background-color: #8a57cf;bottom: 20px;border-radius: 50%;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;color: #fff;cursor: pointer;display: block;height: 45px;padding: 9px;position: fixed;right: 15px;text-align: center;width: 45px;z-index: 10;}
.chat_on_icon {color: #fff;font-size: 25px;text-align: center;}
.vChatWrapper .Layout {-webkit-animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);animation: appear .15s cubic-bezier(.25, .25, .5, 1.1);-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;background-color: rgb(63, 81, 181);bottom: 20px;border-radius: 10px;box-shadow: 5px 0 20px 5px rgba(0, 0, 0, .1);box-sizing: content-box !important;color: rgb(255, 255, 255);display: flex;flex-direction: column;justify-content: flex-end;max-height: 30px;max-width: 300px;min-width: 50px;opacity: 0;pointer-events: auto;position: fixed;transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1), min-width .2s cubic-bezier(.25, .25, .5, 1), max-width .2s cubic-bezier(.25, .25, .5, 1), min-height .2s cubic-bezier(.25, .25, .5, 1), max-height .2s cubic-bezier(.25, .25, .5, 1), border-radius 50ms cubic-bezier(.25, .25, .5, 1) .15s, background-color 50ms cubic-bezier(.25, .25, .5, 1) .15s, color 50ms cubic-bezier(.25, .25, .5, 1) .15s;z-index: 999999999;}
.vChatWrapper .Layout-open {border-radius: 10px;color: #fff;height: 500px;max-height: 500px;max-width: 300px;overflow: hidden;transition: right .1s cubic-bezier(.25, .25, .5, 1), bottom .1s cubic-bezier(.25, .25, .5, 1.1), min-width .2s cubic-bezier(.25, .25, .5, 1.1), max-width .2s cubic-bezier(.25, .25, .5, 1.1), max-height .2s cubic-bezier(.25, .25, .5, 1.1), min-height .2s cubic-bezier(.25, .25, .5, 1.1), border-radius 0ms cubic-bezier(.25, .25, .5, 1.1), background-color 0ms cubic-bezier(.25, .25, .5, 1.1), color 0ms cubic-bezier(.25, .25, .5, 1.1);width: 100%;}

.vChatWrapper .Layout-expand {display: none;height: 400px;max-height: 100vh;min-height: 300px;}
.showBotSubject.vChatWrapper .Layout-expand {display: block;}
.vChatWrapper .Layout-mobile {bottom: 10px}
.vChatWrapper .Layout-mobile.Layout-open {min-width: calc(100% - 20px);width: calc(100% - 20px);}
.vChatWrapper .Layout-mobile.Layout-expand {border-radius: 0 !important;bottom: 0;height: 100%;min-height: 100%;min-width: 100%;width: 100%;}
.vChatWrapper .Messenger_messenger {height: 100%;flex-direction: column;position: relative;width: 100%;}
.vChatWrapper .Messenger_header, .vChatWrapper .Messenger_messenger {display: flex;}
.vChatWrapper .Messenger_header {align-items: center;background-color: rgb(22, 46, 98);color: rgb(255, 255, 255);flex-shrink: 0;height: 40px;padding-left: 10px;padding-right: 40px;}

.vChatWrapper .Messenger_header h4 {-webkit-animation: slidein .15s .3s;animation: slidein .15s .3s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;font-size: 16px;opacity: 0;}
.vChatWrapper .Messenger_prompt {font-size: 16px;font-weight: 400;line-height: 18px;margin: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.vChatWrapper .app_vchat_content {background-color: #fff;display: flex;flex-direction: column;flex-grow: 1;height: 80px;}
.vChatWrapper .Messages {background-color: #fff;display: flex;flex-direction: column;flex-shrink: 1;overflow-x: hidden;overflow-y: auto;padding: 10px;position: relative;-webkit-overflow-scrolling: touch;}
.vChatWrapper .Input {background-color: #fff;border-top: 1px solid #e6ebea;color: #96aab4;flex-grow: 0;flex-shrink: 0;padding-bottom: 15px;padding-top: 17px;position: relative;width: 100%;}
.vChatWrapper .Input-blank .Input_field {max-height: 20px;}
.vChatWrapper .Input_field {background-color: transparent;border: none;outline: none;padding-left: 20px;padding-right: 45px;resize: none;width: 100%;font-size: 14px;line-height: 20px;min-height: 20px !important;}
.vChatWrapper .Input_button-emoji {right: 45px;}
.vChatWrapper .Input_button {background-color: transparent;border: none;bottom: 15px;cursor: pointer;height: 25px;outline: none;padding: 0;position: absolute;width: 25px;}
.vChatWrapper .Input_button-send {right: 15px;}
.vChatWrapper .Input-emoji .Input_button-emoji .Icon, .vChatWrapper .Input_button:hover .Icon {transform: scale(1.1);transition: all .1s ease-in-out;}
.vChatWrapper .Input-emoji .Input_button-emoji .Icon path, .vChatWrapper .Input_button:hover .Icon path {fill: #2c2c46;}
.Icon svg {height: auto;width: 100%;}

.msg {display: flex;}
.msg.user {flex-direction: row-reverse;}
.msg + .msg {margin-top: 15px;}
span.responsText {color: #000;display: inline-block;margin-left: 10px;vertical-align: top;max-width: calc(100% - 50px);}
.msg.user span.responsText {margin-left: 0;margin-right: 10px;}
span.avtr {display: inline-block;width: 30px;}
span.avtr figure {background-color: #ccc;background-position: center;background-repeat: no-repeat;background-size: cover;border-radius: 50%;display: block;margin: 0;padding-bottom: 100%;}

@-webkit-keyframes appear {
    0% {opacity: 0;transform: scale(0);}
    100% {opacity: 1;transform: scale(1);}
}
@keyframes appear {
    0% {opacity: 0;transform: scale(0);}
    100% {opacity: 1;transform: scale(1);}
}
@-webkit-keyframes slidein {
    0% {opacity: 0;transform: translateX(10px);}
    100% {opacity: 1;transform: translateX(0);}
}
@keyframes slidein {
    0% {opacity: 0;transform: translateX(10px);}
    100% {opacity: 1;transform: translateX(0);}
}

.vchat_loading_box{ margin-top:10px;padding-top:12px;height:auto;width:100%; color:#000;}

@media only screen and (max-width: 912px) {
	.vChatWrapper .Layout-open {max-width: 92%;width: 100%;}
	h2,p
	{
		padding: 15px;
		padding-bottom:0px;
	}
	p
	{
		font-size:16px;
	}
	
	.vChatWrapper .Input_field {background-color: transparent;border: none;outline: none;padding-left: 20px;padding-right: 45px;resize: none;width: 100%;font-size: 16px;line-height: 20px;min-height: 20px !important;}
	
	span.responsText {color: #000;display: inline-block;margin-left: 10px;vertical-align: top;max-width: calc(100% - 50px);font-size: 16px;}
	
	.vchat_loading_box{ margin-top:10px;padding-top:12px;height:auto;width:100%; color:#000;font-size: 16px;}
}