:root {
    --light-color-bg: #fff;
    --dark-color-bg: #1b2434;
    --light-color-text: #555;
    --dark-color-text: #ddd;
    --light-color-text-light: #999;
    --dark-color-text-light: #bbb;
    --light-color-text-lightest: #bbb;
    --dark-color-text-lightest: #ccc;
    --light-color-text-ok: #3e9500;
    --dark-color-text-ok: #4ab100;
    --light-color-text-fail: #cb2727;
    --dark-color-text-fail: #ea4c4c;
    --light-color-text-disabled: #777;
    --dark-color-text-disabled: #bbb;
    --light-color-accent: #379dd8;
    --dark-color-accent: #379dd8;
    --light-color-btn-bg: #ecf5fa;
    --dark-color-btn-bg: #1b2434;
    --light-color-btn-active: #fff;
    --dark-color-btn-active: #fff;
    --light-color-btn-alert: #cb2727;
    --dark-color-btn-alert: #cb2727;
    --light-color-btn-alert-border: #b42222;
    --dark-color-btn-alert-border: #b42222;
    --light-color-nav: #f6fbff;
    --dark-color-nav: #2e3d57;
    --light-color-nav-hover: #e1eef7;
    --dark-color-nav-hover: #445270;
    --light-color-border: #c1dded;
    --dark-color-border: #379dd8;
    --border-radius: 7px;
}

:root {
    color-scheme: light;
    --color-bg: var(--light-color-bg);
    --color-text: var(--light-color-text);
    --color-text-light: var(--light-color-text-light);
    --color-text-lightest: var(--light-color-text-lightest);
    --color-text-ok: var(--light-color-text-ok);
    --color-text-fail: var(--light-color-text-fail);
    --color-text-disabled: var(--light-color-text-disabled);
    --color-accent: var(--light-color-accent);
    --color-btn-bg: var(--light-color-btn-bg);
    --color-btn-active: var(--light-color-btn-active);
    --color-btn-alert: var(--light-color-btn-alert);
    --color-btn-alert-border: var(--light-color-btn-alert-border);
    --color-nav: var(--light-color-nav);
    --color-nav-hover: var(--light-color-nav-hover);
    --color-border: var(--light-color-border);
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: var(--dark-color-bg);
    --color-text: var(--dark-color-text);
    --color-text-light: var(--dark-color-text-light);
    --color-text-lightest: var(--dark-color-text-lightest);
    --color-text-ok: var(--dark-color-text-ok);
    --color-text-fail: var(--dark-color-text-fail);
    --color-text-disabled: var(--dark-color-text-disabled);
    --color-accent: var(--dark-color-accent);
    --color-btn-bg: var(--dark-color-btn-bg);
    --color-btn-active: var(--dark-color-btn-active);
    --color-btn-alert: var(--dark-color-btn-alert);
    --color-btn-alert-border: var(--dark-color-btn-alert-border);
    --color-nav: var(--dark-color-nav);
    --color-nav-hover: var(--dark-color-nav-hover);
    --color-border: var(--dark-color-border);
}

@media(prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-bg: var(--dark-color-bg);
        --color-text: var(--dark-color-text);
        --color-text-light: var(--dark-color-text-light);
        --color-text-lightest: var(--dark-color-text-lightest);
        --color-text-ok: var(--dark-color-text-ok);
        --color-text-fail: var(--dark-color-text-fail);
        --color-text-disabled: var(--dark-color-text-disabled);
        --color-accent: var(--dark-color-accent);
        --color-btn-bg: var(--dark-color-btn-bg);
        --color-btn-active: var(--dark-color-btn-active);
        --color-btn-alert: var(--dark-color-btn-alert);
        --color-btn-alert-border: var(--dark-color-btn-alert-border);
        --color-nav: var(--dark-color-nav);
        --color-nav-hover: var(--dark-color-nav-hover);
        --color-border: var(--dark-color-border);
    }

    [data-theme="light"] {
        color-scheme: light;
        --color-bg: var(--light-color-bg);
        --color-text: var(--light-color-text);
        --color-text-light: var(--light-color-text-light);
        --color-text-lightest: var(--light-color-text-lightest);
        --color-text-ok: var(--light-color-text-ok);
        --color-text-fail: var(--light-color-text-fail);
        --color-text-disabled: var(--light-color-text-disabled);
        --color-accent: var(--light-color-accent);
        --color-btn-bg: var(--light-color-btn-bg);
        --color-btn-active: var(--light-color-btn-active);
        --color-btn-alert: var(--light-color-btn-alert);
        --color-btn-alert-border: var(--light-color-btn-alert-border);
        --color-nav: var(--light-color-nav);
        --color-nav-hover: var(--light-color-nav-hover);
        --color-border: var(--light-color-border);
    }
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
}

