@import './ideanight/source/style/css/all.min.css';
@import './ideanight/source/font/fonts.css';

:root {
    --select-text-bg-color: #214283;
    --focus-color: #4b6eaf;
    --codeblockbg-color: #2b2b2b;
    --codeblockfont-color: #bacde2;
    --titlebefore-color: #ff5d52;
    --codeblocknum-color: #606366;
    --blockquoteicon-color: #595b5d;
    --blockquotebg-color: #323232;
    --ulol-color: #919191;
    --tableevenrow-color: #313335;
    --tableoddrow-color: #3c3f41;
    --tablefocusrow-color: #0d293e;
    --tableborder-color: #555555;
    --tablethbg-color: #2b2b2b;
    --toc-color: #4f8ffa;
    --atext-color: #4f8ffa;
    --abottom-color: #4f8ffa;
    --code-color: #ff0058;
    --codebg-color: #3d3136;
    --footnote-color: #e96900;
    --footnotebg-color: #214283;
    --highlight-color: red;
    --highlightbg-color: yellow;
    --split-color: #555555;
    --taskborder-color: red;
    --taskfocus-color: #499c54;
    --spannote-color: #e91e64;
    --emptext-color: #fe5f58;
    --hidetextcover-color: #3c3f41;
    --hidetext-color: #bacde2;
    --spanbtn-color: #ec4141;
    --detailstxt-color: #f00;
    --detailsbg-color: #313335;
    --detailsborder-color: #555555;
    --body-color: #bacde2;
    --para-color: #bacde2;
    --body-font: 'Source Sans Pro', '微软雅黑', 'Helvetica Neue', consoles, sans-serif;
    --code-font: 'JetBrains Mono';
}

html {
    font-size: 14px;
}

body {
    background: #2b2b2b;
    font-family: var(--body-font);
    font-weight: normal;
    color: var(--body-color);
    -webkit-font-smoothing: antialiased;
    line-height: 17px;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    tab-size: 4;
}

#write {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 160px;
}

#write p {
    line-height: 1.8rem;
    word-spacing: .05rem;
    color: var(--para-color);
}

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

#write a {
    padding: 0 4px;
    transition: .3s;
    text-decoration: none;
}

#write a:hover {
    border-radius: 6px;
    cursor: pointer;
}

#write a[href*="muggledy"] {
    color: var(--atext-color);
}

#write a[href*="muggledy"]:hover {
    color: var(--emptext-color);
    background-color: #313335;
    text-decoration: none;
}

#write h2 a, #write h4 a, #write a[alt="null"] {
    border-bottom: none !important;
    color: var(--code-color);
}

h2 a:hover:before, h4 a:hover:before, #write a[alt="null"]:hover:before {
    content: none !important;
}

#write a:empty, #write a[alt="none"] {
    padding-left: 0px;
    padding-right: 0px;
}

#write a[alt="none"] span {
    display: none;
}

#write a[alt="null"]:hover {
    background-color: inherit;
    border-radius: 0px;
    color: var(--atext-color);
}

#write a.md-toc-inner {
    line-height: 1.6;
    white-space: pre-line;
    border-bottom: none;
    color: var(--toc-color);
}

.md-toc {
    margin-top: 50px;
    padding-bottom: 20px;
}

#write a.md-toc-inner:hover {
    text-decoration: underline;
    color: var(--toc-color);
    background-color: inherit;
    border-radius: 0px;
}

#write a.md-toc-inner code {
    color: var(--toc-color);
    background-color: #f3f4f4;
}

#write a.md-toc-inner:hover:before {
    content: none !important;
}

h1,h2,h3,h4,h5,h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    color: var(--body-color);
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}

h1 code {
    font-size: inherit !important;
}

h2 code {
    font-size: inherit !important;
}

h3 code {
    font-size: inherit !important;
}

h4 code {
    font-size: inherit !important;
}

h5 code {
    font-size: inherit !important;
}

h6 code {
    font-size: inherit !important;
}

h1 {
    font-size: 2.2em;
    line-height: 1.2;
}

