/* 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;
	--color-placeholder: #777;

	--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-sbuild-check-failed,
.mbd-django-message-error,
.mbd-inspect-severity3,
.mbd-search-match-events  /* Cautious, originates from user upload */
{
	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-sbuild-check-unknown,
.mbd-django-message-warning,
.mbd-inspect-severity2,
.mbd-search-match-builds  /* maybe some criteria not met to be installed */
{
	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,
.mbd-search-match-repositories  /* in repo, ok to use */
{
	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-check-successful,
.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%); }
.mbd-localize-date    { font-size: .9rem; margin-right: .2rem; }
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-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); }
input::placeholder { color: var(--color-placeholder); }
a.mbd-icon:hover, table[class^="dataTable"] a.mbd-icon:hover { background-color: transparent; filter: brightness(108%); }
section.mbd-search-results form { margin-right: .2rem; }
section.mbd-search-results em { margin-left: .4rem; }
section.mbd-search-results a { padding: 0 .2rem .1rem .2rem; word-break: break-word; }
section.mbd-search-results a:hover { color: #fff; background-color: var(--bg-color-a); border-radius: .25rem; }
section.mbd-search-results summary>img.mbd-icon { border: .1rem solid transparent; border-radius: .4rem; padding: .2rem .3rem; margin-right: .25rem; }
section.mbd-search-results summary>img.mbd-icon:hover { filter: brightness(102%); background-color: var(--bg-color-form-active); border-color: var(--color-border-form-active); }
section.mbd-search-results details>div { margin-top: .5rem; }

/* (Non-)Popup buttons */
.mbd-only-if-popup { display: none; }
#mbd-api-popup .mbd-only-if-popup { display: inline-block; }

/* 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: .3rem .5rem; }
.dataTables_wrapper .dataTables_info { position: absolute; right: 1.5rem; font-size: 1rem; color: #777777;clear: none; float: none; padding: 0 .2rem 0 0; }
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 span.mbd-table-source-text { display: inline-block; font-family: Arial; font-weight: bold; font-size: .9rem; white-space: nowrap; border: .1rem solid #ddd; border-radius: .35rem; background-color: #fcfcfc; padding: .25rem .6rem; margin: .1rem .2rem .2rem .45rem; }
table.dataTable code.mbd-error { word-break: break-word; }
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-top-left-radius: .4rem; }
table.dataTable.compact thead th:last-child { border-top-right-radius: .4rem; }
table.dataTable.cell-border tbody tr:last-child td:first-child { border-bottom-left-radius: .4rem; }
table.dataTable.cell-border tbody tr:last-child td:last-child { border-bottom-right-radius:.4rem; }
#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{ word-break: no-break; border-radius: 0 0 .4rem .4rem; padding: .7rem 0; }
table[class^="dataTable"] img.mbd-icon { height: 1.6rem; }
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%; }
#mbd-events-table td:first-child { white-space: nowrap; }

/* 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-block; 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: 3;
	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],
form.mbd-api[action="/mini_buildd/api/remake_chroots/"]>details[open],
form.mbd-api[action="/mini_buildd/api/wake/"]>details[open] { right: -3.25rem; margin-top: -.3rem; }
form.mbd-api[action="/mini_buildd/api/cronjob/"]>details[open]>summary,
form.mbd-api[action="/mini_buildd/api/remake_chroots/"]>details[open]>summary,
form.mbd-api[action="/mini_buildd/api/wake/"]>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 form.mbd-api[action$="/search/"]>details[open] { margin-left: -.4rem; margin-top: -1.5rem; } */
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: 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: CLI, JSON */
main>section>header>nav.mbd-result-titlebar-ucj>ul>li:last-child { margin-right: .4rem; }
main>section>header>nav.mbd-result-titlebar-ucj { margin-left: -12rem; }
/* Title bar: Buttons */
nav.mbd-result-titlebar-buttons a { cursor: pointer; }
/* File */
header.mbd-file { font-size: 1.05rem; margin: .4rem 0 0 .1rem; }
main>section>header.mbd-file>strong { margin: 3.5rem 0 .2rem 0; }
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; }
main>section>section>pre.mbd-file-content, div>section>section>pre.mbd-file-content { background-color: white; }
div.mbd-info { margin: .8rem .3rem .5rem .3rem; }
/* Nav: Browse buttons */
nav>ul.mbd-browse-buttons.move { position: absolute; z-index: 1; left: 0; margin-top: 3.05rem; margin-left: 3.1rem; }
nav>ul.mbd-browse-buttons.move>li { padding: 0; margin: 0; }
nav>ul.mbd-browse-buttons.move>li>a { padding: 0; }
nav>ul.mbd-browse-buttons.move.file{ border: .1rem solid #c7c7c7; border-radius: .5rem; background-color: var(--bg-color-5); padding: .3rem 0 .3rem .4rem; margin: 2.65rem 0 0 2.4rem; }
nav>ul.mbd-browse-buttons.move.file>li.mbd-back-button{ display: none; }
nav>ul.mbd-browse-buttons.move.file>li.mbd-back-button>img:hover{ filter: brightness(108%); cursor: pointer; }
nav>ul.mbd-clipboard-download-buttons{ border: .1rem solid #c7c7c7; border-radius: .5rem; background-color: var(--bg-color-5); padding: .45rem 0 .6rem .05rem; margin-right: .1rem; }

form.mbd-api input[type="submit"] /* API call submit */,
form[action="/accounts/register/"] input[type="submit"]
{
	font-family: Arial;
	font-size: .9rem;
	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: .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="pattern"][value=""]
{
	font-size: 1rem;
	width: 20rem;
	border-radius: .5rem;
	padding: .2rem .5rem;
	margin-right: .3rem;
}
body>header form.mbd-api input[type="submit"][value="search"]
{
	display: none;
}
form input, form select, form checkbox { margin: .15rem .0rem .15rem .2rem; }
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: .1rem .2rem 0 .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 .4rem; vertical-align: middle; }
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.15rem; }
span.mbd-plain-toc-item:target { display: inline list-item; list-style-type: "▶"; margin-left: -1.8ch; padding-right: .8ch; }

