body {
	font-family: Acme,Verdana,Arial,Helvetica,sans-serif;
	font-size: small;
  color: #000000;
  background: #444;
  --curve: 32px;
  --indent: 64px;
  margin: 32px;
}

@font-face{ 
	font-family: 'Acme';
	src: url('/acme_regular_macroman/Acme-Regular-webfont.woff') format('woff');
}

h1 {
	font-weight: bold;
	font-size: 24pt;
	color: #0000FF;
}
fieldset {
	border: 1px dotted #000000;
}
legend {
	font-weight: bold;
}
input#message {
	width: 100%;
}
div#dialogue {
	width: 100%;
}

div.chatContainer {
	height: calc(100vh - 180px);
	overflow-y: auto;
}

div#debug {
	overflow: auto;
	max-height: 450px;
	width: 100%;
}
code {
	font-family: monospace;
	font-size: medium;
	color: #D00;
}

table.input-table {
	border: 0px;
	border-collapse: separate;
	border-spacing: 4px;
	width: 100%;
}
table.input-table td.text-box {
	padding: 4px;
	text-align: left;
	vertical-align: middle;
}
table.input-table td.send-button {
	padding: 4px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
}

div.botLine:before {
	content: "Bot: ";
	font-weight: bold;
	color: #FF0000;
}

div.userLine:before {
	content: "User: ";
	font-weight: bold;
	color: #0000FF;
}

div.botLine {
    background: #888;
    border-radius: 0px var(--curve) var(--curve) var(--curve);
    padding: 24px;
    color: white;
    font-size: 1.5em;
    margin: 16px;
    margin-right: var(--indent);
}

div.userLine {
    background: #8a8;
    border-radius: var(--curve) var(--curve) 0 var(--curve);
    padding: 24px;
    color: white;
    font-size: 1.5em;
    margin: 16px;
    margin-left: var(--indent);
    text-align: right;
}

div.controlLine {
	text-align: center;
	font-style: italic;
	font-size: 1.1em;
}

div.botLine:before {
    content: "";
}

div.userLine:before {
    content: "";
}

h1 {
    color: white;
}

button {
    border: none;
    font-size: 1.5em;
    padding: 8px 16px;
}









::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #606060;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #303030;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}







/* div#dialogue {
    height: calc(100vh - 300px);
} */

p.commandButtons {
	text-align: right;
}



div.controlLine {
    color: white;
    font-size: 1.5em;
    margin: 24px;
}

div.controlLine:before {
    content: " --- ";
}

div.controlLine:after {
    content: " --- ";
}