@media only screen and (max-width:1365px) {



    .github-corner {



        display: none



    }



}




@media only screen and (max-width:1259px) {



    #home {



        width: 100% !important



    }



}




@media only screen and (max-width:990px) {



    #bannerbar {



        display: none



    }







    #header,



    .esa-mobile-menu {



        display: block !important



    }







    #header {



        width: auto;



        position: fixed !important;



        background: var(--blog-bg-color)



    }







    #header #blogTitle {



        margin-left: 15px



    }







    #header #navigator {



        display: none;



        left: 0;



        top: 61px



    }







    #header #navigator #navList>li {



        float: none;



        position: relative;



        background: var(--blog-bg-color);



        height: 34px;



        line-height: 34px;



        width: 120px;



        border-bottom: 1px solid var(--border-color);



        border-right: 1px solid var(--border-color)



    }







    #header #navigator #navList>li>a {



        float: none;



        width: inherit;



        padding: 0 10px



    }







    #header #navigator #navList>li>a .arrow {



        position: absolute;



        top: .8rem;



        right: .8rem;



        transform: rotate(270deg) scaleX(-1)



    }







    #header #navigator #navList>li .esa-sub-navs {



        position: fixed;



        width: 130px;



        top: 0;



        left: 121px;



        top: 61px



    }







    #header #navigator #navList>li .esa-sub-navs .caret {



        display: none



    }







    #header #navigator #navList>li .esa-sub-navs ul {



        box-shadow: none;



        padding: 0;



        border-radius: 0



    }







    #header #navigator #navList>li .esa-sub-navs ul li {



        height: 34px;



        line-height: 34px;



        border: 1px solid var(--border-color);



        border-top: none



    }







    #header #navigator #navList>li .esa-sub-navs ul li a {



        text-align: left;



        padding: 0 10px



    }







    #header #navigator #navList>li i {



        display: none



    }







    #sideBar {



        display: none !important



    }







    #home {



        min-width: auto !important



    }







    #main {



        width: 100% !important;



        padding: 70px 0 0 !important



    }







    #main .forFlow {



        margin-left: 0 !important;



        padding-left: 15px;



        padding-right: 15px



    }







    #main .forFlow .postBody {



        padding: 0 !important



    }







    #main .forFlow .postDesc {



        display: none



    }







    #main .forFlow #comment_form {



        padding: 0 !important



    }







    #main .forFlow .commentform {



        margin-left: 0 !important



    }







    #main .forFlow .day .postDesc,



    #main .forFlow .entrylist .entrylistItemPostDesc {



        display: none



    }







    #myposts .postDesc2 {



        text-align: right !important



    }







    #myposts .postDesc2 span {



        display: none



    }







    .esa-toolbar .skin-popup {



        bottom: calc(50% - 67px) !important;



        border-radius: 15px !important



    }



}




@font-face {



    font-family: Material Symbols Outlined;



    font-style: normal;



    font-weight: 300;



    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v7/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1i-q_4MrImHCIJIZrDDxHOem.ttf) format("truetype")



}




@font-face {



    font-family: Material Symbols Outlined;



    font-style: normal;



    font-weight: 300;



    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v7/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDDxHOem.ttf) format("truetype")



}




.material-symbols-outlined {



    font-family: Material Symbols Outlined;



    font-weight: 400;



    font-style: normal;



    font-size: 24px;



    line-height: 1;



    letter-spacing: normal;



    text-transform: none;



    display: inline-block;



    white-space: nowrap;



    word-wrap: normal;



    direction: ltr



}




:root {



    --loading-bg-color: ##b0b0b0



}




:root[mode=light] {



    --blog-bg-color: #fff;



    --text-color: #596172;



    --border-color: #eef2f8;



    --catalog-bg-color: #fff;



    --panel-bg-color: #f8f8f8;



    --code-bg-color: #f1f3f4;



    --code-color: #bababa;



    --pane-box-shadow: 0px 1px 15px #e6e6e6;



    --toolbar-box-shadow: 0 2px 4px 1px #e8e8e8;



    --loading-bg-color: #fff



}




:root[mode=dark] {



    --blog-bg-color: #202020;



    --text-color: #d8d8d8;



    --border-color: #2f2f2f;



    --catalog-bg-color: #252525;



    --panel-bg-color: #252525;



    --code-bg-color: #3c3d40;



    --code-color: #9aa0a6;



    --pane-box-shadow: 0px 1px 15px #0a0a0a;



    --toolbar-box-shadow: 0 2px 4px 1px #151515;



    --loading-bg-color: #222



}




:root[theme=a] {



    --theme-color: #2d8cf0



}




:root[theme=b] {



    --theme-color: #fa7298



}




:root[theme=c] {



    --theme-color: #42b983



}




:root[theme=d] {



    --theme-color: #607d8b



}




:root[theme=e] {



    --theme-color: #5e72e4



}




:root[theme=f] {



    --theme-color: #ff9700



}




:root[theme=g] {



    --theme-color: #ff5722



}




