:root {
    /* Border radius scale */
    --radius-sm: 4px;   /* small elements: progress bars */
    --radius-md: 6px;   /* search bar, multi-edit toolbar, file controls */
    --radius-lg: 8px;   /* cards, modals, notification box */

    /* Follow the OS by default (Auto); forced by data-color-scheme below */
    color-scheme: light dark;

    /* Color palette — light-dark(light value, dark value) */
    --clr-page-bg:       light-dark(#E4E4E4, black);
    --clr-surface:       light-dark(#FFFFFF, #303030);
    --clr-surface-alt:   light-dark(#F5F5F5, #444444);
    --clr-surface-hover: light-dark(#E4E4E4, #666666);
    --clr-border:        light-dark(rgba(0, 0, 0, 0.2), #555555);
    --clr-text:          light-dark(#000000, #EBEBEB);
    --clr-text-muted:    light-dark(#777777, #c7c7c7);
    --clr-link:          light-dark(#555555, #63a7e1);
    --clr-input-bg:      light-dark(#FFFFFF, #555555);
    --clr-input-border:  light-dark(#cccccc, #252525);
    --clr-toggle-active:   #f9ca33;
    --clr-toggle-inactive: light-dark(#aaaaaa, #666666);
}

/* The server renders the configured scheme into this attribute; empty/unknown = Auto */
html[data-color-scheme="light" i] {
    color-scheme: light;
}

html[data-color-scheme="night" i] {
    color-scheme: dark;
}

body {
    background-color: var(--clr-page-bg);
    color: var(--clr-text);
    text-align: center;
}
.container {
    max-width: 1000px;
    text-align: left;
}
#inner {
    padding: 4px 32px 20px 32px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background-color: var(--clr-surface);
}
#content {
    min-height: 550px;
}
#logo {
    z-index: 40;
    margin-bottom: -39px;
    margin-top: 20px;
}
#logo svg {
    height: 55px;
    width: 198px;
}
.language {
    min-width: 150px;
    width: 18%;
    padding: 1em 0em;
    margin: 5px 5px;
    text-align: center;
    float: left;
}
.language:hover {
    background-color: var(--clr-surface-hover);
}
.float {
    float: left;
}
.clear {
    clear: left;
}
.spacer {
    clear: both;
}
.inline {
    display: inline;
}
.quoteBlock {
    padding: 12px;
    margin-top: 1px;
    margin-bottom: 15px;
    background-color: var(--clr-surface-alt);
}
.quoteBlock a,
a[target="_blank"] {

    text-decoration: underline !important;
}
.success {
    color: #00cc22;
}
.failed {
    color: light-dark(red, #ff3333) !important;
}
#rightGreyText {
    color: light-dark(#cccccc, #c7c7c7);
    width: 100%;
    text-align: right;
    padding-top: 3px;
    font-style: italic;
}
.indented {
    padding-left: 10px;
}
label {
    cursor: pointer;
}
.input-checkbox {
    padding-top: 7px !important;
}
/* Toggle switch */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: 36px;
    height: 20px;
    background-color: var(--clr-toggle-inactive);
    background-image:
        radial-gradient(circle at 10px 10px, #ffffff 6.5px, rgba(255,255,255,0) 7px),
        radial-gradient(circle at 11px 11px, rgba(0,0,0,0.30) 6.5px, transparent 9.5px);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0px center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, background-position 0.15s;
}
input[type="checkbox"]:checked {
    background-color: var(--clr-toggle-active);
    background-position: 16px center;
    background-image:
        radial-gradient(circle at 10px 10px, #ffffff 6.5px, rgba(255,255,255,0) 7px),
        radial-gradient(circle at 10.5px 10.5px, rgba(0,0,0,0.30) 6.5px, transparent 9.5px);
}
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--clr-toggle-active);
    outline-offset: 2px;
    border-radius: 10px;
}
.input-checkbox input+.help-block {
    display: none;
}
.input-checkbox input:checked+.help-block {
    display: block;
    float: right;
    margin: 0;
}
.desc {
    font-size: 12px;
    font-style: italic;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.bigger {
    font-size: 14px;
}
.bigger input {
    font-size: 16px;
}
.full-width {
    width: 100%;
}
.hidden {
    display: none !important;
}
.text-input {
    width: 130px;
}
.text-input-wide {
    width: 230px;
}
#server-hidden-settings input[type="number"] {
    width: 100px;
}
.input-group-bw {
    width: 150px;
}
#serverResponse {
    padding: 6px 10px;
}
#host-tip {
    margin-bottom: 5px;
}
#bandwidth {
    display: inline-block;
}

/***
    Bootstrap overwrites
***/


a,
a:hover,
a:active,
a:visited,
#serverResponse {
    color: var(--clr-link);
}
.btn {
    min-width: 150px;
    box-shadow: 1px 0px 1px light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));
}

.btn-default,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
    background-color: var(--clr-input-bg);
    color: var(--clr-text);
    border-color: var(--clr-input-border);
}

::placeholder {
    color: var(--clr-text) !important;
    opacity: 0.5;
}
.btn .glyphicon,
a .glyphicon {
    top: 2px;
}
small {
    color: var(--clr-text-muted);
}

/***
    Dark-mode structural rules
    Colors live in the light-dark() tokens above; these are the rules that cannot
    be expressed as a color value. The two blocks below MUST stay identical:
    the first applies when Night is forced, the second when the OS is dark and Light is not forced.
***/
html[data-color-scheme="night" i] {
    .language:hover,
    .quoteBlock,
    .server-disabled,
    #serverResponse {
        background-color: var(--clr-surface-alt) !important;
        color: var(--clr-text) !important;
    }

    .quoteBlock a,
    .help-block,
    a.wizard-advanced-settings {
        color: var(--clr-text);
    }

    #inner {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Focus / active border */
    .btn-default:focus,
    .form-control:focus,
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #707070 !important;
        outline: initial !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
    }
}

@media (prefers-color-scheme: dark) {
    html:not([data-color-scheme="light" i]) {
        .language:hover,
        .quoteBlock,
        .server-disabled,
        #serverResponse {
            background-color: var(--clr-surface-alt) !important;
            color: var(--clr-text) !important;
        }

        .quoteBlock a,
        .help-block,
        a.wizard-advanced-settings {
            color: var(--clr-text);
        }

        #inner {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        /* Focus / active border */
        .btn-default:focus,
        .form-control:focus,
        input:focus,
        textarea:focus,
        select:focus {
            border-color: #707070 !important;
            outline: initial !important;
            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
        }
    }
}