h1::before {
    content: 'H1' !important;
    color: var(--titlebefore-color);
}

h2 {
    font-size: 1.8em;
}

h2::before {
    content: 'H2' !important;
    color: var(--titlebefore-color);
}

#write > h2.md-focus:before {
    color: var(--focus-color);
}

#write > h2.md-focus {
    border-bottom-color: var(--focus-color);
}

h3 {
    font-size: 1.4em;
}

#write h3::before {
    content: 'H3';
    top: 0.18rem;
}

h4 {
    font-size: 1.2em;
}

#write h4::before {
    content: 'H4';
    top: 0.18rem;
}

#write > h3.md-focus:before,
#write > h4.md-focus:before {
    width: auto;
    height: auto;
    background-color: var(--focus-color);
    color: #ffffff;
}

#write > h3.md-focus,
#write > h4.md-focus {
    border-color: var(--focus-color);
}

#write h1::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--titlebefore-color);
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: small-caps;
    white-space: nowrap;
    border: 0;
    line-height: 50px;
}

#write h2::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--titlebefore-color);
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: small-caps;
    white-space: nowrap;
    border: 0;
    line-height: 45px;
}

#write h3::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--titlebefore-color);
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: small-caps;
    white-space: nowrap;
    border: 0;
    line-height: 35px;
}

#write h4::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--titlebefore-color);
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: small-caps;
    white-space: nowrap;
    border: 0;
    line-height: 32px;
}

#write h5::before,
#write h6::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--titlebefore-color);
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: small-caps;
    white-space: nowrap;
    border: 0;
}

#write h5.md-focus:before, #write h6.md-focus:before {
    color: var(--focus-color);
}

#write h5, #write h6 {
    font-size: 1rem;
}

#write h5::before {
    content: 'H5';
    top: 0.18rem;
}

#write h6::before {
    content: 'H6';
    top: 0.18rem;
}

p,blockquote,ul,ol,dl,table {
    margin: 0.8em 0;
}

li > ol,li > ul {
    margin: 0 0;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}

#write ol,
#write ul {
    padding-left: 35px;
    margin: .5rem 0;
}

#write ol > li > *,
#write ul > li > * {
    font-weight: normal;
}

#write ol > li > *:not(ol):not(ul),
#write ul > li > *:not(ol):not(ul) {
    padding-left: .25rem;
}

blockquote {
    border-left: 4px solid var(--blockquoteicon-color);
    padding: 5px 15px;
    color: #3f3f3f;
    background-color: var(--blockquotebg-color);
    border-radius: 1px;
    position: relative;
}

table {
    padding: 0;
    word-break: initial;
    cursor: text;

    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: auto;
    page-break-inside: auto;
    text-align: left;
    text-indent: initial;
}

table tr:nth-child(2n+1) {
    background-color: var(--tableoddrow-color);
}

table tr:nth-child(2n) {
    background-color: var(--tableevenrow-color);
}

table th {
    font-weight: bold;
    border-width: 1px 1px 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: var(--tableborder-color);
    border-right-color: var(--tableborder-color);
    border-left-color: var(--tableborder-color);
    border-image: initial;
    border-bottom-style: initial;
    border-bottom-color: initial;
    margin: 0px;
    padding: 6px 13px;
}

table tr th {
    font-weight: bold;
    border: 1px solid var(--tableborder-color);
    background-color: var(--tablethbg-color);
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr td {
    border: 1px solid var(--tableborder-color);
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

table tr:hover {
    background-color: var(--tablefocusrow-color);
}

#write .CodeMirror pre {
    font-family: var(--code-font);
    font-size: 12px;
    padding-left: 5px;
    letter-spacing: 0.1px;
}

.md-fences {
    background: var(--codeblockbg-color);
    border-radius: 3px;
    color: var(--codeblockfont-color);
    padding: 0 4px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.6em;
}

.cm-s-inner .CodeMirror-linenumber {
    color: var(--codeblocknum-color);
}

#write .CodeMirror-cursors .CodeMirror-cursor {
    border-left: 2px solid var(--focus-color);
}