:root[theme=h] {



    --theme-color: #009688



}




:root[theme=i] {



    --theme-color: #673bb7



}




:root[theme=j] {



    --theme-color: #906f61



}




* {



    margin: 0;



    padding: 0



}




body,
html {



    height: 100%



}




body {



    background: var(--blog-bg-color);



    color: var(--text-color);



    font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;



    font-size: 14px;



    font-weight: 300



}




table {



    border-collapse: collapse;



    border-spacing: 0



}




td {



    padding: 5px



}




fieldset,
img {



    border: 0



}




ul {



    word-break: break-all



}




li {



    list-style: none



}




h1,
h2,
h3,
h4,
h5,
h6 {



    font-size: 100%;



    font-weight: 400



}




a {



    color: var(--text-color);



    text-decoration: none



}




a:hover {



    color: var(--theme-color);



    transition: all .3s ease



}




::-moz-selection {



    background: var(--theme-color);



    color: #fff



}




::selection {



    background: var(--theme-color);



    color: #fff



}




#ad_c1,
#ad_c2,
#ad_t2,
#author_profile,
#comment_nav,
#comment_pager_top,
#green_channel,
#homepage_top_pager,
#lnkBlogLogo,
#under_post_kb,
#under_post_news,
.blogStats,
.c_ad_block,
.dayTitle,
.navbar,
.under-comment-nav,
.under-post-card {



    display: none



}




.clear {



    clear: both



}




#home {



    width: 100%;



    height: 100%;



    transition: width .3s ease



}




#header {



    width: 960px;



    position: relative;



    top: 0;



    right: 0;



    left: 0;



    margin: 0 auto;



    border-top: 0;



    border-bottom: 1px solid var(--border-color);



    padding-bottom: 0;



    display: block;



    height: 60px;



    z-index: 999



}




#blogTitle h1 {



    font-size: 25px;



    font-weight: 600;



    font-family: Georgia;



    float: left;



    margin-top: 15px



}




#blogTitle h2 {



    display: none



}




#navigator {



    height: inherit;



    position: absolute;



    right: 0;



    top: 0



}




#navList {



    height: inherit;



    float: left



}




#navList>li {



    position: relative;



    float: left;



    line-height: 60px;



    padding: 0 15px;



    font-size: 17px



}




#navList>li:hover i {



    width: 100%;



    left: 0



}




#navList>li>a:after {



    content: "";



    position: absolute;



    width: 100%;



    height: 4px;



    bottom: 0;



    left: 0;



    background-color: var(--theme-color);



    visibility: hidden;



    transform: scaleX(0);



    transition: .4s ease-in-out



}




#navList>li>a:hover:after {



    visibility: visible;



    transform: scaleX(1)



}




#navList .open {



    transform: rotate(180deg) scaleX(-1);



    transition-duration: .3s



}




#navList .esa-sub-navs {



    position: absolute;



    width: 160px;



    top: 60px;



    left: calc(50% - 80px);



    display: none



}




#navList .esa-sub-navs .caret {



    border-top: 0 solid transparent;



    border-left: 8px solid transparent;



    border-right: 8px solid transparent;



    border-bottom: 8px solid var(--blog-bg-color);



    width: 0;



    position: relative;



    left: calc(50% - 8px)



}




#navList .esa-sub-navs ul {



    background-color: var(--blog-bg-color);



    box-shadow: var(--pane-box-shadow);



    border-radius: 4px;



    padding: 10px



}




#navList .esa-sub-navs ul li a {



    font-size: 15px;



    overflow: hidden;



    display: flex;



    height: 50px;



    justify-content: center;



    align-content: center;



    align-items: center



}




#navList .esa-sub-navs ul li a:hover {



    color: var(--theme-color);



    background: var(--panel-bg-color);



    border-radius: 4px



}




#main {



    width: 960px;



    margin: 0 auto;



    min-height: calc(100% - 75px);



    padding: 15px 0



}




#mainContent {



    float: right;



    margin-left: -25em;



    width: 100%



}




#mainContent .forFlow {



    margin: 0 auto 0 0;



    max-width: 960px



}




#sideBar {



    width: 230px;



    border-right: 1px solid var(--border-color);



    font-weight: inherit;



    display: none;



    min-height: 750px;



    padding: 0 15px 0 0



}




#sideBar #profile_block {



    margin: 0;



    font-size: 0;



    display: flex;



    flex-wrap: wrap;



    text-align: left;



    line-height: 1.6



}




#sideBar #profile_block a {



    box-sizing: border-box



}




#sideBar #profile_block a:first-child {



    font-size: 18px;



    font-weight: 700;



    width: 100%;



    display: block;



    text-align: center;



    margin-bottom: 14px



}




#sideBar #profile_block a:nth-child(3):after {



    content: "\56ed\9f84"



}




#sideBar #profile_block a:nth-child(5):after {



    content: "\7c89\4e1d"



}




#sideBar #profile_block a:nth-child(7):after {



    content: "\5173\6ce8"



}




