body { font-family: "Roboto", sans-serif; margin: 2%; background-color: #282c37; color: white; } * { box-sizing: border-box; } .container { background-color: #444a5c; padding: 10px; } .light { background-color: #4d5366; } .column { flex-grow: 1; flex-basis: 0; padding: 10px; } .large { font-size: 1.2em; } .small { font-size: 0.8em; } .tiny { font-size: 0.5em; } .centred { text-align: center; } .thin { font-weight: 300; } .subtle { color: #ccc; } .row { display: flex; } .full-width { width: 100%; } .no-margin { margin: 0; } .left-align { text-align: left; } .panel-icon { width: 100px; height: 100px; background: center/contain url("/img/bot_generic.png"); background-repeat: no-repeat; } .panel-icon.large { width: 150px; height: 150px; } .panel-icon.online, .panel-icon.offline { width: 105px; } .panel-icon.online { border-left: 5px #5c5 solid; } .panel-icon.offline { border-left: 5px #c33 solid; } .panel-icon, .panel-text, .panel-actions { display: inline-block; align-self: center; } .panel-text { flex-grow: 1; margin: 0 0 10px 15px; } .panel-name { font-size: 1.8em; margin: 10px 0; } .panel-actions { margin-right: 10px; } .button { color: white; line-height: 1.2em; padding: 10px; text-decoration: none; display: inline-block; margin: 5px 0; transition: 0.2s linear; border: none; } .button:visited { color: white; } input.button, button.button { font-size: 1em; cursor: pointer; } .btn-primary { background-color: #9370db; border-color: #9370db; } .btn-primary:hover { background-color: #7859b6; border-color: #7859b6; } .btn-secondary { background-color: #999; } .btn-secondary:hover { background-color: #777; } .btn-large, button.btn-large { font-size: 1.6em; } .btn-dangerous { background-color: #e22; } .btn-dangerous:hover { background-color: #c22; } a { color: mediumpurple; text-decoration: none; } a:visited { color: mediumpurple; } p { line-height: 1.4em; } h1 { font-size: 4em; margin-top: 10px !important; } h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; } form { display: inline-block; } label.important { font-size: 1.4em; margin: 10px 0; font-weight: 300; display: block; text-align: center; } input, select, textarea { font-size: 1.2em; line-height: 1.4em; border: 3px grey solid; border-radius: none; padding: 3px; font-family: "Roboto", sans-serif; } input:focus, select:focus, textarea:focus { border: 3px mediumpurple solid; } input[type="checkbox"] { height: 1.4em; } label, input { flex-basis: 0; text-align: left; } label { flex-grow: 1; } form .row { margin: 10px 0; } .coming-soon { height: 200px; width: 200px; background: center/contain url("https://lynnesbian.space/img/bune.png"); display: inline-block; } .error, .success { color: white; text-align: center; font-size: 1.6em; padding: 10px; } .error { background-color: #e66; } .error.err-small { font-size: 1.0em; } .success { background-color: #6e6; } #chatbox { height: 90vh; background-color: #3d4353; padding: 10px; overflow-y: scroll; } #chatbox-input, #chatbox-input input{ width: 100%; } #chatbox, #chatbox-input { max-width: 600px; margin: 0 auto; } #chatbox-input { display: block; } .message { display: inline-block; padding: 5px; min-height: 30px; max-width: 60%; margin-bottom: 5px; } .message-container.user { text-align: right; } .message-container .bot-icon { height: 30px; width: 30px; display: inline-block; padding: 5px; } .message.bot { background-color: mediumpurple; color: white; vertical-align: top; } .message.user { background-color: #ddd; color: #333; }