/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span, #nav #blog-info, #sidebar #sidebar-menus .menus_items .site-page, .container .flink .flink-item-desc, .container .flink .flink-item-name, .limit-one-line, .site-data > a .headline {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > .title, #post-info .post-title, #recent-posts .recent-post-item > .recent-post-info > .article-title, #recent-posts .recent-post-item > .recent-post-info > .content, .article-sort-item-title, .container figure.gallery-group .gallery-group-name, .container figure.gallery-group p, .limit-more-line, .pagination-related .info .info-1 .info-item-2, .pagination-related .info .info-2 .info-item-1, .type-404 .error-content .error-info .error_subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical
}

#post #post-outdate-notice:before, #post .post-copyright:before, .container.post-content h1:before, .container.post-content h2:before, .container.post-content h3:before, .container.post-content h4:before, .container.post-content h5:before, .container.post-content h6:before, .container.post-content hr:before, .custom-hr:before, .fontawesomeIcon, .note:not(.no-icon)::before, .search-dialog hr:before, .toggle > .toggle-button::before {
    display: inline-block;
    font-weight: 600;
    font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased
}

#article-container .shuoshuo-item, #aside-content .card-widget, #recent-posts .recent-post-item, .cardHover, .layout .pagination > :not(.space), .layout > div:first-child:not(.nc), .type-404 .error-content {
    background: var(--card-bg);
    -webkit-box-shadow: var(--card-box-shadow);
    box-shadow: var(--card-box-shadow);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    border-radius: 8px
}

#article-container .shuoshuo-item:hover, #aside-content .card-widget:hover, #recent-posts .recent-post-item:hover, .cardHover:hover, .layout .pagination > :not(.space):hover, .layout > div:first-child:not(.nc):hover, .type-404 .error-content:hover {
    -webkit-box-shadow: var(--card-hover-box-shadow);
    box-shadow: var(--card-hover-box-shadow)
}

#aside-content .aside-list > .aside-list-item .thumbnail :first-child, #recent-posts .recent-post-item .post_cover .post-bg, .article-sort-item-img :first-child, .imgHover, .type-404 .error-content .error-img img {
    width: 100%;
    height: 100%;
    -webkit-transition: filter 375ms ease-in .2s, -webkit-transform .6s;
    -moz-transition: filter 375ms ease-in .2s, -moz-transform .6s;
    -o-transition: filter 375ms ease-in .2s, -o-transform .6s;
    -ms-transition: filter 375ms ease-in .2s, -ms-transform .6s;
    transition: filter 375ms ease-in .2s, transform .6s;
    object-fit: cover
}

#aside-content .aside-list > .aside-list-item .thumbnail :first-child:hover, #recent-posts .recent-post-item .post_cover .post-bg:hover, .article-sort-item-img :first-child:hover, .imgHover:hover, .type-404 .error-content .error-img img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.pagination-related:hover .cover, .postImgHover:hover .cover {
    opacity: .5;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.pagination-related .cover, .postImgHover .cover {
    width: 100%;
    height: 100%;
    opacity: .4;
    -webkit-transition: all .6s, filter 375ms ease-in .2s;
    -moz-transition: all .6s, filter 375ms ease-in .2s;
    -o-transition: all .6s, filter 375ms ease-in .2s;
    -ms-transition: all .6s, filter 375ms ease-in .2s;
    transition: all .6s, filter 375ms ease-in .2s;
    object-fit: cover
}

.category-lists ul, .list-beauty {
    list-style: none
}

.category-lists ul li, .list-beauty li {
    position: relative;
    padding: .12em .4em .12em 1.4em
}

.category-lists ul li:hover:before, .list-beauty li:hover:before {
    border-color: var(--pseudo-hover)
}

.category-lists ul li:before, .list-beauty li:before {
    position: absolute;
    top: .67em;
    left: 0;
    width: .43em;
    height: .43em;
    border: .215em solid #49b1f5;
    border-radius: .43em;
    background: 0 0;
    content: '';
    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
}

.container.post-content hr, .custom-hr, .search-dialog hr {
    position: relative;
    margin: 40px auto;
    border: 2px dashed var(--hr-border);
    width: calc(100% - 4px)
}

.container.post-content hr:hover:before, .custom-hr:hover:before, .search-dialog hr:hover:before {
    left: calc(95% - 20px)
}

.container.post-content hr:before, .custom-hr:before, .search-dialog hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: var(--hr-before-color);
    content: '\f0c4';
    font-size: 20px;
    line-height: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out
}

.pagination-related .info .info-1, .pagination-related .info .info-2, .verticalCenter {
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

#content-inner, #footer {
    -webkit-animation: bottom-top 1s;
    -moz-animation: bottom-top 1s;
    -o-animation: bottom-top 1s;
    -ms-animation: bottom-top 1s;
    animation: bottom-top 1s
}

#nav.show, #page-header:not(.full_page) {
    -webkit-animation: header-effect 1s;
    -moz-animation: header-effect 1s;
    -o-animation: header-effect 1s;
    -ms-animation: header-effect 1s;
    animation: header-effect 1s
}

#site-subtitle, #site-title {
    -webkit-animation: titleScale 1s;
    -moz-animation: titleScale 1s;
    -o-animation: titleScale 1s;
    -ms-animation: titleScale 1s;
    animation: titleScale 1s
}

#web_bg.bg-animation, canvas:not(#ribbon-canvas) {
    -webkit-animation: to_show 4s;
    -moz-animation: to_show 4s;
    -o-animation: to_show 4s;
    -ms-animation: to_show 4s;
    animation: to_show 4s
}

#ribbon-canvas {
    -webkit-animation: ribbon_to_show 4s;
    -moz-animation: ribbon_to_show 4s;
    -o-animation: ribbon_to_show 4s;
    -ms-animation: ribbon_to_show 4s;
    animation: ribbon_to_show 4s
}

#sidebar-menus.open > :nth-child(1) {
    -webkit-animation: sidebarItem .2s;
    -moz-animation: sidebarItem .2s;
    -o-animation: sidebarItem .2s;
    -ms-animation: sidebarItem .2s;
    animation: sidebarItem .2s
}

#sidebar-menus.open > :nth-child(2) {
    -webkit-animation: sidebarItem .4s;
    -moz-animation: sidebarItem .4s;
    -o-animation: sidebarItem .4s;
    -ms-animation: sidebarItem .4s;
    animation: sidebarItem .4s
}

#sidebar-menus.open > :nth-child(3) {
    -webkit-animation: sidebarItem .6s;
    -moz-animation: sidebarItem .6s;
    -o-animation: sidebarItem .6s;
    -ms-animation: sidebarItem .6s;
    animation: sidebarItem .6s
}

#sidebar-menus.open > :nth-child(4) {
    -webkit-animation: sidebarItem .8s;
    -moz-animation: sidebarItem .8s;
    -o-animation: sidebarItem .8s;
    -ms-animation: sidebarItem .8s;
    animation: sidebarItem .8s
}

.scroll-down-effects {
    -webkit-animation: scroll-down-effect 1.5s infinite;
    -moz-animation: scroll-down-effect 1.5s infinite;
    -o-animation: scroll-down-effect 1.5s infinite;
    -ms-animation: scroll-down-effect 1.5s infinite;
    animation: scroll-down-effect 1.5s infinite
}

.reward-main {
    -webkit-animation: donate_effcet .3s .1s ease both;
    -moz-animation: donate_effcet .3s .1s ease both;
    -o-animation: donate_effcet .3s .1s ease both;
    -ms-animation: donate_effcet .3s .1s ease both;
    animation: donate_effcet .3s .1s ease both
}

#aside-content .card-info #card-info-btn, #rightside > div > a, #rightside > div > button, .btn-effects, .container .btn-beautify, .hide-block > .hide-button, .hide-inline > .hide-button, .post-reward .reward-button, .read-mode .exit-readmode, .shuoshuo-navigation button:not(:disabled) {
    position: relative;
    overflow: hidden;
    -webkit-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -o-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

#aside-content .card-info #card-info-btn:hover, #rightside > div > a:hover, #rightside > div > button:hover, .btn-effects:hover, .container .btn-beautify:hover, .hide-block > .hide-button:hover, .hide-inline > .hide-button:hover, .post-reward .reward-button:hover, .read-mode .exit-readmode:hover, .shuoshuo-navigation button:not(:disabled):hover {
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    text-decoration: none;
    -webkit-transform: translateY(-1px) scale(1.02);
    -moz-transform: translateY(-1px) scale(1.02);
    -o-transform: translateY(-1px) scale(1.02);
    -ms-transform: translateY(-1px) scale(1.02);
    transform: translateY(-1px) scale(1.02)
}

#aside-content .card-info #card-info-btn:active, #rightside > div > a:active, #rightside > div > button:active, .btn-effects:active, .container .btn-beautify:active, .hide-block > .hide-button:active, .hide-inline > .hide-button:active, .post-reward .reward-button:active, .read-mode .exit-readmode:active, .shuoshuo-navigation button:not(:disabled):active {
    -webkit-transition-duration: .1s;
    -moz-transition-duration: .1s;
    -o-transition-duration: .1s;
    -ms-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transform: translateY(0) scale(.98);
    -moz-transform: translateY(0) scale(.98);
    -o-transform: translateY(0) scale(.98);
    -ms-transform: translateY(0) scale(.98);
    transform: translateY(0) scale(.98)
}

#aside-content .card-info #card-info-btn i, #rightside > div > a i, #rightside > div > button i, .btn-effects i, .container .btn-beautify i, .hide-block > .hide-button i, .hide-inline > .hide-button i, .post-reward .reward-button i, .read-mode .exit-readmode i, .shuoshuo-navigation button:not(:disabled) i {
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -o-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

#aside-content .card-info #card-info-btn:hover i, #rightside > div > a:hover i, #rightside > div > button:hover i, .btn-effects:hover i, .container .btn-beautify:hover i, .hide-block > .hide-button:hover i, .hide-inline > .hide-button:hover i, .post-reward .reward-button:hover i, .read-mode .exit-readmode:hover i, .shuoshuo-navigation button:not(:disabled):hover i {
    -webkit-animation: buttonIconBounce .6s ease-in-out;
    -moz-animation: buttonIconBounce .6s ease-in-out;
    -o-animation: buttonIconBounce .6s ease-in-out;
    -ms-animation: buttonIconBounce .6s ease-in-out;
    animation: buttonIconBounce .6s ease-in-out
}

#aside-content .card-info #card-info-btn i + span, #rightside > div > a i + span, #rightside > div > button i + span, .btn-effects i + span, .container .btn-beautify i + span, .hide-block > .hide-button i + span, .hide-inline > .hide-button i + span, .post-reward .reward-button i + span, .read-mode .exit-readmode i + span, .shuoshuo-navigation button:not(:disabled) i + span {
    margin-left: 6px;
    vertical-align: middle;
    -webkit-transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
    -o-transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
    transition: margin-left .3s cubic-bezier(.4, 0, .2, 1)
}

#aside-content .card-info #card-info-btn:hover i + span, #rightside > div > a:hover i + span, #rightside > div > button:hover i + span, .btn-effects:hover i + span, .container .btn-beautify:hover i + span, .hide-block > .hide-button:hover i + span, .hide-inline > .hide-button:hover i + span, .post-reward .reward-button:hover i + span, .read-mode .exit-readmode:hover i + span, .shuoshuo-navigation button:not(:disabled):hover i + span {
    margin-left: 8px
}

#aside-content .card-info #card-info-btn::before, #rightside > div > a::before, #rightside > div > button::before, .btn-effects::before, .container .btn-beautify::before, .hide-block > .hide-button::before, .hide-inline > .hide-button::before, .post-reward .reward-button::before, .read-mode .exit-readmode::before, .shuoshuo-navigation button:not(:disabled)::before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(0deg, transparent, rgba(255, 255, 255, .2), transparent);
    background: -moz-linear-gradient(0deg, transparent, rgba(255, 255, 255, .2), transparent);
    background: -o-linear-gradient(0deg, transparent, rgba(255, 255, 255, .2), transparent);
    background: -ms-linear-gradient(0deg, transparent, rgba(255, 255, 255, .2), transparent);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    content: '';
    -webkit-transition: left .5s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: left .5s cubic-bezier(.4, 0, .2, 1);
    -o-transition: left .5s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: left .5s cubic-bezier(.4, 0, .2, 1);
    transition: left .5s cubic-bezier(.4, 0, .2, 1)
}

#aside-content .card-info #card-info-btn:hover::before, #rightside > div > a:hover::before, #rightside > div > button:hover::before, .btn-effects:hover::before, .container .btn-beautify:hover::before, .hide-block > .hide-button:hover::before, .hide-inline > .hide-button:hover::before, .post-reward .reward-button:hover::before, .read-mode .exit-readmode:hover::before, .shuoshuo-navigation button:not(:disabled):hover::before {
    left: 100%
}

#aside-content .card-info #card-info-btn > *, #rightside > div > a > *, #rightside > div > button > *, .btn-effects > *, .container .btn-beautify > *, .hide-block > .hide-button > *, .hide-inline > .hide-button > *, .post-reward .reward-button > *, .read-mode .exit-readmode > *, .shuoshuo-navigation button:not(:disabled) > * {
    position: relative;
    z-index: 2
}

.btn-effects-large:hover, .container .btn-beautify.larger:hover, .post-reward .reward-button:hover {
    -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    -webkit-transform: translateY(-2px) scale(1.03);
    -moz-transform: translateY(-2px) scale(1.03);
    -o-transform: translateY(-2px) scale(1.03);
    -ms-transform: translateY(-2px) scale(1.03);
    transform: translateY(-2px) scale(1.03)
}