html, body, input, select, button, textarea {
    font: 13px / 26px monospace;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    color: var(--color-text);
    background: var(--color-bg);
}
input, select, button {
    height: 34px;
    line-height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    vertical-align: middle;
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius);
}
button {
    cursor: pointer;
    display: inline-block;
    color: var(--color-accent);
    background: var(--color-btn-bg);
    padding: 0 14px;
    transition: background-color 100ms linear, color 100ms linear, border-color 100ms linear;
}
button:hover {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-btn-active);
}
button.red {
    background-color: var(--color-btn-alert);
    border-color: var(--color-btn-alert-border);
    color: var(--color-btn-active);
}
button.red:hover {
    background-color: var(--color-btn-alert-border);
    var(--color-btn-alert-hover)
}

button:focus,
button:active,
input:focus,
input:active {
    outline: none;
    box-shadow: 0 0 1px 1px var(--color-accent);
}

textarea:disabled, textarea:read-only {
    color: var(--color-text-disabled);
}

a {
    color: var(--color-accent);
    text-decoration: inherit;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

.hidden {
    display: none !important;
}

header {
    padding: 0 0 10px 0;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    position: relative;
    line-height: 34px;
}

h1.logo {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    width: 10px;
    font-size: 14px;
    line-height: 34px;
}

#status {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background: url("data:image/png;base64,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") no-repeat top center;
    background-size: 24px 48px;
    margin: -1px 0 0 2px;
}
body.unknown #status {
    display: none;
}
body.running #status {
    background-position: bottom center;
}

.button {
    margin: 0 0 0 7px;
    z-index: 10;
}

#restart {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 100px;
    padding: 0;
}

#dropdown {
    margin: 0 0 0 -1px;
    padding: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 34px;
}

#dropdown:after {
    content: '';
    display: inline-block;
    border: solid;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: .2em;
}

#dropdown-menu {
    list-style: none;
    background: var(--color-bg);
    color: var(--color-accent);
    position: absolute;
    top: 24px;
    right: 0;
    border: 1px solid var(--color-accent);
    padding: 10px 0 0 0;
    margin: 0;
    z-index: 7;
    width: 133px;
    box-sizing: border-box;
}
.dropdown-item {
    padding: 4px 16px;
    cursor: pointer;
}
.dropdown-item:hover {
    background: var(--color-nav);
}

#save {
    display: none;
}
body.changed #save {
    display: block;
}

#reload,
#stop,
body.running #start {
    display: none;
}
body.running #reload,
body.running #stop,
#start {
    display: block;
}

nav {
    display: flex;
    flex-wrap: wrap;
    margin: 7px 0 -7px 7px;
}

.nav-tab {
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--border-radius) 0 0 0;
    padding: 5px 11px 12px 11px;
    cursor: pointer;
    background: var(--color-nav);
    margin: -7px 0 0 -7px;
    flex-basis: content;
    flex-grow: 1;
    transition: background-color 100ms linear, color 100ms linear, border-color 100ms linear;
}

.nav-tab:hover {
    background: var(--color-nav-hover);
}

.nav-tab.secondary {
    color: var(--color-text-light);
}

.nav-tab.active {
    background: var(--color-accent);
    color: var(--color-btn-active);
}

