:root {
	--application-accent: #8e3348;
	--application-warning: #b97732;
	--application-danger: #a92f3c;
	--application-gap: 1rem;
}

.application-banner {
	display: flex;
	align-items: center;
	gap: .75rem 1.25rem;
	flex-wrap: wrap;
	margin: 0 auto 1rem;
	padding: .85rem 1rem;
	background: color-mix(in srgb, var(--application-warning) 18%, transparent);
	border: 1px solid var(--application-warning);
	border-radius: 10px;
}

.application-banner a { margin-left: auto; }
.application-banner.is-overdue { background: color-mix(in srgb, var(--application-danger) 20%, transparent); border-color: var(--application-danger); }
.application-usercp-layout { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); gap: var(--application-gap); }
.application-usercp-navigation { display: grid; overflow: hidden; }
.application-usercp-navigation > div { padding: .55rem .75rem; }
.application-usercp-menu { display: grid; overflow: hidden; margin-bottom: 1rem; }
.application-usercp-menu > * { display: block; padding: .55rem .75rem; }
.application-main, .application-fields { display: grid; gap: var(--application-gap); }
.application-status > .thead, .application-form > .thead, .application-overview-header > .thead { display: block; margin: 0; padding: .75rem 1rem; }
.application-status > .trow1, .application-overview-header > .trow1 { padding: 1rem; }
.application-field { display: grid; gap: .4rem; padding: 1rem; }
.application-field + .application-field { border-top: 1px solid rgba(127,127,127,.22); }
.application-field-title { font-weight: 700; }
.application-field input[type="text"], .application-field textarea, .application-field select { width: 100%; max-width: 100%; }
.application-options { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.application-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; padding: .8rem 1rem; }
.application-overview { display: grid; gap: var(--application-gap); }
.application-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--application-gap); }
.application-card { overflow: hidden; }
.application-card h2 { margin: 0; padding: .65rem .8rem; }
.application-card > .trow1 { padding: .85rem; }
.application-card dl { display: grid; gap: .5rem; margin: 0 0 .8rem; }
.application-card dl > div { display: grid; grid-template-columns: minmax(7rem,.45fr) minmax(0,1fr); gap: .5rem; }
.application-card dt { font-weight: 700; }
.application-card dd { margin: 0; }
.application-card.is-overdue { border-color: var(--application-danger); }
.application-empty .trow1 { padding: 1rem; }

@media (max-width: 900px) { .application-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
	.application-usercp-layout, .application-cards { grid-template-columns: minmax(0,1fr); }
	.application-banner a { margin-left: 0; }
	.application-actions { justify-content: stretch; }
	.application-actions .button { flex: 1 1 12rem; }
}