.severity-none, .severity-none > .glyph { color: #607D8B; }
.severity-info, .severity-info > .glyph { color: #2196F3; }
.severity-notice, .severity-notice > .glyph { color: #00BCD4; }
.severity-ok, .severity-ok > .glyph { color: #4CAF50; }
.severity-rise, .severity-rise > .glyph { color: #8BC34A; }
.severity-fall, .severity-fall > .glyph { color: #FFEB3B; }
.severity-warning, .severity-warning > .glyph { color: #FF9800; }
.severity-error, .severity-error > .glyph { color: #F44336; }
.severity-alert, .severity-alert > .glyph { color: #E91E63; }
html { height: 100%; border: 0; margin: 0; }
body { background-color: #F5F5F5; color: rgba(0, 0, 0, 0.87); font-family: Roboto, sans-serif; font-size: 18px; height: 100%; border: 0; margin: 0; }
a { text-decoration: none; color: #039BE5; }
a:link, a:visited, a:focus, a:hover, a:active { text-decoration: none; }
a:hover { color: #0277BD; }
[onclick]:hover { cursor: pointer; }
stream, text, response, glyph, pillar { display: block; }
h1 { text-align: center; color: rgba(0, 0, 0, 0.54); }
pillar { margin: auto; height: 100%; max-width: 640px; display: flex; flex-direction: column; }
#stream-box { position: relative; flex-grow: 1; }
stream { position: absolute; top: 16px; bottom: 0; left: 0; right: 0; overflow: auto; scroll-behavior: smooth; }
#liza-inputs { background-color: #ffffff; margin: 16px 2px 8px 2px; border: 1px solid #d0d0d0; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }
#liza-input { box-sizing: border-box; width: 100%; padding: 16px; font-size: 18px; border: none; margin: 0; }
#liza-running { box-sizing: border-box; width: 100%; color: #aaaaaa; text-align: center; margin: 0px 0px 8px 0px; }
response { margin-bottom: 12px; padding: 12px; overflow: auto; margin-left: 0; margin-right: 80px; }
response.type-bubble { border-radius: 24px; background-color: #E0E0E0; color: #424242; }
response.type-input { margin-right: 8px; padding: 0; }
response.type-input text { border-radius: 24px; color: #ffffff; background-color: #039BE5; display: inline-block; float: right; padding: 12px; }
response.type-button { color: #29B6F6; background-color: #ffffff; border-radius: 24px; border: 2px solid #29B6F6; cursor: pointer; display: inline-block; }
response.type-message { color: #ffffff; background-color: #4CAF50; vertical-align: middle; }
response.type-message glyph { color: #FFB300; }
response.type-url { cursor: pointer; }
response.type-html { background-color: #ffffff; border-radius: 0; }
response.type-image > img { width: 100%; }
response.type-iframe > iframe { box-model: bounding-box; width: 100%; border: none; }
response.type-iframe.render-youtube > iframe { height: 400px; }
response.type-iframe.render-wide > iframe { margin-left: 16px; height: 400px; }
response.render-wide { margin-left: 0; }
response.render-white { color: #ffffff; }
@font-face { font-family: 'material'; src: url("font/material.woff") format("woff"); }
.font-material { font-family: material; }
@font-face { font-family: 'material2'; src: url("font/material2.woff") format("woff"); }
.font-material2 { font-family: material2; }
@font-face { font-family: 'awesome'; src: url("font/awesome.woff") format("woff"); }
.font-awesome { font-family: awesome; }
glyph { width: 48px; height: 48px; font-size: 32px; line-height: 48px; background-color: #ffffff; color: #039BE5; border-radius: 24px; float: left; margin-right: 12px; text-align: center; }
.emoji { height: 32px; vertical-align: middle; }