: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 */

    /* Color palette — light mode defaults; overridden by Night.css */
    --clr-page-bg:       #E4E4E4;
    --clr-surface:       #FFFFFF;
    --clr-surface-alt:   #F5F5F5;
    --clr-surface-hover: #E4E4E4;
    --clr-border:        rgba(0, 0, 0, 0.2);
    --clr-text:          #000000;
    --clr-text-muted:    #777777;
    --clr-link:          #555555;
    --clr-toggle-active:   #f9ca33;
    --clr-toggle-inactive: #aaaaaa;
}

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: red !important;
}
#rightGreyText {
    color: #ccc;
    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 rgba(0,0,0,.1);
}
.btn .glyphicon,
a .glyphicon {
    top: 2px;
}
small {
    color: var(--clr-text-muted);
}