:root {
    --bg: #ffe2d2;
    --element-bg: #efefef;
    --element-border: #aaa;
    --middle-color: #777;
    --content-bg: #fff;
    --content-bg-control: #eee;
    --content-text-control: #222;
    --text-color: #242424;
    --link-color: #404040;
    --link-hover-color: #101010;
    --card-table-cell-bg: #fff;
    --card-table-cell-bg-hover: #eee;
    --card-table-cell-text: #333;
    --card-table-cell-text-hover: #000;
}

.theme-dark {
    --bg: #111;
    --element-bg: #444;
    --element-border: #222;
    --middle-color: #777;
    --content-bg: #666;
    --content-bg-control: #666;
    --content-text-control: #eee;
    --text-color: #d4d4d4;
    --link-color: #b1b1b1;
    --link-hover-color: #FFF;
    --card-table-cell-bg: #666;
    --card-table-cell-bg-hover: #777;
    --card-table-cell-text: #eee;
    --card-table-cell-text-hover: #fff;
}

.modal .modal-content {
    background-color: var(--content-bg);
    color: var(--content-text-control);
}

.form-control {
    border-color: var(--middle-color);
    background-color: var(--content-bg);
    color: var(--content-text-control);
}

.form-control:focus {
    background-color: var(--content-bg-control);
    color: var(--content-text-control);
}

body {
    color: var(--text-color);
    background: var(--bg);
    background: linear-gradient(45deg, var(--bg), var(--element-bg), var(--bg));
}

body > header > nav {
    background-color: var(--element-bg);
    border-bottom: 1px solid var(--element-border);
    box-shadow: 0 0 10px #222;
}

.navbar-brand {
    color: var(--link-color);
    border-bottom: none;
}

.navbar-brand:hover {
    color: var(--link-hover-color);
}

body > footer {
    background-color: var(--element-bg);
    border-top: 1px solid var(--element-border);
    box-shadow: 0 0 10px #222;
    color: var(--text-color) !important;
}

body > footer .row > div {
    color: var(--text-color);
}

body a.nav-link,
body a {
    color: var(--link-color);
    border-bottom-color: var(--link-color);
}

body a.nav-link::after,
body a::after {
    background-color: var(--link-hover-color);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
body a.nav-link:hover,
body a:hover {
    color: var(--link-hover-color);
}

.card.with-shadow {
    box-shadow: 0 0 7px #222;
}

.card .card-footer,
.card .card-header {
    background-color: var(--element-bg);
    color: var(--text-color);
}

.card .card-body {
    background-color: var(--content-bg);
    color: var(--text-color);
}

.navbar-toggler {
    color: var(--text-color);
    border-color: var(--text-color);
}

.navbar-toggler:focus {
    border-width: 1px;
    box-shadow: none;
}

.table > :not(caption) > * > * {
    background-color: var(--card-table-cell-bg) !important;
    color: var(--card-table-cell-text) !important;
}

.table > :not(caption) > *:hover > * {
    background-color: var(--card-table-cell-bg-hover) !important;
    color: var(--card-table-cell-text-hover) !important;
}

.theme-dark .text-danger {
    color: #810000 !important;
}

.theme-dark .text-success {
    color: #134900 !important;
}

.theme-dark .text-primary {
    color: #180081 !important;
}

.list-group-item {
    background-color: var(--content-bg) !important;
}