@media only screen and (max-width: 800px) {
    .MathJax_SVG_Display svg {
        max-width: inherit !important;
    }
}

#write code, div code {
    padding: 2px 4px;
    border-radius: 2px;
    font-family: var(--body-font);
    font-size: 0.9rem;
    color: var(--code-color);
    background-color: var(--codebg-color);
}

#write .md-footnote {
    background-color: var(--footnotebg-color);
    color: var(--footnote-color);
}

#write sup.md-footnote a {
    color: inherit !important;
    border-bottom: none;
    padding: 1px;
    background-color: inherit;
}

#write .md-diagram-panel {
    position: relative;
    margin: 24px auto;
}

#write .md-focus .md-diagram-panel {
    border: 1px solid red;
    border-radius: 4px;
}

#write span[md-inline="highlight"] mark {
    background-color: var(--highlightbg-color);
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 2px;
    color: var(--highlight-color);
    font-weight: 500;
}

hr {
    height: 1px;
    padding: 0;
    margin: 16px 0;
    background-color: var(--split-color);
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

#write del {
    padding: 1px 2px;
}

.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
    color: #22a2c9;
}

.cm-s-inner .cm-string {
    color: #22a2c9;
}

.md-task-list-item > input {
    margin-left: -1.3em;
    margin-top: 0.4rem;
    -webkit-appearance: none;
}

.md-task-list-item > input:before {
    content: '';
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    vertical-align: middle;
    text-align: center;
    font-size: 0.8rem;
    color: white;
    border-radius: 2px;
    border: 1px solid var(--taskborder-color);
    margin-top: -0.4rem;
    transition: all 0.2s linear;
}

.md-task-list-item > input:checked:before,
.md-task-list-item > input[checked]:before {
    content: '\2714';
    font-size: 0.625rem;
    color: white;
    border: 1px solid var(--taskfocus-color);
    background-color: var(--taskfocus-color);
    line-height: .8rem;
}

.md-task-list-item:before {
    content: none !important;
}

#write input[type=checkbox] {
    position: absolute;
    top: 60%;
    transform: translateY(-60%);
    left: -6px;
    background-color: inherit;
}

.md-diagram-panel svg {
    max-width: inherit !important;
    height: inherit !important;
}

#write pre.md-meta-block {
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
    bottom: .375rem;
}

#write > h3.md-focus:before {
    left: -1.5625rem;
    top: .375rem;
}

#write > h4.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write > h5.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write > h6.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

.md-image {
    margin: 24px auto;
}

.md-image img {
    border-radius: 4px;
}

.md-image img[alt|='shadow'] {
    box-shadow: #84A1A8 0px 10px 15px;
    background-size: 100% 100%;
    cursor: default;
    border-left: 0;
    border-right: 0;
}

.md-image img[alt|='blur'] {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -ms-filter: blur(6px);
    -o-filter: blur(6px);
    transition: all 0.2s linear;
}

.md-image img[alt|='blur']:hover {
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
}

.md-image > .md-meta {
    border-radius: 3px;
    font-family: var(--body-font);
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
}

.md-tag {
    color: inherit;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}

.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: var(--body-font);
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
    visibility: visible;
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: var(--focus-color);
}

@media print {
    .typora-export * {
        -webkit-print-color-adjust: exact;
    }

    html {
        font-size: 16px !important;
    }

    body {
        font-family: Times, 'SimSun', serif !important;
        color: #000000 !important;
    }

    p {
        color: #000000 !important;
    }

    table,
    pre {
        page-break-inside: avoid;
    }

    pre {
        word-wrap: break-word;
    }

    .MathJax_SVG_Display svg {
        max-width: 100% !important;
    }
}

#write ul li, #write ol li, #write .ul .li, #write .ol .li {
    list-style-type: none;
}

