/* Generic */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { height: -webkit-fill-available; }
body { margin: 0; padding: 0; overflow: hidden; font-family: 'Roboto'; min-height: 100vh; min-height: -webkit-fill-available; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
button[type="submit"] { margin-left: 10px; padding: 10px 25px; border: none; background-color: #96B566; color: #fff; cursor: pointer; border-radius: 20px; width: auto; transition: all 0.3s ease-in; font-weight: bold; font-size: 16px; }
button[type="submit"]:hover { background: #000; transition: all 0.3s ease-in; }
.show-xs, .show-sm { display: none; }

/* Layout */
header { width: 100%; background: #96B566; color: #fff; z-index: 10; /*position: fixed; top: 0; left: 0;*/ }
header h1 { font: normal 52px "Bebas Neue" }
.headerContent { padding: 20px; }
#topBanner { padding: 20px; background: #fff; color: #000; display: flex; align-items: center; }
#topBanner a { font-weight: bold; color: #cf191d; }
#topBanner img { height: 30px; margin-right: 20px; display: inline; vertical-align: middle; }

/* Chat Area */
#chatbot { width: 100%; /*height: calc(100vh - 120px);*/ flex: 1; overflow: auto; padding-top: 20px; padding-bottom: 80px; background-color: #EFEAE2; z-index: 1; }
#conversation { padding: 20px; }

.message { margin-bottom: 25px; padding: 15px; border-radius: 8px; width: auto; max-width: 80%; display: table; margin-left: auto; margin-right: auto; font-size: 16px; position: relative; line-height: 24px; }
.user {	background-color: #D9FDD2; margin-right: 80px; }
.user:before { width: 64px; height: 64px; display: block; border-radius: 100%; background: url(assets/user.jpg); background-size: 100%; content: "."; text-indent: -9999px; position: absolute; right: -80px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.chatbot { background-color: #fff; margin-left: 80px; margin-right: auto; }
.chatbot:before { width: 64px; height: 64px; display: block; border-radius: 100%; background: url(assets/grc.jpg); background-size: 100%; content: "."; text-indent: -9999px; position: absolute; left: -80px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

#chatbot_wrapper { display: flex; flex-direction: column; height: 100vh; }
#chatbot_bar { z-index: 10; width: 100%; padding: 15px; position: fixed; bottom: 0; left: 0; background: #eee; }
#privacySection { padding-top: 10px; padding-left: 5px; font-size: 12px; color: #666; }
#privacySection a { font-size: 12px; color: #666; text-decoration: none; }
#chatbot-form { display: flex; }
#chatbot-input { flex-grow: 1; padding: 10px; border: none; border-radius: 20px; font-size: 16px; outline: none; }
#chatbot-input:disabled { background: #ddd; opacity: 1; color: #ddd; }

#typing_bar { display: none; position: absolute; top: -50px; left: 20px; background: #fff; padding: 10px; color: #777; border-radius: 20px; }
.typing_indicator { will-change: transform; width: auto; border-radius: 20px; display: inline-block; margin: 0 5px; position: relative; animation: 2s bulge infinite ease-out; }
.typing_indicator span { height: 7px; width: 7px; float: left; margin: 0 2px; background-color: #9E9EA1; display: block; border-radius: 50%; opacity: 0.4; }
.typing_indicator span:nth-of-type(1) { animation: 1s blink infinite 0.3333s; }
.typing_indicator span:nth-of-type(2) { animation: 1s blink infinite 0.6666s; }
.typing_indicator span:nth-of-type(3) { animation: 1s blink infinite 0.9999s; }


@keyframes blink {
	50% {
		opacity: 1;
	}
}

@keyframes bulge {
	50% {
		transform: scale(1.05);
	}
}

/*

	Smartphone

*/
@media screen and (max-width: 600px)
{
	/*#chatbot { padding-top: 280px; }*/
	.show-xs, .show-sm { display: block; }
}