#sideBar #profile_block a:nth-child(3),
#sideBar #profile_block a:nth-child(5),
#sideBar #profile_block a:nth-child(7) {



    font-size: 14px;



    width: 33.3333333%;



    display: block;



    padding: 0 4px;



    white-space: nowrap;



    text-overflow: ellipsis;



    overflow: hidden;



    text-align: center



}




#sideBar #profile_block a:nth-child(3):after,
#sideBar #profile_block a:nth-child(5):after,
#sideBar #profile_block a:nth-child(7):after {



    color: #97979f;



    font-size: 14px;



    display: block;



    text-overflow: ellipsis;



    overflow: hidden;



    width: 100%



}




#sideBar #profile_block #p_b_follow {



    margin: 15px 0 10px;



    text-align: center



}




#sideBar #profile_block #p_b_follow a {



    border: 1px solid var(--border-color);



    font-size: 13px;



    padding: 7px 0;



    border-radius: 4px;



    width: 230px;



    font-weight: 300



}




#sideBar #profile_block #p_b_follow a:hover {



    border-color: var(--theme-color)



}




.newsItem {



    margin-bottom: 10px



}




.newsItem .catListTitle {



    display: none



}




#blog-calendar {



    border-top: 1px solid var(--border-color)



}




#blog-calendar .CalDayHeader {



    font-weight: 300



}




#blog-calendar .CalTodayDay {



    color: var(--theme-color);



    font-weight: 600



}




#sideBarMain ul {



    line-height: 1.6



}




.catListTitle {



    text-align: left;



    margin: 20px 0;



    font-size: 20px;



    font-weight: inherit;



    border-left: 4px solid var(--theme-color);



    border-radius: 4px;



    padding-left: 7px



}




#sidebar_search #widget_my_zzk .input_my_zzk {



    color: #314659;



    border: 1px solid var(--border-color);



    background-color: transparent;



    width: 150px;



    height: 32px;



    padding: 0 7px;



    font-size: 16px;



    border-radius: 4px



}




#sidebar_search #widget_my_zzk .input_my_zzk:focus {



    outline: none



}




#sidebar_search #widget_my_zzk .btn_my_zzk {



    height: 34px;



    font-size: 14px;



    font-weight: 300;



    background-color: transparent;



    color: var(--text-color);



    cursor: pointer;



    width: 59px;



    outline: 0;



    border: 1px solid var(--border-color);



    border-radius: 4px



}




#sidebar_search #widget_my_zzk .btn_my_zzk:hover {



    color: var(--theme-color);



    border: 1px solid var(--theme-color);



    transition: all .3s ease



}




#sidebar_search #widget_my_google {



    display: none



}




#sidebar_toptags li {



    display: inline-grid



}




#sidebar_toptags li a {



    height: 16px;



    line-height: 16px;



    padding: 5px 8px;



    white-space: nowrap;



    overflow: hidden;



    text-overflow: ellipsis;



    max-width: 210px;



    margin: 0 6px 6px 0;



    display: inline-grid;



    border-radius: 4px;



    background-color: var(--panel-bg-color);



    color: var(--text-color)



}




#sidebar_toptags li a:hover {



    transition: all .3s ease;



    color: #fff;



    background-color: var(--theme-color)



}




#sidebar_toptags li a .tag-count {



    display: none



}




#sidebar_categories li,
#sidebar_scorerank li,
#sidebar_shortcut li {



    font-size: 15px;



    height: 40px;



    padding-left: 3px;



    line-height: 30px;



    white-space: nowrap;



    overflow: hidden;



    text-overflow: ellipsis;



    list-style: none



}




#sidebar_recentposts li,
#sidebar_topcommentedposts li,
#sidebar_topdiggedposts li,
#sidebar_topviewedposts li {



    font-size: 15px;



    padding: 7px 0;



    text-align: justify;



    border-bottom: 1px solid var(--border-color)



}




#sidebar_recentposts li:first-child,
#sidebar_topcommentedposts li:first-child,
#sidebar_topdiggedposts li:first-child,
#sidebar_topviewedposts li:first-child {



    border-top: 1px solid var(--border-color)



}




#sidebar_recentcomments li {



    text-align: justify



}




#sidebar_recentcomments .recent_comment_title:nth-child(n+2) {



    padding-top: 10px



}




#sidebar_recentcomments .recent_comment_title:first-child {



    border-top: 1px solid var(--border-color);



    padding-top: 10px



}




#sidebar_recentcomments .recent_comment_body {



    border-radius: 4px;



    padding: 5px 10px;



    margin: 5px 0;



    background-color: var(--panel-bg-color)



}




#sidebar_recentcomments .recent_comment_author {



    margin-right: 0;



    text-align: right;



    padding-bottom: 10px;



    border-bottom: 1px solid var(--border-color)



}




#taglist_title,
.entrylistTitle,
.myposts_title,
.PostListTitle,
.thumbTitle {



    font-size: 20px;



    font-weight: 300;



    margin-bottom: 10px;



    text-align: left



}