#write ul > li:not(.tab):before, #write .ul > .li:not(.tab):before {
    margin-left: -9px;
    margin-top: 10px;
    width: 6px;
    height: 6px;
    border: .1em solid var(--ulol-color);
    border-radius: 1em;
    background: 0 0;
    content: '';
    line-height: .42em;
}

#write ol li:before, #write ul li:before, #write .ol .li:before, #write .ul .li:before {
    position: absolute;
    background: #66696b;
    color:  var(--body-color);
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

#write ol li:first-child, #write .ol .li:first-child {
    counter-reset: li;
}

#write ol li:hover:before, #write ul li:hover:before, #write .ol .li:hover:before, #write .ul .li:hover:before {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

#write ul > li:not(.tab):hover:before, #write .ul > .li:not(.tab):hover:before {
    border-color: var(--focus-color);
}

#write ol > li:before, #write .ol > .li:before {
    margin-top: 6px;
    margin-left: -14px;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    content: counter(li);
    counter-increment: li;
    text-align: center;
    font-size: 11px;
    font-family: var(--body-font);
    line-height: 11px;
}

#write ul li *, #write ol li *, #write .ul .li *, #write .ol .li * {
    margin-top: 0px;
    margin-bottom: 0px;
}

#write ul li, #write ol li, #write .ul .li, #write .ol .li {
    margin-top: 7px;
    margin-bottom: 7px;
}

font {
    display: inline;
    padding: .2em .6em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--spannote-color);
}

font[title="red"] {
    background-color: #e91e64;
}

font[title="blue"] {
    background-color: #02aaf4;
}

font[title="yellow"] {
    background-color: #ffc50a;
}

font[title="green"] {
    background-color: #8bc34a;
}

font[title="gray"] {
    background-color: #4c4c4c;
}

span[alt='emp'] {
    border-bottom: 4px dotted var(--emptext-color);
}

span[alt='underline'] {
    border-bottom: 2px solid var(--emptext-color);
}

span[alt='wavy'] {
    text-decoration-style: wavy;
    text-decoration-line: underline;
    text-decoration-color: var(--emptext-color);
}

details {
    display: block;
    padding: 16px;
    margin: 1em 0;
    border-radius: 4px;
    background: #3c3f41;
    font-size: 14px;
    -webkit-transition: all .28s ease;
    -moz-transition: all .28s ease;
    -o-transition: all .28s ease;
    -ms-transition: all .28s ease;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    border: 1px solid #555555;
}

summary {
    display: list-item;
}

details summary {
    cursor: pointer;
    padding: 16px;
    margin: -16px;
    border-radius: 4px;
    color: var(--detailstxt-color);
    font-size: .875rem !important;
    font-weight: 700;
    position: relative;
    line-height: normal;
}

details > summary {
    background: var(--detailsbg-color);
}

details[open] {
    border-color: #555555;
    background: #3c3f41;
}

details[open] > summary {
    color: #ff5d52;
    margin-bottom: 0;
}

