/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --body-bg: rgb(240, 240, 240);
        --content-bg: white;
        --shadowbox-bg: white;
        --body-color: #000000;
        --body-color-subtle: lightgray;
        --quote-bg: rgba(0, 0, 0, 0.06);
        --content-foreground-border: #ced4da;
        --content-background-selection: lightgray;
        --content-foreground-selection: rgb(210,210,210);
        --content-foreground-selection-text: rgb(0, 0, 0);
        --card-header-bg: rgba(0, 0, 0, 0.03);
        --tr-even-bg: #f2f2f2;
        --tr-uneven-bg: white;
        --quote-pre: darkblue;
        --icon-filter: invert(68%) sepia(2%) saturate(0%) hue-rotate(4deg) brightness(94%) contrast(90%);
        --icon-filter-button: invert();
        --icon-filter-hover: invert(20%) sepia(54%) saturate(6404%) hue-rotate(200deg) brightness(95%) contrast(101%);
        --secondary-btn-bg: #748595;
        --secondary-btn-border: #748595;
        --settled-selected-color: darkgreen;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #000000;
        --content-bg: rgb(40, 40, 40);
        --shadowbox-bg: rgb(50, 50, 50);
        --card-header-bg: rgb(50, 50, 50);
        --body-color: lightgray;
        --body-color-subtle: gray;
        --content-foreground-bg: rgb(65, 65, 65);
        --content-foreground-border: gray;
        --content-foreground-selection: #7e7e7e;
        --content-background-selection: rgb(100, 100, 100);
        --content-foreground-selection-text: lightgray;
        --quote-bg: rgba(255, 255, 255, 0.06);
        --hr-bg: rgb(120, 120, 120);
        --tr-even-bg: var(--shadowbox-bg);
        --tr-uneven-bg: var(--content-foreground-bg);
        --quote-pre: #0058ff82;
        --icon-filter: invert();
        --icon-filter-button: invert();
        --icon-filter-hover: invert(20%) sepia(54%) saturate(6404%) hue-rotate(200deg) brightness(95%) contrast(101%);
        --secondary-btn-bg: #6c757d;
        --secondary-btn-border: #6c757d;
        --settled-selected-color: #0d0;
    }
}

body {
    background-color: var(--body-bg);
    color: var(--body-color);
}

body.dark {
    --body-bg: #000000;
    --content-bg: rgb(40, 40, 40);
    --shadowbox-bg: rgb(50, 50, 50);
    --card-header-bg: rgb(50, 50, 50);
    --body-color: lightgray;
    --body-color-subtle: gray;
    --content-foreground-bg: rgb(65, 65, 65);
    --content-foreground-border: gray;
    --content-foreground-selection: #7e7e7e;
    --content-background-selection: rgb(100, 100, 100);
    --content-foreground-selection-text: lightgray;
    --quote-bg: rgba(255, 255, 255, 0.06);
    --hr-bg: rgb(120, 120, 120);
    --tr-even-bg: var(--shadowbox-bg);
    --tr-uneven-bg: var(--content-foreground-bg);
    --quote-pre: #0058ff82;
    --icon-filter: invert();
    --icon-filter-button: invert();
    --icon-filter-hover: invert(20%) sepia(54%) saturate(6404%) hue-rotate(200deg) brightness(95%) contrast(101%);
    --secondary-btn-bg: #6c757d;
    --secondary-btn-border: #6c757d;
    --settled-selected-color: #0d0;
}

body.light {
    --body-bg: rgb(240, 240, 240);
    --content-bg: white;
    --shadowbox-bg: white;
    --body-color: #000000;
    --body-color-subtle: lightgray;
    --quote-bg: rgba(0, 0, 0, 0.06);
    --content-foreground-border: #ced4da;
    --content-background-selection: lightgray;
    --content-foreground-selection: rgb(210,210,210);
    --content-foreground-selection-text: rgb(0, 0, 0);
    --card-header-bg: rgba(0, 0, 0, 0.03);
    --tr-even-bg: #f2f2f2;
    --tr-uneven-bg: white;
    --quote-pre: darkblue;
    --icon-filter: invert(68%) sepia(2%) saturate(0%) hue-rotate(4deg) brightness(94%) contrast(90%);
    --icon-filter-button: invert();
    --icon-filter-hover: invert(20%) sepia(54%) saturate(6404%) hue-rotate(200deg) brightness(95%) contrast(101%);
    --secondary-btn-bg: #748595;
    --secondary-btn-border: #748595;
    --settled-selected-color: darkgreen;
}

.shadowbox {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: var(--shadowbox-bg);
    padding: .5em;
    border-radius: 5px;
}

.shadowbox.mealdisplay:hover {
    background-color: var(--content-foreground-bg);
    cursor: pointer;
}

