kara/app.css

body {
	margin: 15px;
	padding: 0;
}

#kara {
	margin: 0;
	padding: 0;
	width: auto;
}

@media (min-width: 40em) {
	#kara,
	#kara-banner,
	#chatbox-wrapper {
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		width: 40em;
	}
}

.message {
	color: black;
	padding: 10px;
	margin-bottom: 5px;
	min-width: 55%;
	max-width: 80%;
}

img.message-image {
	max-width: 60%;
	border-radius: 0 15px 15px 15px;

	margin-bottom: 5px;
	clear: top;
}

.bot-message {
	border-radius: 0 15px 15px 15px;
	background-color: lightgreen;
}

.user-message {
	border-radius: 15px 0 15px 15px;
	background-color: lightblue;
}

#chat-box {
	margin-top: 4em;
	overflow-y: scroll;
	height: 65vh;
	padding-bottom: 2em;
}

#chatbox-wrapper {
	position: fixed;
	padding: 1em;
	bottom: 0;
	left: 0;
	right: 0;
}

#kara-banner {
	position: fixed;
	height: 3.2em;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0.7em;
}

#kara-banner .btn, .add-response-input-button {
	margin-top: -0.3em;
}

.response-input {
	margin-bottom: 3px;
}

.form-button {
	width: 100%;
}

.command-message {
	color: grey;
}

.command-message::before {
	content: '$: ';
}

.header-logo {
	max-height: 32px;
	max-width: 32px;
	width: 32px;
	height: 32px;
	margin-right: 5px;
}

.me-message {
	background-color: orange;
}

#addForm {
	margin-top: 60px;
}

.fa-check-circle {
	color: green;
}

.message-container {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 300px
}