.mind-page {
    --mind-surface: #ffffff;
    --mind-surface-muted: #f6f8fa;
    --mind-text: #24292f;
    --mind-muted: #57606a;
    --mind-border: #d0d7de;
    --mind-link: #0969da;
    width: 1170px;
    max-width: calc(100% - 30px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    color: var(--mind-text);
}

.mind-page .panel,
.mind-page .panel-body,
.mind-page .modal-content,
.mind-page .tab-content,
.mind-page .markdown-body,
.mind-page .editormd-preview-container,
.mind-page .editormd-html-preview {
    border-color: var(--mind-border);
    background: var(--mind-surface);
    color: var(--mind-text);
}

.mind-page a { color: var(--mind-link); }
.mind-page img { max-width: 100%; height: auto; }
.mind-page .text-muted,
.mind-page .blog-meta,
.mind-page small { color: var(--mind-muted) !important; }

.mind-page .table {
    width: 100%;
    margin-bottom: 20px;
    border-color: var(--mind-border);
    color: var(--mind-text);
}

.mind-page .table > thead > tr > th,
.mind-page .table > tbody > tr > td,
.mind-page .table > tbody > tr > th {
    border-color: var(--mind-border);
}

.mind-page .table > thead > tr > th,
.mind-page .table-striped > tbody > tr:nth-of-type(odd),
.mind-page .markdown-body table th {
    background: var(--mind-surface-muted);
}

.mind-page .form-control,
.mind-page select,
.mind-page textarea {
    border-color: var(--mind-border);
    background: var(--mind-surface);
    color: var(--mind-text);
}

.mind-page .btn {
    border-radius: 6px;
    font-weight: 600;
}

.mind-page .btn-default,
.mind-page .btn-secondary {
    border-color: var(--mind-border);
    background: var(--mind-surface);
    color: var(--mind-text);
}

.mind-page .btn-default:hover,
.mind-page .btn-default:focus,
.mind-page .btn-secondary:hover,
.mind-page .btn-secondary:focus {
    border-color: var(--mind-link);
    background: var(--mind-surface-muted);
    color: var(--mind-text);
}

.mind-page .nav-tabs { border-bottom-color: var(--mind-border); }
.mind-page .nav-tabs > li > a {
    border-color: transparent;
    color: var(--mind-muted);
}

.mind-page .nav-tabs > li.active > a,
.mind-page .nav-tabs > li.active > a:hover,
.mind-page .nav-tabs > li.active > a:focus {
    border-color: var(--mind-border);
    border-bottom-color: var(--mind-surface);
    background: var(--mind-surface);
    color: var(--mind-text);
}

.mind-page .markdown-body,
.mind-page .editormd-html-preview {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.8;
}

.mind-page .markdown-body table {
    width: 100%;
    margin-bottom: 16px;
    border-collapse: collapse;
}

.mind-page .markdown-body table th,
.mind-page .markdown-body table td {
    padding: 8px 12px;
    border: 1px solid var(--mind-border);
    text-align: left;
}

.mind-page .markdown-body pre,
.mind-page .markdown-body .codehilite,
.mind-page .markdown-body pre.prettyprint {
    padding: 12px;
    overflow-x: auto;
    border: 1px solid var(--mind-border);
    border-radius: 6px;
    background: #f6f8fa !important;
    color: #24292f !important;
}

.mind-page .markdown-body code,
.mind-page .markdown-body pre.prettyprint code {
    background: transparent !important;
    color: inherit !important;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
}

.mind-page .markdown-body pre.prettyprint ol.linenums,
.mind-page .markdown-body pre.prettyprint ol.linenums > li {
    background: transparent !important;
    color: #8c959f !important;
}

.mind-page .markdown-body pre.prettyprint .pln { color: #24292f !important; }
.mind-page .markdown-body pre.prettyprint .kwd { color: #cf222e !important; }
.mind-page .markdown-body pre.prettyprint .typ { color: #8250df !important; }
.mind-page .markdown-body pre.prettyprint .str { color: #0a3069 !important; }
.mind-page .markdown-body pre.prettyprint .com { color: #6e7781 !important; }
.mind-page .markdown-body pre.prettyprint .lit { color: #0550ae !important; }
.mind-page .markdown-body pre.prettyprint .pun,
.mind-page .markdown-body pre.prettyprint .opn,
.mind-page .markdown-body pre.prettyprint .clo { color: #24292f !important; }
.mind-page .markdown-body pre.prettyprint .fun { color: #8250df !important; }

[data-theme="dark"] .mind-page {
    --mind-surface: #161b22;
    --mind-surface-muted: #21262d;
    --mind-text: #f0f6fc;
    --mind-muted: #b1bac4;
    --mind-border: #30363d;
    --mind-link: #58a6ff;
}

[data-theme="dark"] .mind-page,
[data-theme="dark"] .mind-page .panel,
[data-theme="dark"] .mind-page .panel-body,
[data-theme="dark"] .mind-page .modal-content,
[data-theme="dark"] .mind-page .tab-content,
[data-theme="dark"] .mind-page .table,
[data-theme="dark"] .mind-page .markdown-body,
[data-theme="dark"] .mind-page .editormd-preview-container,
[data-theme="dark"] .mind-page .editormd-html-preview {
    background-color: var(--mind-surface) !important;
    color: var(--mind-text) !important;
}

[data-theme="dark"] .mind-page h1,
[data-theme="dark"] .mind-page h2,
[data-theme="dark"] .mind-page h3,
[data-theme="dark"] .mind-page h4,
[data-theme="dark"] .mind-page h5,
[data-theme="dark"] .mind-page h6,
[data-theme="dark"] .mind-page p,
[data-theme="dark"] .mind-page li,
[data-theme="dark"] .mind-page td,
[data-theme="dark"] .mind-page th,
[data-theme="dark"] .mind-page label,
[data-theme="dark"] .mind-page strong,
[data-theme="dark"] .mind-page span {
    color: var(--mind-text);
}

[data-theme="dark"] .mind-page .text-muted,
[data-theme="dark"] .mind-page .blog-meta,
[data-theme="dark"] .mind-page small {
    color: var(--mind-muted) !important;
}

[data-theme="dark"] .mind-page .table > thead > tr > th,
[data-theme="dark"] .mind-page .table-striped > tbody > tr:nth-of-type(odd),
[data-theme="dark"] .mind-page .markdown-body table th {
    background: var(--mind-surface-muted) !important;
}

[data-theme="dark"] .mind-page .form-control,
[data-theme="dark"] .mind-page select,
[data-theme="dark"] .mind-page textarea {
    border-color: var(--mind-border) !important;
    background: #0d1117 !important;
    color: var(--mind-text) !important;
}

[data-theme="dark"] .mind-page .nav-tabs > li > a {
    background: var(--mind-surface);
    color: var(--mind-muted);
}

[data-theme="dark"] .mind-page .nav-tabs > li.active > a,
[data-theme="dark"] .mind-page .nav-tabs > li.active > a:hover,
[data-theme="dark"] .mind-page .nav-tabs > li.active > a:focus {
    border-color: #ffffff;
    border-bottom-color: #ffffff;
    background: #ffffff !important;
    color: #111111 !important;
}

[data-theme="dark"] .mind-page .nav-tabs > li.active > a * {
    color: #111111 !important;
}

[data-theme="dark"] .mind-page .markdown-body pre,
[data-theme="dark"] .mind-page .markdown-body .codehilite,
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint {
    border-color: var(--mind-border) !important;
    background: #0d1117 !important;
    color: #e6edf3 !important;
}

[data-theme="dark"] .mind-page .markdown-body pre.prettyprint ol.linenums,
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint ol.linenums > li {
    background: transparent !important;
    color: #6e7681 !important;
}

[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .pln { color: #e6edf3 !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .kwd { color: #ff7b72 !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .typ { color: #d2a8ff !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .str { color: #a5d6ff !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .com { color: #8b949e !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .lit { color: #79c0ff !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .pun,
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .opn,
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .clo { color: #e6edf3 !important; }
[data-theme="dark"] .mind-page .markdown-body pre.prettyprint .fun { color: #d2a8ff !important; }

[data-theme="dark"] .mind-page .btn-default,
[data-theme="dark"] .mind-page .btn-secondary {
    border-color: var(--mind-border) !important;
    background: var(--mind-surface-muted) !important;
    color: var(--mind-text) !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mind-page { width: 970px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mind-page { width: 750px; }

    .mind-page > .panel > .panel-body { padding: 18px; }
}

@media (max-width: 767px) {
    .mind-page {
        width: 100%;
        max-width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }

    .mind-page > .panel { margin-bottom: 12px; }
    .mind-page > .panel > .panel-body { padding: 12px; }
    .mind-page h2 { font-size: 22px; }

    .mind-page .nav-tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .mind-page .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    .mind-page .form-inline .form-control {
        display: block;
        width: 100% !important;
        margin-bottom: 8px;
    }

    .mind-page .table-responsive,
    .mind-page .markdown-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mind-page .table-responsive {
        margin-right: -10px;
        margin-left: -10px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .mind-page .panel-heading .text-right {
        margin-top: 6px;
        text-align: left;
    }

    .mind-page .btn-lg {
        min-height: 42px;
        padding: 9px 14px;
        font-size: 15px;
    }

    .mind-page .markdown-body {
        font-size: 15px;
    }

    .mind-page .markdown-body table {
        min-width: 560px;
    }

    .mind-page .markdown-body table th,
    .mind-page .markdown-body table td {
        padding: 7px 8px;
    }

    .mind-page .markdown-body pre {
        max-width: 100%;
        overflow-x: auto;
    }
}