.nav-trash,
.nav-clear {
    width: 20px;
    height: 20px;
    float: right;
    cursor: pointer;
    background-size: 20px 40px;
    background-repeat: no-repeat;
    background-position: bottom right;
    transition: transform 100ms linear;
    margin: 3px 0 0 0;
}
.nav-trash {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABQCAMAAABcUcfzAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAIfUExURUdwTP////lHR/////////////9/f/////lISPlISPhHR/////hISP////lISP////dISPdISPlGRv////////////hHR/////////hHR/////////RKSvlHR/lISP////////lHR/9DQ/9NTf////dJSflISPtKSv////////////pJSf////////lJSf////hHR/////tISP////hISP////hJSf////hHR/lISP////lISPlGRv////////pKSvhJSf////////dISPhHR/////////9JSf////////////9LS/pJSf////////lHR/////lHR/////////9VVfhISPdHR/////////////////hHR/9HR/////pISPlISPlHR/////////hJSf9JSf////hISP////NGRv////lGRv////////9ERPlISP////////dISP////pJSf////////pISPtJSf////lISPpHR/////////lJSflISP////lISPhHR/////lISP////hISPlJSf////////lISP////////////////dISP////pISP////lJSflISPpISP////pISPlLS/////////pHR/lJSf////////hISPVFRf////////hHR/lISP////lHR/////ZMTP////////lHR/////lGRv////lHR/tGRv////////lISPlISP////HSsDsAAACzdFJOUwCBgfWAAgKqqoD1+/tZWczMycfHyerqGOvrsaEYobHIE8gTFBSlXD4+pVzo6Ht7c3M8PPPzdHT4+KCg3igozTBJcA7tw9x6FWBB5hFiAyfcb3qTEgPNQXlaO0BvEqxg5lqSMHAOESd4Fhbk5MUPeatJQC+TFd6SO2J4L0jtrMUPq0jDWFtxW1hxi4ukvYmkor27iaK7jY0pKY+PKir+/hoa/f0uLnYsG30bfXYs4OA6Ot/fcXaosQAAAk5JREFUSMft1NVXG0EUBvCBkABJIAkkwd3dtUZbqtTd3d1dgRoVqJe6u+/+gd1Nhpyce7/ZvPLQ+7B399vfObN7RoQYR/Wlrbu74XVs961DN6qjLZb7bKhAwLjUWbvnLv3PbyGafuiuJ5ZwVH/z0ezvX+gPwevKqkRZtXpL+KZFrx3LqiojMF23rPQIrPZ7bCpl8/iro0e/pYJ3yWfeVMFhAodU8DaBDSp4ncBVMr9WWBD60cIUGaQQOEfmdhFntjhhl8EaAifJXIgEsyUIIYMFBF5UwWl0Gm0Y2th8H8dwBoP7MOxncD2GBxlcguFmBuswXMngKQxnM3gIw7MMbsHwCIMZeK4zGJzvCi+WUr/ZCkoHQ48uO9+Kc9Fq3Av27GQEPQBmI5gN4EwEdwK4+xx3mcfQudOUSV1gNT6hlk7NSYyqnEXbxf+i9am9q6vxVWz3oVMzqrM9lvtqqGDQuNRbu2du7e8vIZp/au7HlvCp9va72d+91B6B1xVlSbJqtNbwTatWM5aVVURgmmZZaRFY7vM6Vcrp9ZVHjz6igg/IZ95RwfsE3lDBewQ2quAVAjfJfKC4KPSjxakySCVwhcwdIt5s8cIhg8METpS5EMlmSxZCBjsI3K+C2+g0OjF0svmegOFCBi9g2MvgeQwvMXgUwxMM1mN4gMF5GG5gsAfDywxOwfAMg7l4rnMZXOYOL5YSn9mKSq6GHt0OvhU3otW4B+zZ5Qh6AcxHMB/AxQieBnDXdO6yZqFzpzmLuuBJfEKt25qXFFV5a/vGx9H+D5Y8KrwAPqQlAAAAAElFTkSuQmCC")
}
.nav-clear {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABQCAMAAABcUcfzAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAEvUExURUdwTP9DQ/tJSf////////////////lISP////tISPlISPpJSf////////lJSfpKSv////pHR/8zM/////lISP////hISP////////lISP////lISP////////////lHR/hISP////////lISPlISP////hHR/hISPlHR/hGRvtGRv////////////////////lISPpISP9NTf////////VHR/hISP////////////////hISPlHR/hHR/////////////lISP////hISPhKSv////////////////////////////////////////////////////////////hJSfhGRvdISPlHR/9VVf9LS/lISPdISPlJSflISPlISPpKSvhISPpISPdISP////lISBe2f1kAAABjdFJOUwATO7E5EzuqqjmxYmKJiTDXYQX61zD6sAWwYVVV7Ip2xHXr7Iqd63WdnDqcOsVjxMVjFHYUGfcniCbvJ4jvq9T3qxnUJqTICfY3W7fbbpIRIEntgEn27cgJEYCkW7fbN26SIC04s7MAAAFVSURBVEjH7dPVjoNAGAXgoYVC3b3r7u7u7u4C7/8MG/ihCTOnKdmb7SacmzNhvhuSM4z9PnKtJnuCmq5rPvShmVkdRAEwhGAIwHEEYwC2IxgHMIhgkLVSZA1GfI8zOkyXAPswHBHgGIYTAmzDsJt3it4gipdJmBnlYIwH16fUFQ7Gebh/Tr3YbBJ7V9RFDqbo8+ayA28ODq1OuV0pS9cb6w48ZidWZ0suuGBfF+s/dcTO6LDkgnl7A5VtZw0X7JIOefafE65Ww56gahiqD31oZtoAkQAMIBgAcArBKIC9CCYAjCAYaa23p8KI77HDgBkQ4CCGQwKcxLBTgD0Y9vNOMhpE8jIJM8McjPLg/p06zcEEDx++qFebTeLllrrMwRx9nl9z4PPjndU5t8sU6Hpny4Gv7M3qQsYFV+zrcv2nPtgnHXZdMGlvID3nrOGJfdMh+ed7/QFAlEWnc6SVpQAAAABJRU5ErkJggg==")
}
.nav-trash:hover,
.nav-clear:hover {
    transform: scale(1.1);
}
.nav-tab.active .nav-trash,
.nav-tab.active .nav-clear {
    background-position: top right;
}