#taglist_title small,
.entrylistTitle small,
.myposts_title small,
.PostListTitle small,
.thumbTitle small {



    font-weight: inherit !important



}




.entrylistDescription {



    margin: 15px auto;



    border-left: 4px solid var(--border-color);



    text-align: justify;



    padding-left: 7px



}




#myposts {



    margin-left: 0



}




#myposts .PostList {



    border-bottom: 1px solid var(--border-color);



    padding: 0;



    margin: 0



}




#myposts .PostList:first-of-type {



    border-top: 1px solid var(--border-color)



}




#myposts .postTitl2 {



    font-size: 17px;



    margin: 10px 0;



    text-align: justify



}




#myposts .postDesc2 {



    text-align: right;



    margin-bottom: 10px;



    font-size: 14px



}




#myposts .postDesc2>a {



    display: none



}




#myposts .postDesc2:before {



    font-family: FontAwesome;



    content: "\f017";



    opacity: .7



}




.post-comment-count:before,
.post-view-count:before {



    content: "\f1c5"



}




.post-comment-count:before,
.post-view-count:before {



    font-family: Material Symbols Outlined;



    padding-left: 10px;



    padding-right: 5px;



    font-size: 17px;



    position: relative;



    top: 4px



}




.post-comment-count:before {



    content: "\e560"



}




.post-digg-count:before {



    font-family: Material Symbols Outlined;



    content: "\e9d2";



    padding-left: 10px;



    padding-right: 5px;



    font-size: 17px;



    position: relative;



    top: 4px



}




.day>.postSeparator {



    border-bottom: 1px solid var(--border-color);



    text-align: justify;



    margin-bottom: 10px;



    padding-bottom: 10px



}




.day .postTitle2 span {



    display: flex;



    flex-wrap: wrap;



    align-items: center



}




.day .postTitle2 span span {



    order: 1;



    font-size: 0



}




.day .postTitle2 span span:after {



    content: "\7f6e\9876";



    margin-left: 7px;



    padding: 2px 10px;



    border-radius: 4px;



    font-size: 12px;



    color: var(--theme-color);



    background-color: var(--panel-bg-color);



    border: 1px solid var(--border-color)



}




.day,
.entrylistItem {



    border-bottom: 1px solid var(--border-color);



    text-align: justify;



    margin-bottom: 15px;



    padding-bottom: 10px



}




.day .postTitle,
.entrylist .entrylistPosttitle {



    font-size: 19px



}




.day .postCon,
.entrylist .entrylistPostSummary {



    font-size: 16px;



    padding: 10px 0



}




.day .postCon img,
.entrylist .entrylistPostSummary img {



    border-radius: 4px;



    margin-left: 10px;



    height: 120px;



    width: 180px;



    border: 1px solid rgba(0, 0, 0, .05)



}




.day .postCon a,
.entrylist .entrylistPostSummary a {



    border-bottom: 1px dotted var(--text-color);



    padding: 2px 5px;



    font-size: 14px;



    margin-top: 10px;



    display: table



}




.day .postCon a:after,
.entrylist .entrylistPostSummary a:after {



    content: "\00bb"



}




.day .postCon a:hover,
.entrylist .entrylistPostSummary a:hover {



    border-bottom: 1px dotted var(--theme-color)



}




.day .postDesc,
.entrylist .entrylistItemPostDesc {



    text-align: right



}




.day .postDesc>a,
.entrylist .entrylistItemPostDesc>a {



    display: none



}




.toc-container-header {



    font-size: 20px;



    font-weight: 700



}




#topics .postTitle {



    font-size: 21px;



    font-weight: inherit



}




#topics .postBody {



    font-size: 16px;



    line-height: 1.75



}




#topics .postBody a {



    color: var(--theme-color)



}




#topics .postBody a:hover {



    opacity: .7



}




#topics .postBody a[data-lightbox]:hover {



    opacity: 1



}




#topics .postBody h1 {



    font-size: 21px



}




#topics .postBody h2 {



    font-size: 20px



}




#topics .postBody h3 {



    font-size: 19px



}




#topics .postBody h4 {



    font-size: 18px



}




#topics .postBody h5 {



    font-size: 17px



}




#topics .postBody h6 {



    font-size: 16px



}




#topics .postBody p {



    margin: 13px auto



}




#topics .postBody hr {



    border-top: none;



    border-bottom: 1px solid var(--border-color)



}




#topics .postBody blockquote {



    border: none;



    margin: 15px 0;



    color: inherit;



    border-radius: 4px;



    padding: 1px 15px;



    border-left: 4px solid var(--theme-color);



    background-color: var(--panel-bg-color)



}




#topics .postBody em {



    padding-right: 3px



}




#topics .postBody strong {



    margin: 0 3px;



    font-weight: 500



}




#topics .postBody img {



    display: block;



    margin: 15px 0;



    border-radius: 3px;



    box-shadow: var(--pane-box-shadow)



}




