/* Title bar */

.titlebar {
    background-color: var(--color-titlebar-bg);
    margin: 0;
    padding: 0.2em 0.6em;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-height: 10px;
    color: var(--color-titlebar-text);
    font-weight: bold;
}

/* Hr */

hr.separator-post {
    width: 2em;
    color: var(--color-text);
    border-top: dotted 4px;
}

.btn {
    /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
    font-family:
        -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial",
        "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei",
        "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC",
        "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC",
        "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 0;
    padding: 15px 25px;
}

.btn-lg {
    font-size: 16px;
    padding: 25px 35px;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: white;
}

/* Hux add tags support */
/* .d-none {
    display: none !important;
} */

.tags {
    margin-bottom: -5px;
}

.tags.tags-sup a,
.tags.tags-sup .tag {
    padding: 0 10px 0 12px;
}

.tags a,
.tags .tag {
    display: inline-block;
    /* border: 1px solid rgba(255, 255, 255, 0.8); */
    border-radius: 999em;
    padding: 0 10px 0 10px;
    color: #ffffff;
    line-height: 24px;
    /* font-size: 12px; */
    text-decoration: none;
    margin: 0 1px;
    margin-bottom: 6px;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s;
}

.tags a > sup,
.tags .tag > sup {
    margin-left: -2px;
    font-weight: 700;
}

.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
    color: white;
    border-color: white;
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .tags a,
    .tags .tag {
        margin-right: 5px;
    }
}

.tag-comments {
    font-size: 12px;
}

@media only screen and (min-width: 768px) {
    .tag-comments {
        font-size: 14px;
    }
}

.t:first-child {
    margin-top: 0px;
}

.listing-seperator {
    color: var(--color-accent);
    font-size: 21px !important;
}

.listing-seperator::before {
    margin-right: 5px;
}

@media only screen and (min-width: 768px) {
    .listing-seperator {
        font-size: 20px !important;
        line-height: 2 !important;
    }
}

.MathJax_SVG_Display {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.no-scroll {
    overflow-y: hidden;
}

/* Custom styles */
.sel-lang-container {
    cursor: default;
    color: var(--color-text);
    border: solid 1px var(--color-text);
    padding: 3px 10px;
    display: inline-block;
    border-radius: 25px;
    margin-top: 20px;
}

.sel-lang-container:hover {
    color: var(--color-accent);
    border: solid 1px var(--color-accent);
}

.dialog {
    width: 100%;
    background-color: color-mix(
        in srgb,
        var(--color-dialog-bg) 80%,
        transparent
    );
    border-radius: 4px;
    border: solid 1px color-mix(in srgb, var(--color-dialog-bg) 96%, black);
    padding: 1em;
}

.dialog-avatar {
    display: block;
    width: 50px;
    height: 50px;
    background-image: var(--img-navbar-logo);
    background-size: contain;
    border-radius: 4px;
}

.dialog-content {
    margin-top: 1em;
    line-height: 1.4;
    color: var(--color-text);
}

.back-to-top {
    width: 100%;
    text-align: center;
    margin: 1em 1em 0 1em;
    text-align: center;
    color: var(--color-text);
    border: none;
    background-color: transparent;
}

.back-to-top:hover {
    color: var(--color-accent);
}

.btn-material {
    display: flex;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    background-color: transparent;
    border: none;
    color: var(--color-navbar-text);
}

.btn-material:hover {
    background-color: var(--color-gray);
    color: var(--color-accent);
}

#model-home::part(default-progress-bar) {
    display: none;
}

#div-model-home {
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border: solid 1px var(--color-dialog-bg);
    border-radius: 4px;
}

.main {
    background: color-mix(in srgb, var(--color-body), #0000 15%) !important;
}