article {
    width: 100%;
    position: relative;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    flex-grow: 1;
    overflow: auto;
}

.textarea-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.tln-active {
    border: none;
    width: calc(100% - 3.5em);
    background-color: var(--color-bg);
}

.tln-wrapper {
    background: var(--color-nav);
    width: 3.5em;
}

.tln-line {
    color: var(--color-text-lightest);
    line-height: 1.7;
    white-space: nowrap;
}

.tln-active {
    line-height: 1.7;
}

footer {
    padding: 10px 0 0 0;
}

.footer-tab {
    margin: 0 7px 0 0;
}

#version {
    float: right;
}
#version a {
    padding: 0 0 0 7px;
}

#theme {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABQCAMAAABcUcfzAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAIKUExURUdwTNXV1Tac193d3ebm5t3d3Tac193d3d/f393d3Tec2DOZzDed193d3dzc3Nzc3N3d3dvb293d3d3d3d7e3tzc3OPj49vb2zid2Dee2Tac2Def1jec2Ded19vb20CV1Tac19zc3Dab2ECAvzWd1zed2Nzc3Ded2Dif1zec1t3d3d3d3d7e3jWf1d3d3Tec1zah19zc3Nzc3N7e3jec2Tie2Tud2Dad1zed2EmS20Cf393d3Ted2DOZ1tzc3DWe2Ded193d3dzc3N3d3dzc3Nvb2+jo6FWq/9zc3N3d3Tad2djY2Dad2Tad1zed2Dad2Dad2Dee2dzc3Nzc3Die2Ded1zeb2N7e3t3d3Tac1zae2Dee2Dek2zac1jed2Die2Tid1zed1jqc1jWd2Dab1zmc2Ted2N3d3Tac2Dib2Ded1zad2Tec1zeb19/f3zae19zc3DWe3Ded2DSc1jeb2zab1zec2Ded2DWa1Tec2Ded2DWb2Die2Dee2Nvb293d3dzc3Dme193d3Tec2Nvb2zad1zie2Tef2Tmh2d/f3zeb1jec2N7e3jid2dvb2zed2N3d3Ted2Dec1zec2Tec2Dac1zib2jac2DSd2Dee2Dec1zee2ACA/zed1zad1zWd2Nvb297e3t3d3Tad2Dae1zWf2jmf1zmc2zec2Deb1zed1zib193d3Ted2PpQkDIAAACsdFJOUwAMyLwK+fyqEMv0BZqf/P1DT0QPzsISyU7HVSX54xUM94QhBKfmhfogsL5hPRi9gRMWuxdYVw2N9QcIPJEZOpDrpR3S0dALA/6nLw1R6YLz8q1gX6rwLoJiX7KYDpbGk8rJH7HkNn2e35y0Xt0zGExeHa8sHPbiiivnuM3hzA7TqToe7xz4ZEobODjPqEk5ldW58Ybs6imbJ53QgwJG0Z6dg5z7RzAtMaih/VLf3Xo6AAACnklEQVRIx93U9V/bQBQA8ApNvUW2YaWCDIdhA4bDYMhwm7u7u7u7u+u9/3GNNZfLO5of+ez90ORdvs1Z3lksnPjt+WsxFX/glwlV8C0HIDtnJil8C1IIP7li2c1B8TKiwO8cduvhaGdE6vq91PUPnHmfRgEa1ewrFHJeV2ITe7ujpr7pLNzlnhZd1Jtsnvl50vDPGx6sfJmvG99ZeZ5nDHAUXtNptexgqwECTFHZlmIF2lj3AuDNOy1tVRyc0I+vcPx5vPHD1EdlnOs8KhSW0HBabQaf3JCVaIC9NPQJSuuYsqYbNXhEP8QVNwCGXyVSmwaFU4wEGNeyXRqENcy0BXrPPRSEBj30XaX2PETD6Hb+RnfSEIr2c+FmHYTj9TzoAyb2HKWeLh1M3NazEITS1fIeeS93PLuv/acJjCFss5U+vnsd4Emz9vbdMEe00nVQzHdNbfR0TvLhiL7ws3nOxpRbWx7uig6zazmDynO5xlWvRHrfVILtT3O1R89COwo4W1m5nqJjjcfmODAiDWttwyHPvg0dByOW/yGchDjnI0xx8aArRefsCxbhb8jIXGilHSG4zMgkhJIuNyHE7TI6wwOxwZEu3dativn9sfIaKUl3sC9wuR1p4rWiLEikCFa1iHmag+3IlRr/GXISKu6JY0tFBmS5cpHooqcbX4mhHsLEowu8HWFjAHMVBIkWBJZh0G50dUEMBg8YYDlBY1Kbghjx62IcxhJESuOZH4ef4o9kosKdOPySgEm6/kyNTo4JHB4yzLomgLlA2LiQVRisRXbmdj8C27HNvmR0XejXY13Out4+/IPsZmTvNQRJpWAdoFh/Vx9SCmpxtduVVQrUPsCKiyrX8MSs3z87GUbL1fQBYPpIMX1ImT/25vcZ/g9jx6FdwQ5kcAAAAABJRU5ErkJggg==") no-repeat top center;
    background-size: 20px 40px;
    cursor: pointer;
    transition: transform 100ms linear;
}
#theme:hover {
    transform: scale(1.1);
}
@media(prefers-color-scheme: dark) {
    #theme {
        background-position: bottom center;
    }
    [data-theme="light"] #theme {
        background-position: top center;
    }
}
[data-theme="dark"] #theme {
    background-position: bottom center;
}