/* Popup */
#mbd-api-popup
{
	display: table;  /* get real centering */
	/* gray-out everything */
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	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);
	resize: vertical;
}

nav>ul>li>details[open]
{
	position: absolute;
	width: max-content;
	z-index: 3;
	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: 2;
	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);
}
h1 { font-size: 1.4rem; margin: 0.2rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }
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);
	min-width: fit-content;
}
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: 2;
	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$="/search/"] { background-color: var(--bg-color-5); border: .1rem solid #c7c7c7; border-radius: .6rem;  padding: .2rem .6rem .2rem .4rem; margin-left: -.5rem; }
body>header>nav>ul>li>form[action$="/search/"]:hover { background-color: var(--bg-color-form-active); border-color: var(--color-border-form-active); }
body>header>nav>ul>li>form[action$="/search/"]>details>summary>img.mbd-icon { margin-top: -.2rem; }
body>header>nav>ul>li>form.mbd-api[action$="/search/"]>details[open] { border-width: .1rem; border-color: var(--color-border-form-active); margin-top: -.25rem; }
body>header>nav>ul>li>form.mbd-api[action$="/search/"]>details[open] > summary { margin: .3rem 0 0 0; }
body>header>nav>ul>li>form.mbd-api[action$="/search/"]>progress { display: none; position: absolute; width: 100%; margin-top: -.1rem; }
body>header.mbd-off>nav>ul>li>form[action$="/search/"] { background-color: transparent; border-color: transparent; }
body>header>nav>ul>li>form.mbd-api[action$="/search/"] label { display: none; }
body>header>nav>ul>li>form.mbd-api[action$="/search/"] input[name="pattern"]::placeholder { color: transparent; }
body>header>nav>ul>li>form.mbd-api[action$="/search/"] input.show-placeholder::placeholder {color: var(--color-placeholder); }
body>header>nav>div.mbd-tooltip { display: none; position: absolute; z-index: 999; font-size: 1rem; background-color: var(--bg-color-menu); border: .1rem solid #88765e; border-radius: .2rem; padding: .8em 1rem; box-shadow: 0 .2rem .4rem rgba(0,0,0,.2); }
td li>form { margin: -.5rem -.5rem -.5rem -.3rem; } /* table special */
td>form { padding: .1rem .2rem;  margin: 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: 2;
	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; }
body>footer.mbd-grid-lcr>nav:nth-child(2) { border: .1rem solid #c7c7c7; border-radius: .5rem; background-color: var(--bg-color-5); padding: 0 .2rem; margin: .1rem; }
body>footer>nav:nth-child(2)>ul>li { padding: .05rem; margin: .05rem; }
body>footer>nav:nth-child(2)>ul>li:last-child { padding-bottom: .1rem; }
body>footer>div { margin-left: .2rem; }
body>footer>nav>ul>li>form.mbd-api[action$="/ls/"] { margin-top: -.1rem; margin-right: -.3rem; padding-top: 0; padding-bottom: 0; }
body>footer>nav>ul>li>form.mbd-api[action$="/ls/"]>div>label { display: none; }
body>footer>nav>ul>li>form.mbd-api[action$="/ls/"]>div>span>input[type="text"] { width: 9.5rem; border-radius: .4rem; padding-left: .33rem; }

/* medium screen */
@media screen and (max-width: 85rem)
{
	#mbd-api-popup>div { max-width: initial; margin: 0 .5rem; }
	#mbd-crontab-table li.mbd-info { width: auto; }
	.dataTables_wrapper .dataTables_info { position: initial; text-align: center; margin-bottom: .5rem; font-size: .8rem; }
	.mbd-grid-lcr {display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, auto)); align-items: center; justify-items: center; padding: .2rem; }
	.mbd-grid-lcr>nav { border: .1rem solid #c7c7c7; border-radius: .5rem; background-color: var(--bg-color-5); padding: 0 .3rem; margin: .1rem .3rem; }
	body>footer { font-size: .9rem; }
	body>footer>div[title^="mini-buildd"] { border: .1rem solid #c7c7c7; border-radius: .5rem; background-color: var(--bg-color-5); padding: .3rem .5rem; margin: .1rem .3rem; }
	body>header img.mbd-icon[alt="dirview"] { height: 2.1rem; 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.2rem; margin: .15rem -.1rem; }
	body>header { font-size: 1rem; }
	body>header>nav>ul { white-space: nowrap; }
	body>header>nav>ul>li>form[action$="/search/"] { background-color: var(--bg-color-5); border: .1rem solid #c7c7c7; border-color: transparent; background-color: transparent; padding: .05rem .36rem 0 0; margin-left: -.1rem; margin-right: -.3rem; }
	h1 { font-size: 1.2rem;  word-break: break-all; }
	h2 { font-size: 1.1rem; }
	h3 { font-size: 1rem; }
	header.mbd-grid-lcr.mbd-file>strong { word-break: break-all; }
	img.mbd-logo { height: 2.5rem; }
	main .mbd-grid-lr>nav { padding-top: .1rem; padding-bottom: .1rem; }
	nav.mbd-result-titlebar-ucj>ul>li>details[open] section header, table.dataTable nav>ul>li>details[open] header { grid-template-columns: initial; }
	nav.mbd-result-titlebar-apicall form.mbd-api[action$="/search/"]>details[open] { margin-left: -.8rem; }
	pre.mbd-file-content {font-size: .8rem; word-break: break-all; }
	span.mbd-plain-toc-item { padding-top: 0; }
	table summary { margin-left: .2rem; }
	table.dataTable .mbd-table-version { word-break: break-all; }
	table.dataTable span.mbd-table-source-text { margin-left: 0; }
	table.dataTable td, table.dataTable th { font-size: .9rem; }
	table.dataTable.cell-border tbody tr:last-child td:last-child.dataTables_empty { padding-left: 1rem; }
	table.dataTable.compact thead th, table.dataTable.compact tbody td { padding: .5rem; }
	table[class^="dataTable"] form.mbd-api input[type="submit"] { margin-left: -.2rem; margin-right: -.2rem; }
	td>form { padding: .05rem .4rem; margin: 0 -.2rem; }
	nav>ul.mbd-clipboard-download-buttons{ border: 0; background-color: transparent; padding: 0; margin: 0; }
	main>section>header>nav.mbd-result-titlebar-ucj { margin-left: 0; }
}

/* medium small screen */
@media screen and (max-width: 75rem)
{
	body>footer { position: initial; box-shadow: none; }
	body>header { position: initial; box-shadow: none; border-radius: .5rem; }
	header form.mbd-api input[type="text"][name="pattern"][value=""] { width: 18rem; }
	body>header>nav>div.mbd-tooltip { font-size: 0.9rem; margin: 0 1.5rem; }
	#mbd-events-table td:first-child { white-space: initial; }
}

/* small screen (fits/overwrites jquery data) */
@media screen and (max-width: 640px)
{
	#mbd-api-popup-content table.dataTable .mbd-table-version { word-break: break-all; }
	#mbd-api-popup-content { padding-top: .7rem; }
	#mbd-api-popup>div { padding: .3rem; }
	.dataTables_wrapper.no-footer { padding: 1rem .2rem .2rem .2rem; }
	.mbd-grid-lcr { grid-template-columns: repeat(auto-fit, minmax(20rem, auto)); }
	.mbd-grid-lr>nav { border: .1rem solid #c7c7c7; border-radius: .5rem; background-color: var(--bg-color-5); padding: 0 .3rem; margin: .25rem -.15rem .4rem .5rem; }
	body { margin: .4rem .35rem .5rem .3rem; padding: 0; font-family: Arial; }
	body>footer input[type="submit"] { font-size: .8rem; }
	body>footer { font-size: .9rem; border-radius: .5rem; margin-top: .55rem; }
	body>footer>nav:nth-child(2)>ul>li:first-child { margin-top: .3rem; }
	body>footer>nav>ul>li[title^="Key"] { font-size: .8rem; }
	body>header img.mbd-icon[title^="logged"] { margin-left: .15rem; }
	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.2rem; margin-right: -.075rem; }
	body>header input[type="submit"] { font-size: 1rem; }
	body>header li { margin: .1rem 0; }
	body>header li:first-child { margin-left: -.2rem; }
	body>header { font-size: 1.07rem; }
	body>header>nav>div.mbd-tooltip { margin: 0 0.2rem; }
	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: 6rem; }
	form.mbd-api>details[open] { right: initial !important; }
	form.mbd-api>details[open]>summary { text-align: initial !important; }
	form.mbd-events-limit { padding: .1rem .2rem 0 0; }
	form.mbd-events-limit>label>input[type="number"] { width: 4rem; }
	h1 { font-size: 1rem; overflow-wrap: anywhere; min-width: 4rem; }
	h2 { font-size: .95rem; }
	h3 { font-size: .9rem; }
	header.mbd-grid-lcr>nav:first-child>ul>li:hover>ul { right: -.1rem; }
	header>nav:last-child>ul>li:last-child { margin-right: -.1rem; }
	iframe[title="Manual"], iframe[title="Setup"] { height: 62vh; }
	img.mbd-logo { height: 2.4rem; }
	main form.mbd-api input[type="submit"], form[action="/accounts/register/"] input[type="submit"] { font-size: .8rem; }
	main img.mbd-icon { height: 1.6rem; }
	main nav>ul>li { margin: 0; padding: 0; }
	main nav>ul>li.mbd-api-port {padding: .3rem .1rem; }
	main nav>ul>li:first-child img.mbd-icon { margin-left: -.1rem; }
	main nav>ul>li:hover>ul { border-radius: .3rem; }
	main nav>ul>li>a { padding: 0; }
	nav.mbd-result-titlebar-ucj>ul>li>details[open] section, table.dataTable nav>ul>li>details[open] header { min-width: auto; }
	nav.mbd-result-titlebar-ucj>ul>li>details[open], table.dataTable nav>ul>li>details[open] { max-width: 56vw; }
	section { padding: .3rem; border-radius: .5rem; }
	section>section:last-child { margin-bottom: 0; }
	table.dataTable b.mbd-success[title^="Migrated to"] { margin-left: .2rem; }
	table.dataTable img.mbd-icon {margin-left: .2rem; }
	table.dataTable span.mbd-table-source-text { font-size: .8rem; margin: .3rem -.1rem; }
	table.dataTable tbody tr:first-child { background-color: transparent; }
	table.dataTable td code { font-size: .8rem; background-color: transparent; word-break: break-all; }
	table.dataTable td:first-child>a>img.mbd-icon { margin-left: 0; }
	table.dataTable td:first-child>img.mbd-icon { margin-left: 0; }
	table.dataTable th { font-size: .8rem; }
	table.dataTable thead .sorting { background-image: none !important; }
	table.dataTable.compact table thead th { display: inline; padding: 0 .8rem; }
	table.dataTable.compact tbody td { display: inline-block; border: 0; background-color: transparent; padding: .45rem .5rem .25rem .5rem; }
	table.dataTable.compact thead th { display: inline-block; border: 0; background-color: transparent; padding: .5rem .3rem .5rem .5rem; }
	table.dataTable.no-footer { background-color: var(--bg-color-5); }
	table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even { background-color: #f2f2f2; }
	table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: white; }
	table[class^="dataTable"] form.mbd-api input[type="submit"] { font-size: .8rem; }
	td>form { margin: 0 -.4rem 0 -.3rem; }
	textarea { width: initial; }
	header.mbd-file>strong { margin: 0; }
	nav>ul.mbd-browse-buttons.move { position: relative; margin: 0; }
	nav>ul.mbd-browse-buttons.move.file{ border: 0; background-color: transparent; padding: .2rem .1rem; margin: 0; }
}
