/* Light theme */
body {
    background: #ffffff;
}

/* Dark theme */
body.dark-mode {
    background: #000000;
    color: #eeeeee;
}

body.dark-mode #cover {
    box-shadow: 0 6px 16px #cccccc;
}

body.dark-mode .breadcrumbs>*.current,
body.dark-mode .breadcrumbs>*.current a {
    color: #cccccc;
}

body.dark-mode .content {
    background: #666d7a;
    background: linear-gradient(0deg, rgba(41, 64, 64, 1) 0%, rgba(41, 64, 64, 1) 36%, rgba(23, 23, 23, 1) 100%);
    color: whitesmoke;
}

body.dark-mode .list-item {
    background: #0c0c0c;
    border: 1px solid #383838;
}

body.dark-mode .premium-row{
    background: #73705c;
    background: linear-gradient(0deg, rgba(115, 112, 92, 1) 0%, rgba(112, 107, 70, 1) 50%, rgba(36, 35, 25, 1) 100%);
}

body.dark-mode .list-item .rank {
    background-color: #333333;
}

body.dark-mode .list-item .details {
    background: #333333;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

body.dark-mode .label.secondary {
    background-color: #272727;
    color: #c3c3c3;
}

body.dark-mode blockquote {
    color: whitesmoke;
}

body.dark-mode .button {
    color: #ffffff;
}

.comments_container {
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #888;

    max-height: 300px;
    overflow-y: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body.dark-mode .comments_container {
    --scrollbar-track: #222;
    --scrollbar-thumb: #777;
}

.comments_container::-webkit-scrollbar {
    width: 10px;
}

.comments_container::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.comments_container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
}

body.dark-mode .comment {
    background-color: #414141;
    border: 1px solid #333;
    color: #ccc;
}

body.dark-mode .comment abbr.timeago {
    color: lightblue;
}

body.dark-mode .pricing-table {
    background-color: black;
    border: 1px solid #111111;
    color: white;
}

body.dark-mode .pricing-table .description {
    background-color: #777777;
    color: #ccc;
    border-bottom: dotted 1px #333;
}

body.dark-mode .pricing-table .bullet-item {
    background-color: #414141;
    border-bottom: 1px dotted #111111;
    color: #ddd;
}

body.dark-mode .progress {
    background-color: #060606;
    border: 1px solid #000000;
}

body.dark-mode .progress.secondary .meter {
    background: #575757;
}

body.dark-mode .top-bar .name h1 a,
body.dark-mode .top-bar a {
    color: #ffffff;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode li,
body.dark-mode dl {
    color: #ffffff;
}

body.dark-mode a {
    color: #66b3ff;
}

body.dark-mode .panel.callout {
    background: #425157;
}

body.dark-mode .panel.callout h1,
body.dark-mode .panel.callout h2,
body.dark-mode .panel.callout h3,
body.dark-mode .panel.callout h4,
body.dark-mode .panel.callout h5,
body.dark-mode .panel.callout h6,
body.dark-mode .panel.callout p,
body.dark-mode .panel.callout li,
body.dark-mode .panel.callout dl {
    color: #fff;
}

body.dark-mode label {
    color: #dddddd;
}

body.dark-mode .panel:not(.callout), body.dark-mode .breadcrumbs {
    background: #121212;
    border-color: #444444;
    color: #eeeeee;
}

body.dark-mode .button {
    background: #1976b5;
}

body.dark-mode span.prefix, body.dark-mode label.prefix {
    background: #020202;
    color: #ccc;
    border-color: #333;
}

body.dark-mode fieldset legend {
    background: #121212;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #252525;
    border-color: #555555;
    color: #ffffff;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background: #252525;
    border-color: #555555;
    color: #ffffff;
    box-shadow: 1px 1px 10px #ccc;
}

body.dark-mode table {
    background: #000000;
    border: solid 1px #444;
}

body.dark-mode table thead {
    background: #0a0a0a;
    border-bottom: 1px solid #333;
}

body.dark-mode table tr th, body.dark-mode table tr td {
    color: #ccc;
}

body.dark-mode table tr.even,
body.dark-mode table tr.alt,
body.dark-mode table tr:nth-of-type(even) {
    background: #090909;
}

body.dark-mode .reveal-modal {
    background-color: #000;
    border: solid 1px #eeeeee;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}