:root {
  --color-background: #b6b7b8;
  --color-border: #999;
  --color-content-background: #fff;
  --color-highlight: #e0e1e3;
  --color-important: #c00;
  --color-link: #009de7;
  --color-link-active: #f18022;
  --color-note: #666;
  --color-notice: #090;
  --color-text: #444;
  --color-title: #f18022;
  --color-warning: #f18022;
  font-size: 16px;
}
body {
  background-color: var(--color-background);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  color: var(--color-text);
}
h1 {
  display: none;
}
h2 {
  margin-block: 1.25rem 0.25rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-title);
}
h3,
fieldset legend {
  margin-block: 0.75rem 0.25rem;
  font-size: 1.125rem;
  font-weight: bold;
}
nav h3 {
  font-size: 1em;
}
h4 {
  margin-block: 0.75rem 0.25rem;
  font-size: 1rem;
  font-weight: bold;
}
h5 {
  margin-block: 0.75rem 0.25rem;
  font-size: 0.875rem;
  font-weight: bold;
}
p {
  margin-block: 0.5em;
}
ul {
  margin-block: 0.5em;
  padding-inline-start: 1.5em;
  list-style: disc outside;
}
table {
  margin-block: 0.25em;
  border-width: 0;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid var(--color-border);
  padding: 0.5rem;
  vertical-align: top;
}
th {
  background-color: var(--color-highlight);
  font-weight: bold;
  text-align: center;
}
form {
  margin-block: 1.25rem;
}
td form {
  margin-block: 0;
  white-space: nowrap;
}
form.alt > fieldset {
  display: flex;
  column-gap: 2em;
}
textarea {
  min-block-size: 4em;
  min-inline-size: 20em;
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
a {
  color: var(--color-link);
}
a:hover {
  color: var(--color-link-active);
}
a[target='_blank']::after {
  content: '⧉';
  margin-inline-start: 0.25em;
}
a[href^='mailto:']::after {
  content: '✉';
  margin-inline-start: 0.25em;
}
a[href^='tel:']::after {
  content: '☎';
  margin-inline-start: 0.25em;
}
.container {
  margin-inline: auto;
  padding: 0 2.5rem 2.5rem 2.5rem;
}
header {
  border-block-end: 2.5rem solid var(--color-highlight);
  background: url(../img/account.png) 101% -0.875rem / 720px 126px no-repeat scroll content-box content-box var(--color-content-background);
}
header img {
  padding: 1.75rem 2.5rem;
  inline-size: 202px;
  block-size: auto;
}
.page-body {
  display: flex;
  gap: 2rem;
  background-color: var(--color-content-background);
  padding: 2.5rem;
  line-height: 1.5;
}
.page-body > nav {
  margin-block-start: 2.5rem;
  min-inline-size: 15rem;
}
.page-body > nav > ul {
  border-inline-start: 1px solid var(--color-background);
  padding: 0.75rem 0 0.75rem 2rem;
  list-style-type: none;
}
.page-body > nav li {
  margin-block: 1.25em;
  font-weight: bold;
  text-transform: uppercase;
}
.page-body > nav li li {
  margin-block: 0.25em;
  font-weight: normal;
  text-transform: none;
}
.page-body > nav a {
  text-decoration: none;
}
main {
  flex-grow: 1;
}
.view-component {
  display: flex;
  gap: 0.5em;
  margin-block: 0.5em;
}
.view-component .label {
  font-weight: bold;
}
.error,
.important,
.notice,
.require,
.warning {
  margin-block: 0.75rem;
  font-weight: bold;
  color: var(--color-important);
}
.notice {
  color: var(--color-notice);
}
.warning {
  color: var(--color-warning);
}
.field:not(td .field) {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  margin-block: 1em;
}
.field.field-hidden:not(:has(.prefix)):not(:has(.suffix)) {
  margin-block: 0;
}
fieldset[name='clients'] > .field {
  flex-wrap: nowrap;
}
fieldset[name='clients'] label:has(input[data-action=check-all]) {
  display: block;
  margin-block-end: 0.5em;
}
.field .note {
  margin-block-start: 0.25em;
  width: 100%;
  font-size: calc(10.5em / 12);
}
.field .note:not(.field.alt .note):not(form.alt .field .note):not(td .field .note) {
  padding-inline-start: calc(20em * 12 / 10.5);
}
.form-action:not(.form-action.alt):not(form.alt .form-action):not(td .form-action) {
  padding-inline-start: 20em;
}
.form-action .remove {
  margin-block-start: 1.5em;
}
.field > label,
.field > .label {
  font-weight: bold;
}
.field label:not(.field.alt label):not(form.alt .field label):not(.field.options label):not(fieldset[name=clients] label),
.field > .label {
  inline-size: 19em;
  flex-shrink: 0;
  vertical-align: top;
  text-align: end;
}
.field.options label {
  margin-inline-end: 1em;
}
.field.options:has(label:nth-child(3)) label {
  display: block;
  margin-inline-end: 0;
}
.field.options:has(label:nth-child(3)) label:not(:first-child) {
  margin-block-start: 0.5em;
}
.field .file-and-description:first-child {
  margin-block-end: 1em;
}
.field .file-and-description:not(:first-child) {
  margin-block-start: 1em;
  border-block-start: 1px solid  var(--color-highlight);
  padding-block-start: 0.5em;
}
.field .file-and-description input {
  margin-block: 0.5em;
  display: block;
}
.field .file-and-description:first-child input:first-child {
  margin-block-start: 0;
}
.field-widget:not(.field-hidden .field-widget) .prefix {
  margin-inline-end: 0.5em;
}
.field-widget:not(.field-hidden .field-widget) .suffix {
  margin-inline-start: 0.5em;
}
.field:not(.options):has(input[required]) label::after,
.field:has(select[required]) label::after,
.field:has(textarea[required]) label::after,
.field.options:has([required]) .label::after,
.field:has([data-required-field]) .label::after {
  content: '*';
  font-weight: bold;
  color: var(--color-important);
}
.ticket-update {
  margin-block: 1.75em 0.625em;
  border-top: 1px solid var(--color-highlight);
  padding-block: 0.625em;
}
.ticket-update + .ticket-update {
  margin-block-start: 0.625em;
}
.form-action input:not(:last-child),
.ticket-options form:not(:last-child) {
  margin-inline-end: 0.5em;
}
footer {
  padding: 1.75rem 2.5rem;
  font-size: 0.625rem;
}