@-moz-keyframes scroll-down-effect {
    0% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate(0, -16px);
        -moz-transform: translate(0, -16px);
        -o-transform: translate(0, -16px);
        -ms-transform: translate(0, -16px);
        transform: translate(0, -16px)
    }
    100% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-webkit-keyframes scroll-down-effect {
    0% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate(0, -16px);
        -moz-transform: translate(0, -16px);
        -o-transform: translate(0, -16px);
        -ms-transform: translate(0, -16px);
        transform: translate(0, -16px)
    }
    100% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-o-keyframes scroll-down-effect {
    0% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate(0, -16px);
        -moz-transform: translate(0, -16px);
        -o-transform: translate(0, -16px);
        -ms-transform: translate(0, -16px);
        transform: translate(0, -16px)
    }
    100% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes scroll-down-effect {
    0% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate(0, -16px);
        -moz-transform: translate(0, -16px);
        -o-transform: translate(0, -16px);
        -ms-transform: translate(0, -16px);
        transform: translate(0, -16px)
    }
    100% {
        opacity: .4;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-moz-keyframes header-effect {
    0% {
        -webkit-transform: translateY(-35px);
        -moz-transform: translateY(-35px);
        -o-transform: translateY(-35px);
        -ms-transform: translateY(-35px);
        transform: translateY(-35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes header-effect {
    0% {
        -webkit-transform: translateY(-35px);
        -moz-transform: translateY(-35px);
        -o-transform: translateY(-35px);
        -ms-transform: translateY(-35px);
        transform: translateY(-35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes header-effect {
    0% {
        -webkit-transform: translateY(-35px);
        -moz-transform: translateY(-35px);
        -o-transform: translateY(-35px);
        -ms-transform: translateY(-35px);
        transform: translateY(-35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes header-effect {
    0% {
        -webkit-transform: translateY(-35px);
        -moz-transform: translateY(-35px);
        -o-transform: translateY(-35px);
        -ms-transform: translateY(-35px);
        transform: translateY(-35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes bottom-top {
    0% {
        -webkit-transform: translateY(35px);
        -moz-transform: translateY(35px);
        -o-transform: translateY(35px);
        -ms-transform: translateY(35px);
        transform: translateY(35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes bottom-top {
    0% {
        -webkit-transform: translateY(35px);
        -moz-transform: translateY(35px);
        -o-transform: translateY(35px);
        -ms-transform: translateY(35px);
        transform: translateY(35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes bottom-top {
    0% {
        -webkit-transform: translateY(35px);
        -moz-transform: translateY(35px);
        -o-transform: translateY(35px);
        -ms-transform: translateY(35px);
        transform: translateY(35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bottom-top {
    0% {
        -webkit-transform: translateY(35px);
        -moz-transform: translateY(35px);
        -o-transform: translateY(35px);
        -ms-transform: translateY(35px);
        transform: translateY(35px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes titleScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes titleScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes titleScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes titleScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes search_close {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@-webkit-keyframes search_close {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@-o-keyframes search_close {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@keyframes search_close {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@-moz-keyframes to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@-webkit-keyframes to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@-o-keyframes to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@keyframes to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@-moz-keyframes to_hide {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes to_hide {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
    100% {
        opacity: 0
    }
}

@-o-keyframes to_hide {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
    100% {
        opacity: 0
    }
}

@keyframes to_hide {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes ribbon_to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: .6
    }
}

@-webkit-keyframes ribbon_to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: .6
    }
}

@-o-keyframes ribbon_to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: .6
    }
}

@keyframes ribbon_to_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: .6
    }
}

@-moz-keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes donate_effcet {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes donate_effcet {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes donate_effcet {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes donate_effcet {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes sidebarItem {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes sidebarItem {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@-o-keyframes sidebarItem {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes sidebarItem {
    0% {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes buttonIconBounce {
    0%, 100% {
        -webkit-transform: translateY(0) scale(1);
        -moz-transform: translateY(0) scale(1);
        -o-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1)
    }
    25% {
        -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        transform: translateY(-3px) scale(1.1) rotateZ(-5deg)
    }
    50% {
        -webkit-transform: translateY(0) scale(1.05) rotateZ(0);
        -moz-transform: translateY(0) scale(1.05) rotateZ(0);
        -o-transform: translateY(0) scale(1.05) rotateZ(0);
        -ms-transform: translateY(0) scale(1.05) rotateZ(0);
        transform: translateY(0) scale(1.05) rotateZ(0)
    }
    75% {
        -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        transform: translateY(-1px) scale(1.02) rotateZ(2deg)
    }
}

@-webkit-keyframes buttonIconBounce {
    0%, 100% {
        -webkit-transform: translateY(0) scale(1);
        -moz-transform: translateY(0) scale(1);
        -o-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1)
    }
    25% {
        -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        transform: translateY(-3px) scale(1.1) rotateZ(-5deg)
    }
    50% {
        -webkit-transform: translateY(0) scale(1.05) rotateZ(0);
        -moz-transform: translateY(0) scale(1.05) rotateZ(0);
        -o-transform: translateY(0) scale(1.05) rotateZ(0);
        -ms-transform: translateY(0) scale(1.05) rotateZ(0);
        transform: translateY(0) scale(1.05) rotateZ(0)
    }
    75% {
        -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        transform: translateY(-1px) scale(1.02) rotateZ(2deg)
    }
}

@-o-keyframes buttonIconBounce {
    0%, 100% {
        -webkit-transform: translateY(0) scale(1);
        -moz-transform: translateY(0) scale(1);
        -o-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1)
    }
    25% {
        -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        transform: translateY(-3px) scale(1.1) rotateZ(-5deg)
    }
    50% {
        -webkit-transform: translateY(0) scale(1.05) rotateZ(0);
        -moz-transform: translateY(0) scale(1.05) rotateZ(0);
        -o-transform: translateY(0) scale(1.05) rotateZ(0);
        -ms-transform: translateY(0) scale(1.05) rotateZ(0);
        transform: translateY(0) scale(1.05) rotateZ(0)
    }
    75% {
        -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        transform: translateY(-1px) scale(1.02) rotateZ(2deg)
    }
}

@keyframes buttonIconBounce {
    0%, 100% {
        -webkit-transform: translateY(0) scale(1);
        -moz-transform: translateY(0) scale(1);
        -o-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1)
    }
    25% {
        -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg);
        transform: translateY(-3px) scale(1.1) rotateZ(-5deg)
    }
    50% {
        -webkit-transform: translateY(0) scale(1.05) rotateZ(0);
        -moz-transform: translateY(0) scale(1.05) rotateZ(0);
        -o-transform: translateY(0) scale(1.05) rotateZ(0);
        -ms-transform: translateY(0) scale(1.05) rotateZ(0);
        transform: translateY(0) scale(1.05) rotateZ(0)
    }
    75% {
        -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg);
        transform: translateY(-1px) scale(1.02) rotateZ(2deg)
    }
}

:root {
    --global-font-size: 15px;
    --global-bg: #fff;
    --font-color: #4c4948;
    --hr-border: #a4d8fa;
    --hr-before-color: #80c8f8;
    --search-bg: #f6f8fa;
    --search-input-color: #4c4948;
    --search-a-color: #4c4948;
    --preloader-bg: #37474f;
    --preloader-color: #fff;
    --tab-border-color: #f0f0f0;
    --tab-button-bg: #f0f0f0;
    --tab-button-color: #1f2d3d;
    --tab-button-hover-bg: #dcdcdc;
    --tab-button-active-bg: #fff;
    --card-bg: #fff;
    --card-meta: #858585;
    --sidebar-bg: #f6f8fa;
    --sidebar-menu-bg: #fff;
    --btn-hover-color: #ff7242;
    --btn-color: #fff;
    --btn-bg: #49b1f5;
    --text-bg-hover: rgba(73, 177, 245, 0.7);
    --light-grey: #eee;
    --dark-grey: #cacaca;
    --white: #fff;
    --text-highlight-color: #1f2d3d;
    --blockquote-color: #6a737d;
    --blockquote-bg: rgba(73, 177, 245, 0.1);
    --reward-pop: #f5f5f5;
    --toc-link-color: #666261;
    --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
    --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);
    --pseudo-hover: #ff7242;
    --headline-presudo: #a0a0a0;
    --scrollbar-color: #49b1f5;
    --default-bg-color: #49b1f5;
    --zoom-bg: #fff;
    --mark-bg: rgba(0, 0, 0, 0.3)
}

:root {
    --btn-color: #fff;
    --btn-default-color: #777;
    --tags-blue-color: #428bca;
    --tags-blue-color-lighten: #e3eef7;
    --tags-pink-color: #ff69b4;
    --tags-pink-color-lighten: #ffe9f4;
    --tags-red-color: #f00;
    --tags-red-color-lighten: #ffd9d9;
    --tags-orange-color: #ff8c00;
    --tags-orange-color-lighten: #ffeed9;
    --tags-purple-color: #6f42c1;
    --tags-purple-color-lighten: #e9e3f6;
    --tags-green-color: #5cb85c;
    --tags-green-color-lighten: #e7f4e7;
    --note-default-border: #777;
    --note-default-bg: #f7f7f7;
    --note-default-text: #777;
    --note-modern-default-border: #e1e1e1;
    --note-modern-default-bg: #f3f3f3;
    --note-modern-default-text: #666;
    --note-modern-default-hover: #454545;
    --note-primary-border: #6f42c1;
    --note-primary-bg: #f5f0fa;
    --note-primary-text: #6f42c1;
    --note-modern-primary-border: #e1c2ff;
    --note-modern-primary-bg: #f3daff;
    --note-modern-primary-text: #6f42c1;
    --note-modern-primary-hover: #453298;
    --note-info-border: #428bca;
    --note-info-bg: #eef7fa;
    --note-info-text: #428bca;
    --note-modern-info-border: #b3e5ef;
    --note-modern-info-bg: #d9edf7;
    --note-modern-info-text: #31708f;
    --note-modern-info-hover: #215761;
    --note-success-border: #5cb85c;
    --note-success-bg: #eff8f0;
    --note-success-text: #5cb85c;
    --note-modern-success-border: #d0e6be;
    --note-modern-success-bg: #dff0d8;
    --note-modern-success-text: #3c763d;
    --note-modern-success-hover: #32562c;
    --note-warning-border: #f0ad4e;
    --note-warning-bg: #fdf8ea;
    --note-warning-text: #f0ad4e;
    --note-modern-warning-border: #fae4cd;
    --note-modern-warning-bg: #fcf4e3;
    --note-modern-warning-text: #8a6d3b;
    --note-modern-warning-hover: #714f30;
    --note-danger-border: #d9534f;
    --note-danger-bg: #fcf1f2;
    --note-danger-text: #d9534f;
    --note-modern-danger-border: #ebcdd2;
    --note-modern-danger-bg: #f2dfdf;
    --note-modern-danger-text: #a94442;
    --note-modern-danger-hover: #84333f
}

body {
    position: relative;
    overflow-y: scroll;
    min-height: 100%;
    background: var(--global-bg);
    color: var(--font-color);
    font-size: var(--global-font-size);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft JhengHei', sans-serif;
    line-height: 2;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-color) transparent
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color)
}

::-webkit-scrollbar-track {
    background-color: transparent
}

input::placeholder {
    color: var(--font-color)
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
    margin: 20px 0 14px;
    color: var(--text-highlight-color);
    font-weight: 700
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: inherit !important
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.table-wrap {
    overflow-x: scroll;
    margin: 0 0 20px;
    border-radius: 5px
}

.table-wrap table {
    border-radius: 5px
}

.table-wrap table thead > tr:first-child th:first-child {
    border-top-left-radius: 5px
}

.table-wrap table thead > tr:first-child th:last-child {
    border-top-right-radius: 5px
}

.table-wrap table tbody > tr:last-child td:first-child {
    border-bottom-left-radius: 5px
}

.table-wrap table tbody > tr:last-child td:last-child {
    border-bottom-right-radius: 5px
}

table {
    display: table;
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border-top: 1px solid var(--light-grey);
    border-left: 1px solid var(--light-grey);
    empty-cells: show
}

table thead {
    background: rgba(153, 169, 191, .1)
}

table td, table th {
    padding: 6px 12px;
    border: 1px solid var(--light-grey);
    border-top: none;
    border-left: none;
    vertical-align: middle
}

::selection {
    background: #00c4b6;
    color: #f7f7f7
}

button {
    padding: 0;
    outline: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    touch-action: manipulation
}

a {
    color: #99a9bf;
    text-decoration: none;
    word-wrap: break-word;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -ms-transition: all .2s;
    transition: all .2s;
    overflow-wrap: break-word
}

a:hover {
    color: #49b1f5
}

#aside-content .author-info-description, #aside-content .author-info-name, #site-subtitle, #site-title, .site-name {
    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

img:not([src]), img[src=''] {
    opacity: 0
}

.img-alt {
    margin: -10px 0 10px;
    color: #858585
}

.img-alt:hover {
    text-decoration: none !important
}

blockquote {
    margin: 0 0 20px;
    padding: 7px 15px;
    border-left: 4px solid #49b1f5;
    background-color: var(--blockquote-bg);
    color: var(--blockquote-color);
    border-radius: 6px
}

blockquote footer cite:before {
    padding: 0 5px;
    content: '—'
}

blockquote > :last-child {
    margin-bottom: 0 !important
}

.fa-fw {
    width: 1.25em;
    text-align: center
}

:root {
    --hl-color: #90a4ae;
    --hl-bg: #f6f8fa;
    --hltools-bg: #e6ebf1;
    --hltools-color: #90a4ae;
    --hlnumber-bg: #f6f8fa;
    --hlnumber-color: rgba(144, 164, 174, 0.5);
    --hlscrollbar-bg: #dce4eb;
    --hlexpand-bg: linear-gradient(180deg, rgba(246, 248, 250, 0.6), rgba(246, 248, 250, 0.9))
}

[data-theme=dark] {
    --hl-color: rgba(255, 255, 255, 0.7);
    --hl-bg: #171717;
    --hltools-bg: #1a1a1a;
    --hltools-color: #90a4ae;
    --hlnumber-bg: #171717;
    --hlnumber-color: rgba(255, 255, 255, 0.4);
    --hlscrollbar-bg: #1f1f1f;
    --hlexpand-bg: linear-gradient(180deg, rgba(23, 23, 23, 0.6), rgba(23, 23, 23, 0.9))
}

figure.highlight table::-webkit-scrollbar-thumb {
    background: var(--hlscrollbar-bg)
}

figure.highlight pre .deletion {
    color: #bf42bf
}

figure.highlight pre .addition {
    color: #105ede
}

figure.highlight pre .meta {
    color: #7c4dff
}

figure.highlight pre .comment {
    color: rgba(149, 165, 166, .8)
}

figure.highlight pre .attribute, figure.highlight pre .css .class, figure.highlight pre .css .id, figure.highlight pre .css .pseudo, figure.highlight pre .html .doctype, figure.highlight pre .regexp, figure.highlight pre .ruby .constant, figure.highlight pre .tag .name, figure.highlight pre .variable, figure.highlight pre .xml .doctype, figure.highlight pre .xml .pi, figure.highlight pre .xml .tag .title {
    color: #e53935
}

figure.highlight pre .tag {
    color: #39adb5
}

figure.highlight pre .command, figure.highlight pre .constant, figure.highlight pre .literal, figure.highlight pre .number, figure.highlight pre .params, figure.highlight pre .preprocessor {
    color: #f76d47
}

figure.highlight pre .built_in {
    color: #ffb62c
}

figure.highlight pre .css .rules .attribute, figure.highlight pre .formula, figure.highlight pre .header, figure.highlight pre .inheritance, figure.highlight pre .number, figure.highlight pre .ruby .class .title, figure.highlight pre .ruby .symbol, figure.highlight pre .special, figure.highlight pre .string, figure.highlight pre .value, figure.highlight pre .xml .cdata {
    color: #91b859
}

figure.highlight pre .css .hexcolor, figure.highlight pre .keyword, figure.highlight pre .title {
    color: #39adb5
}

figure.highlight pre .coffeescript .title, figure.highlight pre .function, figure.highlight pre .javascript .title, figure.highlight pre .perl .sub, figure.highlight pre .python .decorator, figure.highlight pre .python .title, figure.highlight pre .ruby .function .title, figure.highlight pre .ruby .title .keyword {
    color: #6182b8
}

figure.highlight pre .javascript .function, figure.highlight pre .tag .attr {
    color: #7c4dff
}

.container figure.highlight .line.marked {
    background-color: rgba(128, 203, 196, .251)
}

.container figure.highlight table {
    display: block;
    overflow: auto;
    border: none
}

.container figure.highlight table td {
    padding: 0;
    border: none
}

.container figure.highlight .gutter pre {
    padding-right: 10px;
    padding-left: 10px;
    background-color: var(--hlnumber-bg);
    color: var(--hlnumber-color);
    text-align: right
}

.container figure.highlight .code pre {
    padding-right: 10px;
    padding-left: 10px;
    width: 100%
}

.container figure.highlight, .container pre {
    overflow: auto;
    margin: 0 0 20px;
    padding: 0;
    background: var(--hl-bg);
    color: var(--hl-color);
    line-height: 1.6
}

.container code, .container pre {
    font-size: var(--global-font-size);
    font-family: consolas, Menlo, monospace, 'PingFang SC', 'Microsoft JhengHei', sans-serif !important;
    border-radius: 6px
}

.container code {
    padding: 2px 5px;
    background: rgba(27, 31, 35, .05);
    color: #f47466
}

.container pre {
    padding: 10px 20px
}

.container pre code {
    padding: 0;
    background: 0 0;
    color: var(--hl-color);
    text-shadow: none
}

.container figure.highlight {
    position: relative;
    border-radius: 6px
}

.container figure.highlight pre {
    margin: 0;
    padding: 8px 0;
    border: none
}

.container figure.highlight .caption, .container figure.highlight figcaption {
    padding: 6px 0 2px 14px;
    font-size: var(--global-font-size);
    line-height: 1em
}

.container figure.highlight .caption a, .container figure.highlight figcaption a {
    float: right;
    padding-right: 10px;
    color: var(--hl-color)
}

.container figure.highlight .caption a:hover, .container figure.highlight figcaption a:hover {
    border-bottom-color: var(--hl-color)
}

.container figure.highlight.copy-true {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    -webkit-user-select: all
}

.container figure.highlight.copy-true > pre, .container figure.highlight.copy-true > table {
    display: block !important;
    opacity: 0
}

.container .highlight-tools {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    padding: 0 8px;
    min-height: 24px;
    height: 2.15em;
    background: var(--hltools-bg);
    color: var(--hltools-color);
    font-size: var(--global-font-size);
    margin-right: auto
}

.container .highlight-tools > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 2px
}

.container .highlight-tools i {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-box;
    display: inline-flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

.container .highlight-tools i:hover {
    color: #49b1f5
}

.container .highlight-tools.closed ~ * {
    display: none
}

.container .highlight-tools.closed .expand {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.container .highlight-tools > .macStyle {
    margin: 0
}

.container .highlight-tools .code-lang {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    padding-right: 10px;
    text-transform: uppercase;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.15em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.container .gutter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.container .gist table {
    width: auto
}

.container .gist table td {
    border: none
}

.copy-notice {
    position: absolute;
    z-index: 99999;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--hltools-bg);
    white-space: nowrap;
    font-size: 12px;
    pointer-events: none
}

.container .code-expand-btn {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    background: var(--hlexpand-bg);
    text-align: center;
    font-size: var(--global-font-size);
    cursor: pointer
}

.container .code-expand-btn i {
    padding: 6px 0;
    color: var(--hlnumber-color);
    -webkit-animation: code-expand-key 1.2s infinite;
    -moz-animation: code-expand-key 1.2s infinite;
    -o-animation: code-expand-key 1.2s infinite;
    -ms-animation: code-expand-key 1.2s infinite;
    animation: code-expand-key 1.2s infinite
}

.container .code-expand-btn.expand-done > i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.container .code-expand-btn.expand-done + pre, .container .code-expand-btn.expand-done + table {
    margin-bottom: 1.8em
}

.container .code-expand-btn:not(.expand-done) ~ pre, .container .code-expand-btn:not(.expand-done) ~ table {
    overflow: hidden;
    height: 400px
}

@-moz-keyframes code-expand-key {
    0% {
        opacity: .6
    }
    50% {
        opacity: .1
    }
    100% {
        opacity: .6
    }
}

@-webkit-keyframes code-expand-key {
    0% {
        opacity: .6
    }
    50% {
        opacity: .1
    }
    100% {
        opacity: .6
    }
}

@-o-keyframes code-expand-key {
    0% {
        opacity: .6
    }
    50% {
        opacity: .1
    }
    100% {
        opacity: .6
    }
}

@keyframes code-expand-key {
    0% {
        opacity: .6
    }
    50% {
        opacity: .1
    }
    100% {
        opacity: .6
    }
}

.container figure.highlight.code-fullpage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    -webkit-animation: code-fullpage .3s;
    -moz-animation: code-fullpage .3s;
    -o-animation: code-fullpage .3s;
    -ms-animation: code-fullpage .3s;
    animation: code-fullpage .3s
}

.container figure.highlight.code-fullpage .code-expand-btn, .container figure.highlight.code-fullpage .expand {
    display: none
}

.container figure.highlight.code-fullpage .highlight-tools ~ pre, .container figure.highlight.code-fullpage .highlight-tools ~ table {
    display: block;
    overflow: auto;
    margin-bottom: 0;
    height: calc(100vh - 2.15em)
}

@-moz-keyframes code-fullpage {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20%, 60% {
        -webkit-transform: translateX(-5px);
        -moz-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px)
    }
    40%, 80% {
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -o-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px)
    }
}

@-webkit-keyframes code-fullpage {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20%, 60% {
        -webkit-transform: translateX(-5px);
        -moz-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px)
    }
    40%, 80% {
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -o-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px)
    }
}

@-o-keyframes code-fullpage {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20%, 60% {
        -webkit-transform: translateX(-5px);
        -moz-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px)
    }
    40%, 80% {
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -o-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px)
    }
}

@keyframes code-fullpage {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20%, 60% {
        -webkit-transform: translateX(-5px);
        -moz-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px)
    }
    40%, 80% {
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -o-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px)
    }
}

.type-404 .error-content {
    overflow: hidden;
    margin: 0 20px;
    height: 360px
}

@media screen and (max-width: 768px) {
    .type-404 .error-content {
        margin: 0;
        height: 500px
    }
}

.type-404 .error-content .error-img {
    display: inline-block;
    overflow: hidden;
    width: 50%;
    height: 100%
}

@media screen and (max-width: 768px) {
    .type-404 .error-content .error-img {
        width: 100%;
        height: 45%
    }
}

.type-404 .error-content .error-img img {
    background-color: #49b1f5
}

.type-404 .error-content .error-info {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-box;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    width: 50%;
    height: 100%;
    vertical-align: top;
    text-align: center;
    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif
}

@media screen and (max-width: 768px) {
    .type-404 .error-content .error-info {
        width: 100%;
        height: 55%
    }
}

.type-404 .error-content .error-info .error_title {
    margin-top: -.6em;
    font-size: 9em
}

@media screen and (max-width: 768px) {
    .type-404 .error-content .error-info .error_title {
        font-size: 8em
    }
}

.type-404 .error-content .error-info .error_subtitle {
    margin-top: -3em;
    word-break: break-word;
    font-size: 1.6em;
    -webkit-line-clamp: 2
}

.type-404 .nc {
    margin-top: 5%;
    padding: 0 20px
}

.type-404 #footer {
    display: none
}

.type-404 + #rightside {
    display: none
}

.article-sort {
    margin-left: 10px;
    padding-left: 20px;
    border-left: 2px solid #aadafa
}

.article-sort-title {
    position: relative;
    margin-left: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    font-size: 1.72em
}

.article-sort-title:hover:before {
    border-color: var(--pseudo-hover)
}

.article-sort-title:before {
    position: absolute;
    top: calc(((100% - 36px) / 2));
    left: -9px;
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 5px solid #49b1f5;
    border-radius: 10px;
    background: var(--card-bg);
    content: '';
    line-height: 10px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.article-sort-title:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 2px;
    height: 1.5em;
    background: #aadafa;
    content: ''
}

.article-sort-item {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 0 20px 10px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.article-sort-item:hover:before {
    border-color: var(--pseudo-hover)
}

.article-sort-item:before {
    position: absolute;
    left: calc(-20px - 17px);
    width: 6px;
    height: 6px;
    border: 3px solid #49b1f5;
    border-radius: 6px;
    background: var(--card-bg);
    content: '';
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.article-sort-item.no-article-cover {
    height: 80px
}

.article-sort-item.no-article-cover .article-sort-item-info {
    padding: 0
}

.article-sort-item.year {
    font-size: 1.43em;
    margin-bottom: 10px
}

.article-sort-item.year:hover:before {
    border-color: #49b1f5
}

.article-sort-item.year:before {
    border-color: var(--pseudo-hover)
}

.article-sort-item-time {
    color: var(--card-meta);
    font-size: .85em
}

.article-sort-item-time time {
    padding-left: 6px;
    cursor: default
}

.article-sort-item-title {
    color: var(--font-color);
    font-size: 1.05em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    -webkit-line-clamp: 2
}

.article-sort-item-title:hover {
    color: #49b1f5;
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -o-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px)
}

.article-sort-item-img {
    overflow: hidden;
    width: 100px;
    height: 70px;
    border-radius: 6px
}

@media screen and (max-width: 768px) {
    .article-sort-item-img {
        width: 70px;
        height: 70px
    }
}

.article-sort-item-info {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 16px
}

.category-lists .category-title {
    font-size: 2.57em
}

@media screen and (max-width: 768px) {
    .category-lists .category-title {
        font-size: 2em
    }
}

.category-lists .category-list {
    margin-bottom: 0
}

.category-lists .category-list a {
    color: var(--font-color)
}

.category-lists .category-list a:hover {
    color: #49b1f5
}

.category-lists .category-list .category-list-count {
    margin-left: 8px;
    color: var(--card-meta)
}

.category-lists .category-list .category-list-count:before {
    content: '('
}

.category-lists .category-list .category-list-count:after {
    content: ')'
}

.category-lists ul {
    padding: 0 0 0 20px
}

.category-lists ul ul {
    padding-left: 4px
}

.category-lists ul li {
    position: relative;
    margin: 6px 0;
    padding: .12em .4em .12em 1.4em
}

#body-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh
}

.layout {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
    margin: 0 auto;
    padding: 40px 15px;
    max-width: 1200px;
    width: 100%
}

@media screen and (max-width: 900px) {
    .layout {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media screen and (max-width: 768px) {
    .layout {
        padding: 20px 5px
    }
}

@media screen and (min-width: 2000px) {
    .layout {
        max-width: 60%
    }
}

.layout > div:first-child:not(.nc) {
    -webkit-align-self: flex-start;
    align-self: flex-start;
    -ms-flex-item-align: start;
    padding: 50px 40px
}

@media screen and (max-width: 768px) {
    .layout > div:first-child:not(.nc) {
        padding: 36px 14px
    }
}

.layout > div:first-child {
    width: 74%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

@media screen and (max-width: 900px) {
    .layout > div:first-child {
        width: 100% !important
    }
}

.layout.hide-aside {
    max-width: 1000px
}

@media screen and (min-width: 2000px) {
    .layout.hide-aside {
        max-width: 1300px
    }
}

.layout.hide-aside > div {
    width: 100% !important
}

.apple #page-header.full_page {
    background-attachment: scroll !important
}

.apple .avatar-img, .apple .flink-item-icon, .apple .recent-post-item {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

.container .flink {
    margin-bottom: 20px
}

.container .flink .flink-list {
    overflow: auto;
    padding: 10px 10px 0;
    text-align: center
}

.container .flink .flink-list > .flink-list-item {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 15px 7px;
    width: calc(100% / 3 - 15px);
    height: 90px;
    line-height: 17px;
    -webkit-transform: translateZ(0);
    border-radius: 8px
}

@media screen and (max-width: 1024px) {
    .container .flink .flink-list > .flink-list-item {
        width: calc(50% - 15px) !important
    }
}

@media screen and (max-width: 600px) {
    .container .flink .flink-list > .flink-list-item {
        width: calc(100% - 15px) !important
    }
}

.container .flink .flink-list > .flink-list-item:hover .flink-item-icon {
    margin-left: -10px;
    width: 0
}

.container .flink .flink-list > .flink-list-item:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--text-bg-hover);
    content: '';
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    -ms-transition: -ms-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

.container .flink .flink-list > .flink-list-item:active:before, .container .flink .flink-list > .flink-list-item:focus:before, .container .flink .flink-list > .flink-list-item:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.container .flink .flink-list > .flink-list-item a {
    color: var(--font-color);
    text-decoration: none
}

.container .flink .flink-list > .flink-list-item a .flink-item-icon {
    float: left;
    overflow: hidden;
    margin: 15px 10px;
    width: 60px;
    height: 60px;
    border-radius: 7px;
    -webkit-transition: width .3s ease-out;
    -moz-transition: width .3s ease-out;
    -o-transition: width .3s ease-out;
    -ms-transition: width .3s ease-out;
    transition: width .3s ease-out
}

.container .flink .flink-list > .flink-list-item a .flink-item-icon img {
    width: 100%;
    height: 100%;
    -webkit-transition: filter 375ms ease-in .2s, -webkit-transform .3s;
    -moz-transition: filter 375ms ease-in .2s, -moz-transform .3s;
    -o-transition: filter 375ms ease-in .2s, -o-transform .3s;
    -ms-transition: filter 375ms ease-in .2s, -ms-transform .3s;
    transition: filter 375ms ease-in .2s, transform .3s;
    object-fit: cover
}

.container .flink .flink-list > .flink-list-item a .img-alt {
    display: none
}

.container .flink .flink-item-name {
    padding: 16px 10px 0 0;
    height: 40px;
    font-weight: 700;
    font-size: 1.43em
}

.container .flink .flink-item-desc {
    padding: 16px 10px 16px 0;
    height: 50px;
    font-size: .93em
}

.container .flink .flink-name {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 1.5em
}

#recent-posts .recent-post-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 16.8em
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: auto
    }
}

@media screen and (min-width: 2000px) {
    #recent-posts .recent-post-item {
        height: 18.8em
    }
}

#recent-posts .recent-post-item:hover .post-bg {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

#recent-posts .recent-post-item.ads-wrap {
    display: block !important;
    height: auto !important
}

#recent-posts .recent-post-item .post_cover {
    overflow: hidden;
    width: 42%;
    height: 100%
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item .post_cover {
        width: 100%;
        height: 230px
    }
}

#recent-posts .recent-post-item .post_cover.right {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -o-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item .post_cover.right {
        -webkit-box-ordinal-group: 0;
        -moz-box-ordinal-group: 0;
        -o-box-ordinal-group: 0;
        -ms-flex-order: 0;
        -webkit-order: 0;
        order: 0
    }
}

#recent-posts .recent-post-item .post_cover .post-bg {
    z-index: -4
}

#recent-posts .recent-post-item > .recent-post-info {
    padding: 0 40px;
    width: 58%
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item > .recent-post-info {
        padding: 20px 20px 30px;
        width: 100%
    }
}

#recent-posts .recent-post-item > .recent-post-info.no-cover {
    width: 100%
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item > .recent-post-info.no-cover {
        padding: 30px 20px
    }
}

#recent-posts .recent-post-item > .recent-post-info > .article-title {
    color: var(--text-highlight-color);
    font-size: 1.55em;
    line-height: 1.4;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-line-clamp: 2
}

#recent-posts .recent-post-item > .recent-post-info > .article-title .sticky {
    margin-right: 10px;
    color: #ff7242;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item > .recent-post-info > .article-title {
        font-size: 1.43em
    }
}

#recent-posts .recent-post-item > .recent-post-info > .article-title:hover {
    color: #49b1f5
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap {
    margin: 6px 0;
    color: var(--card-meta);
    font-size: .9em
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
    cursor: default
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap i {
    margin: 0 4px 0 0
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap .fa-spinner {
    margin: 0
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-label {
    padding-right: 4px
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-separator {
    margin: 0 6px
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-link {
    margin: 0 4px
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap time {
    display: none
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap a {
    color: var(--card-meta)
}

#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap a:hover {
    color: #49b1f5;
    text-decoration: underline
}

#recent-posts .recent-post-item > .recent-post-info > .content {
    -webkit-line-clamp: 2;
    word-break: break-word
}

#article-container .shuoshuo-item {
    margin-bottom: 20px;
    padding: 35px 30px 30px
}

@media screen and (max-width: 768px) {
    #article-container .shuoshuo-item {
        padding: 25px 20px 20px
    }
}

#article-container .shuoshuo-item-header {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: default
}

#article-container .shuoshuo-avatar {
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 40px
}

#article-container .shuoshuo-avatar img {
    margin: 0;
    width: 100%;
    height: 100%
}

#article-container .shuoshuo-info {
    margin-left: 10px;
    line-height: 1.5
}

#article-container .shuoshuo-date {
    color: #858585;
    font-size: .8em
}

#article-container .shuoshuo-content {
    padding: 15px 0 10px
}

