.vl-modal {
    text-align: center;
    z-index: 10
}

.vl-modal,.vl-modal-backdrop {
    left: 0;
    position: fixed;
    right: 0;
    top: 0
}

.vl-modal-backdrop {
    background: rgba(0,0,0,.4);
    bottom: 0;
    z-index: -1
}

.message {
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    box-shadow: 0 0 .2rem rgba(0,0,0,.2);
    max-width: 50vw;
    overflow-wrap: break-word;
    white-space: pre-wrap
}

.message input {
    width: 100%
}

.message-body>p {
    margin-bottom: 1em
}

.message-body>p:nth-last-child(2) {
    font-weight: 700
}

.message-body>p:not(:first-child) {
    text-align: left
}

* {
    box-sizing: border-box;
    margin: 0
}

:not(select) {
    padding: 0
}

:root {
    --bg: var(--fill-0);
    --fg: var(--fill-15);
    --fill-0: #fff;
    --fill-0-5: #f7f7f7;
    --fill-1: #eee;
    --fill-2: #ddd;
    --fill-3: #ccc;
    --fill-4: #bbb;
    --fill-5: #aaa;
    --fill-6: #999;
    --fill-7: #888;
    --fill-8: #777;
    --fill-9: #666;
    --fill-10: #555;
    --fill-11: #444;
    --fill-12: #333;
    --fill-13: #222;
    --fill-14: #111;
    --fill-15: #000;
    --tooltip-color: #fff;
    --tooltip-bg: rgba(0,0,0,.8);
    --tooltip-border-color: transparent;
    --focus-border-color: var(--fill-12);
    font: 14px menu
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg:var(--fill-11);
        --fill-0: #1e1e1e;
        --fill-0-5: #262626;
        --fill-1: #2d2d2d;
        --fill-2: #3c3c3c;
        --fill-3: #4b4b4b;
        --fill-4: #5a5a5a;
        --fill-5: #696969;
        --fill-6: #787878;
        --fill-7: #878787;
        --fill-8: #969696;
        --fill-9: #a5a5a5;
        --fill-10: #b4b4b4;
        --fill-11: #c3c3c3;
        --fill-12: #d2d2d2;
        --fill-13: #e1e1e1;
        --fill-14: #f0f0f0;
        --fill-15: #fff;
        --tooltip-border-color: #8888;
        --scrollbar-bg: #1a1a1a;
        --input-bg: #111
    }
}

body {
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem
}

body,button,input,select,textarea {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,sans-serif;
    font-size: 1rem
}

h1 {
    font-size: 1.5rem
}

h2 {
    font-size: 1.3rem
}

h3 {
    font-size: 1.1rem
}

h1,h2,h3 {
    margin-bottom: .5em;
    margin-top: 1em
}

a {
    color: #1e90ff;
    text-decoration: none
}

@media (prefers-color-scheme: dark) {
    a {
        color:#7baaff
    }
}

a:focus,a:hover,span:focus {
    text-decoration: underline
}

hr {
    border-style: solid;
    border-width: 1px 0 0;
    margin: .5rem 0
}

input[type=checkbox] {
    margin-right: .2em
}

input[type=checkbox]:focus+* {
    text-decoration: underline
}

button,input,select,textarea {
    border: 1px solid var(--fill-3)
}

button:focus,input:focus,select:focus,textarea:focus {
    border-color: var(--focus-border-color)
}

input[disabled]~* {
    opacity: .5
}

input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=text][disabled],input[type=url][disabled] {
    background: var(--fill-1);
    cursor: not-allowed
}

select {
    field-sizing: content
}

textarea {
    display: block;
    width: 100%
}

code,input[type=number],input[type=password],input[type=search],input[type=text],input[type=url],kbd,textarea {
    padding: 0 .2em
}

code,kbd {
    background: hsla(45,75%,75%,.25)
}

@media (prefers-color-scheme: dark) {
    code,kbd {
        background:rgba(255,170,0,.2)
    }
}

fieldset {
    border: 1px solid var(--fill-3);
    display: inline-block;
    padding: .5rem
}

:focus {
    outline: none
}

.icon {
    height: 1rem;
    width: 1rem
}

svg {
    fill: currentColor
}

button {
    background: var(--fill-1);
    border: 1px solid var(--fill-5)
}

@media (prefers-color-scheme: dark) {
    button {
        background:var(--fill-2)
    }
}

