:root {
    --bg-0: #0f1114;
    --bg-1: #15181c;
    --bg-2: #1a1e24;
    --bg-3: #20252d;
    --border: #2d333c;
    --text: #c5ccd6;
    --muted: #8c94a0;
    --link: #b3bcc8;
    --focus: #6f7a88;
    --radius: 8px;
}

html,
body,
#container,
#content,
.dashboard #content,
.change-form #content-main,
.change-list #content-main {
    background: var(--bg-0) !important;
    color: var(--text) !important;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 300 !important;
}

#content {
    padding: 16px 20px !important;
}

#header {
    background: var(--bg-1) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

#site-name a,
#site-name {
    color: var(--text) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

#user-tools,
#user-tools a,
.admin-note {
    color: var(--muted) !important;
    font-weight: 300 !important;
}

#user-tools a:hover,
a:hover {
    color: #d4d9e0 !important;
}

a,
.module a,
#changelist a,
#changelist-filter a {
    color: var(--link) !important;
    text-decoration: none;
    font-weight: 300 !important;
}

.breadcrumbs {
    background: var(--bg-1) !important;
    color: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    margin: 12px 0 14px !important;
    padding: 10px 14px !important;
}

.breadcrumbs a {
    color: var(--text) !important;
}

#nav-sidebar {
    background: var(--bg-1) !important;
    border-right: 1px solid var(--border) !important;
}

#nav-sidebar .current-app .section,
#nav-sidebar .section,
#nav-sidebar th {
    background: var(--bg-2) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 400 !important;
}

#nav-sidebar a {
    color: var(--muted) !important;
    font-weight: 300 !important;
}

#nav-sidebar a.current,
#nav-sidebar a:hover {
    color: var(--text) !important;
    background: var(--bg-3) !important;
}

.module,
.inline-group,
#changelist-filter,
#content-related,
.selector,
.results,
.submit-row,
.paginator,
.object-tools a,
.login #content {
    background: var(--bg-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

.module h2,
.module caption,
.inline-group h2,
.selector-chosen h2,
.selector-available h2,
#changelist-filter h2 {
    background: var(--bg-2) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
caption,
legend,
th,
label,
strong,
b,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.submit-row input,
.object-tools a {
    font-weight: 300 !important;
}

table,
#changelist table,
#changelist .results,
#changelist .results tbody,
#changelist .results thead,
#changelist .results tr,
#changelist .results td,
#changelist .results th {
    background: var(--bg-1) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

#changelist .results tbody tr:nth-child(even),
#changelist .results tbody tr.row2 {
    background: var(--bg-2) !important;
}

#changelist .results tbody tr:hover {
    background: var(--bg-3) !important;
}

#changelist .results th,
#changelist .results td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#changelist-search,
.actions,
.paginator {
    background: var(--bg-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

#changelist-filter h3,
#changelist-filter details summary {
    color: var(--text) !important;
    font-weight: 300 !important;
}

#changelist-filter li.selected a {
    color: #e3e7ed !important;
    font-weight: 300 !important;
}

input,
textarea,
select,
.vTextField,
.vURLField,
.vLargeTextField,
.vIntegerField,
.vDateField,
.vTimeField {
    background: var(--bg-0) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 300 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--focus) !important;
    outline: none !important;
}

.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.submit-row input,
.object-tools a {
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
    background: #262c34 !important;
    border-color: #3a424d !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.object-tools a:hover,
.submit-row input:hover {
    background: #2a3038 !important;
    border-color: #454f5c !important;
    color: #e6eaf0 !important;
}

.addlink,
.changelink,
.deletelink,
.historylink,
.viewsitelink {
    color: var(--link) !important;
}

.login #header {
    border-radius: 0 !important;
}

.login #content {
    max-width: 440px;
}

#footer {
    color: #707a87 !important;
}