#article-container .shuoshuo-content > :last-child {
    margin-bottom: 0
}

#article-container .shuoshuo-footer {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#article-container .shuoshuo-footer.flex-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

#article-container .shuoshuo-footer.flex-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -o-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

#article-container .shuoshuo-footer .shuoshuo-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 0 8px;
    width: fit-content;
    border: 1px solid #49b1f5;
    border-radius: 12px;
    color: #49b1f5;
    font-size: .85em;
    cursor: default;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

#article-container .shuoshuo-footer .shuoshuo-tag:hover {
    background: #49b1f5;
    color: var(--white)
}

#article-container .shuoshuo-footer .shuoshuo-comment-btn {
    padding: 2px;
    color: #90a4ae;
    cursor: pointer
}

#article-container .shuoshuo-footer .shuoshuo-comment-btn:hover {
    color: #49b1f5
}

#article-container .shuoshuo-comment {
    padding-top: 10px
}

#article-container .shuoshuo-comment.no-comment {
    display: none
}

.shuoshuo-navigation {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 20px;
    padding: 20px 0
}

.shuoshuo-navigation button {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 2.7em;
    height: 2.7em;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    font-size: .9em;
    line-height: 2.5em;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 6px
}

.shuoshuo-navigation button:hover:not(:disabled) {
    background-color: var(--btn-hover-color)
}

.shuoshuo-navigation button:disabled {
    background: #f5f5f5;
    color: #ccc;
    opacity: .5;
    cursor: not-allowed
}

.shuoshuo-navigation .shuoshuo-page-info {
    margin: 0 15px;
    color: #858585;
    white-space: nowrap;
    font-size: .9em
}

.shuoshuo-navigation .shuoshuo-page-input {
    margin-right: 12px;
    padding: 0 15px;
    height: 2.7em;
    border: 1px solid var(--btn-bg);
    background: var(--card-bg);
    color: #858585;
    text-align: center;
    font-size: .9em;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 6px;
    -moz-appearance: textfield
}

.shuoshuo-navigation .shuoshuo-page-input:focus {
    outline: 0;
    border-width: 2px
}

.shuoshuo-navigation .shuoshuo-page-input:focus::placeholder {
    color: transparent
}

.shuoshuo-navigation .shuoshuo-page-input::-webkit-inner-spin-button, .shuoshuo-navigation .shuoshuo-page-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none
}

.shuoshuo-navigation .shuoshuo-page-input.shuoshuo-page-num {
    min-width: 40px;
    width: 40px;
    border: none;
    background: #49b1f5;
    color: var(--white);
    font-weight: 500;
    cursor: text
}

.shuoshuo-navigation .shuoshuo-page-input.shuoshuo-page-num:focus {
    border: 1px solid #49b1f5;
    background: var(--white);
    color: #333
}

.shuoshuo-navigation .shuoshuo-page-input.invalid {
    border-color: #ff4757;
    background-color: #ffeaea;
    color: #ff4757;
    -webkit-animation: shake .5s ease-in-out;
    -moz-animation: shake .5s ease-in-out;
    -o-animation: shake .5s ease-in-out;
    -ms-animation: shake .5s ease-in-out;
    animation: shake .5s ease-in-out
}

@-moz-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-2px);
        -moz-transform: translateX(-2px);
        -o-transform: translateX(-2px);
        -ms-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(2px);
        -moz-transform: translateX(2px);
        -o-transform: translateX(2px);
        -ms-transform: translateX(2px);
        transform: translateX(2px)
    }
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-2px);
        -moz-transform: translateX(-2px);
        -o-transform: translateX(-2px);
        -ms-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(2px);
        -moz-transform: translateX(2px);
        -o-transform: translateX(2px);
        -ms-transform: translateX(2px);
        transform: translateX(2px)
    }
}

@-o-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-2px);
        -moz-transform: translateX(-2px);
        -o-transform: translateX(-2px);
        -ms-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(2px);
        -moz-transform: translateX(2px);
        -o-transform: translateX(2px);
        -ms-transform: translateX(2px);
        transform: translateX(2px)
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-2px);
        -moz-transform: translateX(-2px);
        -o-transform: translateX(-2px);
        -ms-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(2px);
        -moz-transform: translateX(2px);
        -o-transform: translateX(2px);
        -ms-transform: translateX(2px);
        transform: translateX(2px)
    }
}

.tag-cloud-list {
    -webkit-animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1);
    -moz-animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1);
    -o-animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1);
    -ms-animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1);
    animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1)
}

.tag-cloud-list:hover a:not(:hover) {
    opacity: .7;
    -webkit-transform: scale(.98);
    -moz-transform: scale(.98);
    -o-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98)
}

.tag-cloud-list a {
    position: relative;
    display: inline-block;
    margin: 5px;
    padding: 3px 12px;
    line-height: 1.7;
    -webkit-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -o-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: all .3s cubic-bezier(.4, 0, .2, 1);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    border-radius: 7px;
    overflow: hidden;
    color: #fff;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    will-change: transform, background-color, box-shadow
}

.tag-cloud-list a::before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(0deg, transparent, rgba(255, 255, 255, .1), transparent);
    background: -moz-linear-gradient(0deg, transparent, rgba(255, 255, 255, .1), transparent);
    background: -o-linear-gradient(0deg, transparent, rgba(255, 255, 255, .1), transparent);
    background: -ms-linear-gradient(0deg, transparent, rgba(255, 255, 255, .1), transparent);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
    content: '';
    -webkit-transition: left .6s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: left .6s cubic-bezier(.4, 0, .2, 1);
    -o-transition: left .6s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: left .6s cubic-bezier(.4, 0, .2, 1);
    transition: left .6s cubic-bezier(.4, 0, .2, 1)
}

.tag-cloud-list a:hover {
    background: var(--btn-hover-color) !important;
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .08), 0 0 0 1px rgba(255, 255, 255, .05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .08), 0 0 0 1px rgba(255, 255, 255, .05);
    color: var(--btn-color) !important;
    -webkit-transform: translateY(-2px) scale(1.02);
    -moz-transform: translateY(-2px) scale(1.02);
    -o-transform: translateY(-2px) scale(1.02);
    -ms-transform: translateY(-2px) scale(1.02);
    transform: translateY(-2px) scale(1.02)
}

.tag-cloud-list a:hover::before {
    left: 100%
}

.tag-cloud-list a:active {
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .1);
    -webkit-transition: all .15s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: all .15s cubic-bezier(.4, 0, .2, 1);
    -o-transition: all .15s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: all .15s cubic-bezier(.4, 0, .2, 1);
    transition: all .15s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: translateY(-1px) scale(.98);
    -moz-transform: translateY(-1px) scale(.98);
    -o-transform: translateY(-1px) scale(.98);
    -ms-transform: translateY(-1px) scale(.98);
    transform: translateY(-1px) scale(.98)
}

@media screen and (max-width: 768px) {
    .tag-cloud-list a {
        zoom: .85
    }

    .tag-cloud-list a:hover {
        -webkit-transform: translateY(-1px) scale(1.01);
        -moz-transform: translateY(-1px) scale(1.01);
        -o-transform: translateY(-1px) scale(1.01);
        -ms-transform: translateY(-1px) scale(1.01);
        transform: translateY(-1px) scale(1.01)
    }

    .tag-cloud-list a:active {
        -webkit-transform: translateY(0) scale(.99);
        -moz-transform: translateY(0) scale(.99);
        -o-transform: translateY(0) scale(.99);
        -ms-transform: translateY(0) scale(.99);
        transform: translateY(0) scale(.99)
    }

    .tag-cloud-list a::before {
        display: none
    }
}

.tag-cloud-title {
    font-size: 2.57em;
    -webkit-animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1);
    -moz-animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1);
    -o-animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1);
    -ms-animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1);
    animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1)
}

@media screen and (max-width: 768px) {
    .tag-cloud-title {
        font-size: 2em
    }
}

