/* Colors and animations */
:root
{
	/* Background colors */
	--bg-color: hsl(0,0%,100%);
	--bg-color-1: #e6edef;
	--bg-color-2: var(--bg-color-1);
	--bg-color-3: #fcfcfc;
	--bg-color-4: hsl(0,40%,85%);
	--bg-color-5: #f3f6f7;
	--bg-color-6: #d0dde1;
	--bg-color-a: #dbc298;
	--bg-color-menu: #f7f3ed;
	--bg-color-menu-active: var(--bg-color-menu);
	--bg-color-form-active: #efe7dc;
	--bg-color-submit: #1c596c;
	--bg-color-submit-hover: #056f8f;
	--bg-color-submit-active: #055f7b;
	--bg-color-submit-disabled: rgb(231, 219, 203, 0.2);
	--bg-color-pre: #f3f3f3;
	--bg-color-off: hsl(16, 80%, 90%);
	--bg-color-on: hsl(130, 90%, 90%);

	/* Foreground colors */
	--color: #1c596c;
	--color-pre: #505050;
	--color-error: hsl(0,100%,50%);
	--color-warning: hsl(16, 100%, 66%);
	--color-notice: hsl(248, 53%, 58%);
	--color-info: hsl(249, 80%, 67%);
	--color-okay: hsl(120, 100%, 35%);
	--color-success: hsl(120, 100%, 25%);
	--color-active: #f0f0f0;

	--bg-header: var(--bg-color-1);
	--bg-footer: var(--bg-color-1);
	--bg-off: linear-gradient(to left, var(--bg-color-1), var(--bg-color-off));
	--bg-on: linear-gradient(var(--bg-color-1), var(--bg-color-on));

	--color-border-header: #b4c8ce;
	--color-border-section-etc: #b7b7b7;
	--color-border-pre: #ddd;
	--color-border-footer: var(--color-border-header);
	--color-border-table: #aaa;
	--color-border-form-active: rgba(136, 118, 94, .6);
	--color-border-menu-active: #978368;
	--color-border-submit: #184e5d;
}
@keyframes mbd_ongoing
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-6); }
}
@keyframes mbd_attention
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-4); }
}

/* Main custom classes */
.mbd-error,
.mbd-event-REJECTED,
.mbd-event-FAILED,
.mbd-model-status-None,       /* Non-existing object */
td[class^='mbd-distribution-'][class$='-experimental'],
.mbd-sbuild-status-failed,
.mbd-sbuild-status-attempted,
.mbd-sbuild-status-given-back,
.mbd-sbuild-check-error,
.mbd-sbuild-check-fail,
.mbd-django-message-error,
.mbd-inspect-severity3
{
	color: var(--color-error) !important;
}

.mbd-warning,
.mbd-model-status-Removed,       /* Removed StatusModel object */
td[class^='mbd-distribution-'][class$='-unstable'],
td[class^='mbd-distribution-'][class$='-snapshot'],
.mbd-sbuild-check-warn,
.mbd-django-message-warning,
.mbd-inspect-severity2
{
	color: var(--color-warning) !important;
}

.mbd-notice,
.mbd-event-REMOVED,
.mbd-model-status-Prepared,       /* Prepared StatusModel object */
td[class^='mbd-distribution-'][class$='-testing'],
.mbd-sbuild-check-no-tests,
.mbd-inspect-severity1
{
	color: var(--color-notice) !important;
}

.mbd-info,
.mbd-event-BUILDING,
.mbd-event-PACKAGING,
td[class^='mbd-distribution-'][class$='-hotfix'],
.mbd-model-status-Exists,       /* Existing (non StatusModel) object */
.mbd-sbuild-status-skipped,
.mbd-sbuild-check-info,
.mbd-django-message-debug,
.mbd-django-message-info
{
	color: var(--color-info) !important;
}

.mbd-okay,
.mbd-event-BUILT,
td[class^='mbd-distribution-'][class$='-stable'],
.mbd-inspect-severity0
{
	color: var(--color-okay) !important;
}

.mbd-success,
.mbd-event-INSTALLED,
.mbd-event-MIGRATED,
.mbd-model-status-Active,       /* Active StatusModel object */
.mbd-sbuild-check-pass,
.mbd-sbuild-status-successful,
.mbd-django-message-success
{
	color: var(--color-success) !important;
}

.mbd-not-used,
.mbd-sbuild-check-none
{
	text-decoration: line-through;
}