button {
    color: var(--fg)
}

button:not([disabled]):hover {
    border-color: var(--fill-7)
}

button:active {
    background: var(--fill-5)
}

button[disabled] {
    opacity: .5
}

button:not([disabled]) {
    cursor: pointer
}

.btn-ghost,button {
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 .5rem;
    vertical-align: bottom
}

.btn-ghost,.btn-ghost:focus,.btn-ghost:hover,button,button:focus,button:hover {
    text-decoration: none
}

.btn-ghost {
    border: 1px solid transparent;
    color: inherit;
    cursor: pointer
}

.btn-ghost:focus,.btn-ghost:hover {
    background: var(--bg);
    border-color: var(--fill-5)
}

.btn-ghost>.icon {
    display: block;
    height: 2rem
}

.btn-ghost.active {
    background: var(--fill-1);
    border-color: var(--fill-4)
}

.btn-ghost.disabled {
    cursor: not-allowed;
    opacity: .5
}

.btn-danger {
    color: red
}

a[tabindex="0"] {
    cursor: pointer
}

a:not([href]):hover {
    text-decoration: none
}

.sep {
    font-size: 1rem;
    line-height: 1;
    padding: 0 .5rem
}

.sep,.sep:after {
    display: inline-block
}

.sep:after {
    border-right: 1px solid var(--fill-4);
    content: "";
    height: 1em
}

ol,ul {
    padding-left: 20px
}