.page-title + .tag-cloud-list {
    text-align: left
}

@-moz-keyframes tagsFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes tagsFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes tagsFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes tagsFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes titleSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes titleSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@-o-keyframes titleSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes titleSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

#aside-content {
    width: 26%
}

@media screen and (min-width: 900px) {
    #aside-content {
        padding-left: 15px
    }
}

@media screen and (max-width: 900px) {
    #aside-content {
        margin-top: 20px;
        width: 100%
    }
}

#aside-content .card-widget {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 20px 24px
}

#aside-content .card-info .author-info-name {
    font-weight: 500;
    font-size: 1.57em
}

#aside-content .card-info .author-info-description {
    margin-top: -.42em
}

#aside-content .card-info .site-data {
    margin: 14px 0 4px
}

#aside-content .card-info .card-info-social-icons {
    margin: 6px 0 -6px
}

#aside-content .card-info .card-info-social-icons .social-icon {
    margin: 0 10px;
    color: var(--font-color);
    font-size: 1.4em
}

#aside-content .card-info .card-info-social-icons i {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

#aside-content .card-info .card-info-social-icons i:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

#aside-content .card-info #card-info-btn {
    display: block;
    margin-top: 14px;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    border-radius: 7px
}

#aside-content .card-info #card-info-btn:hover {
    background-color: var(--btn-hover-color)
}

#aside-content .card-info #card-info-btn span {
    padding-left: 10px
}

#aside-content .item-headline {
    padding-bottom: 6px;
    font-size: 1.2em
}

#aside-content .item-headline span {
    margin-left: 6px
}

@media screen and (min-width: 900px) {
    #aside-content .sticky_layout {
        position: sticky;
        position: -webkit-sticky;
        top: 20px;
        -webkit-transition: top .3s;
        -moz-transition: top .3s;
        -o-transition: top .3s;
        -ms-transition: top .3s;
        transition: top .3s
    }
}

#aside-content .card-tag-cloud a {
    display: inline-block;
    padding: 0 4px;
    line-height: 1.8
}

#aside-content .card-tag-cloud a:hover {
    color: #49b1f5 !important
}

#aside-content .aside-list > span {
    display: block;
    margin-bottom: 10px;
    text-align: center
}

#aside-content .aside-list > .aside-list-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 6px 0
}

#aside-content .aside-list > .aside-list-item:first-child {
    padding-top: 0
}

#aside-content .aside-list > .aside-list-item:not(:last-child) {
    border-bottom: 1px dashed #f5f5f5
}

#aside-content .aside-list > .aside-list-item:last-child {
    padding-bottom: 0
}

#aside-content .aside-list > .aside-list-item .thumbnail {
    overflow: hidden;
    width: 4em;
    height: 4em;
    border-radius: 6px
}

#aside-content .aside-list > .aside-list-item .content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 10px;
    word-break: break-all
}

#aside-content .aside-list > .aside-list-item .content > .name {
    -webkit-line-clamp: 1
}

#aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > time {
    display: block;
    color: var(--card-meta);
    font-size: .85em
}

#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .title {
    color: var(--font-color);
    line-height: 1.5;
    -webkit-line-clamp: 2
}

#aside-content .aside-list > .aside-list-item .content > .comment:hover, #aside-content .aside-list > .aside-list-item .content > .title:hover {
    color: #49b1f5
}

#aside-content .aside-list > .aside-list-item.no-cover {
    min-height: 4.4em
}

#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
    margin: 0;
    padding: 0;
    list-style: none
}

#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 2px 0;
    padding: 2px 8px;
    color: var(--font-color);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    border-radius: 6px
}

#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
    padding: 2px 12px;
    background-color: var(--text-bg-hover);
    color: var(--white)
}

#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#aside-content .card-categories .card-category-list.child {
    padding: 0 0 0 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: max-height .3s ease, opacity .3s ease;
    -moz-transition: max-height .3s ease, opacity .3s ease;
    -o-transition: max-height .3s ease, opacity .3s ease;
    -ms-transition: max-height .3s ease, opacity .3s ease;
    transition: max-height .3s ease, opacity .3s ease
}

#aside-content .card-categories .card-category-list > .parent > a.expand i {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

#aside-content .card-categories .card-category-list > .parent > a.expand + .child {
    max-height: 1000px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    visibility: visible
}

#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
    width: 70% !important
}

#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
    width: calc(100% - 70% - 20px);
    text-align: right
}

#aside-content .card-categories .card-category-list > .parent > a i {
    float: right;
    margin-right: -.5em;
    padding: .5em;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    -ms-transition: -ms-transform .3s;
    transition: transform .3s;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

#aside-content .card-categories .card-category-list > .parent > .child {
    max-height: 0;
    opacity: 0;
    visibility: hidden
}

#aside-content .card-webinfo .webinfo .webinfo-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 2px 10px 0
}

#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-right: 20px
}

@media screen and (min-width: 901px) {
    #aside-content #card-toc {
        right: 0 !important
    }
}

@media screen and (max-width: 900px) {
    #aside-content #card-toc {
        position: fixed;
        right: 55px;
        bottom: 30px;
        z-index: 100;
        max-width: 380px;
        max-height: calc(100% - 60px);
        width: calc(100% - 80px);
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: right bottom;
        -moz-transform-origin: right bottom;
        -o-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom
    }

    #aside-content #card-toc.open {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

#aside-content #card-toc .toc-percentage {
    float: right;
    margin-top: -9px;
    color: #a9a9a9;
    font-style: italic;
    font-size: 140%
}

#aside-content #card-toc .toc-content {
    overflow-y: scroll;
    overflow-y: overlay;
    margin: 0 -24px;
    max-height: calc(100vh - 120px);
    width: calc(100% + 48px)
}

@media screen and (max-width: 900px) {
    #aside-content #card-toc .toc-content {
        max-height: calc(100vh - 140px)
    }
}

#aside-content #card-toc .toc-content > * {
    margin: 0 20px !important
}

#aside-content #card-toc .toc-content > * > .toc-item > .toc-child {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--dark-grey)
}

#aside-content #card-toc .toc-content:not(.is-expand) .toc-child {
    display: none
}

@media screen and (max-width: 900px) {
    #aside-content #card-toc .toc-content:not(.is-expand) .toc-child {
        display: block !important
    }
}

#aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child {
    display: block
}

#aside-content #card-toc .toc-content li, #aside-content #card-toc .toc-content ol {
    list-style: none
}

#aside-content #card-toc .toc-content > ol {
    padding: 0 !important
}

#aside-content #card-toc .toc-content ol {
    margin: 0;
    padding-left: 18px
}

#aside-content #card-toc .toc-content .toc-link {
    display: block;
    margin: 4px 0;
    padding: 1px 8px;
    color: var(--toc-link-color);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 6px
}

#aside-content #card-toc .toc-content .toc-link:hover {
    color: #49b1f5
}

#aside-content #card-toc .toc-content .toc-link.active {
    background: #00c4b6;
    color: #fff
}

#aside-content .sticky_layout:only-child > :first-child {
    margin-top: 0
}

#aside-content .card-more-btn {
    float: right;
    color: inherit
}

#aside-content .card-more-btn:hover {
    -webkit-animation: more-btn-move 1s infinite;
    -moz-animation: more-btn-move 1s infinite;
    -o-animation: more-btn-move 1s infinite;
    -ms-animation: more-btn-move 1s infinite;
    animation: more-btn-move 1s infinite
}

#aside-content .card-announcement .item-headline i {
    color: red
}

.avatar-img {
    overflow: hidden;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 70px
}

.avatar-img img {
    width: 100%;
    height: 100%;
    -webkit-transition: filter 375ms ease-in .2s, -webkit-transform .3s;
    -moz-transition: filter 375ms ease-in .2s, -moz-transform .3s;
    -o-transition: filter 375ms ease-in .2s, -o-transform .3s;
    -ms-transition: filter 375ms ease-in .2s, -ms-transform .3s;
    transition: filter 375ms ease-in .2s, transform .3s;
    object-fit: cover
}

.avatar-img img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

.site-data {
    display: table;
    width: 100%;
    table-layout: fixed
}

.site-data > a {
    display: table-cell
}

.site-data > a div {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

.site-data > a:hover div {
    color: #49b1f5 !important
}

.site-data > a .headline {
    color: var(--font-color);
    font-size: .95em
}

.site-data > a .length-num {
    margin-top: -.45em;
    color: var(--text-highlight-color);
    font-size: 1.2em
}

@media screen and (min-width: 900px) {
    html.hide-aside .layout {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -o-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center
    }

    html.hide-aside .layout > .aside-content {
        display: none
    }

    html.hide-aside .layout > div:first-child {
        width: 80%
    }
}

.page .sticky_layout {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@-moz-keyframes more-btn-move {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(3px);
        -moz-transform: translateX(3px);
        -o-transform: translateX(3px);
        -ms-transform: translateX(3px);
        transform: translateX(3px)
    }
}

@-webkit-keyframes more-btn-move {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(3px);
        -moz-transform: translateX(3px);
        -o-transform: translateX(3px);
        -ms-transform: translateX(3px);
        transform: translateX(3px)
    }
}

@-o-keyframes more-btn-move {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(3px);
        -moz-transform: translateX(3px);
        -o-transform: translateX(3px);
        -ms-transform: translateX(3px);
        transform: translateX(3px)
    }
}

@keyframes more-btn-move {
    0%, 100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(3px);
        -moz-transform: translateX(3px);
        -o-transform: translateX(3px);
        -ms-transform: translateX(3px);
        transform: translateX(3px)
    }
}

@-moz-keyframes toc-open {
    0% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes toc-open {
    0% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes toc-open {
    0% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes toc-open {
    0% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes toc-close {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@-webkit-keyframes toc-close {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@-o-keyframes toc-close {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

@keyframes toc-close {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

#post-comment .comment-head {
    margin-bottom: 20px
}

#post-comment .comment-head:after {
    display: block;
    clear: both;
    content: ''
}

#post-comment .comment-head .comment-headline {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: 1.43em
}

#post-comment .comment-head .comment-switch {
    display: inline-block;
    float: right;
    margin: 2px auto 0;
    padding: 4px 16px;
    width: max-content;
    border-radius: 8px;
    background: #f6f8fa
}

#post-comment .comment-head .comment-switch .first-comment {
    color: #49b1f5
}

#post-comment .comment-head .comment-switch .second-comment {
    color: #ff7242
}

#post-comment .comment-head .comment-switch #switch-btn {
    position: relative;
    display: inline-block;
    margin: -4px 8px 0;
    width: 42px;
    height: 22px;
    border-radius: 34px;
    background-color: #49b1f5;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    transition: .4s
}

#post-comment .comment-head .comment-switch #switch-btn:before {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    transition: .4s
}

#post-comment .comment-wrap > div {
    -webkit-animation: tabshow .5s;
    -moz-animation: tabshow .5s;
    -o-animation: tabshow .5s;
    -ms-animation: tabshow .5s;
    animation: tabshow .5s
}

#post-comment .comment-wrap > div:nth-child(2) {
    display: none
}

#post-comment.move #switch-btn {
    background-color: #ff7242
}

#post-comment.move #switch-btn:before {
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -o-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px)
}

#post-comment.move .comment-wrap > div:first-child {
    display: none
}

#post-comment.move .comment-wrap > div:last-child {
    display: block
}

#footer {
    position: relative;
    background-color: #49b1f5;
    background-attachment: scroll;
    background-position: bottom;
    background-size: cover
}

#footer:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--mark-bg);
    content: ''
}

#footer > * {
    position: relative;
    color: var(--light-grey)
}

#footer a {
    color: var(--light-grey);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

#footer a:hover {
    color: #49b1f5
}

#footer .footer-separator {
    margin: 0 4px
}

#footer .icp-icon {
    padding: 0 4px;
    max-height: 1.4em;
    width: auto;
    vertical-align: text-bottom
}

#footer .footer-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    padding: 40px 60px;
    max-width: 1200px;
    width: 100%;
    text-align: left;
    gap: 13px
}

@media screen and (max-width: 768px) {
    #footer .footer-flex {
        padding: 30px;
        gap: 10px
    }
}

#footer .footer-flex .footer-flex-items {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    min-width: 100px;
    text-align: left;
    white-space: nowrap
}

#footer .footer-flex .footer-flex-title {
    margin-bottom: 5px;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1.4em
}

#footer .footer-flex .footer-flex-item {
    margin: 10px 0;
    white-space: nowrap
}

#footer .footer-flex a {
    display: block;
    white-space: nowrap
}

#footer .footer-other {
    padding: 40px 20px;
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    background-color: rgba(0, 0, 0, .1)
}

#footer .footer-other .copyright, #footer .footer-other .footer_custom_text, #footer .footer-other .framework-info {
    font-size: .9em
}

#page-header {
    position: relative;
    width: 100%;
    background-color: #49b1f5;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

#page-header:not(.not-top-img):before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--mark-bg);
    content: ''
}

#page-header.full_page {
    height: 100vh;
    background-attachment: fixed
}

#page-header.full_page #site-info {
    position: absolute;
    top: 43%;
    padding: 0 10px;
    width: 100%
}

#page-header #scroll-down .scroll-down-effects, #page-header #site-subtitle, #page-header #site-title {
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);
    line-height: 1.5
}

#page-header #site-title {
    margin: 0;
    color: var(--white);
    font-size: 1.85em
}

@media screen and (min-width: 768px) {
    #page-header #site-title {
        font-size: 2.85em
    }
}

#page-header #site-subtitle {
    color: var(--light-grey);
    font-size: 1.15em
}

@media screen and (min-width: 768px) {
    #page-header #site-subtitle {
        font-size: 1.72em
    }
}

#page-header #site_social_icons {
    display: none;
    margin: 0 auto;
    text-align: center
}

@media screen and (max-width: 768px) {
    #page-header #site_social_icons {
        display: block
    }
}

#page-header #site_social_icons .social-icon {
    margin: 0 10px;
    color: var(--light-grey);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);
    font-size: 1.43em
}

#page-header #scroll-down {
    position: absolute;
    bottom: 10px;
    width: 100%;
    cursor: pointer
}

#page-header #scroll-down .scroll-down-effects {
    position: relative;
    width: 100%;
    color: var(--light-grey);
    font-size: 20px
}

#page-header.not-home-page {
    height: 400px
}

@media screen and (max-width: 768px) {
    #page-header.not-home-page {
        height: 280px
    }
}

#page-header #page-site-info {
    position: absolute;
    top: 200px;
    padding: 0 10px;
    width: 100%
}

@media screen and (max-width: 768px) {
    #page-header #page-site-info {
        top: 140px
    }
}

#page-header.post-bg {
    height: 400px
}

@media screen and (max-width: 768px) {
    #page-header.post-bg {
        height: 360px
    }
}

#page-header #post-info {
    position: absolute;
    width: 100%;
    bottom: 30px
}

#page-header #post-info > * {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1200px
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
    #page-header #post-info > * {
        padding: 0 30px
    }
}

@media screen and (min-width: 2000px) {
    #page-header #post-info > * {
        max-width: 70%
    }
}

#page-header.not-top-img {
    margin-bottom: 10px;
    height: 60px;
    background: 0
}

#page-header.not-top-img .title-seo {
    display: none
}

#page-header.not-top-img #nav {
    background: rgba(255, 255, 255, .8);
    -webkit-box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);
    box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
}

#page-header.not-top-img #nav .site-name, #page-header.not-top-img #nav a, #page-header.not-top-img #nav span.site-page {
    color: var(--font-color);
    text-shadow: none
}

#page-header.nav-fixed #nav {
    position: fixed;
    top: -60px;
    z-index: 91;
    background: rgba(255, 255, 255, .7);
    -webkit-box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);
    box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);
    -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
    -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
    -o-transition: -o-transform .2s ease-in-out, opacity .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out, opacity .2s ease-in-out;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    will-change: transform;
    backdrop-filter: blur(7px)
}

#page-header.nav-fixed #nav #blog-info {
    color: var(--font-color)
}

#page-header.nav-fixed #nav #blog-info:hover {
    color: #49b1f5
}

#page-header.nav-fixed #nav #blog-info .site-name {
    text-shadow: none
}

#page-header.nav-fixed #nav #blog-info > a:first-child {
    display: none
}

#page-header.nav-fixed #nav #blog-info > a:last-child {
    display: inline
}

#page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a, #page-header.nav-fixed #nav span.site-page {
    color: var(--font-color);
    text-shadow: none
}

#page-header.nav-fixed #nav #toggle-menu:hover, #page-header.nav-fixed #nav a:hover, #page-header.nav-fixed #nav span.site-page:hover {
    color: #49b1f5
}

#page-header.nav-fixed.fixed #nav {
    top: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

#page-header.nav-visible:not(.fixed) #nav {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

#page-header.nav-visible:not(.fixed) + .layout > .aside-content > .sticky_layout {
    top: 70px;
    -webkit-transition: top .5s;
    -moz-transition: top .5s;
    -o-transition: top .5s;
    -ms-transition: top .5s;
    transition: top .5s
}

#page-header.fixed #nav {
    position: fixed
}

#page-header.fixed + .layout > .aside-content > .sticky_layout {
    top: 70px;
    -webkit-transition: top .5s;
    -moz-transition: top .5s;
    -o-transition: top .5s;
    -ms-transition: top .5s;
    transition: top .5s
}

#page-header.fixed + .layout #card-toc .toc-content {
    max-height: calc(100vh - 170px)
}

#page .page-title {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 2em
}

#post > #post-info {
    margin-bottom: 30px
}

#post > #post-info .post-title {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--light-grey);
    color: var(--text-highlight-color)
}

#post > #post-info .post-title .post-edit-link {
    float: right
}

#post > #post-info #post-meta, #post > #post-info #post-meta a {
    color: #78818a
}

#post-info .post-title {
    margin-bottom: 8px;
    color: var(--white);
    font-weight: 400;
    font-size: 2.5em;
    line-height: 1.5;
    -webkit-line-clamp: 3
}

@media screen and (max-width: 768px) {
    #post-info .post-title {
        font-size: 2.1em
    }
}

#post-info .post-title .post-edit-link {
    padding-left: 10px
}

#post-info #post-meta {
    color: var(--light-grey);
    font-size: 95%
}

@media screen and (min-width: 768px) {
    #post-info #post-meta > .meta-secondline > span:first-child {
        display: none
    }
}