#topics .postBody .cnblogs-markdown pre {



    white-space: pre;



    position: relative



}




#topics .postBody ol li,
#topics .postBody ul li {



    margin: 3px 0



}




#topics .postBody table {



    font-size: 15px;



    width: 100%;



    margin: 15px 0;



    display: block;



    overflow-x: auto;



    border: none



}




#topics .postBody table::-webkit-scrollbar {



    height: 4px !important



}




#topics .postBody table th {



    background: var(--panel-bg-color);



    white-space: nowrap;



    font-weight: 400



}




#topics .postBody table td,
#topics .postBody table th {



    border: 1px solid var(--border-color);



    padding: 6px 15px;



    min-width: 100px



}




#topics .postBody h1 code,
#topics .postBody h2 code,
#topics .postBody h3 code,
#topics .postBody h4 code,
#topics .postBody h5 code,
#topics .postBody h6 code,
#topics .postBody li>code,
#topics .postBody p>code,
#topics .postBody table code {



    line-height: 1.2;



    font-family: consolas !important;



    vertical-align: middle;



    margin: 0 3px;



    background-color: var(--code-bg-color) !important;



    color: var(--text-color);



    font-size: 14px !important;



    padding: .2em .3em !important;



    border-radius: 3px !important;



    border: none !important



}




#topics .postBody .hljs,
#topics .postBody .hljsln {



    display: block;



    overflow-x: auto;



    background: var(--code-bg-color) !important;



    border: none !important;



    color: var(--text-color) !important;



    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;



    font-size: 15px !important;



    padding: 10px 15px



}




#topics .postBody .hljs [class*=hljs-] {



    color: var(--text-color) !important



}




#topics .postBody #post_next_prev {



    font-size: 14px;



    margin-top: 10px



}




#topics .postBody #post_next_prev a {



    color: var(--text-color)



}




#topics .postDesc {



    border-top: 1px solid var(--border-color);



    padding-top: 5px;



    margin-top: 5px;



    text-align: right



}




#topics #BlogPostCategory,
#topics #EntryTag {



    font-size: 14px;



    margin-bottom: 5px



}




#topics #BlogPostCategory a,
#topics #EntryTag a {



    font-size: 13px;



    border-radius: 4px;



    padding: 4px 6px;



    background-color: var(--panel-bg-color);



    margin-right: 5px;



    transition: none;



    color: var(--text-color)



}




#topics #BlogPostCategory a:hover,
#topics #EntryTag a:hover {



    color: #fff;



    background-color: var(--theme-color);



    opacity: 1;



    transition: all .3s ease



}




#topics #BlogPostCategory a:after,
#topics #EntryTag a:after {



    content: none



}




#topics #BlogPostCategory:before {



    content: "\e574"



}




#topics #BlogPostCategory:before,
#topics #EntryTag:before {



    font-family: Material Symbols Outlined;



    font-size: 17px;



    position: relative;



    top: 3px



}




#topics #EntryTag:before {



    content: "\f05b"



}




.cnblogs_code {



    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;



    border-radius: 3px;



    overflow-x: auto;



    background: var(--code-bg-color) !important;



    border: none !important;



    color: var(--text-color) !important;



    font-size: 15px !important;



    padding: 10px 15px



}




.cnblogs_code .cnblogs_code_toolbar {



    display: none



}




.cnblogs_code pre {



    background: inherit !important;



    font-family: inherit !important;



    font-size: inherit !important



}




.cnblogs_code pre span {



    font-family: inherit !important;



    color: inherit !important



}




.cnblogs_code .code_img_closed,
.cnblogs_code .code_img_opened {



    display: none !important



}




#footer {



    border-top: 1px solid var(--border-color);



    font-size: 13px;



    text-align: center;



    padding: 15px 0



}




.louzhu {



    color: var(--theme-color);



    font-weight: 500



}




.feedbackListSubtitle .sendMsg2This {



    background: transparent;



    padding-left: 0;



    font-size: 15px



}




.feedbackListSubtitle .sendMsg2This:before {



    content: "✉️"



}




.feedbackManage {



    float: right



}




.feedbackItem .feedbackCon {



    margin-bottom: 10px;



    padding: 10px 0;



    border-bottom: 1px solid var(--border-color)



}




.feedbackItem .feedbackCon .comment_vote {



    margin-top: 12px



}




.blog_comment_body {



    width: auto;



    border-radius: 4px;



    padding: 12px;



    margin-left: 50px;



    margin-right: 15px;



    background-color: var(--panel-bg-color);



    min-height: 19px



}




.blog_comment_body img {



    border-radius: 3px



}




#taglist_main {



    margin-top: 0



}




#taglist_main table {



    width: 100%



}




#taglist_main table tr td {



    padding: 5px 0 5px 15px



}




#taglist_main table tr td:first-child {



    padding-left: 0



}




#taglist_main table tr td .small {



    display: none



}