details[open] > summary {
    border-bottom: 1px solid var(--detailsborder-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

summary:focus {
    outline: none !important;
}

video:focus {
    outline: none !important;
}

audio:focus {
    outline: none !important;
}

span[alt="hide"] {
    color: transparent;
    background: var(--hidetextcover-color);
    border-radius: 2px;
    -webkit-transition: all .28s ease;
    -moz-transition: all .28s ease;
    -o-transition: all .28s ease;
    -ms-transition: all .28s ease;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
}

span[alt="hide"]:hover {
    color: var(--hidetext-color);
    background: 0 0
}

@-webkit-keyframes rainbowan {
    to {
        background-position: -2000vw;
    }
}

@keyframes rainbowan {
    to {
        background-position: -2000vw;
    }
}

span[alt="rainbow"], span[alt="rainbow"] * {
    padding-top: 3px;
    background-image: linear-gradient(to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
    background-size: 110vw;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-animation: rainbowan 60s linear infinite;
    animation: rainbowan 60s linear infinite;
}

span[alt="modern"] {
    display: inline;
    padding: 5px 10px;
    border-radius: 20px;
    font-family: var(--body-font);
    font-size: 1em;
    letter-spacing: .2em;
    color: red;
    text-shadow: 0 8px 9px #c4b59d, 0 -2px 1px #fff;
    font-weight: 700;
    background: linear-gradient(to bottom, #ece4d9 0, #e9dfd1 100%);
}

span[alt="btn"] {
    color: var(--spanbtn-color);
    border: 1px solid var(--spanbtn-color);
    padding: 3px 4px 2px;
    margin: 4px;
    line-height: 1.1;
    border-radius: 2px;
}

#write span[alt="btn"] a {
    color: var(--spanbtn-color);
    border-bottom: none;
    background-color: inherit;
    transition: none;
}

span[alt="btn"]:hover {
    color: var(--focus-color);
    border: 1px solid var(--focus-color);
}

#write span[alt="btn"]:hover a {
    color: var(--focus-color);
}

@-webkit-keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -1px -1px 0 #ff0048, 1px 1px 0 #3234ff
    }
    50% {
        text-shadow: 1px -1px 0 #ff0048, -1px 1px 0 #3234ff
    }
    75% {
        text-shadow: -1px 1px 0 #ff0048, 1px -1px 0 #3234ff
    }
    to {
        text-shadow: 1px 1px 0 #ff0048, -1px -1px 0 #3234ff
    }
}

@keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -1px -1px 0 #ff0048, 1px 1px 0 #3234ff
    }
    50% {
        text-shadow: 1px -1px 0 #ff0048, -1px 1px 0 #3234ff
    }
    75% {
        text-shadow: -1px 1px 0 #ff0048, 1px -1px 0 #3234ff
    }
    to {
        text-shadow: 1px 1px 0 #ff0048, -1px -1px 0 #3234ff
    }
}

span[alt="shake"] {
    -webkit-animation: uk-text-shadow-glitch .95s cubic-bezier(1, -1.91, 0, 2.79) 0s infinite normal both running;
    animation: uk-text-shadow-glitch .95s cubic-bezier(1, -1.91, 0, 2.79) 0s infinite normal both running;
}

:root {
    --bg-color: var(--tablethbg-color);
    --primary-color: #428bca;
    --monospace: "Lucida Console", Consolas, "Courier", monospace;
    --text-color: var(--body-color);
    --active-file-bg-color: var(--focus-color);
    --active-file-text-color: inherit;
    --item-hover-bg-color: var(--focus-color);
    --item-hover-text-color: inherit;
    --md-char-color: #ef5350;
    --active-file-border-color: #777;
    --select-text-font-color: auto;
}

#write div.md-toc-tooltip {
    background-color: var(--tablethbg-color);
    border-color: var(--split-color);
}

.md-rawblock-control:not(.md-rawblock-tooltip) {
    background: var(--tablethbg-color);
    line-height: 30px;
}

.md-rawblock-on-edit > .md-rawblock-tooltip, .md-rawblock:hover > .md-rawblock-container, .md-rawblock:hover > .md-rawblock-tooltip {
    background: var(--tablethbg-color);
}

.dropdown-menu {
    background-color: inherit;
    background-color: #3c3f41;
}

.context-menu.dropdown-menu > .active > a, .context-menu.dropdown-menu > li > a:hover, .menu-style-btn.active {
    background-color: var(--focus-color);
    color: var(--body-color);
}

.cm-s-inner .cm-tag {
    color: #ff631f;
}

.cm-s-inner .cm-attribute {
    color: #a979ff;
}

.cm-s-inner .cm-string {
    color: #98cc20;
}

.cm-s-inner .cm-comment, .cm-s-inner.cm-comment {
    color: #a50;
}

.cm-s-inner .cm-comment, .cm-s-inner.cm-comment {
    color: #499c54;
}

.cm-s-inner .cm-meta {
    color: #ffeb3b;
}

.cm-s-inner .cm-keyword {
    color: #ff631f;
}

.cm-s-inner .cm-variable-3 {
    color: #03a9f4;
}

.cm-s-inner .cm-def {
    color: #ffc66d;
}