@media screen and (max-width: 768px) {
    #post-info #post-meta {
        font-size: 90%
    }

    #post-info #post-meta > .meta-firstline, #post-info #post-meta > .meta-secondline {
        display: inline
    }
}

#post-info #post-meta .post-meta-separator {
    margin: 0 5px
}

#post-info #post-meta .post-meta-icon {
    margin-right: 4px
}

#post-info #post-meta .post-meta-label {
    margin-right: 4px
}

#post-info #post-meta a {
    color: var(--light-grey);
    -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
}

#post-info #post-meta a:hover {
    color: #49b1f5;
    text-decoration: underline
}

#post-info #post-meta time {
    display: none
}

#nav {
    position: absolute;
    top: 0;
    z-index: 90;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 36px;
    width: 100%;
    height: 60px;
    font-size: 1.3em;
    opacity: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

@media screen and (max-width: 768px) {
    #nav {
        padding: 0 16px
    }
}

#nav.show {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#nav #blog-info {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: var(--light-grey)
}

#nav #blog-info .site-icon {
    margin-right: 6px;
    height: 36px;
    vertical-align: middle
}

#nav #blog-info .nav-page-title {
    display: none
}

#nav #toggle-menu {
    display: none;
    padding: 2px 0 0 6px;
    vertical-align: top
}

#nav #toggle-menu:hover {
    color: var(--white)
}

#nav a, #nav span.site-page {
    color: var(--light-grey)
}

#nav a:hover, #nav span.site-page:hover {
    color: var(--white)
}

#nav .site-name {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);
    font-weight: 700
}

#nav .menus_items {
    display: inline
}

#nav .menus_items .menus_item {
    position: relative;
    display: inline-block;
    padding: 0 0 0 14px
}

#nav .menus_items .menus_item:hover .menus_item_child {
    display: block
}

#nav .menus_items .menus_item:hover > span > i:last-child {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#nav .menus_items .menus_item > span > i:last-child {
    padding: 4px;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    -ms-transition: -ms-transform .3s;
    transition: transform .3s
}

#nav .menus_items .menus_item .menus_item_child {
    position: absolute;
    right: 0;
    display: none;
    margin-top: 8px;
    padding: 0;
    width: max-content;
    background-color: var(--sidebar-bg);
    -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);
    -webkit-animation: sub_menus .3s .1s ease both;
    -moz-animation: sub_menus .3s .1s ease both;
    -o-animation: sub_menus .3s .1s ease both;
    -ms-animation: sub_menus .3s .1s ease both;
    animation: sub_menus .3s .1s ease both;
    border-radius: 5px
}

#nav .menus_items .menus_item .menus_item_child:before {
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 20px;
    content: ''
}

#nav .menus_items .menus_item .menus_item_child li {
    list-style: none
}

#nav .menus_items .menus_item .menus_item_child li:hover {
    background: var(--text-bg-hover)
}

#nav .menus_items .menus_item .menus_item_child li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

#nav .menus_items .menus_item .menus_item_child li:last-child {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

#nav .menus_items .menus_item .menus_item_child li a {
    display: inline-block;
    padding: 8px 16px;
    width: 100%;
    color: var(--font-color) !important;
    text-shadow: none !important
}

#nav.hide-menu #toggle-menu {
    display: inline-block !important
}

#nav.hide-menu #toggle-menu .site-page {
    font-size: inherit
}

#nav.hide-menu .menus_items {
    display: none
}

#nav.hide-menu #search-button span:not(.site-page) {
    display: none
}

#nav #search-button {
    display: inline;
    padding: 0 0 0 14px
}

#nav .site-page {
    position: relative;
    padding-bottom: 6px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
    font-size: .78em;
    cursor: pointer
}

#nav .site-page:not(.child):after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 3px;
    background-color: #80c8f8;
    content: '';
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 6px
}

#nav .site-page:not(.child):hover:after {
    width: 100%
}

#nav .nav-page-title {
    position: relative;
    overflow: hidden
}

#nav .nav-page-title > :first-child, #nav .nav-page-title > :last-child {
    display: inline-block;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

#nav .nav-page-title > :last-child {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    -webkit-transform: translateY(-50%) translateY(-10px);
    -moz-transform: translateY(-50%) translateY(-10px);
    -o-transform: translateY(-50%) translateY(-10px);
    -ms-transform: translateY(-50%) translateY(-10px);
    transform: translateY(-50%) translateY(-10px)
}

#nav .nav-page-title:hover > :last-child {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(-50%) translateY(0);
    -moz-transform: translateY(-50%) translateY(0);
    -o-transform: translateY(-50%) translateY(0);
    -ms-transform: translateY(-50%) translateY(0);
    transform: translateY(-50%) translateY(0)
}

#nav .nav-page-title:hover > :first-child {
    opacity: 0;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px)
}

#pagination .pagination {
    margin-top: 20px;
    text-align: center
}

#pagination .page-number.current {
    background: #00c4b6;
    color: var(--white)
}

#pagination .full-width {
    width: 100% !important
}

#pagination .pagination-related {
    height: 150px
}

@media screen and (min-width: 768px) {
    #pagination .pagination-related {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

#pagination .pagination-related .info-1 .info-item-2 {
    -webkit-line-clamp: 1
}

#pagination .pagination-related .info-2 .info-item-1 {
    -webkit-line-clamp: 2
}

#pagination.pagination-post {
    overflow: hidden;
    margin-top: 40px;
    width: 100%;
    border-radius: 6px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex
}

@media screen and (max-width: 768px) {
    #pagination.pagination-post {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.layout .pagination > * {
    display: inline-block;
    margin: 0 6px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em
}

.layout .pagination > :not(.space):hover {
    background: var(--btn-hover-color);
    color: var(--btn-color)
}

#archive .pagination {
    margin-top: 30px
}

#archive .pagination > :not(.space) {
    -webkit-box-shadow: none;
    box-shadow: none
}

.pagination-related {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: #000;
    vertical-align: bottom
}

.pagination-related.next-post .info {
    text-align: right
}

.pagination-related .info .info-1, .pagination-related .info .info-2 {
    padding: 20px 40px;
    color: var(--white);
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    -moz-transition: -moz-transform .3s, opacity .3s;
    -o-transition: -o-transform .3s, opacity .3s;
    -ms-transition: -ms-transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s
}

.pagination-related .info .info-1 .info-item-1 {
    color: var(--light-grey);
    text-transform: uppercase;
    font-size: 90%
}

.pagination-related .info .info-1 .info-item-2 {
    color: var(--white);
    font-weight: 500
}

.pagination-related .info .info-2 {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.pagination-related:not(.no-desc):hover .info-1 {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    transform: translate(0, -100%)
}

.pagination-related:not(.no-desc):hover .info-2 {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.container {
    word-wrap: break-word;
    overflow-wrap: break-word
}

.container a {
    color: #49b1f5
}

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

.container img {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    -webkit-transition: filter 375ms ease-in .2s;
    -moz-transition: filter 375ms ease-in .2s;
    -o-transition: filter 375ms ease-in .2s;
    -ms-transition: filter 375ms ease-in .2s;
    transition: filter 375ms ease-in .2s;
    border-radius: 6px
}

.container p {
    margin: 0 0 16px
}

.container iframe {
    margin: 0 0 20px
}

.container kbd {
    margin: 0 3px;
    padding: 3px 5px;
    border: 1px solid #b4b4b4;
    background-color: #f8f8f8;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset;
    color: #34495e;
    white-space: nowrap;
    font-weight: 600;
    font-size: .9em;
    font-family: Monaco, 'Ubuntu Mono', monospace;
    line-height: 1em;
    border-radius: 3px
}

.container h1, .container h2, .container h3, .container h4, .container h5, .container h6 {
    width: fit-content
}

.container h1 a:not(.headerlink), .container h2 a:not(.headerlink), .container h3 a:not(.headerlink), .container h4 a:not(.headerlink), .container h5 a:not(.headerlink), .container h6 a:not(.headerlink) {
    position: relative;
    z-index: 10
}

.container h1 a.headerlink, .container h2 a.headerlink, .container h3 a.headerlink, .container h4 a.headerlink, .container h5 a.headerlink, .container h6 a.headerlink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.container ol ol, .container ol ul, .container ul ol, .container ul ul {
    padding-left: 20px
}

.container ol li, .container ul li {
    margin: 4px 0
}

.container ol p, .container ul p {
    margin: 0 0 8px
}

.container > :last-child {
    margin-bottom: 0 !important
}

.container hr {
    margin: 20px 0
}

.container.post-content h1, .container.post-content h2, .container.post-content h3, .container.post-content h4, .container.post-content h5, .container.post-content h6 {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.container.post-content h1:before, .container.post-content h2:before, .container.post-content h3:before, .container.post-content h4:before, .container.post-content h5:before, .container.post-content h6:before {
    position: absolute;
    top: calc(50% - 7px);
    left: 0;
    color: #f47466;
    content: '\f0c1';
    line-height: 1;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.container.post-content h1:hover:before, .container.post-content h2:hover:before, .container.post-content h3:hover:before, .container.post-content h4:hover:before, .container.post-content h5:hover:before, .container.post-content h6:hover:before {
    color: #49b1f5
}

.container.post-content h1 {
    padding-left: 28px
}

.container.post-content h1:before {
    font-size: 18px
}

.container.post-content h1:hover {
    padding-left: 32px
}

.container.post-content h2 {
    padding-left: 26px
}

.container.post-content h2:before {
    font-size: 16px
}

.container.post-content h2:hover {
    padding-left: 30px
}

.container.post-content h3 {
    padding-left: 24px
}

.container.post-content h3:before {
    font-size: 14px
}

.container.post-content h3:hover {
    padding-left: 28px
}

.container.post-content h4 {
    padding-left: 22px
}

.container.post-content h4:before {
    font-size: 12px
}

.container.post-content h4:hover {
    padding-left: 26px
}

.container.post-content h5 {
    padding-left: 20px
}

.container.post-content h5:before {
    font-size: 10px
}

.container.post-content h5:hover {
    padding-left: 24px
}

.container.post-content h6 {
    padding-left: 20px
}

.container.post-content h6:before {
    font-size: 10px
}

.container.post-content h6:hover {
    padding-left: 24px
}

.container.post-content ol p, .container.post-content ul p {
    margin: 0 0 8px
}

.container.post-content li::marker {
    color: #49b1f5;
    font-weight: 600;
    font-size: 1.05em
}

.container.post-content li:hover::marker {
    color: var(--pseudo-hover)
}

.container.post-content ul > li {
    list-style-type: circle
}

#post .tag_share:after {
    display: block;
    clear: both;
    content: ''
}

#post .tag_share .post-meta__tag-list {
    display: inline-block
}

#post .tag_share .post-meta__tags {
    display: inline-block;
    margin: 8px 8px 8px 0;
    padding: 0 12px;
    width: fit-content;
    border: 1px solid #49b1f5;
    border-radius: 12px;
    color: #49b1f5;
    font-size: .85em;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

#post .tag_share .post-meta__tags:hover {
    background: #49b1f5;
    color: var(--white)
}

#post .tag_share .post-share {
    display: inline-block;
    float: right;
    margin: 8px 0 0;
    width: fit-content
}

#post .tag_share .post-share .social-share {
    font-size: .85em
}

#post .tag_share .post-share .social-share .social-share-icon {
    margin: 0 4px;
    width: 1.85em;
    height: 1.85em;
    font-size: 1.2em;
    line-height: 1.85em
}

#post .post-copyright {
    position: relative;
    margin: 40px 0 10px;
    padding: 10px 16px;
    border: 1px solid var(--light-grey);
    -webkit-transition: box-shadow .3s ease-in-out;
    -moz-transition: box-shadow .3s ease-in-out;
    -o-transition: box-shadow .3s ease-in-out;
    -ms-transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    border-radius: 6px
}

#post .post-copyright:before {
    position: absolute;
    top: 2px;
    right: 12px;
    color: #49b1f5;
    content: '\f1f9';
    font-size: 1.3em
}

#post .post-copyright:hover {
    -webkit-box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
}

#post .post-copyright .post-copyright-meta {
    color: #49b1f5;
    font-weight: 700
}

#post .post-copyright .post-copyright-meta i {
    margin-right: 3px
}

#post .post-copyright .post-copyright-info {
    padding-left: 6px
}

#post .post-copyright .post-copyright-info a {
    text-decoration: underline;
    word-break: break-word
}

#post .post-copyright .post-copyright-info a:hover {
    text-decoration: none
}

#post #post-outdate-notice {
    position: relative;
    margin: 0 0 20px;
    padding: .5em 1.2em;
    background-color: #ffe6e6;
    color: #f66;
    border-radius: 3px;
    padding: .5em 1em .5em 2.6em;
    border-left: 5px solid #ff8080
}

#post #post-outdate-notice .num {
    padding: 0 4px
}

#post #post-outdate-notice:before {
    position: absolute;
    top: 50%;
    left: .9em;
    color: #ff8080;
    content: '\f071';
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

#post .ads-wrap {
    margin: 40px 0
}

.relatedPosts {
    margin-top: 40px
}

.relatedPosts > .headline {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 1.43em
}

.relatedPosts > .relatedPosts-list > a {
    margin: 3px;
    width: calc(33.333% - 6px);
    height: 200px;
    border-radius: 6px
}

@media screen and (max-width: 768px) {
    .relatedPosts > .relatedPosts-list > a {
        margin: 2px;
        width: calc(50% - 4px);
        height: 150px
    }
}

@media screen and (max-width: 600px) {
    .relatedPosts > .relatedPosts-list > a {
        width: calc(100% - 4px)
    }
}

.relatedPosts > .relatedPosts-list .info .info-1 .info-item-2 {
    -webkit-line-clamp: 2
}

.relatedPosts > .relatedPosts-list .info .info-2 .info-item-1 {
    -webkit-line-clamp: 3
}

.post-reward {
    position: relative;
    margin-top: 80px;
    width: 100%;
    text-align: center;
    pointer-events: none
}

.post-reward > * {
    pointer-events: auto
}

.post-reward .reward-button {
    display: inline-block;
    padding: 4px 24px;
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    border-radius: 6px
}

.post-reward .reward-button i {
    margin-right: 5px;
    vertical-align: baseline
}

.post-reward:hover .reward-button {
    background: var(--btn-hover-color)
}

.post-reward:hover > .reward-main {
    display: block
}

.post-reward .reward-main {
    position: absolute;
    bottom: 50px;
    left: 0;
    z-index: 100;
    display: none;
    padding: 0 0 15px;
    width: 100%;
    border-radius: 6px
}

.post-reward .reward-main .reward-all {
    display: inline-block;
    margin: 0;
    padding: 20px 10px;
    background: var(--reward-pop)
}

.post-reward .reward-main .reward-all:before {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    content: ''
}

.post-reward .reward-main .reward-all:after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 13px solid var(--reward-pop);
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    content: ''
}

.post-reward .reward-main .reward-all .reward-item {
    display: inline-block;
    padding: 0 8px;
    list-style-type: none;
    vertical-align: top
}

.post-reward .reward-main .reward-all .reward-item img {
    width: 130px;
    height: 130px
}

.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
    width: 130px;
    color: #858585
}

#rightside {
    position: fixed;
    right: -48px;
    bottom: 40px;
    z-index: 100;
    opacity: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

#rightside.rightside-show {
    opacity: .8;
    -webkit-transform: translate(-58px, 0);
    -moz-transform: translate(-58px, 0);
    -o-transform: translate(-58px, 0);
    -ms-transform: translate(-58px, 0);
    transform: translate(-58px, 0)
}

#rightside #rightside-config-hide {
    height: 0;
    opacity: 0;
    -webkit-transition: -webkit-transform .4s;
    -moz-transition: -moz-transform .4s;
    -o-transition: -o-transform .4s;
    -ms-transition: -ms-transform .4s;
    transition: transform .4s;
    -webkit-transform: translate(45px, 0);
    -moz-transform: translate(45px, 0);
    -o-transform: translate(45px, 0);
    -ms-transform: translate(45px, 0);
    transform: translate(45px, 0)
}

#rightside #rightside-config-hide.show {
    height: auto;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

#rightside #rightside-config-hide.status {
    height: auto;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#rightside > div > a, #rightside > div > button {
    display: block;
    margin-bottom: 5px;
    width: 35px;
    height: 35px;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    font-size: 16px;
    line-height: 35px;
    border-radius: 5px
}

#rightside > div > a:hover, #rightside > div > button:hover {
    background-color: var(--btn-hover-color)
}

#rightside > div > a i, #rightside > div > button i {
    vertical-align: baseline
}

#rightside #mobile-toc-button {
    display: none
}

@media screen and (max-width: 900px) {
    #rightside #mobile-toc-button {
        display: block
    }
}

@media screen and (max-width: 900px) {
    #rightside #hide-aside-btn {
        display: none
    }
}

#rightside #go-up {
    position: relative
}

#rightside #go-up .scroll-percent {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -o-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
}

#rightside #go-up i {
    position: relative;
    z-index: 1;
    width: 100%;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -o-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

#rightside #go-up.show-percent .scroll-percent {
    display: block;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation: fadeInScale .4s ease-out;
    -moz-animation: fadeInScale .4s ease-out;
    -o-animation: fadeInScale .4s ease-out;
    -ms-animation: fadeInScale .4s ease-out;
    animation: fadeInScale .4s ease-out
}

#rightside #go-up.show-percent i {
    opacity: 0;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
}

#rightside #go-up:hover.show-percent .scroll-percent {
    opacity: 0;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
}

#rightside #go-up:hover.show-percent i {
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important
}

@-moz-keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
    to {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

#sidebar #menu-mask {
    position: fixed;
    z-index: 102;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8)
}

#sidebar #sidebar-menus {
    position: fixed;
    top: 0;
    right: -330px;
    z-index: 103;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-left: 5px;
    width: 330px;
    height: 100%;
    background: var(--sidebar-bg);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

#sidebar #sidebar-menus.open {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

#sidebar #sidebar-menus > .avatar-img {
    margin: 20px auto
}

#sidebar #sidebar-menus .site-data {
    padding: 0 10px
}

#sidebar #sidebar-menus hr {
    margin: 20px auto
}

