body {
    color: #ddd;
    background-color: #555;
}
body > div, body > div > div, body > div > div > div {
    background-color: #222;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #80a;
    -webkit-text-fill-color: inherit;
    -webkit-box-shadow: 0 0 0px 1000px #828282 inset;
    transition: background-color 5000s ease-in-out 0s;
    color: #6a6a6a !important;
}

.header [data-logo] {
    background-image: url(/images/logo/dark-256x256.png);
}
.header a.title {
    color: #eee;
}

.navbar .navlink:hover {
    background-color: rgba(255,255,255,.3);
}
.navlink > a {
    color: #ddd;
}

.body.--double-panel {
    background-color: #333;
}
.body.--single-panel {
    background-color: #222;
    display: grid;
    grid-template-columns: 1fr;
}

.pagination > .page-list {
    border: 1px solid #444;
    background-color: #333;
}


input, select {
    background-color: #333;
    color: white;
}

.controls > .btn:hover {
    box-shadow: inset 0 0 25px 25px rgba(255,255,255,.5)
}

/** plugins **/

.dropzone {
    background: #555;
}
.popup {
    background-color: rgba(0,0,0,.9);
}

.group-preview:hover {
    box-shadow: 0 0 2px 1px rgba(255,255,255,.5);
}
.ql-editor.ql-blank::before {
    color: rgba(255,255,255,.6);
}
.ql-snow .ql-stroke {
    stroke: #bbb;
}
.ql-snow .ql-stroke-miter {
    stroke: #bbb;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #bbb;
}

.ql-snow .ql-picker {
    color: #999;
}
.dropzone .dz-preview.dz-image-preview {
    background: rgba(0,0,0,.5);
    border-radius: 20px;
    padding: 5px;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
    background: linear-gradient(to bottom, #333, #444);
}