.card {
    background-color: var(--content-foreground-bg, #fff);
    border-color: var(--content-foreground-border, rgba(0, 0, 0, 0.125));
}

.card-header {
    background-color: var(--card-header-bg);
}

.form-control,
.form-control:hover,
.form-control:focus {
    background-color: var(--content-foreground-bg, #fff);
    color: var(--body-color, #495057);
    border-color: var(--content-foreground-border);
}

.input-group>.input-group-prepend>.input-group-text,
.input-group>.input-group-append>.input-group-text {
    background-color: var(--content-foreground-bg, #fff);
    color: var(--body-color, #495057);
    border-color: var(--content-foreground-border);
}

.btn-secondary {
    background-color: var(--secondary-btn-bg);
    border-color: var(--secondary-btn-border);
}

hr {
    background-color: var(--hr-bg);
}

img {
    max-width: 100%;
    margin: auto;
}

img.icon {
    max-width: unset;
    filter: var(--icon-filter);
}

button img.icon {
    filter: var(--icon-filter-button);
}

img.icon-lg {
    width: 1.5em;
}

img.icon-sm {
    width: 1em;
}

img.icon-xsm {
    width: .75em;
}

img.icon-md {
    width: 1.25em;
}

/* generated with https://codepen.io/sosuke/pen/Pjoqqp */
img.icon.active {
    filter: invert(44%) sepia(66%) saturate(953%) hue-rotate(155deg) brightness(99%) contrast(101%);
}

img.icon-danger {
    filter: invert(25%) sepia(96%) saturate(7497%) hue-rotate(358deg) brightness(109%) contrast(119%);
}

img.icon-success {
    filter: invert(24%) sepia(25%) saturate(1418%) hue-rotate(81deg) brightness(100%) contrast(91%);
}

img.icon.disabled {
    filter: invert(56%) sepia(1%) saturate(0%) hue-rotate(12deg) brightness(95%) contrast(93%);
}

button:not(.btn) img.icon:hover {
    filter: var(--icon-filter-hover);
}

.hover-highlight-foreground:hover {
    background-color: var(--content-foreground-selection);
}

.hover-highlight-background:hover,
.hover-highlight-background:-moz-drag-over {
    background-color: var(--content-background-selection);
}

.hover-highlight-background.active {
    background-color: var(--content-foreground-selection);
    color: var(--content-foreground-selection-text);
    font-weight: bold;
}

.clickable:not(.active) {
    cursor: pointer;
}

/* ------------------------------------------------------------ */

.md table,
.md th,
.md td {
    border: 1px solid #dcb;
}

table {
    margin-bottom: .5rem;
    margin-top: .5rem;
    width: 100%;
}

thead {
    font-style: oblique;
}

.md pre {
    background-color: rgb(150, 150, 150);
    padding: .5em;
    border: 1px solid rgb(125, 125, 125);
    border-radius: 5px;
}

.md blockquote {
    background: var(--quote-bg);
    border-left: 5px solid var(--quote-pre);
    margin: 0.5em 5px;
    padding: 1em 5px .25em;
    quotes: "“" "”" "‘" "’";
    font-style: italic;
}

.md blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

.md blockquote p:last-child {
    margin-bottom: 0;
}

.md img {
    max-width: 100%;
}

.md table {
    width: 100%;
}

.md th {
    border-bottom: 1px solid lightblue;
}

.md tr:nth-child(even) {
    background-color: var(--tr-even-bg);
}

.md tr:nth-child(odd) {
    background-color: var(--tr-uneven-bg);
}

.btn {
    padding: .25em .25em;
}

ul,
ol,
dl {
    padding-left: 1.5em;
}

.md ul .form-check {
    left: -1.125em;
}

.md .heading-permalink {
    visibility: hidden;
}

.md h1:hover .heading-permalink,
.md h2:hover .heading-permalink,
.md h3:hover .heading-permalink,
.md h4:hover .heading-permalink,
.md h5:hover .heading-permalink,
.md h6:hover .heading-permalink {
    visibility: visible;
}

.a:hover {
    text-decoration: underline;
}

.md h1,
.md h2 {
    text-decoration: underline;
    margin-bottom: .75em;
}

.md h5 {
    font-weight: bold;
}

.md h6 {
    font-style: italic;
}

.rmsc {
    --rmsc-main: #4285f4 !important;
    --rmsc-hover: var(--content-foreground-selection) !important;
    --rmsc-selected: var(--content-background-selection) !important;
    --rmsc-border: var(--content-foreground-border) !important;
    --rmsc-gray: #aaa !important;
    --rmsc-bg: var(--content-bg) !important;
    --rmsc-p: 10px !important;
    --rmsc-radius: 4px !important;
    --rmsc-h: 38px !important;
    min-width: 20em;
}