/*             _ _    _ _        _         */
/*   __      _(_) | _(_) |_ _ __(_)_  __   */
/*   \ \ /\ / / | |/ / | __| '__| \ \/ /   */
/*    \ V  V /| |   <| | |_| |  | |>  <    */
/*     \_/\_/ |_|_|\_\_|\__|_|  |_/_/\_\   */
/*                                         */
/* ======================================= */
/*                                         */
/*   [Wikitrix Theme 2026]                 */
/*   CC BY-SA 3.0                          */

@import url('https://sigma9.scpwikicn.com/cn/fonts/font-bauhaus.css');

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none !important;
}

/* HEADER */
#header {
    display: grid;
    grid-template-areas: "h1 h2 topbar user";
    grid-template-columns: 14em max-content 1fr 6.35rem;
    grid-template-rows: auto auto;
    height: 100%;
    max-width: 80rem;
    padding: 1em;
    margin: auto;
}

#header h1 {
    grid-area: h1;
    margin: auto 0;
}

#header h1 a,
#header h1 a span {
    display: block;
    font-size: 0;
    line-height: 0;
}

#header h1 a::after {
    content: "";
    display: block;
    background: url("https://wikitrix-files.unitreaty.org/local--files/main/logo-white.png") no-repeat;
    background-size: contain;
    height: 50px;
    width: 185px;
}

#header h1 a:hover {
    background-color: unset;
}

#header h2 {
    grid-area: h2;
    display: flex;
    align-items: center;
    font-size: 100%;
    height: 100%;
}

#header h2 span {
    color: #e2e2e2;
}

#header form#search-top-box-form {
    display: none !important;
}

div#extra-div-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background-color: #1d2b3a;
    z-index: -10;
}

@media (max-width: 900px) {
    #header h2 {display: none !important;}
}

/* TOPBAR */
#header #top-bar {
    display: flex;
    grid-area: topbar;
    align-items: center;
    height: 100%;
}

#header #top-bar li a {
    color: #fff;
}

#header #top-bar li a:hover {
    background-color: unset;
    color: #95d6f5;
}

@media (max-width: 715px) {
    #header {
            grid-template-areas:
                "h1     user  " 
                "topbar topbar";
            grid-template-columns: 1fr 6em;
            grid-template-rows: 1fr 1fr;
    }

    div#extra-div-1 {
        height: 128px;
    }
}

/* LOGIN STATUS */
#header #login-status {
    display: flex;
    grid-area: user;
    font-size: 0;
    margin: auto;
    justify-content: flex-end;
}

#header #login-status #account-topbutton,
#header #login-status #account-options,
#header #login-status a[href="/-/notifications/unread"],
#header #login-status .login-status-sign-in,
#header #login-status .login-status-create-account {
    font-size: 0.7rem;
}

#header #login-status .printuser img.small {
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border-radius: 100%;
    border: #9f9f9f solid 2px;
}

#header #login-status #account-topbutton {
    position: relative;
    background-color: unset;
    border: unset;
    color: #fff;
    top: 1em;
}

#header #login-status #account-options {
    background: #fefefe;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
    padding: 5px 0;
    margin: 2px 0 0;
    width: 12em;
    font-size: 0.758rem;
    top: 38px;
}

#header #login-status a[href="/-/notifications/unread"] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    right: 10px;
    top: -5px;
}

#header #login-status #account-options li a {
    color: #000;
    padding: 4px 25px;
}

#header #login-status #account-options li a:hover {
    background-color: #38618d;
    color: #fff;
}

#header #login-status #account-options li a:before {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    line-height: normal;
    margin-right: 7px;
    width: 1em;
    height: 1em;
}

#header #login-status #account-options li a[href="/-/notifications"]:before {content: "\f0f3"}
#header #login-status #account-options li a[href="/-/messages"]:before {content: "\f0e0"}
#header #login-status #account-options li a[href="/-/favourites"]:before {content: "\f02e"}
#header #login-status #account-options li a[href="/-/ratings"]:before {content: "\f005";margin-left:-2px;margin-right:9px}
#header #login-status #account-options li a[href="/-/liked-posts"]:before {content: "\f164"}
#header #login-status #account-options li a[href="/-/my-tickets"]:before {content: "\f0ea"}
#header #login-status #account-options li a[href="/-/profile/edit"]:before {content: "\f013"}
#header #login-status #account-options li a[href*="/-/logout"]:before {content: "\f2f5"}