#taglist_main table tr td a {



    display: flex;



    padding: 5px;



    border-radius: 4px;



    background-color: var(--panel-bg-color);



    color: var(--text-color);



    align-content: center;



    justify-content: center



}




#taglist_main table tr td a:hover {



    color: #fff;



    background-color: var(--theme-color)



}




.topicListFooter {



    margin-right: 0



}




#nav_next_page,
.pager {



    color: var(--text-color);



    text-align: right;



    margin-right: 0 !important



}




#nav_next_page a,
.pager a {



    color: var(--text-color);



    padding: 5px 10px;



    border: 1px solid var(--border-color);



    border-radius: 4px



}




#nav_next_page a:hover,
.pager a:hover {



    color: var(--theme-color);



    border: 1px solid var(--theme-color)



}




.pager span.current {



    padding: 3px 7px;



    border: 1px solid var(--theme-color);



    background-color: var(--theme-color);



    border-radius: 4px;



    margin: 0 0 0 5px



}




.feedback_area_title {



    font-size: 20px;



    border-bottom: 1px solid var(--border-color);



    margin: 20px 0;



    padding-bottom: 10px



}




#commentform_title {



    background-image: none;



    padding-left: 0;



    font-size: 20px;



    margin-top: 45px



}




#commentform_title>a {



    display: none



}




#commentform_title+span,
#tip_comment2+p {



    display: none !important



}




.commentform .comment_textarea {



    width: 100%;



    border: 1px solid var(--border-color);



    background-color: transparent;



    padding: 0;



    transition: none



}




.commentform .commentbox_title {



    border-bottom: 1px solid var(--border-color)



}




.commentform .commentbox_title .commentbox_title_left .commentbox_tab {



    margin: 0;



    padding: 5px 15px;



    color: var(--text-color);



    border-bottom: none



}




.commentform .commentbox_title .commentbox_title_left .active {



    color: var(--theme-color)



}




.commentform .commentbox_title .commentbox_title_right {



    margin: 0 10px 0 0



}




.commentform .commentbox_title .commentbox_title_right .comment_svg:hover,
.commentform .commentbox_title .commentbox_title_right .comment_svg_stroke:hover {



    fill: var(--theme-color);



    stroke: var(--theme-color)



}




.commentform .commentbox_footer {



    border-top: 1px solid var(--border-color)



}




.commentform .comment_option {



    margin-bottom: 10px;



    margin-right: 10px;



    fill: var(--text-color);



    color: var(--text-color)



}




.commentform .comment_option:hover {



    fill: var(--theme-color);



    color: var(--theme-color)



}




.commentform #tbCommentBody,
.commentform #tbCommentBodyPreview {



    padding: 10px 15px;



    background: transparent;



    color: var(--text-color);



    font-weight: 300



}




.commentform #tbCommentBodyPreviewBody {



    margin-left: 0;



    min-height: 235px;



    background-color: transparent



}




.commentform #btn_comment_submit {



    width: auto;



    height: auto;



    border-width: 0;



    cursor: pointer;



    color: #fff;



    background-color: var(--theme-color);



    border-color: var(--theme-color);



    font-weight: 300;



    -webkit-user-select: none;



    -moz-user-select: none;



    -ms-user-select: none;



    user-select: none;



    padding: 5px 17px;



    font-size: 13px;



    border-radius: 4px;



    outline: none;



    transition: all .3s



}




.commentform #btn_comment_submit:hover {



    opacity: .7



}




.commentform .comment_my_posted>img {



    display: none



}




.commentform .bq_post_comment {



    margin-top: 5px;



    font-size: 13px;



    display: block;



    color: var(--text-color);



    background-color: var(--border-color);



    border: none;



    border-radius: 4px;



    padding: 1px 15px



}




::-webkit-scrollbar {



    width: 3px



}




::-webkit-scrollbar-thumb {



    background-color: var(--text-color)



}




#div_digg {



    margin: 0;



    width: auto



}




#div_digg .buryit,
#div_digg .diggit {



    background: none;



    height: auto;



    width: auto;



    min-width: 75px;



    margin: 0;



    font-size: 17px;



    border-radius: 4px;



    padding: 3px 10px;



    background-color: var(--panel-bg-color)



}




#div_digg .buryit span,
#div_digg .diggit span {



    font-size: inherit;



    color: inherit



}




#div_digg .buryit:hover,
#div_digg .diggit:hover {



    color: #fff;



    background-color: var(--theme-color);



    transition: all .3s ease



}




#div_digg .diggit:before {



    font-family: Material Symbols Outlined;



    content: "\e8dc";



    font-size: 17px;



    position: relative;



    top: 3px



}




#div_digg .buryit {



    margin-left: 15px



}




#div_digg .buryit:before {



    font-family: Material Symbols Outlined;



    content: "\e8db";



    font-size: 17px;



    position: relative;



    top: 3px



}




.github-corner:hover .octo-arm {



    -webkit-animation: octocat-wave .56s ease-in-out;



    animation: octocat-wave .56s ease-in-out



}




