*, ::before, ::after{box-sizing:border-box}
a, area, button, input, label, select, summary, textarea, [tabindex]{touch-action:manipulation}
button:focus, input:focus, select:focus, textarea:focus, [contenteditable]:focus{outline:0}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none}
input[type="number"]{-moz-appearance:textfield}
table{border-collapse:collapse}
::-ms-expand{display:none}
.input.file .file-input{display:none}
.input.file input[type="checkbox"]{width:initial !important}
.input.image .image-input{display:none}
.input.image input[type="checkbox"]{width:initial !important}
html{font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--background:linear-gradient(to bottom, #4C56C0, #0D0E96);--surface:#1A1BB5;--primary:#4C56C0;--text:#FFFFFF;--link:#FFA500;--row-even:#1415A0;--row-odd:#10118C;--row-hover:#FFA50029;--warning:#FF4C4C;scroll-behavior:smooth}
table.pedigree{width:80%}
table.pedigree td{border:1px solid white}
form#bi{background:var(--surface);border-radius:9px;display:flex;margin:1rem 0}
form#bi i{cursor:pointer}
#widgets{display:flex;flex-wrap:wrap;gap:1rem}
#widgets > figure{background:var(--surface);border-radius:9px;flex:1 1 30%;margin:0;min-width:300px;opacity:.2;transition:500ms ease-in}
#widgets > figure.init{opacity:1}
#widgets > figure figcaption{font-size:.9em;padding:.5rem;text-align:center}
#widgets > figure > div{aspect-ratio:2 / 1}
.label.bool{text-align:center}
.input.bool{justify-content:center}
.input.bool label{position:relative;width:111px;height:24px}
.input.bool input:checked + .slider{background:var(--primary)}
.input.bool input:checked + .slider:before{transform:translateX(84px)}
.input.bool .slider{position:absolute;inset:0;cursor:pointer;background:var(--surface);border-radius:20px;transition:.3s}
.input.bool .slider:before{content:"";position:absolute;height:16px;width:16px;left:6px;top:4px;background:#fff;border-radius:50%;transition:.3s}
.label.number, .input.number input{text-align:right}
.input.wysiwyg > .wysiwyg-container{display:flex;flex-direction:column;gap:0;border:1px solid var(--primary);border-radius:6px;padding:0;background:var(--background)}
.wysiwyg-container .toolbar{display:flex;gap:.25rem;padding:.25rem;background:var(--surface);border-bottom:1px solid var(--primary);border-top-left-radius:6px;border-top-right-radius:6px}
.wysiwyg-container .toolbar button{background:var(--surface);border:1px solid transparent;color:var(--text);cursor:pointer;min-width:28px;height:28px;padding:0;border-radius:4px}
.wysiwyg-container .toolbar button b, .wysiwyg-container .toolbar button i, .wysiwyg-container .toolbar button u{font-family:'Times New Roman', serif}
.wysiwyg-container .toolbar button:hover{background:var(--primary);border-color:var(--link)}
.wysiwyg-container .editor{min-height:200px;padding:.5rem;white-space:normal;outline:none}
.wysiwyg-container .editor a{cursor:pointer}
.label.datetime{white-space:nowrap}
.label.datetime .icon: .clock-blue, .label.datetime .clock-yellow, .label.datetime .clock-red{float:left;margin-top:.4em !important}
.input.image{display:block !important;text-align:center}
.input.image .image{cursor:pointer;max-width:100%}
.input.file{display:block !important}
.input.file .file{cursor:pointer;display:flex;gap:.25rem}
.label.many{flex-wrap:wrap}
.label.many a{display:block;width:100%}
.label.child{max-height:100px;overflow-y:auto}
.label.child a{display:block}
body{background:var(--background);color:var(--text);display:flex;gap:0 .5em;height:100dvh;margin:0;overflow-x:hidden}
nav{display:flex;flex-direction:column;gap:.5rem .25rem;height:100dvh;overflow-x:hidden;overflow-y:auto;padding:1rem 0}
nav a{border-top-right-radius:16px;border-bottom-right-radius:16px;color:var(--text);display:block;overflow:hidden;padding:.5rem;text-decoration:none;white-space:nowrap}
nav a i{font-style:normal;display:inline-block;font-size:.85em;margin-left:-6px;text-align:center;width:30px}
nav a:hover, nav a.active{background:var(--primary)}
nav a:last-child{margin-top:auto}
main{flex:1;padding:0 .5rem;overflow:auto}
main section{display:contents}
section.list.default{display:contents}
section.list.default.main table th{top:30px}
section.list.default header{display:flex}
section.list.default header .search{flex:1 1 200px;min-width:120px;position:relative}
section.list.default header .search input{width:100%;padding:.55rem .75rem .55rem 2.25rem;border:none;border-radius:9px;background:var(--surface-alt);color:var(--text);font-size:.85em}
section.list.default header .search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);pointer-events:none}
section.list.default table{min-width:100%}
section.list.default table th{background:var(--surface);font-size:.85em;font-weight:normal;line-height:30px;margin-bottom:3em;position:sticky;text-align:left;top:60px}
section.list.default table tbody tr:nth-child(odd){background:var(--row-odd)}
section.list.default table tbody tr:nth-child(even){background:var(--row-even)}
section.list.default table tbody tr:hover td, section.list.default table tbody tr td.active{background:var(--row-hover)}
section.list.default table tbody tr td{padding:.5rem;vertical-align:top}
section.list.default table tbody tr td input.field, section.list.default table tbody tr td select, section.list.default table tbody tr td textarea{border:1px solid var(--text);border-radius:3px;min-width:100px;margin:-.25rem;padding:.25rem}
section.list.default table tbody tr td > a.async{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
section.list.default table tbody tr td.link{cursor:pointer}
section.list.default table tbody tr td .noRecords{font-size:1.2em;text-align:center}
html.loading body::before{content:'';position:fixed;inset:0;background:#000;opacity:0;animation:darkfade .15s ease forwards .1s;pointer-events:none;z-index:9999}
html.waiting body::after{content:'loading';position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);font-family:monospace;font-size:1.25rem;color:#0f0;background:#000;padding:.75rem 1.5rem;border:1px solid #0f0;min-width:20ch;white-space:pre;animation:terminaldots 1s steps(3) infinite;z-index:10000}
section.record.default div.body, section.record.default form, section.change.default div.body, section.change.default form, section.create.default div.body, section.create.default form{border-radius:12px;display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}
section.record.default div.body label, section.record.default form label, section.change.default div.body label, section.change.default form label, section.create.default div.body label, section.create.default form label{font-weight:bold;color:var(--text);opacity:.8}
section.record.default div.body .field, section.record.default form .field, section.change.default div.body .field, section.change.default form .field, section.create.default div.body .field, section.create.default form .field{background:var(--surface);border:1px solid #FFF1;border-radius:9px;padding:1rem;flex-grow:1;min-width:20%;display:flex;flex-direction:column;gap:.5rem}
section.record.default div.body .field > div, section.record.default form .field > div, section.change.default div.body .field > div, section.change.default form .field > div, section.create.default div.body .field > div, section.create.default form .field > div{background:var(--surface-alt);border-radius:6px;flex:1;display:flex;align-items:center;gap:.5rem;padding:.5rem;white-space:nowrap}
section.record.default div.body .link, section.record.default form .link, section.change.default div.body .link, section.change.default form .link, section.create.default div.body .link, section.create.default form .link{padding:.25rem 0}
#settings{display:flex;flex-wrap:wrap;gap:.5rem}
#settings div{border:1px solid var(--primary);flex:1;padding:.25rem}
::-webkit-scrollbar{background:var(--background);width:12px;height:20px}
::-webkit-scrollbar \-thumb{background:var(--primary)}
a{color:var(--link)}
h1, h2{font-size:1.2em;font-weight:normal;margin:0}
input.field, select, textarea{background:transparent;border:0;font:inherit;color:var(--text)}
input.field.error, select.error, textarea.error{outline:1px solid var(--warning)}
section .body input.field, section .body select, section .body textarea, input.field.full, select.full, textarea.full{width:100%}
input::placeholder{color:var(--text);opacity:.66}
select option{background:black;color:white}
button, .btn{background:var(--surface);border-radius:6px;color:var(--text);cursor:pointer;display:inline-block;border:0;font:inherit;font-size:.9em;outline:0;text-align:center;text-decoration:none}
button.primary, .btn.primary{background:var(--primary)}
button.warning, .btn.warning{background:var(--warning)}
section header{background:var(--background);display:flex;flex-wrap:wrap;gap:.5rem;justify-content:end;line-height:30px;margin:1.25em 0 0;padding:0 .5rem;position:sticky;left:0;z-index:1}
section header h1, section header h2{flex:auto}
section header .count{background:var(--warning);border-radius:100%;display:inline-block;font-size:.8em;font-weight:bold;text-align:center;min-width:2em}
section header button, section header .btn{height:2em;margin-top:5px}
#more{display:block;margin:auto}
dialog{animation:200ms dialog;background:var(--background);border:1px solid var(--link);border-radius:6px;color:var(--text)}
dialog::backdrop{backdrop-filter:blur(12px);background-color:#ABC2;cursor:pointer}
dialog button{border:1px solid var(--link)}
figure div.list{line-height:2.1em;padding:0 1.5rem;transition:1s;font-size:.85em}
figure div.list div{border-bottom:1px solid #FFFD;overflow:hidden;opacity:0;text-overflow:ellipsis;white-space:nowrap}
figure div.list div:first-child{border-top:1px solid #FFFD}
figure div.list div a{text-decoration:none}
figure.init div.list{padding-top:1.15rem}
figure.init div.list div{opacity:1}
@media(min-width:801px){
#menuToggle{background:var(--primary);border-radius:5px;cursor:pointer;border:1px solid var(--surface);margin-top:50vh;width:10px;height:44px}
body:has(#menuToggle.hide) nav{width:32px}
body:has(#menuToggle.hide) nav:hover{overflow:visible}
body:has(#menuToggle.hide) nav a{width:32px}
body:has(#menuToggle.hide) nav a:hover{width:fit-content;z-index:2}}
@media(max-width:800px){
nav{flex-direction:row;font-size:.85em;height:initial;justify-content:space-around;overflow:hidden;padding:.5rem 0}
nav a{border-radius:16px;display:none;padding:.25rem .5rem}
nav a:nth-child(-n+4), nav a:last-child{display:block}}
@media(max-width:520px): a{
nav{overflow:hidden;padding:.25rem;width:26px}
nav.active{width:auto}
nav:not(.active) i{margin-right:.5rem}
nav i{width:20px}}
@keyframes darkfade{
80%{opacity:0}
100%{opacity:.8}}
@keyframes terminaldots{
0%{content:'loading'}
33%{content:'loading .'}
66%{content:'loading ..'}
100%{content:'loading ...'}}
@keyframes dialog{
from{transform:scale(.5)}}