.cm-s-inner .cm-variable {
    color: var(--body-color);
}

.cm-s-inner .cm-operator {
    color: var(--titlebefore-color);
}

.cm-s-inner .cm-property {
    color: #ff631f;
}

.cm-s-inner .cm-number {
    color: #ffff00c7;
}

.cm-s-inner .cm-header, .cm-s-inner.cm-header {
    color: var(--atext-color);
}

.cm-s-inner .cm-builtin {
    color: var(--titlebefore-color);
}

.cm-s-inner .cm-atom, .cm-s-inner.cm-atom {
    color: var(--titlebefore-color);
}

.cm-s-inner .cm-qualifier {
    color: var(--taskfocus-color);
}

.cm-s-inner .cm-variable-2 {
    color: var(--toc-color);
}

.CodeMirror-gutters {
    border-right: 1px solid #555555;
    background: inherit;
    white-space: nowrap;
}

#write pre {
    background: var(--detailsbg-color);
    white-space: pre-wrap;
}

.CodeMirror-selected, .CodeMirror-selectedtext {
    background: var(--select-text-bg-color) !important;
    text-shadow: none;
}

#write pre.ty-contain-cm {
    white-space: normal;
    border: 1px #555555 solid;
}

p > .md-image:only-child:not(.md-img-error) img, p > img:only-child {
    display: block;
    margin: 0;
}

p .md-image:only-child {
    width: auto;
    text-align: left;
}

#mermaidChart0 .pieTitleText {
    text-anchor: middle;
    font-size: 25px;
    fill: var(--emptext-color);
    font-family: sans-serif;
}

#mermaidChart0 .legend text {
    fill: var(--atext-color);
    font-family: sans-serif;
    font-size: 17px;
}

kbd {
    margin: 0 .1em;
    padding: .1em .6em;
    font-size: .8em;
    color: var(--body-color);
    background: #3c3f41;
    border: 1px solid #555555;
    border-radius: 3px;
    box-shadow: 0 1px 0 #0c0d0e33, 0 0 0 0px #fff inset;
    white-space: nowrap;
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    .export-detail, .export-item.active, .export-items-list-control {
        background: #3c3f41;
    }

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

.btn-default, .btn-primary {
    transition-duration: 0.4s;
    border-radius: 3px;
    padding: 6px 12px;
    border: 1px solid #555555;
    background: #4c5052;
    box-shadow: none;
    margin-top: 4px;
    margin-bottom: 4px;
}

.btn-primary {
    font-weight: bold;
    background-color: #2196f3;
}

.typora-node.pin-outline:not(.megamenu-opened):not(.typora-sourceview-on) #typora-sidebar {
    display: block;
    left: 0;
    transition: left .3s;
    background: var(--tablethbg-color);
    border-color: #555;
}

.outline-item:hover {
    background-color: var(--item-hover-bg-color);
}

.active-tab-files #info-panel-tab-file .info-panel-tab-border, .active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    height: 4px;
    background-color: #555555;
}

.file-list-item {
    border-color: #555555;
}

.file-node-content:hover {
    color: #ffc107;
    background: var(--tablefocusrow-color);
}

.file-tree-node.active > .file-node-content {
    color: #f44336;
}

.file-list-item:hover {
    color: #ffc107;
    background: var(--tablefocusrow-color);
}

span.file-list-item-file-ext-part {
    opacity: 1;
    font-weight: 400;
    color: #f44336;
}

.ty-sidebar-search-panel {
    padding: 16px;
    padding-top: 0;
    border-bottom: #555555;
}

.outline-item.outline-item-active {
    color: #f44336;
    background: #4b6eaf;
}

li > :first-child:hover {
    margin-top: 0;
    color: #ffc107;
    background: var(--tablefocusrow-color);
}

.file-node-collapsed > .file-node-content .fa-caret-right {
    display: flex;
}

.typora-sourceview-on #toggle-sourceview-btn {
    background: #3c3f41;
    padding-left: 10px;
    margin-left: -2px;
}