#header #login-status .login-status-sign-in,
#header #login-status .login-status-create-account {
    color: #fff;
    padding: 8px 10px;
}

#header #login-status .login-status-sign-in:hover {
    background-color: unset;
    color: #95d6f5;
}

#header #login-status .login-status-create-account:hover {
    color: #e8f3f9;
    background: #397fc8;
}

#header #login-status .login-status-create-account {
    background: #366fab;
    border: 1px #040609 solid;
    border-radius: 12px;
    font-size: 0;
}

#header #login-status .login-status-create-account:after {
    content: "注册";
    font-size: 0.7rem;
}

#header #login-status:has(.login-status-sign-in),
#header #login-status:has(.login-status-create-account) {
    flex-direction: row-reverse;
}

#header #login-status[data-config*="anonymous"] {
    flex-direction: row-reverse !important; /* :(has */
}

@media (max-width: 715px) {
    #header #login-status .login-status-create-account {display:none}
    
    #header #login-status .login-status-sign-in {
        background: #366fab;
        border: 1px #040609 solid;
        border-radius: 12px;
    }
    
    #header #login-status .login-status-sign-in:hover {
        color: #e8f3f9;
        background: #397fc8;
    }
}

/* SIDEBAR */
#side-bar {display: none !important}

#main-content {
    max-width: 78rem;
    margin-left: unset;
    margin: auto;
    padding: 1em;
}

/* FOOTER */
div#footer,
div.footer .footer-copyright > br,
div.footer .footer-link > br {display:none !important;}

div#license-area {
    background: #1d2b3a;
    color: #eee;
    width: 100%;
}

div.footer {
    display: flex;
    margin: auto;
    max-width: 80rem;
    width: 100%;
}

div.footer .footer-copyright {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 0 1em;
}

div.footer .footer-copyright .footer-copyright-image {
    display: block;
    flex-shrink: 0;
    width: 4rem;
}

div.footer .footer-copyright .footer-copyright-title {
    font-family: BauhausLTDemi, Simhei, Arial, sans-serif;
    font-size: 3em;
}

div.footer .footer-copyright .footer-copyright-time {
    width: 100%;
}

div.footer .footer-link {
    flex: 2;
    display: flex;
    justify-content: right;
    gap: 1.75em;
    margin: 0 6em;
    padding: 1em 1em 0;
}

div.footer .footer-link .footer-link-item {
    text-align: left;
}

div.footer .footer-link .footer-link-item li {
    margin: 1em;
}

div.footer .footer-link .footer-link-item li a {
    color: #fff;
}

div.footer .footer-link .footer-link-item li a:hover {
    color: #95d6f5;
    background-color: unset;
}

@media (max-width: 849px) and (min-width: 614px) {
    div.footer .footer-link {
        margin: 0 6em 0 0;
    }
}

@media (max-width: 849px) {
    div.footer .footer-copyright .footer-copyright-time {
        padding: 1em 0;
        padding-top: 0;
        font-size: 85%;
    }
}

@media (max-width: 614px) {
    div.footer {
        flex-direction: column-reverse;
    }

    div.footer .footer-link {
        justify-content: left;
        margin: 0;
    }

    div.footer .footer-copyright {
        justify-content: left;
        margin: 0 2em;
    }

    div.footer .footer-copyright .footer-copyright-time {
        padding: 1em 0;
        font-size: 80%;
        color: #ccc;
    }
    
    div.footer .footer-copyright .footer-copyright-time {
        padding: 1em 0;
        font-size: 80%;
    }
}

@media (max-width: 384px) {
    div.footer .footer-link .footer-link-item {
        padding-left: 4vw;
    }
    
    div.footer .footer-copyright {
        margin: 0 2vw;
    }
}

@media (max-width: 286px) {
    div.footer .footer-link {
        flex-direction: column;
        gap: 0;
    }

    div.footer .footer-link .footer-link-item {
        margin: 0;
    }

    div.footer .footer-copyright {
        margin: 0;
    }
}