#sidebar #sidebar-menus .menus_items {
    margin: 20px;
    padding: 15px;
    background: var(--sidebar-menu-bg);
    -webkit-box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05);
    box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05);
    border-radius: 10px
}

#sidebar #sidebar-menus .menus_items .site-page {
    position: relative;
    display: block;
    margin: 4px 0;
    padding: 2px 23px 2px 15px;
    color: var(--font-color);
    font-size: 1.15em;
    cursor: pointer;
    border-radius: 6px
}

#sidebar #sidebar-menus .menus_items .site-page:hover {
    background: var(--text-bg-hover);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    color: var(--white);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -o-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px)
}

#sidebar #sidebar-menus .menus_items .site-page i:first-child {
    width: 15%;
    text-align: left
}

#sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
    position: absolute;
    top: .6em;
    right: 10px;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    -ms-transition: -ms-transform .3s;
    transition: transform .3s
}

#sidebar #sidebar-menus .menus_items .site-page.group.hide > i:last-child {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

#sidebar #sidebar-menus .menus_items .site-page.group.hide + .menus_item_child {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top
}

#sidebar #sidebar-menus .menus_items .menus_item_child {
    margin: 0;
    padding-left: 25px;
    max-height: 0;
    list-style: none;
    opacity: 0;
    -webkit-transition: -webkit-transform .3s ease, opacity .3s ease, max-height .3s ease;
    -moz-transition: -moz-transform .3s ease, opacity .3s ease, max-height .3s ease;
    -o-transition: -o-transform .3s ease, opacity .3s ease, max-height .3s ease;
    -ms-transition: -ms-transform .3s ease, opacity .3s ease, max-height .3s ease;
    transition: transform .3s ease, opacity .3s ease, max-height .3s ease;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    will-change: transform, opacity, max-height
}

#sidebar #sidebar-menus .site-page.group:not(.hide) + .menus_item_child {
    max-height: 1000px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1)
}

#vcomment {
    font-size: 1.1em
}

#vcomment .vbtn {
    border: none;
    background: var(--btn-bg);
    color: var(--btn-color)
}

#vcomment .vbtn:hover {
    background: var(--btn-hover-color)
}

#vcomment .vimg {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

#vcomment .vimg:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

#vcomment .vcards .vcard .vcontent.expand:after, #vcomment .vcards .vcard .vcontent.expand:before {
    z-index: 22
}

#waline-wrap {
    --waline-font-size: 1.1em;
    --waline-theme-color: #49b1f5;
    --waline-active-color: #ff7242
}

#waline-wrap .wl-comment-actions > button:not(last-child) {
    padding-right: 4px
}

#waline-wrap textarea {
    background: url(/img/comment_bg.png) 100% 100% no-repeat
}

#waline-wrap textarea:focus {
    background-image: none
}

.twikoo .tk-content p {
    margin: 3px 0
}

.fireworks {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none
}

.medium-zoom-image--opened {
    z-index: 99999 !important;
    margin: 0 !important
}

.medium-zoom-overlay {
    z-index: 99999 !important
}

.mermaid-wrap {
    margin: 0 0 20px;
    text-align: center
}

.mermaid-wrap > svg {
    height: 100%
}

pre > code.mermaid {
    display: none
}

.chartjs-container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 0 20px;
    text-align: center;
    gap: 20px
}

@media screen and (max-width: 600px) {
    .chartjs-container .chartjs-wrap {
        width: 100% !important
    }
}

.chartjs-container.chartjs-abreast {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

@media screen and (max-width: 600px) {
    .chartjs-container.chartjs-abreast {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.chartjs-container .chartjs-wrap {
    width: -webkit-fill-available
}

.chartjs-container canvas {
    display: inline-block !important
}

.fb-comments iframe, .utterances {
    width: 100% !important
}

#gitalk-container .gt-meta {
    margin: 0 0 .8em;
    padding: 6px 0 16px
}

.aplayer {
    color: #4c4948
}

.container .aplayer {
    margin: 0 0 20px
}

.container .aplayer ol, .container .aplayer ul {
    margin: 0;
    padding: 0
}

.container .aplayer ol li, .container .aplayer ul li {
    margin: 0;
    padding: 0 15px
}

.container .aplayer ol li:before, .container .aplayer ul li:before {
    content: none
}

.snackbar-container.snackbar-css {
    border-radius: 5px;
    opacity: .85 !important
}

.abc-music-sheet {
    margin: 0 0 20px;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s
}

.abc-music-sheet.abcjs-container {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

@media screen and (max-width: 768px) {
    .fancybox__toolbar__column.is-middle {
        display: none
    }
}

.container .btn-center {
    margin: 0 0 20px;
    text-align: center
}

.container .btn-beautify {
    display: inline-block;
    margin: 0 4px 6px;
    padding: 0 15px;
    background-color: var(--btn-beautify-color, var(--btn-default-color));
    color: var(--btn-color, #fff);
    vertical-align: top;
    line-height: 2;
    border-radius: 6px
}

.container .btn-beautify.blue {
    --btn-beautify-color: var(--tags-blue-color)
}

.container .btn-beautify.pink {
    --btn-beautify-color: var(--tags-pink-color)
}

.container .btn-beautify.red {
    --btn-beautify-color: var(--tags-red-color)
}

.container .btn-beautify.purple {
    --btn-beautify-color: var(--tags-purple-color)
}

.container .btn-beautify.orange {
    --btn-beautify-color: var(--tags-orange-color)
}

.container .btn-beautify.green {
    --btn-beautify-color: var(--tags-green-color)
}

.container .btn-beautify:hover {
    background-color: var(--btn-hover-color)
}

.container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
    margin: 0 4px 20px
}

.container .btn-beautify.block {
    display: block;
    margin: 0 0 20px;
    width: fit-content;
    width: -moz-fit-content
}

.container .btn-beautify.block.center {
    margin: 0 auto 20px
}

.container .btn-beautify.block.right {
    margin: 0 0 20px auto
}

.container .btn-beautify.larger {
    padding: 6px 15px
}

.container .btn-beautify.outline {
    border: 1px solid transparent;
    border-color: var(--btn-beautify-color, var(--btn-default-color));
    background-color: transparent;
    color: var(--btn-beautify-color, var(--btn-default-color))
}

.container .btn-beautify.outline i, .container .btn-beautify.outline span {
    -webkit-transition: color .3s cubic-bezier(.4, 0, .2, 1);
    -moz-transition: color .3s cubic-bezier(.4, 0, .2, 1);
    -o-transition: color .3s cubic-bezier(.4, 0, .2, 1);
    -ms-transition: color .3s cubic-bezier(.4, 0, .2, 1);
    transition: color .3s cubic-bezier(.4, 0, .2, 1)
}

.container .btn-beautify.outline::before {
    background: -webkit-linear-gradient(0deg, transparent, rgba(0, 0, 0, .1), transparent);
    background: -moz-linear-gradient(0deg, transparent, rgba(0, 0, 0, .1), transparent);
    background: -o-linear-gradient(0deg, transparent, rgba(0, 0, 0, .1), transparent);
    background: -ms-linear-gradient(0deg, transparent, rgba(0, 0, 0, .1), transparent);
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent)
}

.container .btn-beautify.outline:hover {
    border-color: var(--btn-beautify-color, var(--btn-default-color));
    background-color: var(--btn-beautify-color, var(--btn-default-color));
    color: var(--btn-color) !important
}

.container .btn-beautify.outline:hover i, .container .btn-beautify.outline:hover span {
    color: var(--btn-color)
}

.container figure.gallery-group {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 6px 4px;
    width: calc(50% - 8px);
    height: 250px;
    border-radius: 10px;
    background: #000;
    -webkit-transform: translate3d(0, 0, 0)
}

@media screen and (max-width: 600px) {
    .container figure.gallery-group {
        width: calc(100% - 8px)
    }
}

@media screen and (min-width: 1024px) {
    .container figure.gallery-group {
        width: calc(100% / 3 - 8px)
    }
}

.container figure.gallery-group:hover img {
    opacity: .4;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.container figure.gallery-group:hover .gallery-group-name::after {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.container figure.gallery-group:hover p {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.container figure.gallery-group img {
    position: relative;
    margin: 0;
    max-width: none;
    width: calc(100% + 20px);
    height: 250px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: .8;
    -webkit-transition: all .3s, filter 375ms ease-in .2s;
    -moz-transition: all .3s, filter 375ms ease-in .2s;
    -o-transition: all .3s, filter 375ms ease-in .2s;
    -ms-transition: all .3s, filter 375ms ease-in .2s;
    transition: all .3s, filter 375ms ease-in .2s;
    -webkit-transform: translate3d(-10px, 0, 0);
    -moz-transform: translate3d(-10px, 0, 0);
    -o-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    object-fit: cover
}

.container figure.gallery-group figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    width: 100%;
    height: 100%;
    color: #fff;
    text-transform: uppercase;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden
}

.container figure.gallery-group figcaption > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    opacity: 0
}

.container figure.gallery-group p {
    margin: 0;
    padding: 8px 0 0;
    letter-spacing: 1px;
    font-size: 1.1em;
    line-height: 1.5;
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    -moz-transition: opacity .35s, -moz-transform .35s;
    -o-transition: opacity .35s, -o-transform .35s;
    -ms-transition: opacity .35s, -ms-transform .35s;
    transition: opacity .35s, transform .35s;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-line-clamp: 4
}

.container figure.gallery-group .gallery-group-name {
    position: relative;
    margin: 0;
    padding: 8px 0;
    font-weight: 700;
    font-size: 1.65em;
    line-height: 1.5;
    -webkit-line-clamp: 2
}

.container figure.gallery-group .gallery-group-name:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform .35s;
    -moz-transition: -moz-transform .35s;
    -o-transition: -o-transform .35s;
    -ms-transition: -ms-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

.container .gallery-group-main {
    overflow: auto;
    padding: 0 0 16px
}

.container .gallery-container {
    margin: 0 0 20px;
    text-align: center;
    opacity: 0
}

.container .gallery-container.loaded {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.container .gallery-container img {
    display: initial;
    margin: 0;
    width: 100%;
    height: 100%
}

.container .gallery-container .gallery-data {
    display: none
}

.container .gallery-container button {
    margin-top: 25px;
    padding: 8px 14px;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-weight: 700;
    font-size: 1.1em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    border-radius: 5px
}

.container .gallery-container button:hover {
    background: var(--btn-hover-color)
}

.container .gallery-container button:hover i {
    margin-left: 8px
}

.container .gallery-container button i {
    margin-left: 4px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s
}

.container .loading-container {
    display: inline-block;
    overflow: hidden;
    width: 154px;
    height: 154px
}

.container .loading-container .loading-item {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1);
    -moz-transform: translateZ(0) scale(1);
    -o-transform: translateZ(0) scale(1);
    -ms-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
}

.container .loading-container .loading-item div {
    position: absolute;
    width: 30.8px;
    height: 30.8px;
    border-radius: 50%;
    background: #e15b64;
    -webkit-transform: translate(61.6px, 61.6px) scale(1);
    -moz-transform: translate(61.6px, 61.6px) scale(1);
    -o-transform: translate(61.6px, 61.6px) scale(1);
    -ms-transform: translate(61.6px, 61.6px) scale(1);
    transform: translate(61.6px, 61.6px) scale(1);
    -webkit-animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1);
    -moz-animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1);
    -o-animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1);
    -ms-animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1);
    animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1)
}

.container .loading-container .loading-item div:nth-child(1) {
    background: #f47e60;
    -webkit-transform: translate(113.96px, 61.6px) scale(1);
    -moz-transform: translate(113.96px, 61.6px) scale(1);
    -o-transform: translate(113.96px, 61.6px) scale(1);
    -ms-transform: translate(113.96px, 61.6px) scale(1);
    transform: translate(113.96px, 61.6px) scale(1);
    -webkit-animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start;
    -moz-animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start;
    -o-animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start;
    -ms-animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start;
    animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start
}

.container .loading-container .loading-item div:nth-child(2) {
    background: #e15b64;
    -webkit-animation-delay: -.48s;
    -moz-animation-delay: -.48s;
    -o-animation-delay: -.48s;
    -ms-animation-delay: -.48s;
    animation-delay: -.48s
}

.container .loading-container .loading-item div:nth-child(3) {
    background: #f47e60;
    -webkit-animation-delay: -.96s;
    -moz-animation-delay: -.96s;
    -o-animation-delay: -.96s;
    -ms-animation-delay: -.96s;
    animation-delay: -.96s
}

.container .loading-container .loading-item div:nth-child(4) {
    background: #f8b26a;
    -webkit-animation-delay: -1.44s;
    -moz-animation-delay: -1.44s;
    -o-animation-delay: -1.44s;
    -ms-animation-delay: -1.44s;
    animation-delay: -1.44s
}

.container .loading-container .loading-item div:nth-child(5) {
    background: #abbd81;
    -webkit-animation-delay: -1.92s;
    -moz-animation-delay: -1.92s;
    -o-animation-delay: -1.92s;
    -ms-animation-delay: -1.92s;
    animation-delay: -1.92s
}