.github-corner svg {



    fill: var(--theme-color);



    z-index: 999;



    cursor: pointer;



    position: fixed;



    top: 0;



    border: 0;



    left: 0;



    transform: scaleX(-1)



}




@-webkit-keyframes octocat-wave {







    0%,



    to {



        transform: rotate(0)



    }







    20%,



    60% {



        transform: rotate(-25deg)



    }







    40%,



    80% {



        transform: rotate(10deg)



    }



}




@keyframes octocat-wave {







    0%,



    to {



        transform: rotate(0)



    }







    20%,



    60% {



        transform: rotate(-25deg)



    }







    40%,



    80% {



        transform: rotate(10deg)



    }



}




.esa-mobile-menu {



    display: none;



    position: fixed;



    top: 17px;



    right: 20px;



    height: 25px;



    width: 25px;



    text-align: center;



    line-height: 25px;



    z-index: 941113;



    font-size: 1.5em;



    cursor: pointer;



    color: var(--text-color);



    border-radius: 4px



}




.esa-profile-avatar {



    border-radius: 4px;



    width: 100%



}




.esa-contents {



    position: fixed;



    top: 0;



    right: 0;



    bottom: 0;



    background-color: var(--blog-bg-color);



    border-left: 1px solid var(--border-color);



    overflow-y: auto;



    -webkit-user-select: none;



    -moz-user-select: none;



    -ms-user-select: none;



    user-select: none;



    padding: 1rem 0;



    width: 252px;



    transform: translate3d(252px, 0, 0);



    z-index: 1000



}




.esa-contents ul {



    padding: 0 15px;



    overflow-y: auto



}




.esa-contents ul li {



    padding: 5px 0;



    white-space: nowrap;



    overflow: hidden;



    text-overflow: ellipsis;



    cursor: pointer;



    color: var(--text-color)



}




.esa-contents ul li .level1 {



    margin-left: 0



}




.esa-contents ul li .level2 {



    margin-left: 10px



}




.esa-contents ul li .level3 {



    margin-left: 26px



}




.esa-anchor {



    opacity: 0;



    transition: opacity .3s ease;



    margin-left: 8px



}




.active {



    transform: translateZ(0);



    transition: transform .3s ease



}




.noactive {



    transition-duration: .3s;



    transform: translate3d(252px, 0, 0)



}




.esa-post-signature {



    padding: 12px 24px 12px 20px;



    margin-top: 15px;



    font-size: 15px;



    background: var(--panel-bg-color);



    position: relative;



    border-radius: 4px;



    border-left: 4px solid var(--theme-color)



}




.esa-post-signature p {



    margin: 0 !important



}




.esa-post-signature a {



    color: var(--text-color) !important



}




.esa-sponsor {



    position: relative;



    width: 100%;



    height: 85px;



    margin: 100px 0



}




.esa-sponsor .title {



    text-align: center;



    margin-bottom: 15px;



    min-height: 30px;



    font-size: 17px;



    font-weight: 400;



    opacity: .8



}




.esa-sponsor .box {



    display: flex;



    align-content: center;



    justify-content: center



}




.esa-sponsor .box li {



    width: 60px;



    float: left;



    margin: 0 !important;



    text-align: center;



    border: 1px solid var(--border-color);



    border-right: 0;



    background: transparent;



    cursor: pointer;



    line-height: 0;



    opacity: 1;



    list-style: none;



    margin: 0;



    padding: 6px 3px



}




.esa-sponsor .box li svg {



    opacity: .5



}




.esa-sponsor .box li:hover {



    background: var(--panel-bg-color);



    transition: all .3s ease



}




.esa-sponsor .box li:last-child {



    border-right: 1px solid var(--border-color)



}




.esa-sponsor .qrshow {



    position: absolute;



    width: 200px;



    height: 200px;



    background: var(--blog-bg-color);



    box-shadow: var(--pane-box-shadow);



    cursor: pointer;



    left: calc(50% - 100px);



    top: -170px;



    z-index: 999;



    display: none;



    border-radius: 4px



}




.esa-sponsor .qrshow img {



    height: 180px;



    width: 180px;



    margin: 10px !important;



    box-shadow: none !important



}




.esa-comment-avatar {



    float: left



}




.esa-comment-avatar img {



    height: 43px;



    width: 43px;



    border-radius: 4px;



    transition: all .5s ease-out;



    -webkit-transition: all .6s ease-out



}




.esa-comment-avatar img:hover {



    border-radius: 50%



}




.esa-toolbar {



    position: fixed;



    bottom: 30px;



    right: 30px;



    width: 45px;



    height: 45px;



    z-index: 1001



}




.esa-toolbar .bars {



    position: relative;



    width: inherit;



    height: inherit;



    cursor: pointer;



    border-radius: 50%;



    background: var(--theme-color);



    z-index: 1;



    text-align: center;



    font-size: 28px;



    font-weight: 700;



    line-height: 46px;



    color: #fff;



    transition: transform .3s ease;



    box-shadow: var(--toolbar-box-shadow)



}




