@import url("https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;700&display=swap");
.vcard-branding{margin-bottom:0px !important}
#chatLayout {	
	display: none;
	background:black;
	overflow-x: hidden;
	font-family: "Google Sans", "Helvetica", sans-serif;
	width:100%;
	height: calc(100vh - 110px);
	border-radius:10px;
}

#chatLayout * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#chatLayout .container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0%;
}

#chatLayout .header {
	display: flex;
	align-items: center;
	background:#202000
	width: 100%;
	height: 100%;
	padding: 0.5rem 0;
	max-height: 3rem;
	box-shadow: -9px -10px 17px 0px white;
}

#chatLayout #closeChat, #chatLayout #dropdownMenuButton{
	height:30px;
	width:30px;
	border-radius:50%;
	background:#202020 !important;
	padding-bottom:3px;
	margin-left:auto; 
	margin-right:15px;  
	border: 1px solid #ffffff24;
	color:white; 
	font-size:1.2rem; 
	cursor:pointer;
}

#chatLayout .header .logo {
	font-size: 1.2rem;
	font-weight: 600;
}

#chatLayout .input-area {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 1rem;
	background: black;
}

#chatLayout #input_message {
	padding: 0.6rem 0.4rem;
	padding-left: 35px;
	outline: none;
	border-radius: 7px;
	border: 1px solid #d8d8d8;
	width: 100%;
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	color: #ffffff
}

#chatLayout .input-area button {
	outline: none;
	border: none;
	width: 2.8rem;
	height: 2.5rem;
	border-radius: 50%;
	margin-left: 0.4rem;
	border: 1px solid #d8d8d8;
	cursor: pointer;
}

#chatLayout .input-area button:hover {
	background-color: #e6e6e6;
}

#chatLayout .input-area .fa-paper-plane {
	color: #00c3ff;
}

#chatLayout .chat-box {
	width: 100%;
	height: 100%;
	padding: 0.2rem 1rem;
	display: flex;
	flex-direction: column-reverse;
	overflow-y: auto;
	background: url({SITE_URL}storage/logo/chat_background.png) repeat;
}

#chatLayout .message {
	padding: 0.3rem 1rem;
	margin: 0.5rem 0;
	border-radius: 20px;
	width: fit-content;
	overflow-wrap: anywhere;
	text-align: left;
	max-width: 90%;
}

#chatLayout .message a {
	text-decoration: underline !important;
	color: #0983d0 !important;
}

#chatLayout .message pre {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	background: transparent
}

#chatLayout .message ul {
	margin-top: 5px;
	margin-bottom: 5px;
	list-style: disc;
	margin-left: 12px;
}

#chatLayout .message ol {
	margin-top: 5px;
	margin-bottom: 5px;
	list-style: decimal;
	margin-left: 12px;
}

#chatLayout .message code{color:white}

#chatLayout .message img {
	width: 100% !important;
	height: auto !important;		
	border-radius: 20px !important;
	background-color: #393939;
	margin-top: 5px;

}

#chatLayout .message iframe {
	width: 100% !important;
	height: 200px !important;				
	border-radius: 20px !important;
	background-color: #393939;
	border:none !important;
	margin-top: 5px;
}

#chatLayout .message.outgoing, #chatLayout .message.outgoing p {
	background-color: #f5f5f5;
	margin-left: auto;
	color: black;
}

#chatLayout .message.incoming, #chatLayout .message.incoming p {
	background-color: #202020;
	margin-right: auto;
	color: white
}

@media only screen and (max-width: 600px) {
	#chatLayout .contact-info .avatar {
		width: 35px;
		height: 35px;
	}
}

#chatLayout .chat-box::-webkit-scrollbar {
	width: 7px;
}

#chatLayout .chat-box::-webkit-scrollbar-thumb {
	background-color: darkgray;
	border-radius: 10px;
}

#chatLayout .chat-box::-webkit-scrollbar-track {
	background-color: #000000;
}

#chatLayout .message_sub_item{
	width:100%;border-radius:10px;background:#75c175;padding:5px;
}

#typing_message {
	padding: 10px !important;
	border-radius: 30px !important;
}

.message_typing {
	margin-left:10px;
	padding:16px 28px;
	-webkit-border-radius: 20px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius: 20px;
	-moz-border-radius-bottomleft: 2px;
	border-radius: 20px;
	border-bottom-left-radius: 2px;
}
.typing {
	align-items: center;
	display: flex;
	height: 17px;
}
.typing .dot {
	animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
	background-color: #ffffff; 
	border-radius: 50%;
	height: 7px;
	margin-right: 4px !important;
	vertical-align: middle;
	width: 7px;
	display: inline-block;
}
.typing .dot:nth-child(1) {
	animation-delay: 200ms;
}
.typing .dot:nth-child(2) {
	animation-delay: 300ms;
}
.typing .dot:nth-child(3) {
	animation-delay: 400ms;
}
.typing .dot:last-child {
	margin-right: 0;
}

@keyframes mercuryTypingAnimation {
0% {
		transform: translateY(0px);
		background-color:#ffffff; 
	}
	28% {
		transform: translateY(-7px);
		background-color:#ffffff;
	}
	44% {
		transform: translateY(0px);
		background-color: #ffffff; 
	}
}