@-moz-keyframes loading-ball {
    0% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    25% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    50% {
        -webkit-transform: translate(9.24px, 61.6px) scale(1);
        -moz-transform: translate(9.24px, 61.6px) scale(1);
        -o-transform: translate(9.24px, 61.6px) scale(1);
        -ms-transform: translate(9.24px, 61.6px) scale(1);
        transform: translate(9.24px, 61.6px) scale(1)
    }
    75% {
        -webkit-transform: translate(61.6px, 61.6px) scale(1);
        -moz-transform: translate(61.6px, 61.6px) scale(1);
        -o-transform: translate(61.6px, 61.6px) scale(1);
        -ms-transform: translate(61.6px, 61.6px) scale(1);
        transform: translate(61.6px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
}

@-webkit-keyframes loading-ball {
    0% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    25% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    50% {
        -webkit-transform: translate(9.24px, 61.6px) scale(1);
        -moz-transform: translate(9.24px, 61.6px) scale(1);
        -o-transform: translate(9.24px, 61.6px) scale(1);
        -ms-transform: translate(9.24px, 61.6px) scale(1);
        transform: translate(9.24px, 61.6px) scale(1)
    }
    75% {
        -webkit-transform: translate(61.6px, 61.6px) scale(1);
        -moz-transform: translate(61.6px, 61.6px) scale(1);
        -o-transform: translate(61.6px, 61.6px) scale(1);
        -ms-transform: translate(61.6px, 61.6px) scale(1);
        transform: translate(61.6px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
}

@-o-keyframes loading-ball {
    0% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    25% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    50% {
        -webkit-transform: translate(9.24px, 61.6px) scale(1);
        -moz-transform: translate(9.24px, 61.6px) scale(1);
        -o-transform: translate(9.24px, 61.6px) scale(1);
        -ms-transform: translate(9.24px, 61.6px) scale(1);
        transform: translate(9.24px, 61.6px) scale(1)
    }
    75% {
        -webkit-transform: translate(61.6px, 61.6px) scale(1);
        -moz-transform: translate(61.6px, 61.6px) scale(1);
        -o-transform: translate(61.6px, 61.6px) scale(1);
        -ms-transform: translate(61.6px, 61.6px) scale(1);
        transform: translate(61.6px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
}

@keyframes loading-ball {
    0% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    25% {
        -webkit-transform: translate(9.24px, 61.6px) scale(0);
        -moz-transform: translate(9.24px, 61.6px) scale(0);
        -o-transform: translate(9.24px, 61.6px) scale(0);
        -ms-transform: translate(9.24px, 61.6px) scale(0);
        transform: translate(9.24px, 61.6px) scale(0)
    }
    50% {
        -webkit-transform: translate(9.24px, 61.6px) scale(1);
        -moz-transform: translate(9.24px, 61.6px) scale(1);
        -o-transform: translate(9.24px, 61.6px) scale(1);
        -ms-transform: translate(9.24px, 61.6px) scale(1);
        transform: translate(9.24px, 61.6px) scale(1)
    }
    75% {
        -webkit-transform: translate(61.6px, 61.6px) scale(1);
        -moz-transform: translate(61.6px, 61.6px) scale(1);
        -o-transform: translate(61.6px, 61.6px) scale(1);
        -ms-transform: translate(61.6px, 61.6px) scale(1);
        transform: translate(61.6px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
}

@-moz-keyframes loading-ball-r {
    0% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(0);
        -moz-transform: translate(113.96px, 61.6px) scale(0);
        -o-transform: translate(113.96px, 61.6px) scale(0);
        -ms-transform: translate(113.96px, 61.6px) scale(0);
        transform: translate(113.96px, 61.6px) scale(0)
    }
}

@-webkit-keyframes loading-ball-r {
    0% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(0);
        -moz-transform: translate(113.96px, 61.6px) scale(0);
        -o-transform: translate(113.96px, 61.6px) scale(0);
        -ms-transform: translate(113.96px, 61.6px) scale(0);
        transform: translate(113.96px, 61.6px) scale(0)
    }
}

@-o-keyframes loading-ball-r {
    0% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(0);
        -moz-transform: translate(113.96px, 61.6px) scale(0);
        -o-transform: translate(113.96px, 61.6px) scale(0);
        -ms-transform: translate(113.96px, 61.6px) scale(0);
        transform: translate(113.96px, 61.6px) scale(0)
    }
}

@keyframes loading-ball-r {
    0% {
        -webkit-transform: translate(113.96px, 61.6px) scale(1);
        -moz-transform: translate(113.96px, 61.6px) scale(1);
        -o-transform: translate(113.96px, 61.6px) scale(1);
        -ms-transform: translate(113.96px, 61.6px) scale(1);
        transform: translate(113.96px, 61.6px) scale(1)
    }
    100% {
        -webkit-transform: translate(113.96px, 61.6px) scale(0);
        -moz-transform: translate(113.96px, 61.6px) scale(0);
        -o-transform: translate(113.96px, 61.6px) scale(0);
        -ms-transform: translate(113.96px, 61.6px) scale(0);
        transform: translate(113.96px, 61.6px) scale(0)
    }
}

@-moz-keyframes loading-ball-c {
    0% {
        background: #e15b64
    }
    25% {
        background: #abbd81
    }
    50% {
        background: #f8b26a
    }
    75% {
        background: #f47e60
    }
    100% {
        background: #e15b64
    }
}

@-webkit-keyframes loading-ball-c {
    0% {
        background: #e15b64
    }
    25% {
        background: #abbd81
    }
    50% {
        background: #f8b26a
    }
    75% {
        background: #f47e60
    }
    100% {
        background: #e15b64
    }
}

@-o-keyframes loading-ball-c {
    0% {
        background: #e15b64
    }
    25% {
        background: #abbd81
    }
    50% {
        background: #f8b26a
    }
    75% {
        background: #f47e60
    }
    100% {
        background: #e15b64
    }
}

@keyframes loading-ball-c {
    0% {
        background: #e15b64
    }
    25% {
        background: #abbd81
    }
    50% {
        background: #f8b26a
    }
    75% {
        background: #f47e60
    }
    100% {
        background: #e15b64
    }
}

blockquote.pullquote {
    position: relative;
    max-width: 45%;
    font-size: 110%
}

blockquote.pullquote.left {
    float: left;
    margin: 1em .5em 0 0
}

blockquote.pullquote.right {
    float: right;
    margin: 1em 0 0 .5em
}

.video-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    padding-top: 56.25%;
    height: 0
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
    width: 100%;
    height: 100%
}

.hide-block > .hide-button, .hide-inline > .hide-button {
    display: inline-block;
    padding: 5px 18px;
    background: #49b1f5;
    color: var(--white);
    border-radius: 6px
}

.hide-block > .hide-button:hover, .hide-inline > .hide-button:hover {
    background-color: var(--btn-hover-color)
}

.hide-block > .hide-button.open, .hide-inline > .hide-button.open {
    display: none
}

.hide-block > .hide-button.open + div, .hide-inline > .hide-button.open + div {
    display: block
}

.hide-block > .hide-button.open + span, .hide-inline > .hide-button.open + span {
    display: inline
}

.hide-block > .hide-content, .hide-inline > .hide-content {
    display: none
}

.hide-inline > .hide-button {
    margin: 0 6px
}

.hide-inline > .hide-content {
    margin: 0 6px
}

.hide-block {
    margin: 0 0 16px
}

.toggle {
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    overflow: hidden
}

.toggle > .toggle-content {
    margin: 30px 24px
}

.toggle > .toggle-button {
    padding: 6px 15px;
    background: #f0f0f0;
    color: #1f2d3d;
    list-style: none;
    cursor: pointer
}

.toggle > .toggle-button::-webkit-details-marker {
    display: none
}

.toggle > .toggle-button::before {
    margin-right: 8px;
    content: '\f0d7';
    -webkit-transition: -webkit-transform .3s ease;
    -moz-transition: -moz-transform .3s ease;
    -o-transition: -o-transform .3s ease;
    -ms-transition: -ms-transform .3s ease;
    transition: transform .3s ease;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.toggle[open] summary::before {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.container .inline-img {
    display: inline;
    margin: 0 3px;
    height: 1.1em;
    vertical-align: text-bottom
}

.hl-label {
    padding: 2px 4px;
    color: var(--btn-color, #fff);
    border-radius: 3px
}

.hl-label.default {
    background-color: var(--btn-default-color)
}

.hl-label.blue {
    background-color: var(--tags-blue-color)
}

.hl-label.pink {
    background-color: var(--tags-pink-color)
}

.hl-label.red {
    background-color: var(--tags-red-color)
}

.hl-label.purple {
    background-color: var(--tags-purple-color)
}

.hl-label.orange {
    background-color: var(--tags-orange-color)
}

.hl-label.green {
    background-color: var(--tags-green-color)
}

.note {
    position: relative;
    margin: 0 0 20px;
    padding: 15px;
    border-radius: 3px
}

.note.icon-padding {
    padding-left: 3em
}

.note > .note-icon {
    position: absolute;
    top: calc(50% - .5em);
    left: .8em;
    font-size: larger
}

.note.blue:not(.disabled) {
    border-left-color: var(--tags-blue-color) !important
}

.note.blue:not(.disabled).modern {
    border-left-color: transparent !important;
    color: var(--tags-blue-color)
}

.note.blue:not(.disabled):not(.simple) {
    background: var(--tags-blue-color-lighten)
}

.note.blue > .note-icon {
    color: var(--tags-blue-color)
}

.note.pink:not(.disabled) {
    border-left-color: var(--tags-pink-color) !important
}

.note.pink:not(.disabled).modern {
    border-left-color: transparent !important;
    color: var(--tags-pink-color)
}

.note.pink:not(.disabled):not(.simple) {
    background: var(--tags-pink-color-lighten)
}

.note.pink > .note-icon {
    color: var(--tags-pink-color)
}

.note.red:not(.disabled) {
    border-left-color: var(--tags-red-color) !important
}

.note.red:not(.disabled).modern {
    border-left-color: transparent !important;
    color: var(--tags-red-color)
}

.note.red:not(.disabled):not(.simple) {
    background: var(--tags-red-color-lighten)
}

.note.red > .note-icon {
    color: var(--tags-red-color)
}

.note.purple:not(.disabled) {
    border-left-color: var(--tags-purple-color) !important
}

.note.purple:not(.disabled).modern {
    border-left-color: transparent !important;
    color: var(--tags-purple-color)
}

.note.purple:not(.disabled):not(.simple) {
    background: var(--tags-purple-color-lighten)
}

.note.purple > .note-icon {
    color: var(--tags-purple-color)
}

.note.orange:not(.disabled) {
    border-left-color: var(--tags-orange-color) !important
}

.note.orange:not(.disabled).modern {
    border-left-color: transparent !important;
    color: var(--tags-orange-color)
}

.note.orange:not(.disabled):not(.simple) {
    background: var(--tags-orange-color-lighten)
}

.note.orange > .note-icon {
    color: var(--tags-orange-color)
}

.note.green:not(.disabled) {
    border-left-color: var(--tags-green-color) !important
}

.note.green:not(.disabled).modern {
    border-left-color: transparent !important;
    color: var(--tags-green-color)
}

.note.green:not(.disabled):not(.simple) {
    background: var(--tags-green-color-lighten)
}

.note.green > .note-icon {
    color: var(--tags-green-color)
}

.note.simple {
    border: 1px solid var(--note-default-border);
    border-left-width: 5px
}

.note.modern {
    border: 1px solid transparent !important;
    background-color: var(--note-modern-default-bg);
    color: var(--note-modern-default-text)
}

.note.flat {
    border: initial;
    border-left: 5px solid var(--note-default-border);
    background-color: var(--note-default-bg);
    color: var(--note-default-text)
}

.note h2, .note h3, .note h4, .note h5, .note h6 {
    margin-top: 3px;
    margin-bottom: 0;
    padding-top: 0 !important;
    border-bottom: initial
}

.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
    margin-top: 0 !important
}

.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
    margin-bottom: 0 !important
}

.note .img-alt {
    margin: 5px 0 10px
}

.note:not(.no-icon) {
    padding-left: 3em
}

.note:not(.no-icon)::before {
    position: absolute;
    top: calc(50% - .95em);
    left: .8em;
    font-size: larger
}

.note.default.flat {
    background: var(--note-default-bg);
    color: var(--font-color)
}

.note.default.modern {
    border-color: var(--note-modern-default-border) !important;
    background: var(--note-modern-default-bg);
    color: var(--note-modern-default-text)
}

.note.default.modern a:not(.btn) {
    color: var(--note-modern-default-text)
}

.note.default.modern a:not(.btn):hover {
    color: var(--note-modern-default-hover)
}

.note.default:not(.modern) {
    border-left-color: var(--note-default-border)
}

.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
    color: var(--note-default-text)
}

.note.default:not(.no-icon)::before {
    content: '\f0a9'
}

.note.default:not(.no-icon):not(.modern)::before {
    color: var(--note-default-text)
}

.note.primary.flat {
    background: var(--note-primary-bg);
    color: var(--font-color)
}

.note.primary.modern {
    border-color: var(--note-modern-primary-border) !important;
    background: var(--note-modern-primary-bg);
    color: var(--note-modern-primary-text)
}

.note.primary.modern a:not(.btn) {
    color: var(--note-modern-primary-text)
}

.note.primary.modern a:not(.btn):hover {
    color: var(--note-modern-primary-hover)
}

.note.primary:not(.modern) {
    border-left-color: var(--note-primary-border)
}

.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
    color: var(--note-primary-text)
}

.note.primary:not(.no-icon)::before {
    content: '\f055'
}

.note.primary:not(.no-icon):not(.modern)::before {
    color: var(--note-primary-text)
}

.note.info.flat {
    background: var(--note-info-bg);
    color: var(--font-color)
}

.note.info.modern {
    border-color: var(--note-modern-info-border) !important;
    background: var(--note-modern-info-bg);
    color: var(--note-modern-info-text)
}

.note.info.modern a:not(.btn) {
    color: var(--note-modern-info-text)
}

.note.info.modern a:not(.btn):hover {
    color: var(--note-modern-info-hover)
}

.note.info:not(.modern) {
    border-left-color: var(--note-info-border)
}

.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
    color: var(--note-info-text)
}

.note.info:not(.no-icon)::before {
    content: '\f05a'
}

.note.info:not(.no-icon):not(.modern)::before {
    color: var(--note-info-text)
}

.note.success.flat {
    background: var(--note-success-bg);
    color: var(--font-color)
}

.note.success.modern {
    border-color: var(--note-modern-success-border) !important;
    background: var(--note-modern-success-bg);
    color: var(--note-modern-success-text)
}

.note.success.modern a:not(.btn) {
    color: var(--note-modern-success-text)
}

.note.success.modern a:not(.btn):hover {
    color: var(--note-modern-success-hover)
}

.note.success:not(.modern) {
    border-left-color: var(--note-success-border)
}

.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
    color: var(--note-success-text)
}

.note.success:not(.no-icon)::before {
    content: '\f058'
}

.note.success:not(.no-icon):not(.modern)::before {
    color: var(--note-success-text)
}

.note.warning.flat {
    background: var(--note-warning-bg);
    color: var(--font-color)
}

.note.warning.modern {
    border-color: var(--note-modern-warning-border) !important;
    background: var(--note-modern-warning-bg);
    color: var(--note-modern-warning-text)
}

.note.warning.modern a:not(.btn) {
    color: var(--note-modern-warning-text)
}

.note.warning.modern a:not(.btn):hover {
    color: var(--note-modern-warning-hover)
}

.note.warning:not(.modern) {
    border-left-color: var(--note-warning-border)
}

.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
    color: var(--note-warning-text)
}

.note.warning:not(.no-icon)::before {
    content: '\f06a'
}

.note.warning:not(.no-icon):not(.modern)::before {
    color: var(--note-warning-text)
}

.note.danger.flat {
    background: var(--note-danger-bg);
    color: var(--font-color)
}

.note.danger.modern {
    border-color: var(--note-modern-danger-border) !important;
    background: var(--note-modern-danger-bg);
    color: var(--note-modern-danger-text)
}

.note.danger.modern a:not(.btn) {
    color: var(--note-modern-danger-text)
}

.note.danger.modern a:not(.btn):hover {
    color: var(--note-modern-danger-hover)
}

.note.danger:not(.modern) {
    border-left-color: var(--note-danger-border)
}

.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
    color: var(--note-danger-text)
}

.note.danger:not(.no-icon)::before {
    content: '\f056'
}

.note.danger:not(.no-icon):not(.modern)::before {
    color: var(--note-danger-text)
}

.container .series-items a:hover {
    color: var(--pseudo-hover)
}

.container .tabs {
    position: relative;
    margin: 0 0 20px;
    border-right: 1px solid var(--tab-border-color);
    border-bottom: 1px solid var(--tab-border-color);
    border-left: 1px solid var(--tab-border-color);
    border-radius: 6px;
    overflow: hidden
}

.container .tabs > .nav-tabs {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    background: var(--tab-button-bg)
}

.container .tabs > .nav-tabs > .tab {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    padding: 8px 18px;
    border-top: 2px solid var(--tab-border-color);
    background: var(--tab-button-bg);
    color: var(--tab-button-color);
    line-height: 2;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    -ms-transition: all .4s;
    transition: all .4s
}

.container .tabs > .nav-tabs > .tab i {
    width: 1.5em
}

.container .tabs > .nav-tabs > .tab.active {
    border-top: 2px solid #49b1f5;
    background: var(--tab-button-active-bg);
    cursor: default
}

.container .tabs > .nav-tabs > .tab:not(.active):hover {
    border-top: 2px solid var(--tab-button-hover-bg);
    background: var(--tab-button-hover-bg)
}

.container .tabs > .nav-tabs.no-default ~ .tab-to-top {
    display: none
}

.container .tabs > .tab-contents .tab-item-content {
    position: relative;
    display: none;
    padding: 36px 24px 10px
}

@media screen and (max-width: 768px) {
    .container .tabs > .tab-contents .tab-item-content {
        padding: 24px 14px
    }
}

.container .tabs > .tab-contents .tab-item-content.active {
    display: block;
    -webkit-animation: tabshow .5s;
    -moz-animation: tabshow .5s;
    -o-animation: tabshow .5s;
    -ms-animation: tabshow .5s;
    animation: tabshow .5s
}

.container .tabs > .tab-contents .tab-item-content > :last-child {
    margin-bottom: 0
}

.container .tabs > .tab-to-top {
    padding: 0 16px 10px 0;
    width: 100%;
    text-align: right
}

.container .tabs > .tab-to-top button {
    color: #99a9bf
}

.container .tabs > .tab-to-top button:hover {
    color: #49b1f5
}