#logout {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABQCAMAAABcUcfzAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAGDUExURUdwTDaf2f///zad2P///zad2P///zac2P///zie2P///////zed1zed1////zee2P///////////////zec2P///zec1zae1zed1////zec1////zed1zec1////////1Wq/y6i0Tae2Ded1iqq1f///zac1////////////////zec1////////zie1jac2P///zed2P///////zad2ACA/////zed2Dib1zed2f///////zic2P///////zed2Ded1zid2P///////zec2P///zef2f///////zac2v///zed2P///z2e2zac1zee2f///////zec2f///zad2Dac1zac2P///////zad2f///////////////zee2zed2f///zee2P///zie2P///zad2P///////zed1////////zWa1Tqi3P///zWd2P///zie2jad2f///zad2P///zee2P///zid2f///zeb1v///////zab1jae2P///zed2P///5FhbbIAAAB/dFJOUwA9PfKq8/NVVary8PD9/WFhTL109PTdTL3ddPHe8d4DAwuIyQaIZwYLyWf+/jIyhISCgnV1AgJBQDw8QTs7QPVzvEv177xKSu9Lc76+FV/Hx2pqX8VstcUqLy+1FWwqa2uYnm6YaCtutBZoKxa0njc3Xl40NIODhYU4OKmpdnZ880FvAAABnElEQVRIx+2UV1NCQQyFVxFQqiIiqChWBJUm9t5777333rvJT/d578a5meHB0fE8Zr7ZMyfZRIg/qBxXHkoqnM4uIbgYEloLqu8hqUoFHEccHs2UFPYhFlZrQQtirra27EDHuraIiJmKzUZoRrBASimCt7t1LLCuFk3pHPAVUSFp62eV/CZMAhH72giw8TNDlgkRTa0qmE1OvJgL+gjr+jfCukM/zCMi5nXqp44x23PPbfgVMkcowvurP/Qfj0LbgrNchw6sPdEWXYjWenldT4sRrcq69nIPgEhQ3EWQiDM0YJEp69JcifjXL1K+1w2S/FPOAMFFgdBihfoekCpTwDGA/m6zpCoPgL9UCxoACrS1TTvYJ7RFADArNgvls4IFUkoRvLmMsMBIDRjTOOALgELS1k8q+U2YOAB0NRFgw0eWLCMAGFtU0ElOvIgLegjr5Dth3a4f5gEA3M36qaPM9txxG34NzBGKqp2VH/qPe+VbgrNcZ3aoOdcWvQC2pLyuB0UANmVdR7gHQMQp7riCiDPYY5Ap2/xk4M+e5C/kuifymJlFEAAAAABJRU5ErkJggg==") no-repeat bottom center;
    background-size: 20px 40px;
    cursor: pointer;
    transition: transform 100ms linear;
}
#logout:hover {
    transform: scale(1.1);
}
@media(prefers-color-scheme: dark) {
    #logout {
        background-position: top center;
    }
    [data-theme="light"] #logout {
        background-position: bottom center;
    }
}
[data-theme="dark"] #logout {
    background-position: top center;
}

#overlay {
    position: absolute;
    top: 0;
    bottom: 50px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    opacity: 0.7;
    z-index: 100;
    display: none;
}
body.disabled #overlay {
    display: block;
}

.popup {
    position: absolute;
    z-index: 101;
    width: 85%;
    max-width: 400px;
    height: auto;
    min-height: 150px;
    max-height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-nav);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#alert.alert {
    max-width: 500px;
}
.popup-content {
    flex-grow: 1;
    padding: 9px;
    margin: 10px 10px 0 10px;
    line-height: 1.5em;
    overflow: auto;
}
#alert.alert .popup-content {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 12px;
}
.popup-footer {
    padding: 10px;
    text-align: center;
}
.popup.locked .popup-footer {
    pointer-events: none;
    opacity: 0.5;
}
.popup button {
    margin: 0 3px;
    padding: 0 20px;
}
.popup-close {
    display: none;
}
#alert.alert .popup-close {
    display: inline-block;
}
#alert.alert .popup-yes,
#alert.alert .popup-no {
    display: none;
}
#login-form {
    max-width: 260px;
}
.login-input {
    margin: 0 0 10px 0;
    width: 100%;
}
.login-input:last-child {
    margin-bottom: 0;
}