html {
    font-family: sans-serif;
    font-size: 14.5px;
    line-height: 1.5rem; }
html, body, #app { min-height: 100%; }

/* Layout */
#app > nav {
    position: fixed;
    top: 0;
    width: 25ch;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    border-left: 1rem solid #38b256;
    padding-left: 0.5rem; }
#app > main { margin-left: 25ch; padding-left: 1rem; }

/* Menu header */
nav a { color: inherit; text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav ul, nav p { list-style-type: none; margin: 0; padding: 0; }
nav li.indent { margin-left: 1rem; }
.menu > li.logout { margin-top: 1rem; }
.menu h2, .menu h3, .menu h4, .menu h5, .menu h6 {
    margin: 0.5rem 0 0 0; font-size: 100%; }

/* Content */
article p, article ul, article ol, article dl, article figcaption, article .readable, .row, .group {
    max-width: 66ch; box-sizing: border-box; }
.full { width: 100%; }
.extend { width: 100%; padding-right: 0.5rem; }
.full, .extend {
    /* Big screen? */
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto; }

/* Blocks for: code, output sample and quotes */
pre > code, pre > samp, pre > kbd, blockquote { border: 1px solid #e0e0e0; padding: 1em; background-color: #fafafa; display: block; }
blockquote:before, blockquote:after { content: ""; }

/* Inline highlighting */
code, samp, kbd { padding: 0.3em; background-color: #f2f2f2; }
var { border-bottom: 1px solid #ff9999; }

/* Modifiers */
.quiet { color: #555; }
.suppress { list-style-type: none; }
.close { margin: 0; padding: 0; }

h1 small, h2 small, h3 small, h4 small { color: #555; font-weight: normal; }
h1 small { font-size: 50%; }

/* Feral */
.success, .info, .error {
    width: calc(100% - 0.5rem);
    max-width: unset;
    margin-left: -1rem;
    padding: 0.5rem;
    box-sizing: content-box; }
.success { border-left: 0.5rem solid #38b256; background-color: #f6fff6; }
.info { border-left: 0.5rem solid #3887b2; }
.error { border-left: 0.5rem solid #f77; background-color: #fff6f6; }
.error:before, .success:before { font-style: italic; }
/*p.error:before, p.success:before { content: none; }*/
.error:before { content: "Error: "; }
.success:before { content: "Success: "; }
/* output or container should add :before content: "Error" font-style: italic */

.hl-success, .hl-warning, .hl-error { border-radius: 1rem; padding: 0.3rem; }
.hl-success { background-color: #cfc !important; }
.hl-warning { background-color: #ccf !important; }
.hl-error { background-color: #fcc !important; }
input.hl-error { border-radius: 0; }

/* Forms */
p > label, .field > label { display: block; width: max-content; font-weight: bold; }
.field { margin: 1rem 0; }
p > input ~ label, .field > input ~ label { display: initial; font-weight: normal; }
input[type=text], input[type=email], input[type=password], input[type=number], 
textarea, select {
    width: 100%; padding: 0.6em 0.3em; box-sizing: border-box; }
input[type=checkbox], input[type=radio] { margin: 0 0.5em; }
button { padding: 0.4em 4em; }
button.suppress { padding: 0; }
form .group { display: flex; }
form .group > p { margin-top: auto; }
form .group > * { width: 100%; padding: 0 0.5rem; }
form .group > :first-child { padding-left: 0; }
form .group > :last-child { padding-right: 0; }

dl > dt { font-weight: bold; }
dl > dd { margin: 0; }

/* Tables */
table { text-align: left; border: 0 solid #ced7dd; table-layout: fixed; border-collapse: collapse; }
thead { border-bottom: 1px solid #3887b2; }
tfoot { border-top: 1px solid #3887b2; }
th, td { padding: 0.2rem 0.5rem; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tfoot th.title, tfoot td.title { font-weight: bold; text-align: right; }
tbody > tr:nth-child(even) { background-color: #F3F8FB; }
table th, table tr.th, table tr > .th { font-weight: bold; vertical-align: bottom; }
table th.number { text-align: right; }
table td.number { text-align: right; font-family: monospace; }

/* Page */
ol.tickets { list-style-type: none; margin: 0; padding: 0 0 0.5rem 0; }
ol.tickets > li.groups { padding-left: 2rem; }
ol.tickets > li > h2 { margin: 0; padding: 0 0 0 9.5rem; font-size: 100%; }
ol.tickets > li > div:first-child { float: left; padding-right: 0.5rem; width: 9rem; text-align: right; font-family: monospace; }
ol.tickets > li > :nth-child(2) { overflow: hidden; }
ol.tickets > li .tags { font-family: monospace; padding-left: 1rem; }

.ticket-msgs { list-style-type: none; padding: 0; }
.ticket-msgs > li {
    display: flex;
    flex-wrap: wrap-reverse;
    margin: 1rem 0 0 -1rem;
    padding-left: 0.5rem;
    box-sizing: content-box;
    border-left: 0.5rem solid #d7e7f0; } /* #3887b2 */
.ticket-msgs > li.author { border: 0; padding-left: 1rem; /*border-left: 0.5rem solid #d7e7f0;*/ }
.ticket-msgs > li.staff { border-left: 0.5rem solid #f77; padding-left: 0.5rem; }
.ticket-msgs > li > :first-child { width: 40rem; background-color: #fff; }
.ticket-msgs > li > pre { white-space: pre-wrap; }
.ticket-msgs > li > aside { margin: 0 1rem 0 2rem; color: #666; }
.ticket-msgs > li > aside:hover { color: currentColor; }

.ticket-controls, .ticket-controls ul, .ticket-controls ol {
    margin: 0; padding: 0; list-style-type: none; }
.ticket-controls input[type=text] { width: 100%; }
.ticket-controls > .tags label {
    padding: 0.2rem 0.4rem;
    float: left;
    font-family: monospace;
    white-space: pre; }
.ticket-controls { display: flex; }
.ticket-controls > .status { flex-basis: 8rem; }
.ticket-controls > .groups { flex-basis: 11rem; padding-right: 1rem; }