@-moz-keyframes tabshow {
    0% {
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes tabshow {
    0% {
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes tabshow {
    0% {
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes tabshow {
    0% {
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.container .timeline {
    margin: 0 10px 20px;
    padding: 14px 0 5px 20px;
    border-left: 2px solid var(--timeline-color, #49b1f5)
}

.container .timeline.blue {
    --timeline-color: #428bca;
    --timeline-bg: rgba(66, 139, 202, 0.2)
}

.container .timeline.pink {
    --timeline-color: #ff69b4;
    --timeline-bg: rgba(255, 105, 180, 0.2)
}

.container .timeline.red {
    --timeline-color: #f00;
    --timeline-bg: rgba(255, 0, 0, 0.2)
}

.container .timeline.purple {
    --timeline-color: #6f42c1;
    --timeline-bg: rgba(111, 66, 193, 0.2)
}

.container .timeline.orange {
    --timeline-color: #ff8c00;
    --timeline-bg: rgba(255, 140, 0, 0.2)
}

.container .timeline.green {
    --timeline-color: #5cb85c;
    --timeline-bg: rgba(92, 184, 92, 0.2)
}

.container .timeline .timeline-item {
    margin: 0 0 15px
}

.container .timeline .timeline-item:hover .item-circle:before {
    border-color: var(--timeline-color, #49b1f5)
}

.container .timeline .timeline-item.headline .timeline-item-title .item-circle > p {
    font-weight: 600;
    font-size: 1.2em
}

.container .timeline .timeline-item.headline .timeline-item-title .item-circle:before {
    left: -28px;
    border: 4px solid var(--timeline-color, #49b1f5)
}

.container .timeline .timeline-item.headline:hover .item-circle:before {
    border-color: var(--pseudo-hover)
}

.container .timeline .timeline-item .timeline-item-title {
    position: relative
}

.container .timeline .timeline-item .item-circle:before {
    position: absolute;
    top: 50%;
    left: -27px;
    width: 6px;
    height: 6px;
    border: 3px solid var(--pseudo-hover);
    border-radius: 50%;
    background: var(--card-bg);
    content: '';
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.container .timeline .timeline-item .item-circle > p {
    margin: 0 0 8px;
    font-weight: 500
}

.container .timeline .timeline-item .timeline-item-content {
    position: relative;
    padding: 12px 15px;
    border-radius: 8px;
    background: var(--timeline-bg, #e4f3fd);
    font-size: .93em
}

.container .timeline .timeline-item .timeline-item-content > :last-child {
    margin-bottom: 0
}

.container .timeline + .timeline {
    margin-top: -20px
}

[data-theme=dark] {
    --global-bg: #0d0d0d;
    --font-color: rgba(255, 255, 255, 0.7);
    --hr-border: rgba(255, 255, 255, 0.4);
    --hr-before-color: rgba(255, 255, 255, 0.7);
    --search-bg: #121212;
    --search-input-color: rgba(255, 255, 255, 0.7);
    --search-a-color: rgba(255, 255, 255, 0.7);
    --preloader-bg: #0d0d0d;
    --preloader-color: rgba(255, 255, 255, 0.7);
    --tab-border-color: #2c2c2c;
    --tab-button-bg: #2c2c2c;
    --tab-button-color: rgba(255, 255, 255, 0.7);
    --tab-button-hover-bg: #383838;
    --tab-button-active-bg: #121212;
    --card-bg: #121212;
    --sidebar-bg: #121212;
    --sidebar-menu-bg: #1f1f1f;
    --btn-hover-color: #787878;
    --btn-color: rgba(255, 255, 255, 0.7);
    --btn-bg: #1f1f1f;
    --text-bg-hover: #383838;
    --light-grey: rgba(255, 255, 255, 0.7);
    --dark-grey: rgba(255, 255, 255, 0.2);
    --white: rgba(255, 255, 255, 0.9);
    --text-highlight-color: rgba(255, 255, 255, 0.9);
    --blockquote-color: rgba(255, 255, 255, 0.7);
    --blockquote-bg: #2c2c2c;
    --reward-pop: #2c2c2c;
    --toc-link-color: rgba(255, 255, 255, 0.6);
    --scrollbar-color: #525252;
    --timeline-bg: #1f1f1f;
    --zoom-bg: #121212;
    --mark-bg: rgba(0, 0, 0, 0.6);
    --btn-color: #ccc;
    --btn-default-color: #929292;
    --tags-blue-color: #3e6f98;
    --tags-blue-color-lighten: rgba(66, 139, 202, 0.15);
    --tags-pink-color: #dd3c8c;
    --tags-pink-color-lighten: rgba(255, 105, 180, 0.15);
    --tags-red-color: #a41b1b;
    --tags-red-color-lighten: rgba(255, 0, 0, 0.15);
    --tags-orange-color: #a76a20;
    --tags-orange-color-lighten: rgba(255, 140, 0, 0.15);
    --tags-purple-color: #5f4490;
    --tags-purple-color-lighten: rgba(111, 66, 193, 0.15);
    --tags-green-color: #4f8e4f;
    --tags-green-color-lighten: rgba(92, 184, 92, 0.15);
    --note-default-border: #5a5a5a;
    --note-default-bg: #2b2b2b;
    --note-default-text: #b3b3b3;
    --note-modern-default-border: #9a9a9a;
    --note-modern-default-bg: #353535;
    --note-modern-default-text: #c4c4c4;
    --note-primary-border: #5935a1;
    --note-primary-bg: #2e1c3e;
    --note-primary-text: #a47dd4;
    --note-modern-primary-border: #9985cc;
    --note-modern-primary-bg: #3c2d4c;
    --note-modern-primary-text: #b693e6;
    --note-info-border: #346fa2;
    --note-info-bg: #1f2e3b;
    --note-info-text: #7bb3db;
    --note-modern-info-border: #7ca8b5;
    --note-modern-info-bg: #2b3c44;
    --note-modern-info-text: #8fc6e0;
    --note-success-border: #4a944a;
    --note-success-bg: #202e20;
    --note-success-text: #82c682;
    --note-modern-success-border: #8bb087;
    --note-modern-success-bg: #2c3d2c;
    --note-modern-success-text: #96d196;
    --note-warning-border: #c08a3e;
    --note-warning-bg: #3e301f;
    --note-warning-text: #e6ba6b;
    --note-modern-warning-border: #b8a285;
    --note-modern-warning-bg: #4b3c2b;
    --note-modern-warning-text: #d4b373;
    --note-danger-border: #b34440;
    --note-danger-bg: #3b201f;
    --note-danger-text: #e67572;
    --note-modern-danger-border: #c7898c;
    --note-modern-danger-bg: #4d2b2e;
    --note-modern-danger-text: #d98b8e
}

[data-theme=dark] #web_bg:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    content: ''
}

[data-theme=dark] .container code {
    background: #2c2c2c
}

[data-theme=dark] .container pre > code {
    background: #171717
}

[data-theme=dark] .container figure.highlight {
    -webkit-box-shadow: none;
    box-shadow: none
}

[data-theme=dark] .container .note code {
    background: rgba(27, 31, 35, .05)
}

[data-theme=dark] .container .aplayer {
    filter: brightness(.8)
}

[data-theme=dark] .container kbd {
    border-color: #696969;
    background-color: #525252;
    color: #e2f1ff
}

[data-theme=dark] #page-header.nav-fixed > #nav, [data-theme=dark] #page-header.not-top-img > #nav {
    background: rgba(18, 18, 18, .8);
    -webkit-box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0);
    box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
}

[data-theme=dark] #post-comment .comment-switch {
    background: #2c2c2c !important
}

[data-theme=dark] #post-comment .comment-switch #switch-btn {
    filter: brightness(.8)
}

[data-theme=dark] #post-outdate-notice, [data-theme=dark] .ads-wrap, [data-theme=dark] .container iframe, [data-theme=dark] .error-img, [data-theme=dark] .gist, [data-theme=dark] .hide-button, [data-theme=dark] .tag-cloud-list > a, [data-theme=dark] .toggle-button {
    filter: brightness(.8)
}

[data-theme=dark] img:not(.cover) {
    filter: brightness(.88) contrast(.95)
}

[data-theme=dark] #aside-content .aside-list > .aside-list-item:not(:last-child) {
    border-bottom: 1px dashed rgba(255, 255, 255, .1)
}

[data-theme=dark] #gitalk-container {
    filter: brightness(.8)
}

[data-theme=dark] #gitalk-container svg {
    fill: rgba(255, 255, 255, .9) !important
}

[data-theme=dark] #disqusjs #dsqjs .dsqjs-no-comment, [data-theme=dark] #disqusjs #dsqjs .dsqjs-tab-active, [data-theme=dark] #disqusjs #dsqjs:focus, [data-theme=dark] #disqusjs #dsqjs:hover {
    color: rgba(255, 255, 255, .7)
}

[data-theme=dark] #disqusjs #dsqjs .dsqjs-order-label {
    background-color: #1f1f1f
}

[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body {
    color: rgba(255, 255, 255, .7)
}

[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body code, [data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body pre {
    background: #2c2c2c
}

[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body blockquote {
    color: rgba(255, 255, 255, .7)
}

[data-theme=dark] #artitalk_main #lazy {
    background: #121212
}

[data-theme=dark] #operare_artitalk .c2 {
    background: #121212
}

@media screen and (max-width: 900px) {
    [data-theme=dark] #card-toc {
        background: #1f1f1f
    }
}

[data-theme=dark] .artalk.atk-dark-mode, [data-theme=dark] .atk-layer-wrap.atk-dark-mode {
    --at-color-font: rgba(255, 255, 255, 0.7);
    --at-color-meta: rgba(255, 255, 255, 0.7);
    --at-color-grey: rgba(255, 255, 255, 0.7)
}

[data-theme=dark] .atk-badge, [data-theme=dark] .atk-send-btn {
    color: rgba(255, 255, 255, .7) !important
}

[data-theme=dark] #waline-wrap {
    --waline-color: rgba(255, 255, 255, 0.7);
    --waline-dark-grey: rgba(255, 255, 255, 0.7);
    --waline-info-color: rgba(255, 255, 255, 0.5)
}

.read-mode {
    --font-color: #4c4948;
    --readmode-light-color: #fff;
    --white: #4c4948;
    --light-grey: #4c4948;
    --gray: #d6dbdf;
    --hr-border: #d6dbdf;
    --hr-before-color: #b9c2c9;
    --highlight-bg: #f7f7f7;
    --exit-btn-bg: #c0c0c0;
    --exit-btn-color: #fff;
    --exit-btn-hover: #8d8d8d;
    --pseudo-hover: none
}

[data-theme=dark] .read-mode {
    --font-color: rgba(255, 255, 255, 0.7);
    --readmode-light-color: #0d0d0d;
    --white: rgba(255, 255, 255, 0.9);
    --light-grey: rgba(255, 255, 255, 0.7);
    --gray: rgba(255, 255, 255, 0.7);
    --hr-border: rgba(255, 255, 255, 0.5);
    --hr-before-color: rgba(255, 255, 255, 0.7);
    --highlight-bg: #171717;
    --exit-btn-bg: #1f1f1f;
    --exit-btn-color: rgba(255, 255, 255, 0.9);
    --exit-btn-hover: #525252
}

.read-mode {
    background: var(--readmode-light-color)
}

.read-mode .exit-readmode {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    width: 40px;
    height: 40px;
    background: var(--exit-btn-bg);
    color: var(--exit-btn-color);
    font-size: 16px;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -o-transition: background .3s;
    -ms-transition: background .3s;
    transition: background .3s;
    border-radius: 8px
}

@media screen and (max-width: 768px) {
    .read-mode .exit-readmode {
        top: initial;
        bottom: 30px
    }
}

.read-mode .exit-readmode:hover {
    background: var(--exit-btn-hover)
}

.read-mode #aside-content {
    display: none
}

.read-mode #page-header.post-bg {
    background: 0 0 !important
}

.read-mode #page-header.post-bg:before {
    opacity: 0
}

.read-mode #page-header.post-bg > #post-info {
    text-align: center
}

.read-mode #post {
    margin: 0 auto;
    background: 0 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.read-mode #post:hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

.read-mode > canvas {
    display: none !important
}

.read-mode #footer, .read-mode #nav, .read-mode #post-outdate-notice, .read-mode #post > :not(#post-info):not(.post-content), .read-mode #rightside, .read-mode #web_bg, .read-mode .highlight-tools, .read-mode .not-top-img {
    display: none !important
}

.read-mode .container a {
    color: #99a9bf
}

.read-mode .container .highlight:not(.js-file-line-container), .read-mode .container pre {
    background: var(--highlight-bg) !important
}

.read-mode .container .highlight:not(.js-file-line-container) *, .read-mode .container pre * {
    color: var(--font-color) !important
}

.read-mode .container figure.highlight {
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.read-mode .container figure.highlight > :not(.highlight-tools) {
    display: block !important
}

.read-mode .container figure.highlight .line:before {
    color: var(--font-color) !important
}

.read-mode .container figure.highlight .hljs {
    background: var(--highlight-bg) !important
}

.read-mode .container h1, .read-mode .container h2, .read-mode .container h3, .read-mode .container h4, .read-mode .container h5, .read-mode .container h6 {
    padding: 0
}

.read-mode .container h1:before, .read-mode .container h2:before, .read-mode .container h3:before, .read-mode .container h4:before, .read-mode .container h5:before, .read-mode .container h6:before {
    content: ''
}

.read-mode .container h1:hover, .read-mode .container h2:hover, .read-mode .container h3:hover, .read-mode .container h4:hover, .read-mode .container h5:hover, .read-mode .container h6:hover {
    padding: 0
}

.read-mode .container li:hover:before, .read-mode .container ol:hover:before, .read-mode .container ul:hover:before {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    -ms-transform: none !important;
    transform: none !important
}

.read-mode .container li:before, .read-mode .container ol:before {
    background: 0 0 !important;
    color: var(--font-color) !important
}

.read-mode .container ul > li:before {
    border-color: var(--gray) !important
}

.read-mode .container .tabs {
    border: 2px solid var(--tab-border-color)
}

.read-mode .container .tabs > .nav-tabs {
    background: 0 0
}

.read-mode .container .tabs > .nav-tabs > .tab {
    border-top: none !important
}

.read-mode .container .tabs > .tab-contents .tab-item-content.active {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none;
    animation: none
}

.read-mode .container code {
    color: var(--font-color)
}

.read-mode .container blockquote {
    border-color: var(--gray);
    background-color: var(--readmode-light-color)
}

.read-mode .container kbd {
    border: 1px solid var(--gray);
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--font-color)
}

.read-mode .container .hide-toggle {
    border: 1px solid var(--gray) !important
}

.read-mode .container .btn-beautify, .read-mode .container .hide-button, .read-mode .container .hl-label {
    border: 1px solid var(--gray) !important;
    background: var(--readmode-light-color) !important;
    color: var(--font-color) !important
}

.read-mode .container .note {
    border: 2px solid var(--gray);
    border-left-color: var(--gray) !important;
    filter: none;
    background-color: var(--readmode-light-color) !important;
    color: var(--font-color)
}

.read-mode .container .note .note-icon, .read-mode .container .note:before {
    color: var(--font-color)
}

.search-dialog {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1001;
    display: none;
    margin-left: -300px;
    padding: 20px;
    width: 600px;
    background: var(--search-bg);
    --search-height: 100vh;
    border-radius: 8px
}

@media screen and (max-width: 768px) {
    .search-dialog {
        top: 0;
        left: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 0
    }
}

.search-dialog .search-nav {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 14px;
    color: #49b1f5;
    font-size: 1.4em;
    line-height: 1
}

.search-dialog .search-nav .search-dialog-title {
    margin-right: 4px
}

.search-dialog .search-nav #loading-status[hidden] {
    display: none !important
}

.search-dialog .search-nav .search-close-button {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #858585;
    text-align: right;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease
}

.search-dialog .search-nav .search-close-button:hover {
    color: #49b1f5
}

.search-dialog #algolia-search-input, .search-dialog .local-search-input {
    margin: 0 auto;
    max-width: 100%;
    width: 100%
}

.search-dialog #algolia-search-input .ais-SearchBox-input, .search-dialog #algolia-search-input input, .search-dialog .local-search-input .ais-SearchBox-input, .search-dialog .local-search-input input {
    padding: 5px 14px;
    width: 100%;
    outline: 0;
    border: 2px solid #49b1f5;
    border-radius: 40px;
    background: var(--search-bg);
    color: var(--search-input-color);
    -webkit-appearance: none
}

.search-dialog #algolia-search-input .ais-SearchBox-input::placeholder, .search-dialog #algolia-search-input input::placeholder, .search-dialog .local-search-input .ais-SearchBox-input::placeholder, .search-dialog .local-search-input input::placeholder {
    color: var(--text-color)
}

.search-dialog .ais-Hits-list, .search-dialog .search-result-list {
    overflow-y: overlay;
    margin: 0 -20px;
    padding: 0 22px;
    max-height: calc(80vh - 220px)
}

.search-dialog .ais-Hits-list .ais-Hits-item, .search-dialog .ais-Hits-list .local-search-hit-item, .search-dialog .search-result-list .ais-Hits-item, .search-dialog .search-result-list .local-search-hit-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: 3px 0;
    line-height: 1.8;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.search-dialog .ais-Hits-list .ais-Hits-item:hover, .search-dialog .ais-Hits-list .local-search-hit-item:hover, .search-dialog .search-result-list .ais-Hits-item:hover, .search-dialog .search-result-list .local-search-hit-item:hover {
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px)
}

.search-dialog .ais-Hits-list .ais-Hits-item:not([value])::before, .search-dialog .ais-Hits-list .local-search-hit-item:not([value])::before, .search-dialog .search-result-list .ais-Hits-item:not([value])::before, .search-dialog .search-result-list .local-search-hit-item:not([value])::before {
    display: none
}

.search-dialog .ais-Hits-list .ais-Hits-item[value]::before, .search-dialog .ais-Hits-list .local-search-hit-item[value]::before, .search-dialog .search-result-list .ais-Hits-item[value]::before, .search-dialog .search-result-list .local-search-hit-item[value]::before {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-box;
    display: inline-flex;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-right: 6px;
    margin-top: 3px;
    min-width: 24px;
    color: #49b1f5;
    content: attr(value) '.';
    font-weight: 700;
    font-style: italic;
    font-size: .9em
}

.search-dialog .ais-Hits-list .ais-Hits-item::marker, .search-dialog .ais-Hits-list .local-search-hit-item::marker, .search-dialog .search-result-list .ais-Hits-item::marker, .search-dialog .search-result-list .local-search-hit-item::marker {
    content: none
}

.search-dialog .ais-Hits-list .ais-Hits-item a, .search-dialog .ais-Hits-list .local-search-hit-item a, .search-dialog .search-result-list .ais-Hits-item a, .search-dialog .search-result-list .local-search-hit-item a {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: var(--search-a-color)
}

.search-dialog .ais-Hits-list .ais-Hits-item a:hover, .search-dialog .ais-Hits-list .local-search-hit-item a:hover, .search-dialog .search-result-list .ais-Hits-item a:hover, .search-dialog .search-result-list .local-search-hit-item a:hover {
    color: #49b1f5
}

.search-dialog .ais-Hits-list .ais-Hits-item .algolia-hits-item-title, .search-dialog .ais-Hits-list .ais-Hits-item .search-result-title, .search-dialog .ais-Hits-list .local-search-hit-item .algolia-hits-item-title, .search-dialog .ais-Hits-list .local-search-hit-item .search-result-title, .search-dialog .search-result-list .ais-Hits-item .algolia-hits-item-title, .search-dialog .search-result-list .ais-Hits-item .search-result-title, .search-dialog .search-result-list .local-search-hit-item .algolia-hits-item-title, .search-dialog .search-result-list .local-search-hit-item .search-result-title {
    font-weight: 600
}

.search-dialog .ais-Hits-list .ais-Hits-item .algolia-hit-item-content, .search-dialog .ais-Hits-list .ais-Hits-item .search-result, .search-dialog .ais-Hits-list .local-search-hit-item .algolia-hit-item-content, .search-dialog .ais-Hits-list .local-search-hit-item .search-result, .search-dialog .search-result-list .ais-Hits-item .algolia-hit-item-content, .search-dialog .search-result-list .ais-Hits-item .search-result, .search-dialog .search-result-list .local-search-hit-item .algolia-hit-item-content, .search-dialog .search-result-list .local-search-hit-item .search-result {
    margin: 0 0 8px;
    word-break: break-all;
    font-size: .9em
}

.search-dialog .ais-Pagination {
    margin: 15px 0 0;
    padding: 0;
    text-align: center
}

.search-dialog .ais-Pagination .ais-Pagination-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 6px
}

.search-dialog .ais-Pagination .ais-Pagination-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    padding: 0
}

.search-dialog .ais-Pagination .ais-Pagination-item:not(.ais-Pagination-item--selected):not(.ais-Pagination-item--ellipsis):not(.ais-Pagination-item--disabled) .ais-Pagination-link:hover {
    background: var(--btn-hover-color);
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -o-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px)
}

.search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-box;
    display: inline-flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 4px 8px;
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--btn-bg);
    color: var(--btn-color);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease
}

.search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link.ais-Pagination-link--disabled {
    opacity: .3;
    cursor: not-allowed
}

.search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link i {
    font-size: 12px
}

.search-dialog .ais-Pagination .ais-Pagination-item--selected .ais-Pagination-link {
    background: #00c4b6;
    font-weight: 600;
    cursor: default
}

.search-dialog .ais-Pagination .ais-Pagination-item--ellipsis .ais-Pagination-link {
    padding: 4px 2px;
    border: none;
    background: 0 0;
    color: var(--text-color);
    cursor: default
}

.search-dialog .ais-Pagination .ais-Pagination-item--ellipsis .ais-Pagination-link:hover {
    background: 0 0;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none
}

.search-dialog .ais-Pagination .ais-Pagination-item--disabled .ais-Pagination-link {
    opacity: .4
}

@media screen and (max-width: 768px) {
    .search-dialog .ais-Pagination .ais-Pagination-list {
        gap: 4px
    }
}

.search-dialog hr {
    margin: 15px auto
}

#search-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
    background: rgba(0, 0, 0, .6)
}

.ais-Stats-text, .search-result-stats {
    margin: 15px 0 0;
    color: var(--text-color);
    text-align: center;
    font-size: .9em
}

.search-keyword {
    background: 0 0;
    color: #f47466;
    font-weight: 600
}

.search-loading {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 20px;
    color: var(--text-color)
}

.search-loading::before {
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-color);
    border-top-color: transparent;
    border-radius: 50%;
    content: '';
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite
}

@media screen and (max-width: 768px) {
    #local-search .search-dialog .search-result-list {
        min-height: calc(var(--search-height) - 255px) !important
    }
}

#local-search #local-search-stats .search-result-stats {
    text-align: left
}

#local-search .search-keyword {
    font-weight: 600
}

#local-search #loading-database ~ * {
    visibility: hidden
}

@-moz-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}