.esa-toolbar .contents,
.esa-toolbar .mode,
.esa-toolbar .skin,
.esa-toolbar .up {



    position: absolute;



    cursor: pointer;



    bottom: 0;



    right: 0;



    height: 35px;



    width: 35px;



    text-align: center;



    line-height: 35px;



    z-index: 0;



    opacity: 0;



    border-radius: 4px;



    box-shadow: var(--toolbar-box-shadow);



    background-color: var(--blog-bg-color);



    transition: all .3s ease



}




.esa-toolbar .contents:hover,
.esa-toolbar .mode:hover,
.esa-toolbar .skin:hover,
.esa-toolbar .up:hover {



    color: #fff;



    background-color: var(--theme-color)



}




.esa-toolbar .bars-show {



    transform: rotate(270deg)



}




.esa-toolbar .up-show {



    transform: translate3d(0, -200%, 0);



    opacity: 1



}




.esa-toolbar .mode-show {



    transform: translate3d(-140%, -140%, 0);



    opacity: 1



}




.esa-toolbar .skin-show {



    transform: translate3d(-200%, 0, 0);



    opacity: 1



}




.esa-toolbar .contents-show {



    transform: translate3d(-350%, 0, 0);



    opacity: 1



}




.esa-toolbar .skin-popup {



    display: none;



    position: fixed;



    left: calc(50% - 100px);



    bottom: 0;



    padding: 25px;



    opacity: 1;



    width: 150px;



    height: auto;



    border-radius: 4px 4px 0 0;



    background-clip: border-box;



    box-shadow: var(--toolbar-box-shadow);



    background-color: var(--blog-bg-color)



}




.esa-toolbar .skin-popup .item {



    text-align: center



}




.esa-toolbar .skin-popup .title {



    font-size: 17px;



    margin-bottom: .5em



}




.esa-toolbar .skin-popup .themes button {



    font-size: 1em;



    position: relative;



    width: calc(1.75em - 5px);



    height: calc(1.75em - 5px);



    border-radius: .15em;



    cursor: pointer;



    margin: 2.5px;



    flex-shrink: 0;



    justify-self: center;



    transition: all .15s;



    overflow: hidden;



    background: transparent;



    z-index: 1;



    box-sizing: border-box;



    outline: none;



    border: none



}




@-webkit-keyframes loading {



    0% {



        opacity: 0



    }







    to {



        opacity: 1



    }



}




@keyframes loading {



    0% {



        opacity: 0



    }







    to {



        opacity: 1



    }



}




.loading {



    position: fixed;



    top: 0;



    left: 0;



    bottom: 0;



    right: 0;



    display: flex;



    justify-content: center;



    align-items: center;



    z-index: 99999;



    background: var(--loading-bg-color)



}




.loading .box h2 {



    color: #777;



    margin: 0;



    font: .8em verdana;



    text-transform: uppercase;



    letter-spacing: .1em;



    text-align: center



}




.loading .box span {



    display: inline-block;



    vertical-align: middle;



    width: .6em;



    height: .6em;



    margin: .19em;



    background: #007db6;



    border-radius: .6em;



    -webkit-animation: loading 1s infinite alternate;



    animation: loading 1s infinite alternate



}




.loading .box span:nth-of-type(2) {



    background: #008fb2;



    -webkit-animation-delay: .2s;



    animation-delay: .2s



}




.loading .box span:nth-of-type(3) {



    background: #009b9e;



    -webkit-animation-delay: .4s;



    animation-delay: .4s



}




.loading .box span:nth-of-type(4) {



    background: #00a77d;



    -webkit-animation-delay: .6s;



    animation-delay: .6s



}




.loading .box span:nth-of-type(5) {



    background: #00b247;



    -webkit-animation-delay: .8s;



    animation-delay: .8s



}




.loading .box span:nth-of-type(6) {



    background: #5ab027;



    -webkit-animation-delay: 1s;



    animation-delay: 1s



}




.loading .box span:nth-of-type(7) {



    background: #a0b61e;



    -webkit-animation-delay: 1.2s;



    animation-delay: 1.2s



}




/* 附加部分 */




details {



    /* details 内部专用，添加蓝色边框和缩进 */



    border: 2px solid black;



    border-radius: 5px;



    margin: 5px 5px 0;



    padding: 0 5px



}




summary {



    /* details 内部专用，改变 summary 的字号、添加粗体 */



    font-weight: bold;



    /*    font-size: 15px*/



}












details {

    /* details 内部专用，添加蓝色边框和缩进 */

    background: #4489ff00;

    border: 2px solid black;

    /* border: 1px solid #1b86f9; */

    border-radius: 8px;

    margin: 5px 5px 0;

    /* padding: 0 5px */

    padding: .5rem 1rem

}


summary {

    /* details 内部专用，改变 summary 的字号、添加粗体 */

    font-weight: bold;

    /*    font-size: 15px*/

}