/* Misc */
.mbd-ongoing          { animation: mbd_ongoing 1s infinite alternate-reverse; }
.mbd-attention        { animation: mbd_attention 1s infinite alternate-reverse; }
.mbd-menu-active      { background-color: var(--bg-color-menu-active); border-color: var(--color-border-menu-active); border-radius: .3rem; }
.mbd-hidden           { display: none !important; }
.mbd-off              { background: var(--bg-off); }
.mbd-on               { background: var(--bg-on); }
.mbd-dim              { filter: opacity(30%); }
img.mbd-logo          { height: 3rem; vertical-align: middle; padding: 0 .1rem; }
img.mbd-icon          { height: 1.8rem; vertical-align: middle; }
img.mbd-icon[alt="admin"] {content: url(/static/static/icons/logged-in-as-admin.svg); }
img.mbd-icon-small    { height: 1.5rem; vertical-align: middle; }
button.mbd-button     { color: white; font-weight: bold; border: .1rem solid var(--color-border-submit); border-radius: .35rem; background-color: var(--bg-color-submit); padding: .2rem .5rem; margin: .1rem .2rem; }
button.mbd-button:hover { background-color: var(--bg-color-submit-hover); }
button.mbd-button:active { background-color: var(--bg-color-submit-active); color: var(--color-active); }
button.mbd-button-raw { border: none; background: none; }
a.mbd-underline       { text-decoration: underline; }
body>header img.mbd-icon[alt="dirview"] { height: 2.3rem; margin-top: -.2rem; }
body>header img.mbd-icon[title^="logged"], body>header img.mbd-icon[alt="Setup"], body>header img.mbd-icon[alt="Crontab"], body>header img.mbd-icon[alt="API"], body>header img.mbd-icon[alt="Manual"] { height: 2.5rem; }
img.mbd-icon[alt="Home"], img.mbd-icon[alt="Reload"], img.mbd-icon[alt="Close"] { height: 1.5rem; }
img.mbd-icon[alt="Reload"]:hover, img.mbd-icon[alt="Close"]:hover { filter: brightness(110%); } /* "Home" is gonna be brightened via a:hover */
img.mbd-icon[alt="Reload"]:active, img.mbd-icon[alt="Close"]:active { filter: brightness(104%); }
textarea[name="key"] { border: .1rem solid #bbb; border-radius: .4rem; margin-left: .5rem; }
.mbd-error-close-button { float: right; cursor: pointer; }
.mbd-only-if-popup { display: none; }
#mbd-api-popup-content>.mbd-only-if-popup { display:block; }
#mbd-api-popup-content>header.mbd-grid-lcr { margin-top: -.64rem; }
header li.mbd-attention { border-radius: .3rem; border-color: rgba(42, 42, 42, 0.1); }
header li.mbd-menu-active.mbd-attention { border-color: var(--color-border-menu-active); }

/* DataTables */
.dataTables_wrapper.no-footer, #mbd-setup-results-table_wrapper, #mbd-package-notifications-table_wrapper { background-color: var(--bg-color-1); border: .1rem solid #bfbfbf; padding: 1rem; border-radius: .4rem; }
.dataTables_wrapper .dataTables_filter { float: left; text-align: center; width: 100%; margin: -.4rem 0 .6rem 0; }
.dataTables_wrapper .dataTables_filter input { font-size: 1rem; background-color: white; border: .1rem solid #aaa; width: 16rem; border-radius: .5rem; padding: .2rem .5rem; }
.dataTables_wrapper .dataTables_info { position: absolute; right: 1.5rem; font-size: 1rem; color: #777777;clear: none; float: none; padding: 0 .2rem 0 0; margin-top: -.1rem; }
table.dataTable.no-footer, #mbd-setup-results-table, #mbd-package-notifications-table_wrapper table.dataTable { border: .1rem solid var(--color-border-table); border-radius: .4rem; }
table.dataTable thead th, table.dataTable.no-footer { border-bottom: .1rem solid var(--color-border-table); }
table.dataTable.compact thead th { padding: .6rem; background-color: var(--bg-color-5); }
table.dataTable.compact tbody td { padding: .1rem .4rem; }
table.dataTable.cell-border tbody tr td:first-child { border-left: 0; }
table.dataTable.cell-border tbody tr td:last-child { border-right: 0; }
table.dataTable.compact thead th:first-child { border-radius: .4rem 0 0 0; }
table.dataTable.compact thead th:last-child { border-radius: 0 .4rem 0 0; }
table.dataTable.cell-border tbody tr:last-child td:first-child { border-radius: 0 0 0 .4rem; }
table.dataTable.cell-border tbody tr:last-child td:last-child { border-radius: 0 0 .4rem 0; }
#mbd-package-notifications-table_wrapper table.dataTable.cell-border tbody tr:last-child td:first-child { border-radius: 0; }
#mbd-package-notifications-table_wrapper table.dataTable.cell-border tbody tr:last-child td:last-child { border-radius: 0; }
table.dataTable.cell-border tbody tr:last-child td:last-child.dataTables_empty{ border-radius: 0 0 .4rem .4rem; padding: .7rem 0; }
table[class^="dataTable"] img.mbd-icon { height: 1.6rem; }
table[class^="dataTable"] a { padding: 0 .2rem .1rem .2rem; }
table[class^="dataTable"] a:hover { color: #ffffff; background-color: var(--bg-color-a); border-radius: .2rem; }
table[class^="dataTable"] a:hover code { background-color: transparent; }
table[class^="dataTable"] form.mbd-api input[type="submit"] { padding: .25rem .6rem; border-radius: .35rem; }
#mbd-setup-results-table tfoot th, #mbd-package-notifications-table_wrapper tfoot th { border-top: .1rem solid var(--color-border-table); border-radius: 0 0 .4rem .4rem; background-color: var(--bg-color-5); text-align: center; padding: .3rem 0 .2rem 0; }
#mbd-package-notifications-table_wrapper tfoot th details[open] { text-align: left; }
#mbd-package-notifications-table_wrapper > table { width: 100%; }

/* Inner DataTables */
table.dataTable table.dataTable { border: .1rem solid var(--color-border-table); border-radius: .4rem; margin-bottom: .3rem; }
table.dataTable .dataTables_wrapper.no-footer { margin: .1rem .2rem .4rem .2rem; }
table.dataTable .dataTables_wrapper .dataTables_filter { margin-top: .4rem; text-align: left; width: 60%; }
table.dataTable .dataTables_wrapper .dataTables_filter label { margin: 0; padding: 0; }
table.dataTable .dataTables_wrapper .dataTables_filter input { width: 13rem; margin: 0; }
table.dataTable .dataTables_wrapper .dataTables_info { display: inline-block; margin-top: 0; padding: .7rem 0; position: relative; right: unset; }
table.dataTable.cell-border tbody thead tr:first-child th { border-left: 0; border-right: 0; }

/* Inner DT: Distribution Snapshots */
table.dataTable form[action$="snapshot_create/"] { margin: .1rem 0rem; }
table.dataTable form[action$="snapshot_delete/"] { width: max-content; }
table.dataTable.cell-border tbody tr:first-child thead th { border-left: 0; border-right: 0; }
table.dataTable.cell-border tbody tr:first-child tfoot th { min-width: 33rem; text-align: center; background-color: var(--bg-color-5); border-top: .1rem solid var(--color-border-table); border-left: 0; border-right: 0; border-radius: 0 0 .4rem .4rem; }
table.dataTable.cell-border tbody tr:first-child tfoot th details[open] { text-align: left; }

/* Inner DT: Rollbacks */
table.dataTable table.dataTable.cell-border tbody tr td:last-child form[action$="/remove/"] { width: max-content; margin-top: -.3rem; margin-bottom: -.3rem; }
table.dataTable table.dataTable.cell-border tbody tr td:last-child form[action$="/debdiff/"],
table.dataTable table.dataTable.cell-border tbody tr td:last-child form[action$="/migrate/"] { width: max-content; }
table.dataTable table.dataTable.cell-border tbody tr td:last-child form[action$="/remove/"]>input[type="submit"],
table.dataTable table.dataTable.cell-border tbody tr td:last-child form[action$="/debdiff/"]>input[type="submit"],
table.dataTable table.dataTable.cell-border tbody tr td:last-child form[action$="/migrate/"]>input[type="submit"] { width: 4.5rem }
table.dataTable table.dataTable.cell-border tbody tr td:last-child a[title="Dsc"] { margin: 0 3rem 0 .2rem; }


section>div>table.dataTable.compact>tbody>tr>td.dataTables_empty
{
	padding: 3rem 0;
	font-size: larger;
	font-weight: bold;
	font-style: italic;
	color: rgba(0, 0, 08, 0.3);
}

/* Grids */
.mbd-grid-llr { padding: 0.2rem; display: grid;        grid: auto / 1fr 1fr auto; }
.mbd-grid-lcr { padding: 0.2rem; display: grid;        grid: auto / auto 1fr auto;  align-items: center; justify-items: center; }
.mbd-grid-aaa { padding: 0.2rem; display: inline-grid; grid: auto / auto auto auto; align-items: center; }
.mbd-grid-ll  { padding: 0.2rem; display: grid;        grid: auto / auto 1fr;       align-items: center; }
.mbd-grid-lr  { padding: 0.2rem; display: grid;        grid: auto / 1fr auto;       align-items: center; }

/* API calls */
form.mbd-api>details  { display: inline; font-family: initial; font-size: initial; font-weight: initial; }  /* '[ls]->': -> should be after submit button, to the right. */
form.mbd-api>details[open]
{
	position: absolute;
	width: max-content;
	z-index: 2;
	margin-top: -.25rem;
	margin-left: -.05rem;
	box-shadow: 0 .2rem .4rem rgba(0,0,0,.2);
	background-color: var(--bg-color-form-active);
	border: .1rem solid var(--color-border-form-active);
	border-radius: .5rem;
	padding: .5rem .3rem .4rem .3rem;
}

/* "Details Popup" special treatments */
footer form.mbd-api>details[open] { bottom: -.2rem; }
main header.mbd-grid-lr { padding-top: .3rem; padding-bottom: .1rem; }
main header form.mbd-api>details[open] { right: -.5rem; margin-top: -.4rem; padding-top: .55rem; padding-right: .05rem; }
main header form.mbd-api>details[open] > summary { text-align: right; margin: auto .45rem .5rem auto; }
form.mbd-api[action="/mini_buildd/api/cronjob/"]>details[open] { right: -3.25rem; margin-top: -.3rem; }
form.mbd-api[action="/mini_buildd/api/cronjob/"]>details[open] > summary { text-align: right; margin: auto .1rem .5rem auto; }
/* OMG, deal with inner tables within most right (outer) column */
div[id$="_wrapper"] td:last-child td form.mbd-api>details[open] { right: -3.58rem; margin-top: -.33rem; }
div[id$="_wrapper"] td:last-child td form.mbd-api>details[open] > summary { text-align: right; margin: auto .45rem .5rem auto; }
/* Title bar: API call */
nav.mbd-result-titlebar-apicall form.mbd-api>details[open] { right: auto; margin-left: -.1rem; padding-left: .2rem; margin-top: -.25rem; padding-top: .4rem; }
nav.mbd-result-titlebar-apicall li:first-child form.mbd-api>details[open] > summary { text-align: left; margin-left: .1rem; }
/* Title bar: URL, CLI, JSON */
nav.mbd-result-titlebar-ucj { margin-left: -9rem; border: .1rem solid #ddd; border-radius: .5rem; background-color: #f3f3f3; padding: 0 .5rem; }
nav.mbd-result-titlebar-ucj:hover { background-color: #fcfcfc; }
/* nav.mbd-result-titlebar-ucj>ul>li { margin: -.05rem -.15rem; } */
nav.mbd-result-titlebar-ucj>ul>li { margin: 0; }
nav.mbd-result-titlebar-ucj>ul>li>details>summary { border: .1rem solid transparent; padding: .1rem .5rem; margin: -.1rem 0; border-radius: .4rem; }
nav.mbd-result-titlebar-ucj>ul>li>details>summary:hover { background-color: var(--bg-color-form-active); border: .1rem solid var(--color-border-form-active); cursor: default; }
nav.mbd-result-titlebar-ucj>ul>li>details[open] { margin-top: -1.1rem; margin-left: 0; padding: .3rem .5rem .5rem .5rem; left: 50%; transform: translate(-50%); max-width: 72vw; }
nav.mbd-result-titlebar-ucj>ul>li>details[open]>summary { text-align: center; border: 0; }
/* Title bar: Buttons */
nav.mbd-result-titlebar-buttons a { cursor: pointer; }
/* Title bar: Buttons (non-popup only)*/
main>section>header>nav.mbd-result-titlebar-buttons li:last-child { display: none; }
/* File */
header.mbd-file { font-size: 1.05rem; margin: 0 0 0 .1rem; }
header.mbd-file code { margin-left: .2rem; }
details.mbd-file-toc summary { margin: .5rem 0 .3rem .4rem; font-weight: bold; }
details.mbd-file-toc a { text-decoration: none; padding: 0 .2rem .1rem .2rem; }
details.mbd-file-toc a:hover { color: white !important; background-color: var(--bg-color-a); border-radius: .25rem; }
details.mbd-file-toc ul { background-color: #f8f8f8; border: .1rem solid var(--color-border-pre); border-radius: .35rem; margin: .4rem .3rem 1.3rem .3rem; padding: .5rem 2rem .6rem 2rem; }
pre.mbd-file-content { padding: 1rem 1.3rem; margin-top: .4rem; }

form.mbd-api input[type="submit"] /* API call submit */,
form[action="/accounts/register/"] input[type="submit"]
{
	color: white;
	font-weight: bold;
	border: .1rem solid var(--color-border-submit);
	border-radius: .4rem;
	background-color: var(--bg-color-submit);
	padding: .3rem .8rem;
	margin: .1rem .2rem .2rem .2rem;
	transition: background 0.2s;
}
form.mbd-api input[disabled]
{
	color: rgb(95, 82, 65, 0.2);
	border-color: rgb(72, 59, 40, 0.2);
	background-color: transparent;
}
form.mbd-api input[type="text"], form.mbd-api input[type="number"], form.mbd-api input[type="url"],
form[action="/accounts/register/"] input[type="text"], form[action="/accounts/register/"] input[type="email"], form[action="/accounts/register/"] input[type="password"]
{
	width: 13rem;
	border: .1rem solid #aaa;
	border-radius: .3rem;
	padding: .2rem;
}
header form.mbd-api input[type="text"][name="source"][value=""]
{
	font-size: 1rem;
	width: 16rem;
	border-radius: .5rem;
	padding: .2rem .5rem;
}
form input, form select, form checkbox { margin: .15rem .0rem .15rem .2rem; }
body>header label[title="Source package name"] { display: none; }
form.mbd-api input[type="submit"]:hover, form[action="/accounts/register/"] input[type="submit"]:hover { background-color: var(--bg-color-submit-hover); cursor: default; }
form.mbd-api input[type="submit"]:active, form[action="/accounts/register/"] input[type="submit"]:active { background-color: var(--bg-color-submit-active); color: var(--color-active); border-color: transparent; }
form.mbd-api input[type="submit"][disabled]:hover { background-color: transparent; }
form.mbd-api summary:hover { filter: brightness(105%); }
form.mbd-api summary:active { filter: brightness(103%); }

/* "Register User" (rest) */
form[action="/accounts/register/"] { background-color: #f3f3f3; border: .1rem solid #aaa; padding: .8rem 1rem; margin: 0; }
form[action="/accounts/register/"] th { vertical-align: top; padding-top: .3rem; }
form[action="/accounts/register/"] td { padding-bottom: 1rem; }
form[action="/accounts/register/"] ul { margin: -1rem .2rem 0 0; }
form[action="/accounts/register/"] span.helptext { padding-left:.3rem; }

/* Events: Before, Limit */
form.mbd-events-limit { padding: .2rem .2rem .13rem .3rem; margin: 0; }
form.mbd-events-limit>label>input { font-family: monospace; font-size: .9rem; color: #555; border: .1rem solid #aaa; border-radius: .3rem; padding: .1rem .2rem; margin: .15rem .0rem .15rem .05rem; }
form.mbd-events-limit>label>input:hover { color: #222; }
form.mbd-events-limit>label>input[type="number"] { width: 5rem; }
form.mbd-events-limit>button { border: 1px solid transparent; border-radius: .4rem; vertical-align: top; margin: -.05rem .3rem 0 0; padding: .2rem .5rem; }
form.mbd-events-limit>button:hover { border-color: rgba(42, 42, 42, 0.25); }
form.mbd-events-limit>button:focus { border-color: rgba(42, 42, 42, 0.2); animation: mbd_ongoing 1s infinite alternate-reverse; }

/* Crontab */
#mbd-crontab-table li.mbd-info { width: max-content; padding: .05rem .5rem; }

/* Buildlog */
span.mbd-plain-toc-item { padding-top: 4.8rem; }
span.mbd-plain-toc-item:target { display: inline list-item; list-style-type: "▶"; margin-left: -2.2ch; padding-right: .2ch; }

/* Popup */
#mbd-api-popup
{
	display: table;  /* get real centering */
	/* gray-out everything */
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background-color: rgba(0,0,0,0.6);
}
#mbd-api-popup>div  /* popup content */
{
	background-color: var(--bg-color-1);
	margin: auto;
	max-height: 90vh;
	max-width: 90vw;
	overflow-y: auto;
	padding: 0.3rem 0.6rem 0.3rem 0.3rem;
	padding: .5rem .7rem .6rem .7rem;
	border: .1rem solid var(--color-border-section-etc);
	border-radius: 0 0 .6rem .6rem;
	box-shadow: 0 .2rem .4rem rgba(0,0,0,.4);
}

nav>ul>li>details[open]
{
	position: absolute;
	width: max-content;
	z-index: 2;
	margin-top: -1.1rem;
	margin-left: -.6rem;
	box-shadow: 0 .2rem .4rem rgba(0,0,0,.2);
	background-color: var(--bg-color-form-active);
	border: .1rem solid var(--color-border-form-active);
	border-radius: .5rem;
	padding: .3rem .5rem;
}

/* Generic styles */
body
{
	color: var(--color);
	background-color: #fafafa;
	padding: .2rem .5rem;
}

/* margin/padding: Generally, we don't really want to change any browser's defaults. */
/* Any pimping that seems worthwhile anyway should be done here. */
label,
h1
{
	margin: 0.1rem;
	padding: 0.1rem;
}
pre
{
	color: var(--color-pre);
	margin: 0.3rem;
	padding: .4rem;
	border-radius: .35rem;
	border: .1rem solid var(--color-border-pre);
}
iframe
{
	width: 100%;
	height: 100vh;
	border: 0;
}
pre,
code { background-color: var(--bg-color-pre); white-space: break-spaces; }
table tr>th { text-align: left; }
body>header
{
	position: sticky;
	top: -.3rem;
	z-index: 1;
	font-size: 1.2rem;
	font-weight: bold;
	background: var(--bg-header);
	border-radius: .4rem;
	border: .1rem solid var(--color-border-header);
	box-shadow: 0 .2rem .4rem 0 rgba(0, 0, 0, .15);
}
body>main>header>h1 { font-size: 1.5rem; margin: 0.2rem; }
header a { text-decoration: none; }
a { color: #426a76; }

/* make empty "pre elements" completely invisible */
pre:empty {background-color: transparent; padding: 0; margin: 0; border-width: 0; }

/* Sections, aside, noscript... */
section,
aside
{
	border-style: groove;
	border-width: thin;
	border-radius: .4rem;
	border-color: var(--color-border-section-etc);
}
section                 { background-color: white; padding: .8rem 1rem; }
section.mbd-warning     { margin: 1rem .1rem; }
section>section         { background-color: #f4f4f4; margin: .2rem 0 1rem 0; }
section>section:last-child { margin-bottom: .3rem; }
section>section>section { background-color: var(--bg-color-3); margin: .5rem 0; }
aside                   { background-color: var(--bg-color-off); padding: 1rem; margin-top: 1rem; }
main>section>section, main>div>div>section>section { padding-top: 0; }
main>section>section.mbd-notice {padding-top: .8rem; }
noscript { padding-top: 1rem; display: block; }

/* Navigation (menus) */
nav ul                { display: inline; padding-inline-start: 0rem; }
nav>ul li             { display: inline-block; position: relative; vertical-align: middle; padding: .2rem 0; margin: .1rem; border: .1rem solid transparent; }
header>nav>ul>li:first-child { border-radius: .4rem; } /* mbd-logo */
header>nav:last-child>ul>li:last-child { margin-right: .4rem; } /* manual */
nav>ul>li>a           { padding: .2rem; }
nav>ul>li>a:hover     { color: white; border-radius: .3rem; background-color: #dbc298; }
nav>ul>li>a[role="button"]:hover        { background-color: transparent; }
nav>ul>li>ul          { display: none; }  /* dropdown menu */
nav>ul>li:hover>ul  /* on dropdown menu */
{
	display: inline-grid;
	position: absolute;
	z-index: 1;
	background-color: var(--bg-color-menu);
	border: .1rem solid #88765e;
	border-radius: .2rem;
	padding: .4rem .1rem;
	box-shadow: 0 .2rem .4rem 0 rgba(0, 0, 0, 0.2);
}
nav>ul>li:hover>ul a { padding: 0 .4rem; }
nav>ul>li:hover>ul>li:hover  /* on dropdown menu item */
{
	background-color: #dbc298;
	border-radius: .2rem;
}
nav>ul>li:hover>ul>li:hover>a { color: white; }
nav>ul>li:hover>ul>li { padding: .1rem 0; margin: 0 0.3rem; }
nav>ul>li>a[href="/"]:hover,
nav>ul>li>a[href="/mini_buildd/setup/"]:hover,
nav>ul>li>a[href="/mini_buildd/crontab/"]:hover,
nav>ul>li>a[href="/mini_buildd/api/"]:hover,
nav>ul>li>a[href="/mini_buildd/manual/"]:hover { background-color: transparent; filter: brightness(108%); }
nav>ul>li>div>img[title="Browse"]:hover,
nav>ul>li>div>img[title^="logged"]:hover { filter: brightness(106%); }
nav>ul>li>a[href="/"][target="_parent"]:active { filter: brightness(103%); }

/* Hover forms */
form { display: inline-block; border-radius: .4rem; border: .1rem solid transparent; padding: .2rem .4rem .1rem .3rem; margin: -.2rem -.4rem -.1rem -.3rem; }
form:hover { background-color: var(--bg-color-form-active); border-color: var(--color-border-form-active) } /* default */
body>header>nav>ul>li>form[action$="/ls/"] { background-color: var(--bg-color-5); border: .1rem solid #c7c7c7; border-radius: .6rem;  padding: .2rem .6rem .2rem .4rem; }
body>header>nav>ul>li>form[action$="/ls/"]:hover { background-color: var(--bg-color-form-active); border-color: var(--color-border-form-active); }
body>header>nav>ul>li>form[action$="/ls/"]>details>summary>img.mbd-icon { margin-top: -.2rem; }
body>header>nav>ul>li>form.mbd-api[action$="/ls/"]>details[open] { border-width: .1rem; border-color: var(--color-border-form-active); margin-top: -.25rem; }
body>header>nav>ul>li>form.mbd-api[action$="/ls/"]>details[open] > summary { margin: .3rem 0 0 0; }
body>header.mbd-off>nav>ul>li>form[action$="/ls/"] { background-color: transparent; border-color: transparent; }
td li>form { margin: -.5rem -.5rem -.5rem -.3rem; } /* table special */
td>form { padding: .2rem .3rem .1rem .2rem;  margin: -.1rem 0; } /* table special */
header.mbd-grid-lcr>nav>ul>li>form.mbd-api[action="/mini_buildd/api/setup/"] { padding: .2rem .4rem .1rem .3rem; margin: 0 .5rem 0 -.1rem; } /* setup */

/* Hover "port" */
li.mbd-api-port { border: .1rem solid transparent; padding: .3rem .5rem; border-radius: .4rem; }
li.mbd-api-port:hover { background-color: var(--bg-color-form-active); border: .1rem solid var(--color-border-form-active); cursor: default; }
li.mbd-api-port>details[open] {left: 50%; transform: translate(-44%); }
li.mbd-api-port>details[open]>summary {text-align: center; }
li.mbd-api-port form { margin: .15rem 0 .2rem 0; }
li.mbd-api-port form:hover { background-color: #f2ebe3 }
li.mbd-api-port form>details[open] { right: -2.3rem; margin-top: -.28rem; background-color: #f2ebe3; }
li.mbd-api-port form>details[open]>summary { text-align: right; margin: .08rem .18rem .2rem 0; }

/* Manual, Setup */
iframe[title="Manual"], iframe[title="Setup"] { border: 0.1rem solid var(--color-border-section-etc); border-radius: .4rem; height: 80vh; margin-bottom: -.3rem; }

/* Form inputs */
input::placeholder   { filter: opacity(30%); }
textarea             { width: 40rem; height: 15rem; }

/* Warning */
body>div.mbd-warning>section { margin-top: 1rem; }

body>footer
{
	position: sticky;
	bottom: -.3rem;
	z-index: 1;
	font-family: monospace, monospace;
	background: var(--bg-footer);
	border: .1rem solid var(--color-border-footer);
	border-radius: .5rem;
	margin-top: .8rem;
	box-shadow: 0 -.2rem .4rem 0 rgba(0, 0, 0, .15);
}
body>footer.mbd-grid-lcr { padding: .4rem .5rem; }