footer.ty-footer {
    display: inherit;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    color: inherit;
    font-size: 12px;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-right: 4px;
    transition: .2s;
    z-index: 2;
    height: 28px;
    border-top: 1px solid #555555;
}

.pin-outline footer.ty-footer {
    background-color: inherit;
    border-top: 1px solid #555555;
    right: 0
}

.sidebar-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    border-top: 1px solid #555555;
    z-index: 2;
    background: inherit;
    font-size: 12px
}

strong {
    font-weight: bold;
    color: #ff5d52;
}

.md-inline-math script {
    color: #2196f3;
}

.md-meta {
    display: none;
    color: var(--md-char-color);
}

mjx-container[jax="SVG"] > svg {
    color: #f44336;
    overflow: visible;
    min-height: 1px;
    min-width: 1px;
}

.md-hover-tip .code-tooltip-content {
    border-radius: 4px;
    opacity: .95;
    margin-top: -2px;
    line-height: 1.2em;
    text-align: left;
    background: #3c3f41;
}

.md-hover-tip .md-arrow:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #3c3f41;
    -webkit-transform: rotate(
            45deg
    );
    transform: rotate(
            45deg
    );
    position: absolute;
    border-radius: 2px;
    z-index: 19;
}

.md-content, a:link {
    color: var(--atext-color);
}

.md-content, a:visited {
    color: #f44336;
    background-color: #313335;
}

.md-content, a:hover {
    color: #fe5f58;
    /*background-color: #313335;*/
}

.md-content, a:active {
    color: #4f8ffa;
    background-color: #313335;
}

.menu-item-container a.menu-style-btn {
    margin: 2px 0;
    color: #4caf50;
    background: var(--active-file-border-color);
    cursor: pointer;
    border: none;
}

code, pre, samp, tt {
    font-family: var(--code-font);
    font-size: large;
}

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

.md-def-name:before {
    font-weight: 400;
    content: '[';
    position: absolute;
    left: 0;
    color: #2196f3;
}

.md-def-name:after {
    font-weight: 400;
    content: '] :';
    position: absolute;
    right: 0;
    color: #2196f3;
}

.md-def-name {
    font-weight: 700;
    font-size: 1em;
    position: relative;
    padding-left: 2ch;
    padding-right: 2.5ch;
    text-align: center;
    color: #2196f3;
}

.md-def-title:before {
    color: #C7C5C5;
    content: '"';
    left: 0;
}

.md-def-title:after {
    color: #C7C5C5;
    content: '"';
    right: 0;
}

span.md-block-like {
    color: #ef5350;
}

.md-def-url {
    text-decoration: underline;
    color: #2196f3;
}

.md-blockmeta {
    color: #ef5350;
    font-weight: 700;
    font-style: normal;
}

#write {
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 30px 160px;
}

select, select option {
    background: var(--bg-color);
    font-size: 0.9rem;
    padding-top: 1px;
    padding-bottom: 2px;
    vertical-align: baseline;
}

.btn-default {
    border-color: rgba(204, 204, 204, .51);
    background: rgba(204, 204, 204, .51);
}

.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property {
    color: #ff5722;
}

.cm-search-hit.CodeMirror-selectedtext, .md-search-hit.md-search-select, .md-search-select {
    background: #214283;
    border: 1px #bbbbbb solid;
    /*color: var(--search-select-text-color);*/
    text-shadow: none;
}

.md-search-hit {
    background-color: #32593d;
    border: 1px #3c704b solid;
    contain: style;
    transform: translate3d(0, 0, 0);
}

.cm-search-hit {
    background-color: rgba(248, 192, 116, .3);
    font-family: inherit !important;
    border: 1px #3c704b solid;
    background: #32593d;
}

p.md-end-block.md-p,span.md-image.md-img-loaded.md-expand {
    margin: 1px 0px;
    border: 1px;
    padding: 1px;
}

.md-image.md-img-loaded.md-expand,span.md-meta.md-before.md-content{
    z-index:-999;
}

li.divider {
    color: var(--tableborder-color);
}