li {
    line-height: 1.4
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-auto {
    flex: auto
}

.flex-col>.flex-auto {
    height: 0
}

:not(.flex-col)>.flex-auto {
    width: 0
}

.flex-1 {
    flex: 1
}

.center-items {
    align-items: center
}

.stretch-self {
    align-self: stretch
}

.pos-rel {
    position: relative
}

.ml-1,.ml-1c>:nth-child(n+2) {
    margin-left: .5em
}

.mr-1,.mr-1c>:nth-last-child(n+2) {
    margin-right: .5em
}

.ml-2,.ml-2c>:nth-child(n+2) {
    margin-left: 1em
}

.mr-2,.mr-2c>:nth-last-child(n+2) {
    margin-right: 1em
}

.mt-0,.mt-0c>:nth-child(n+2) {
    margin-top: 0
}

.mt-1,.mt-1c>:nth-child(n+2) {
    margin-top: .5em
}

.mb-1,.mb-1c>:nth-last-child(n+2) {
    margin-bottom: .5em
}

.mb-2,.mb-2c>:nth-last-child(n+2) {
    margin-bottom: 1em
}

.mx-1,.mx-1c>* {
    margin-left: .5em;
    margin-right: .5em
}

.my-1,.my-1c>* {
    margin-bottom: .5em;
    margin-top: .5em
}

.h-screen {
    height: 100vh
}

.h-100 {
    height: 100%
}

.w-100 {
    width: 100%
}

.w-1 {
    width: 4em
}

.fixed-full {
    position: fixed
}

.abs-full {
    position: absolute
}

.abs-full,.fixed-full {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.scroll-y {
    overflow-y: auto
}

.subtle {
    color: var(--fill-7)
}

.frame {
    background: var(--fill-1)
}

.frame-block {
    padding: .5rem
}

.editor-code .CodeMirror {
    height: 100%
}

.CodeMirror-hints.default,.editor-code .CodeMirror,.monospace-font,code {
    font-family: Fira Code,Menlo,Monaco,Consolas,Liberation Mono,Courier New,Courier,monospace
}

body .vl-tooltip {
    z-index: 10000
}

body .vl-tooltip>i {
    color: var(--tooltip-bg);
    z-index: 1
}

body .vl-tooltip-content {
    background: var(--tooltip-bg);
    border: 1px solid var(--tooltip-border-color);
    color: var(--tooltip-color);
    margin: -1px
}

.vl-dropdown-menu {
    background: var(--bg);
    border: 1px solid var(--fill-4);
    padding: .5rem
}

.modal-content {
    background: var(--bg);
    box-shadow: 0 0 40px #000;
    margin: 0 auto;
    padding: 1rem
}

.btn-ghost.has-error,.has-error,input[type].has-error {
    background: #f002;
    border-color: #8008
}

.btn-ghost.has-error:focus,.has-error:focus,input[type].has-error:focus {
    border-color: #f008
}

.scary-switch:checked {
    accent-color: red
}

.scary-switch:checked+span {
    color: red
}

@media (prefers-color-scheme: dark) {
    input[type=checkbox]:not(:checked),input[type=radio]:not(:checked) {
        filter:invert(1)
    }

    input[type=number],input[type=password],input[type=search],input[type=text],input[type=url],select,textarea {
        background: var(--input-bg);
        border: 1px solid var(--fill-3);
        color: var(--fg)
    }

    input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus {
        border-color: var(--focus-border-color)
    }

    ::-webkit-scrollbar {
        background: var(--scrollbar-bg);
        height: 14px;
        width: 14px
    }

    ::-webkit-scrollbar-button:single-button {
        background: radial-gradient(circle at center,#333 40%,var(--scrollbar-bg) 40%)
    }

    ::-webkit-scrollbar-button:single-button:hover {
        background: radial-gradient(circle at center,#444 40%,var(--scrollbar-bg) 40%)
    }

    ::-webkit-scrollbar-button:single-button:active {
        background: radial-gradient(circle at center,#555 40%,var(--scrollbar-bg) 40%)
    }

    ::-webkit-scrollbar-track-piece {
        background: #333;
        border: 4px solid var(--scrollbar-bg);
        border-radius: 8px
    }

    ::-webkit-scrollbar-track-piece:hover {
        background: #444
    }

    ::-webkit-scrollbar-track-piece:active {
        background: #555
    }

    ::-webkit-scrollbar-thumb {
        background: #555;
        border: 3px solid var(--scrollbar-bg);
        border-radius: 8px
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #666
    }

    ::-webkit-scrollbar-thumb:active {
        background: #777
    }

    ::-webkit-resizer {
        background: var(--input-bg) linear-gradient(-45deg,transparent 3px,#888 3px,#888 4px,transparent 4px,transparent 6px,#888 6px,#888 7px,transparent 7px) no-repeat;
        border: 2px solid transparent
    }

    :-webkit-autofill {
        -webkit-text-fill-color: #fff;
        box-shadow: 0 0 0 1000px var(--input-bg) inset
    }
}

@media (min-width: 768px) {
    .visible-sm {
        display:none
    }
}

@media (max-width: 550px) {
    .hidden-sm {
        display:none!important
    }
}

@media (max-width: 319px) {
    .hidden-xs {
        display:none!important
    }
}

:root {
    --vl-tooltip-bg: rgba(0,0,0,.8);
    --vl-tooltip-max-width: 250px;
    --vl-tooltip-arrow-width: 4px;
    --vl-tooltip-arrow-height: 6px
}

.vl-tooltip {
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    position: absolute;
    z-index: 100
}

.vl-tooltip>i {
    color: var(--vl-tooltip-bg)
}

.vl-tooltip>.vl-tooltip-wrap,.vl-tooltip>i {
    position: absolute
}

.vl-tooltip-wrap {
    width: var(--vl-tooltip-max-width)
}

.vl-tooltip-content {
    background: var(--vl-tooltip-bg);
    border-radius: 6px;
    display: inline-block;
    padding: 8px;
    text-align: left
}

.vl-tooltip-bottom>i,.vl-tooltip-top>i {
    border-left: var(--vl-tooltip-arrow-width) solid transparent;
    border-right: var(--vl-tooltip-arrow-width) solid transparent;
    margin-left: calc(var(--vl-tooltip-arrow-width)*-1)
}

.vl-tooltip-bottom.vl-tooltip-align-center>.vl-tooltip-wrap,.vl-tooltip-top.vl-tooltip-align-center>.vl-tooltip-wrap {
    margin-left: calc(var(--vl-tooltip-max-width)/-2);
    text-align: center
}

.vl-tooltip-bottom.vl-tooltip-align-start>.vl-tooltip-wrap,.vl-tooltip-top.vl-tooltip-align-start>.vl-tooltip-wrap {
    margin-left: -10px;
    text-align: left
}

.vl-tooltip-bottom.vl-tooltip-align-end>.vl-tooltip-wrap,.vl-tooltip-top.vl-tooltip-align-end>.vl-tooltip-wrap {
    margin-right: -10px;
    right: 0;
    text-align: right
}

.vl-tooltip-left>i,.vl-tooltip-right>i {
    border-bottom: var(--vl-tooltip-arrow-width) solid transparent;
    border-top: var(--vl-tooltip-arrow-width) solid transparent;
    margin-top: calc(var(--vl-tooltip-arrow-width)*-1)
}

.vl-tooltip-top>i {
    border-top: var(--vl-tooltip-arrow-height) solid;
    top: 0
}

.vl-tooltip-top>.vl-tooltip-wrap {
    bottom: 0
}

.vl-tooltip-bottom>i {
    border-bottom: var(--vl-tooltip-arrow-height) solid;
    bottom: 0
}

.vl-tooltip-bottom>.vl-tooltip-wrap {
    top: 0
}

.vl-tooltip-left>i {
    border-left: var(--vl-tooltip-arrow-height) solid;
    left: 0
}

.vl-tooltip-left>.vl-tooltip-wrap {
    right: 0;
    text-align: right;
    transform: translateY(-50%)
}

.vl-tooltip-right>i {
    border-right: var(--vl-tooltip-arrow-height) solid;
    right: 0
}

.vl-tooltip-right>.vl-tooltip-wrap {
    left: 0;
    transform: translateY(-50%)
}

.CodeMirror {
    color: #000;
    direction: ltr;
    font-family: monospace;
    height: 300px
}

.CodeMirror-lines {
    padding: 4px 0
}

.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
    padding: 0 4px
}

.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler {
    background-color: #fff
}

.CodeMirror-gutters {
    background-color: #f7f7f7;
    border-right: 1px solid #ddd;
    white-space: nowrap
}

.CodeMirror-linenumber {
    color: #999;
    min-width: 20px;
    padding: 0 3px 0 5px;
    text-align: right;
    white-space: nowrap
}

.CodeMirror-guttermarker {
    color: #000
}

.CodeMirror-guttermarker-subtle {
    color: #999
}

.CodeMirror-cursor {
    border-left: 1px solid #000;
    border-right: none;
    width: 0
}

.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
    background: #7e7;
    border: 0!important;
    width: auto
}

.cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1
}

.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection {
    background: transparent
}

.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
    background: transparent
}

.cm-fat-cursor {
    caret-color: transparent
}

@-moz-keyframes blink {
    50% {
        background-color: initial
    }
}

@-webkit-keyframes blink {
    50% {
        background-color: initial
    }
}

@keyframes blink {
    50% {
        background-color: initial
    }
}

.cm-tab {
    display: inline-block;
    text-decoration: inherit
}

.CodeMirror-rulers {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: -50px
}

.CodeMirror-ruler {
    border-left: 1px solid #ccc;
    bottom: 0;
    position: absolute;
    top: 0
}

.cm-s-default .cm-header {
    color: blue
}

.cm-s-default .cm-quote {
    color: #090
}

.cm-negative {
    color: #d44
}

.cm-positive {
    color: #292
}

.cm-header,.cm-strong {
    font-weight: 700
}

.cm-em {
    font-style: italic
}

.cm-link {
    text-decoration: underline
}

.cm-strikethrough {
    text-decoration: line-through
}

.cm-s-default .cm-keyword {
    color: #708
}

.cm-s-default .cm-atom {
    color: #219
}

.cm-s-default .cm-number {
    color: #164
}

.cm-s-default .cm-def {
    color: #00f
}

.cm-s-default .cm-variable-2 {
    color: #05a
}

.cm-s-default .cm-type,.cm-s-default .cm-variable-3 {
    color: #085
}

.cm-s-default .cm-comment {
    color: #a50
}

.cm-s-default .cm-string {
    color: #a11
}

.cm-s-default .cm-string-2 {
    color: #f50
}

.cm-s-default .cm-meta,.cm-s-default .cm-qualifier {
    color: #555
}

.cm-s-default .cm-builtin {
    color: #30a
}

.cm-s-default .cm-bracket {
    color: #997
}

.cm-s-default .cm-tag {
    color: #170
}

.cm-s-default .cm-attribute {
    color: #00c
}

.cm-s-default .cm-hr {
    color: #999
}

.cm-s-default .cm-link {
    color: #00c
}

.cm-invalidchar,.cm-s-default .cm-error {
    color: red
}

.CodeMirror-composing {
    border-bottom: 2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
    color: #0b0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #a22
}

.CodeMirror-matchingtag {
    background: rgba(255,150,0,.3)
}

.CodeMirror-activeline-background {
    background: #e8f2ff
}

.CodeMirror {
    background: #fff;
    overflow: hidden;
    position: relative
}

.CodeMirror-scroll {
    height: 100%;
    margin-bottom: -50px;
    margin-right: -50px;
    outline: none;
    overflow: scroll!important;
    padding-bottom: 50px;
    position: relative;
    z-index: 0
}

.CodeMirror-sizer {
    border-right: 50px solid transparent;
    position: relative
}

.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar {
    display: none;
    outline: none;
    position: absolute;
    z-index: 6
}

.CodeMirror-vscrollbar {
    overflow-x: hidden;
    overflow-y: scroll;
    right: 0;
    top: 0
}

.CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow-x: scroll;
    overflow-y: hidden
}

.CodeMirror-scrollbar-filler {
    bottom: 0;
    right: 0
}

.CodeMirror-gutter-filler {
    bottom: 0;
    left: 0
}

.CodeMirror-gutters {
    left: 0;
    min-height: 100%;
    position: absolute;
    top: 0;
    z-index: 3
}

.CodeMirror-gutter {
    display: inline-block;
    height: 100%;
    margin-bottom: -50px;
    vertical-align: top;
    white-space: normal
}

.CodeMirror-gutter-wrapper {
    background: none!important;
    border: none!important;
    position: absolute;
    z-index: 4
}

.CodeMirror-gutter-background {
    bottom: 0;
    position: absolute;
    top: 0;
    z-index: 4
}

.CodeMirror-gutter-elt {
    cursor: default;
    position: absolute;
    z-index: 4
}

.CodeMirror-gutter-wrapper ::selection {
    background-color: initial
}

.CodeMirror-gutter-wrapper ::-moz-selection {
    background-color: initial
}

.CodeMirror-lines {
    cursor: text;
    min-height: 1px
}

.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
    word-wrap: normal;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
    line-height: inherit;
    margin: 0;
    overflow: visible;
    position: relative;
    white-space: pre;
    z-index: 2
}

