.mmdb {
	--mmdb-accent: #1d4ed8;
	--mmdb-ok: #d1ffd1;
	--mmdb-error: #ffd9d0;
	--mmdb-hover: rgb(128 128 128 / .12);
	--mmdb-border: rgb(128 128 128 / .4);
}

.mmdb *, .mmdb *::before, .mmdb *::after { box-sizing: border-box; }

.mmdb-message { padding: .75em 1em; margin: 0 0 1em; border-radius: 4px; color: #111; }
.mmdb-message--ok { background: var(--mmdb-ok); }
.mmdb-message--error { background: var(--mmdb-error); }

.mmdb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.5em; margin: 0 0 1.5em; }
.mmdb-nav label { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; }
.mmdb-nav select { max-width: 100%; color: var(--mmdb-accent); }
.mmdb-nav__inst { flex-basis: 100%; margin: 0; }
.mmdb-nav__inst-select { width: min(100%, 25em); }

.mmdb-heading { font-size: 1.3em; margin: 1em 0 .5em; }
.mmdb-h { font-size: 1.15em; margin: 1.25em 0 .25em; }
.mmdb-note { margin: .25em 0; }

.mmdb-entry { padding: .25em .75em; border-radius: 4px; }
.mmdb-entry:hover, .mmdb-entry:focus-within { background: var(--mmdb-hover); }

.mmdb-title { display: block; margin: .5em 0 .15em; }
.mmdb-res { margin: 0 0 .5em 2em; overflow-wrap: anywhere; }
.mmdb-na { opacity: .6; }

.mmdb-field { margin: 0 0 .75em; }
.mmdb-field > .mmdb-title { margin-top: 0; }
.mmdb-input { max-width: 100%; }
.mmdb-input--short { width: 15em; }
.mmdb-input--long { width: 25em; }
.mmdb-input--xlong { width: 40em; }

.mmdb-checks { display: grid; gap: .35em; }
.mmdb-check { display: flex; align-items: baseline; gap: .5em; }

.mmdb-actions { display: flex; flex-wrap: wrap; gap: .5em; margin: 1.5em 0; }
.mmdb-button {
	display: inline-block; padding: .45em 1em; border: 1px solid var(--mmdb-border); border-radius: 4px;
	background: transparent; color: inherit; font: inherit; line-height: 1.3; text-decoration: none; cursor: pointer;
}
.mmdb-button:hover { background: var(--mmdb-hover); }
.mmdb-button--primary { background: var(--mmdb-accent); border-color: var(--mmdb-accent); color: #fff; }
.mmdb-button--primary:hover { background: var(--mmdb-accent); filter: brightness(1.15); }

.mmdb-list, .mmdb-sections { margin-top: .25em; }
.mmdb-inst { margin-bottom: 1em; }
.mmdb-sections { padding-left: 2em; }
.mmdb-edit { color: green; }