.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal
}

.CodeMirror-linebackground {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.CodeMirror-linewidget {
    padding: .1px;
    position: relative;
    z-index: 2
}

.CodeMirror-rtl pre {
    direction: rtl
}

.CodeMirror-code {
    outline: none
}

.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer {
    -moz-box-sizing: content-box;
    box-sizing: initial
}

.CodeMirror-measure {
    height: 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    width: 100%
}

.CodeMirror-cursor {
    pointer-events: none;
    position: absolute
}

.CodeMirror-measure pre {
    position: static
}

div.CodeMirror-cursors {
    position: relative;
    visibility: hidden;
    z-index: 3
}

.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors {
    visibility: visible
}

.CodeMirror-selected {
    background: #d9d9d9
}

.CodeMirror-focused .CodeMirror-selected {
    background: #d7d4f0
}

.CodeMirror-crosshair {
    cursor: crosshair
}

.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection {
    background: #d7d4f0
}

.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection {
    background: #d7d4f0
}

.cm-searching {
    background-color: #ffa;
    background-color: rgba(255,255,0,.4)
}

.cm-force-border {
    padding-right: .1px
}

@media print {
    .CodeMirror div.CodeMirror-cursors {
        visibility: hidden
    }
}

.cm-tab-wrap-hack:after {
    content: ""
}

span.CodeMirror-selectedtext {
    background: none
}

.CodeMirror-foldmarker {
    color: blue;
    cursor: pointer;
    font-family: arial;
    line-height: .3;
    text-shadow: #b9f 1px 1px 2px,#b9f -1px -1px 2px,#b9f 1px -1px 2px,#b9f -1px 1px 2px
}

.CodeMirror-foldgutter {
    width: .7em
}

.CodeMirror-foldgutter-folded,.CodeMirror-foldgutter-open {
    cursor: pointer
}

.CodeMirror-foldgutter-open:after {
    content: "\25BE"
}

.CodeMirror-foldgutter-folded:after {
    content: "\25B8"
}

.CodeMirror-hints {
    background: #fff;
    border: 1px solid silver;
    border-radius: 3px;
    -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    box-sizing: border-box;
    font-family: monospace;
    font-size: 90%;
    list-style: none;
    margin: 0;
    max-height: 20em;
    overflow: hidden;
    overflow-y: auto;
    padding: 2px;
    position: absolute;
    z-index: 10
}

.CodeMirror-hint {
    border-radius: 2px;
    color: #000;
    cursor: pointer;
    margin: 0;
    padding: 0 4px;
    white-space: pre
}

li.CodeMirror-hint-active {
    background: #08f;
    color: #fff
}

.toggle-button {
    background: var(--fill-2);
    color: var(--fill-12);
    cursor: pointer;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 24px
}

.toggle-button.active {
    background: var(--fill-9);
    color: var(--bg)
}

.toggle-button:focus,.toggle-button:hover {
    filter: brightness(.8)
}

.editor-code.flex-auto {
    position: relative
}

.editor-code.flex-auto>div {
    position: absolute;
    width: 100%
}

.editor-search {
    flex-wrap: wrap;
    white-space: pre
}

.editor-search>div,.editor-search>form {
    align-items: center;
    display: flex;
    margin-right: .5rem
}

.editor-search input[type=search] {
    min-width: 8em
}

.editor-search span>input {
    width: 100%
}

.editor-search .is-error,.editor-search .is-error:focus {
    background: #e8560010;
    border-color: #e85600
}

.too-long-placeholder {
    font-style: italic
}

.CodeMirror-hints {
    z-index: 9999
}

.CodeMirror .CodeMirror-line ::selection {
    background: #d7d4f0
}

.CodeMirror .CodeMirror-line ::-moz-selection {
    background: #d7d4f0
}

.cm-matchhighlight {
    background-color: rgba(0,255,204,.15)
}

.cm-trailingspace {
    background: radial-gradient(#6495ed,transparent 1px) 0 50% /1ch 1ch repeat-x
}

div.CodeMirror span.CodeMirror-matchingbracket {
    background-color: rgba(87,230,26,.3);
    color: unset
}

.cm-s-default .cm-comment {
    color: #918982
}

.cm-s-default .cm-string-2 {
    color: #870
}

.cm-s-default .cm-string-2.cm-regexp {
    color: #d60
}

@media (prefers-color-scheme: dark) {
    .cm-matchhighlight {
        background-color:rgba(255,170,0,.1);
        border-bottom-color: rgba(255,170,0,.25)
    }

    .CodeMirror-hints {
        background: var(--bg)
    }

    .CodeMirror-hint {
        color: var(--fg)
    }

    li.CodeMirror-hint-active {
        background: var(--fg);
        color: var(--bg)
    }

    .CodeMirror {
        background: var(--bg);
        color: var(--fg)
    }

    .CodeMirror .CodeMirror-gutter-filler,.CodeMirror .CodeMirror-scrollbar-filler {
        background: none
    }

    .CodeMirror .CodeMirror-gutters {
        background-color: var(--fill-0-5);
        border-color: var(--fill-2)
    }

    .CodeMirror .CodeMirror-selected {
        background: rgba(80,75,65,.99)
    }

    .CodeMirror .CodeMirror-line ::selection {
        background: rgba(80,75,65,.99)
    }

    .CodeMirror .CodeMirror-line ::-moz-selection {
        background: rgba(80,75,65,.99)
    }

    .CodeMirror .CodeMirror-guttermarker {
        color: #fff
    }

    .CodeMirror .CodeMirror-guttermarker-subtle {
        color: #d0d0d0
    }

    .CodeMirror .CodeMirror-linenumber {
        color: #666
    }

    .CodeMirror .CodeMirror-cursor {
        border-color: #f8f8f0
    }

    .CodeMirror .CodeMirror-activeline-background {
        background: #1a1a1a
    }

    .CodeMirror .CodeMirror-matchingbracket {
        background: #444;
        color: #ff0!important;
        outline: none
    }

    .cm-s-default .cm-comment {
        color: #75715e
    }

    .cm-s-default .cm-atom,.cm-s-default .cm-number {
        color: #ae81ff
    }

    .cm-s-default .cm-comment.cm-attribute {
        color: #97b757
    }

    .cm-s-default .cm-comment.cm-def {
        color: #bc9262
    }

    .cm-s-default .cm-comment.cm-tag {
        color: #bc6283
    }

    .cm-s-default .cm-comment.cm-type {
        color: #5998a6
    }

    .cm-s-default .cm-attribute,.cm-s-default .cm-property {
        color: #a6e22e
    }

    .cm-s-default .cm-keyword {
        color: #f92672
    }

    .cm-s-default .cm-builtin {
        color: #66d9ef
    }

    .cm-s-default .cm-string {
        color: #e6db74
    }

    .cm-s-default .cm-string-2 {
        color: #bcb149
    }

    .cm-s-default .cm-string-2.cm-regexp {
        color: #ff00f7
    }

    .cm-s-default .cm-variable {
        color: #f8f8f2
    }

    .cm-s-default .cm-variable-2 {
        color: #9effff
    }

    .cm-s-default .cm-type,.cm-s-default .cm-variable-3 {
        color: #66d9ef
    }

    .cm-s-default .cm-def {
        color: #fd971f
    }

    .cm-s-default .cm-bracket {
        color: #f8f8f2
    }

    .cm-s-default .cm-tag {
        color: #f92672
    }

    .cm-s-default .cm-header,.cm-s-default .cm-link {
        color: #ae81ff
    }

    .cm-s-default .cm-error {
        background: #f92672;
        color: #f8f8f0
    }

    .cm-s-default .cm-operator {
        color: #999
    }
}

.edit-externals {
    --border: 6px double var(--fill-8);
    border-top: var(--border)
}

.edit-externals>.select {
    border-bottom: 2px solid var(--fill-3);
    max-height: 15vh;
    min-height: 1.25rem;
    overflow-y: auto;
    padding-bottom: .5rem
}

.edit-externals>.select:focus .active span {
    text-decoration: underline
}

.edit-externals>.select[data-has-main] dl:first-child {
    background: var(--bg);
    border-bottom: 1px solid var(--fill-3);
    padding-bottom: .5em;
    padding-top: .5em;
    position: sticky;
    top: 0
}

.edit-externals>.select dl {
    align-items: center;
    padding-right: 1rem;
    white-space: nowrap
}

.edit-externals>.select dl.active {
    color: blue;
    font-weight: 700
}

.edit-externals>.select dl.loading dd {
    color: var(--fill-7)
}

.edit-externals>.select dl.error dd {
    color: red
}

.edit-externals>.select dl:not(.error) {
    cursor: pointer
}

.edit-externals>.select dl:not(.error):hover dd {
    text-decoration: underline
}

.edit-externals>.select dl:not(.error):hover dd a {
    text-decoration: none
}

.edit-externals>.select dt {
    color: #00008b;
    font-family: monospace;
    margin-left: 1rem
}

.edit-externals>.select a {
    cursor: alias;
    padding: 0 .5em
}

.edit-externals>.select a:hover {
    background: var(--fill-3)
}

.edit-externals>.contents>img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 1rem
}

@media (prefers-color-scheme: dark) {
    .edit-externals .select.error dd {
        color:#ff4747
    }

    .edit-externals .select dl.active {
        color: coral
    }

    .edit-externals .select dl.active dt {
        color: hotpink
    }

    .edit-externals .select dt {
        color: #c34ec3
    }
}

.setting-check {
    display: inline-flex
}

.page-confirm {
    --btn-bg: #d4e2d4;
    --btn: #006400;
    --btn-border: #75a775;
    --btn-border-hover: #488148
}

.page-confirm h1 {
    line-height: 1.3;
    margin: .25rem 0
}

.page-confirm a:not(:hover) {
    color: unset;
    text-decoration: none
}

.page-confirm p {
    margin-top: 1rem
}

.page-confirm .self-start {
    align-self: flex-start
}

.page-confirm .image {
    align-items: center;
    box-sizing: initial;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
    padding: 0 14px 0 .25rem
}

.page-confirm .image img {
    max-height: 100%;
    max-width: 100%
}

.page-confirm .info {
    overflow: hidden
}

.page-confirm .info .descr {
    max-height: 4rem;
    overflow-y: auto
}

.page-confirm .info .abs-center {
    cursor: pointer;
    margin-left: -47px;
    position: absolute
}

.page-confirm .icon {
    height: 18px;
    width: 18px
}

.page-confirm .lists {
    margin-top: 1rem
}

.page-confirm .lists dl {
    margin: 0 1rem 1rem 0
}

.page-confirm .lists dl[data-type=antifeature] dd {
    background: rgba(255,0,0,.05);
    border: 1px solid rgba(255,0,0,.5);
    max-width: 25em;
    padding: 2px 6px
}

.page-confirm .lists dl[data-type=""] {
    color: red
}

.page-confirm .lists dt {
    font-weight: 700
}

.page-confirm .lists dd {
    max-height: 10vh;
    min-height: 1.5rem;
    min-width: 5rem;
    overflow-wrap: anywhere;
    overflow-y: auto;
    white-space: pre-wrap
}

.page-confirm [data-collapsed=true] dd {
    display: none
}

@media (max-width: 1800px) {
    .page-confirm [data-collapsed=true] dl:focus dd {
        background:var(--fill-0-5);
        box-shadow: 1px 3px 9px hsla(0,0%,50%,.5);
        display: flex;
        max-height: 50vh;
        padding: .5rem;
        position: absolute;
        z-index: 100
    }
}

.page-confirm [data-collapsed=true] dt {
    cursor: pointer
}

.page-confirm [data-collapsed=true] .toggle {
    opacity: .3
}

.page-confirm .dim {
    opacity: .4
}

.page-confirm .actions,.page-confirm .actions label {
    align-items: center
}

.page-confirm .actions .status {
    animation: fade-in .5s 1 both;
    border-left: 5px solid #ff8c00;
    color: #d33a00;
    padding: 0 .5em
}

.page-confirm .actions .btn-ghost {
    accent-color: var(--btn);
    background: var(--btn-bg);
    border-color: var(--btn-border);
    display: block;
    margin-left: -1px;
    padding: 0 2px 0 4px
}

.page-confirm .actions .btn-ghost input {
    cursor: pointer;
    position: relative
}

.page-confirm .actions .btn-ghost input:not(:checked) {
    opacity: .6
}

@supports not (-moz-appearance: none) {
    .page-confirm .actions .btn-ghost input {
        top:1px
    }
}

.page-confirm .incognito {
    color: red;
    padding: .25em 0
}

.page-confirm button[id] {
    background: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn)
}

.page-confirm button[id]:hover {
    border-color: var(--btn-border-hover)
}

.page-confirm [data-verb]:not([data-hotkey]):before {
    content: "✚ "
}

.page-confirm [data-hotkey] {
    font-weight: 700
}

.page-confirm [data-hotkey][data-verb]:before {
    content: attr(data-verb) " + "
}

.page-confirm [data-hotkey]:after {
    content: "\a0(" attr(data-hotkey) ")";
    font-weight: 400;
    opacity: .75
}

.page-confirm.reinstall {
    --btn-bg: #d1e0ea;
    --btn-border: #6699ce;
    --btn: #004fc5;
    --btn-border-hover: #35699f
}

@media (prefers-color-scheme: dark) {
    .page-confirm .incognito {
        color:orange
    }

    .page-confirm:not(.reinstall) {
        --btn-bg: #3a5d3a;
        --btn-border: #598059;
        --btn: #9cd89c;
        --btn-border-hover: #80a980
    }

    .page-confirm.reinstall {
        --btn-bg: #224a73;
        --btn-border: #3d6996;
        --btn: #9fcdfd;
        --btn-border-hover: #608cb8
    }

    .page-confirm .actions .status {
        color: #ff8c00
    }
}

.page-confirm .edit-externals .select {
    resize: vertical
}

.page-confirm .edit-externals .select[style] {
    max-height: 80%
}

.page-confirm #wall {
    padding: 2rem
}

@media (max-width: 1599px) {
    .page-confirm>:first-child {
        max-height:80vh;
        min-height: 5em;
        overflow-y: auto;
        resize: vertical;
        width: auto!important
    }
}

@media (min-width: 1801px) {
    .page-confirm {
        flex-direction:row
    }

    .page-confirm>:first-child {
        height: auto!important;
        max-width: 80%;
        min-width: 30em;
        overflow: hidden;
        resize: horizontal;
        width: 40%
    }

    .page-confirm .info .descr {
        max-height: 20vh
    }

    .page-confirm .lists {
        max-height: 75vh;
        overflow-y: auto
    }

    .page-confirm .lists dd {
        display: block;
        max-height: 30vh
    }

    .page-confirm .edit-externals {
        border-left: var(--border);
        border-top: none
    }
}

.confirm-options label {
    display: block
}

.confirm-options .vl-dropdown-menu {
    width: 13rem
}

.vl-tooltip-bottom>i {
    margin-left: 10px
}

.vl-tooltip-bottom.vl-tooltip-align-left {
    margin-left: -13px
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}