/* Emps-World theme: Greeny restyled to look like the main site.
   loaded after all other stylesheets of the theme, the navigation and the footer are
   copies of build/css/menu.css and build/css/layout.css of the main site */

@font-face {
    font-family: TheRealFont;
    src: url(/css/trf.ttf);
    font-display: swap;
}

:root {
    --font-display: "TheRealFont", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-text: Verdana, Helvetica, Arial, sans-serif;
    --orange: #fa9218;
    /* frames and everything that navigates */
    --gold: #a59378;
    --gold-light: #c5b398;
    --gold-hover: #ead2af;
    --gold-dim: #7d705c;
    /* links in posts and texts */
    --link: #ead2af;
    --link-hover: #fff;
    --text: #e6e1d8;
    --text-dim: #aaa398;
    --text-faint: #827b70;
    /* subjects of boards, topics and posts */
    --title: #f3ead9;
    /* the black glass of the wiki: a dark panel over the blurred background, boxes of a
       darker glass inside, gold tinted lines and a gold band for headers (the infobox rows) */
    --glass: rgba(17, 17, 17, .86);
    /* the boxes sit on the glass, a light tint keeps the background showing through */
    --surface: rgba(26, 26, 26, .35);
    --surface-alt: rgba(36, 35, 33, .45);
    --surface-hover: rgba(165, 147, 120, .15);
    --inset: rgba(0, 0, 0, .2);
    --head: rgba(165, 147, 120, .3);
    --head-soft: rgba(165, 147, 120, .15);
    --header: rgba(165, 147, 120, .3);
    --border: rgba(165, 147, 120, .44);
    --border-strong: rgba(165, 147, 120, .62);
    --divider: rgba(165, 147, 120, .2);
    /* fields stay dark, typed text needs a calm ground */
    --input-bg: rgba(10, 10, 9, .72);
    --input-border: rgba(165, 147, 120, .5);
}

/* base
------------------------------------------------------- */
html {
    height: auto;
}

body {
    height: auto;
    margin: 0;
    font: 14px/1.4 var(--font-text);
    color: #fff;
    background: #111 url("/img_thumbnail/back_ge_2k.webp") top / cover no-repeat fixed;
}

body, td, th, tr {
    color: var(--text);
    font-family: var(--font-text);
}

a:link, a:visited {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

/* greeny makes all headings black */
h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

hr, .hrcolor {
    border: 0;
    border-top: 1px solid var(--divider);
    background: none;
    color: transparent;
}

::selection {
    background: rgba(250, 146, 24, .45);
}

/* the content box, the blurred containers of the main site
------------------------------------------------------- */
#forum_content {
    position: relative;
    box-sizing: border-box;
    width: 90%;
    max-width: 1200px;
    margin: 66px auto 0;
    padding: 14px 20px 20px;
    background-color: var(--glass);
    box-shadow: 0 0 20px 5px #111111A0;
    border-radius: 4px;
    /* keeps text readable where the blurred background is bright */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* the blur sits on a layer behind the box like on the main site. on the box itself it
   would also turn the box into the containing block of fixed elements inside it (popups) */
#forum_content::before, #footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

#forum_content:after {
    content: '';
    display: table;
    clear: both;
}

/* navigation bar
------------------------------------------------------- */
.navigation {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 90%;
    max-width: 1200px;
    height: 60px;
    border: 2px solid var(--gold);
    border-radius: 4px;
    background-color: #252525F0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--font-display);
    /* the line height of the main site, the menus get the same spacing */
    line-height: 18px;
    text-shadow: 1px 1px 1px #000;
}

.navigation :focus-visible {
    outline: 2px solid var(--gold-hover);
    outline-offset: -4px;
}

.nav-logo {
    display: flex;
    flex: 0 0 147px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
    padding: 0 6px;
}

.nav-logo img {
    display: block;
    width: 100%;
    max-height: 56px;
    height: auto;
    object-fit: contain;
    transition: transform .3s, filter .3s;
}

.nav-logo:hover img {
    transform: scale(1.05);
    filter: brightness(125%);
}

.nav-menu {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > li, .navigation > .nav-dropdown {
    position: relative;
    display: flex;
    align-self: stretch;
}

/* the entries are centered on the bar like on the main site: the logo and the search on the
   right have the same width and the free space is split evenly on both sides of the entries */
.nav-menu > li:first-child {
    margin-left: auto;
}

.nav-menu > li:last-child {
    margin-right: auto;
}

.navigation .nav-menu > li > a, .nav-dropdown-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 24px;
    color: var(--gold);
    text-shadow: 1px 1px 1px #000;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s;
}

/* underline, stays on the current page */
.navigation .nav-menu > li > a::after, .nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 15px;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform .4s ease, opacity .4s ease;
}

/* caret, flex order puts it behind the label */
.nav-dropdown-toggle::before {
    content: '';
    order: 1;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .3s;
}

.navigation .nav-menu > li > a:hover, .navigation .nav-menu > li > a:focus-visible, .navigation .nav-menu > li > a.active,
.nav-dropdown-toggle:focus-visible, .nav-dropdown-toggle.active, .nav-dropdown.open > .nav-dropdown-toggle {
    color: var(--gold-hover);
    text-decoration: none;
}

.navigation .nav-menu > li > a:hover::after, .navigation .nav-menu > li > a.active::after,
.nav-dropdown-toggle.active::after, .nav-dropdown.open > .nav-dropdown-toggle::after {
    transform: scaleX(1);
    opacity: 1;
}

.nav-dropdown.open > .nav-dropdown-toggle::before {
    transform: rotate(180deg);
}

/* unread messages and open tickets */
.nav-badge {
    order: 1;
    min-width: 8px;
    padding: 0 5px;
    font: bold 11px/16px var(--font-text);
    text-align: center;
    color: #fff;
    background: var(--orange);
    border-radius: 8px;
    text-shadow: none;
}

.nav-account img {
    height: 28px;
    width: auto;
}

/* forum avatars come in any size and shape, they become a round icon */
.nav-account img.nav-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-initials {
    display: none;
}

/* long names would push the other entries away. the padding keeps descenders
   like y and g inside the clipped box, the margin takes it back out of the layout */
.nav-user {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 0;
    margin: -6px 0;
}

.nav-sub {
    --sub-x: -50%;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background-color: #252525;
    background-clip: padding-box;
    border: 2px solid var(--gold);
    border-top-color: transparent;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 20px #000000A0;
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--sub-x), -6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

/* keeps the menu hovered while the mouse crosses the bar's border */
.nav-sub::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.nav-dropdown.open > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--sub-x), 0);
}

@media (hover: hover) and (min-width: 1000px) {
    .navigation .nav-dropdown:hover > .nav-dropdown-toggle {
        color: var(--gold-hover);
    }

    .navigation .nav-dropdown:hover > .nav-dropdown-toggle::after {
        transform: scaleX(1);
        opacity: 1;
    }

    .navigation .nav-dropdown:hover > .nav-sub {
        opacity: 1;
        visibility: visible;
        transform: translate(var(--sub-x), 0);
    }
}

.navigation .nav-sub a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 24px;
    font-size: 21px;
    color: var(--gold);
    text-shadow: 1px 1px 1px #000;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s, background-color .3s;
}

.navigation .nav-sub a:hover, .navigation .nav-sub a:focus-visible {
    color: var(--gold-hover);
    background-color: #FFFFFF0D;
}

/* the right end of the bar where the main site has its play button, as wide as the logo:
   the search icon and the account menu */
.nav-end {
    display: flex;
    flex: 0 0 147px;
    align-self: stretch;
    justify-content: flex-end;
    box-sizing: border-box;
}

.nav-end > .nav-dropdown {
    position: relative;
    display: flex;
    align-self: stretch;
}

/* the bar is the frame of the search field, it opens below its right end */
.nav-end > .nav-search {
    position: static;
}

.navigation .nav-search-toggle, .navigation .nav-account > .nav-dropdown-toggle {
    padding: 0 10px 2px;
}

.navigation .nav-search-toggle::before {
    display: none;
}

.navigation .nav-search-toggle::after, .navigation .nav-account > .nav-dropdown-toggle::after {
    left: 10px;
    right: 10px;
}

/* the account only shows its icon and the first letters of the name */
.nav-end .nav-user {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nav-end .nav-initials {
    display: inline;
}

/* its menu would leave the bar on the right */
.nav-account .nav-sub {
    --sub-x: 0;
    left: auto;
    right: -2px;
}

.nav-search form {
    position: absolute;
    top: 100%;
    right: -2px;
    z-index: 1;
    box-sizing: border-box;
    width: 360px;
    max-width: calc(100% + 4px);
    margin: 0;
    padding: 12px 16px;
    background-color: #252525;
    border: 2px solid var(--gold);
    border-top-color: transparent;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 20px #000000A0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

/* visible at once, a field that is still hidden can't take the focus */
.nav-search.open form {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s, transform .2s;
}

.navigation .nav-search input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 2px 10px;
    font: 15px var(--font-text);
    color: #fff;
    background: var(--input-bg);
    border: 1px solid var(--gold);
    border-radius: 2px;
    transition: border-color .2s;
}

.navigation .nav-search input:focus {
    outline: none;
    border-color: var(--gold-hover);
}

/* the forum menu next to the logo, for when the menu is in its panel */
.navigation > .nav-home {
    display: none;
}

.nav-toggle {
    display: none;
}

/* the full width a little earlier than on the main site, the staff menus need the room */
@media (min-width: 1000px) and (max-width: 1200px) {
    .navigation {
        width: 100%;
    }
}

/* smaller laptops: tighter entries like the main site */
@media (min-width: 1000px) and (max-width: 1160px) {

    .navigation .nav-menu > li > a, .nav-dropdown-toggle {
        padding: 0 10px 2px;
        font-size: 21px;
    }

    .navigation .nav-menu > li > a::after, .nav-dropdown-toggle::after {
        left: 10px;
        right: 10px;
    }
}

/* phones: the icon of the logo leaves room for the menu button in the middle */
@media (max-width: 719px) {
    .navigation > .nav-logo {
        flex: none;
        padding: 0 4px;
    }

    .nav-logo img {
        width: 48px;
        height: 48px;
    }
}

/* tablets and phones: logo, search and menu button, the entries move into a panel.
   earlier than on the main site, the staff menus don't fit on tablets */
@media (max-width: 999px) {
    .navigation {
        width: 100%;
    }

    .nav-logo {
        flex-shrink: 1;
    }

    .nav-toggle {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        /* in the middle of the bar, the forum menu and the search keep their places around it */
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% - 32px);
        width: 64px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    /* three bars, the outer ones turn into a cross while the panel is open */
    .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
        display: block;
        width: 32px;
        height: 4px;
        border-radius: 2px;
        background-color: var(--gold);
        box-shadow: 1px 1px 1px #000;
        transition: transform .3s, background-color .3s;
    }

    .nav-toggle span {
        position: relative;
    }

    .nav-toggle span::before, .nav-toggle span::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .nav-toggle span::before {
        top: -10px;
    }

    .nav-toggle span::after {
        top: 10px;
    }

    .nav-toggle:hover span, .nav-toggle:hover span::before, .nav-toggle:hover span::after {
        background-color: var(--gold-hover);
    }

    .menu-open .nav-toggle span {
        background-color: transparent !important;
        box-shadow: none;
    }

    .menu-open .nav-toggle span::before {
        transform: translateY(10px) rotate(45deg);
    }

    .menu-open .nav-toggle span::after {
        transform: translateY(-10px) rotate(-45deg);
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: -2px;
        right: -2px;
        flex-direction: column;
        height: auto;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding: 6px 0 10px;
        background-color: #252525;
        border: 2px solid var(--gold);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 8px 20px #000000A0;
    }

    .menu-open .nav-menu {
        display: flex;
    }

    .nav-menu > li, .nav-menu > li:first-child, .nav-menu > li:last-child {
        display: block;
        margin: 0;
    }

    .navigation .nav-menu > li > a, .navigation .nav-menu .nav-sub a {
        padding: 10px 20px 10px 24px;
        font-size: 22px;
        text-align: left;
        border-left: 3px solid transparent;
    }

    .navigation .nav-menu > li > a:hover, .navigation .nav-menu > li > a:focus-visible {
        background-color: #FFFFFF0D;
    }

    .navigation .nav-menu > li > a.active {
        border-left-color: var(--gold-hover);
        background-color: #FFFFFF0D;
    }

    .navigation .nav-menu > li > a::after {
        display: none;
    }

    /* a line above every section, in the gold of the frame */
    .nav-menu > li.nav-dropdown {
        margin-top: 8px;
        padding-top: 4px;
    }

    .nav-menu > li.nav-dropdown::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background-color: var(--gold);
    }

    /* menus are listed open, their toggle is only a heading */
    .nav-menu .nav-dropdown-toggle {
        width: 100%;
        padding: 14px 20px 4px;
        font-size: 17px;
        color: var(--gold-dim);
        pointer-events: none;
    }

    .nav-menu .nav-dropdown-toggle::before, .nav-menu .nav-dropdown-toggle::after {
        display: none;
    }

    .nav-menu .nav-sub {
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* the forum menu next to the logo replaces the one in the panel */
    .navigation > .nav-home {
        display: flex;
        flex: none;
        /* the search on the right */
        margin-right: auto;
    }

    .nav-home > .nav-dropdown-toggle {
        padding: 0 8px 2px;
        font-size: 22px;
    }

    .nav-home > .nav-dropdown-toggle::after {
        left: 8px;
        right: 8px;
    }

    /* the logo is on its left, the menu opens to the right */
    .nav-home > .nav-sub {
        --sub-x: 0;
        left: -2px;
    }

    .navigation .nav-menu > li.nav-forum {
        display: none;
    }

    /* guests have no other entries, they don't get an empty panel */
    .nav-menu:not(:has(> li:not(.nav-forum))) ~ .nav-toggle {
        display: none;
    }

    /* the first section has no line above it */
    .nav-menu > li.nav-forum + li.nav-dropdown {
        margin-top: 0;
    }

    .nav-menu > li.nav-forum + li.nav-dropdown::before {
        display: none;
    }

    /* search and account on the right of the menu button */
    .nav-end {
        flex: none;
    }

    /* the field opens below the bar over its whole width, like the menu panel */
    .nav-search form {
        left: -2px;
        width: auto;
        max-width: none;
        padding: 12px 20px;
    }
}

/* footer, like the one of the main site
------------------------------------------------------- */
#footer {
    position: relative;
    box-sizing: border-box;
    width: 90%;
    max-width: 1200px;
    margin: 6px auto 20px;
    padding: 16px 20px 10px;
    background-color: var(--glass);
    box-shadow: 0 0 20px 5px #111111A0;
    border-radius: 4px;
    font-size: 15px;
}

.ft-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

#footer a.ft-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f1f1f1;
    text-decoration: none;
}

.ft-brand img {
    width: 40px;
    height: 40px;
}

.ft-brand b {
    display: block;
    font-size: 17px;
    color: var(--orange);
}

.ft-brand small {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
}

.ft-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}

#footer .ft-links a {
    color: var(--gold-light);
}

#footer .ft-links a:hover {
    color: var(--gold-hover);
}

.ft-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-socials img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: filter .3s;
}

.ft-socials a:hover img {
    filter: brightness(125%);
}

.ft-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 12px;
    padding-top: 10px;
    font-size: 13px;
    color: #888;
    border-top: 1px solid var(--divider);
}

#footer .ft-bottom a {
    color: var(--text-dim);
}

.ft-copyright {
    margin-top: 6px;
    font-size: 11px;
    text-align: center;
    color: #777;
}

#footer .ft-copyright a {
    color: #999;
}

@media (max-width: 900px) {
    .ft-main {
        flex-direction: column;
    }
}

/* buttons: dark with a gold frame like the navigation, submits get a warmer fill
------------------------------------------------------- */
.ew-button, a.ew-button:link, a.ew-button:visited,
input.button_submit, button.button_submit, input[type=submit], input[type=button], button[type=submit], input[type=reset],
.btn, .btn-warning, .btn-default, .btn-green-crt, a.btn:link, a.btn:visited {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 30px;
    margin: 2px;
    padding: 6px 14px;
    font: bold 13px/16px var(--font-text);
    text-transform: none;
    color: var(--gold-light);
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background: linear-gradient(#36322c, #29261f);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #ffffff12, 0 1px 2px #00000080;
    transition: color .2s, border-color .2s, background .2s;
}

/* actions that send a form */
input.button_submit, button.button_submit, input[type=submit], button[type=submit] {
    color: #f3e6cf;
    background: linear-gradient(#5c4c35, #42372a);
    border-color: var(--gold);
}

.ew-button:hover, a.ew-button:hover, input.button_submit:hover, button.button_submit:hover,
input[type=submit]:hover, input[type=button]:hover, button[type=submit]:hover, input[type=reset]:hover,
.btn:hover, .btn:focus, .btn-warning:hover, .btn-warning:focus, .btn-default:hover, .btn-green-crt:hover, .btn-green-crt:focus,
.open > .dropdown-toggle.btn-warning, .open > .dropdown-toggle.btn-green-crt, .open > .dropdown-toggle.btn,
.btn-warning:active, .btn-warning.active, .btn:active {
    color: var(--gold-hover);
    text-decoration: none;
    background: linear-gradient(#433d34, #322e27);
    border-color: var(--gold);
    box-shadow: inset 0 1px 0 #ffffff12, 0 1px 2px #00000080;
}

input.button_submit:hover, button.button_submit:hover, input[type=submit]:hover, button[type=submit]:hover {
    color: #fff;
    background: linear-gradient(#6b5a40, #4d4031);
    border-color: var(--gold-light);
}

.ew-button:focus-visible, .btn:focus-visible, input[type=submit]:focus-visible, input[type=button]:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold-hover);
    outline-offset: 1px;
}

input[disabled].button_submit, input[type=submit][disabled], button[disabled], .btn[disabled] {
    opacity: .5;
    cursor: default;
}

.btn .fa, .btn .glyphicon, .ew-button .fa {
    display: none;
}

.btn-sm, .btn-xs {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 12px;
}

.ew-button .caret, .btn .caret {
    margin-left: 6px;
    border-top-color: currentColor;
}

.ew-button-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: 4px 0;
}

.ew-button-strip .ew-button {
    margin: 0;
}

/* the small icon buttons of the editor and the quick moderation aren't real buttons */
input[type=image], #quick_edit_body_container input, .quickbuttons input {
    min-width: 0;
}

/* greeny's green buttons force their colours */
.btn-green-crt, .btn-green-crt:hover, .btn-green-crt:focus {
    color: var(--gold-light) !important;
    border: 1px solid var(--gold-dim) !important;
}

.btn-green-crt:hover, .btn-green-crt:focus {
    color: var(--gold-hover) !important;
    border-color: var(--gold) !important;
}

/* menus of bootstrap: topic actions and moderation */
.dropdown-menu {
    min-width: 180px;
    padding: 4px 0;
    font-size: 13px;
    background-color: #252525;
    border: 2px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 8px 20px #000000A0;
}

.dropdown-menu > li > a, .dropdown-menu > li > a:link, .dropdown-menu > li > a:visited {
    padding: 7px 16px;
    font: 13px var(--font-text);
    color: var(--gold-light);
    text-shadow: 1px 1px 1px #000;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: var(--gold-hover);
    background-color: #FFFFFF12;
}

/* the like button of the say thanks mod: saythanks.css puts its icon at the top left of the entry,
   centered next to the text here (the classes change while liking: loading, success, error) */
.dropdown-menu > li.thank_you_button, .dropdown-menu > li.thank_you_loading,
.dropdown-menu > li.thank_you_success, .dropdown-menu > li.thank_you_error {
    background-position: 14px center;
}

.dropdown-menu > li.thank_you_button > a, .dropdown-menu > li.thank_you_loading > a,
.dropdown-menu > li.thank_you_success > a, .dropdown-menu > li.thank_you_error > a {
    padding-left: 41px;
}

.dropdown-menu .divider {
    background-color: var(--divider);
}

.dropdown-menu .fa, .dropdown-menu .glyphicon {
    display: none;
}

/* the guest welcome
------------------------------------------------------- */
.forum-welcome {
    margin: 4px 0 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: 4px;
}

.forum-welcome h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: bold;
    color: var(--orange);
}

.forum-welcome p {
    margin: 0 0 10px;
    color: var(--text);
}

.forum-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.forum-welcome-actions .ew-button {
    margin: 0;
}

/* breadcrumb and pages
------------------------------------------------------- */
.st-bread.breadcrumb {
    margin: 0 0 10px;
    padding: 4px 0 10px;
    font: 15px var(--font-text);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
}

.st-bread.breadcrumb a:link, .st-bread.breadcrumb a:visited {
    color: var(--gold-light);
}

.st-bread.breadcrumb a:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

.st-bread.breadcrumb > li + li:before {
    padding: 0 8px;
    color: var(--gold-dim);
}

.st-bread.breadcrumb > .last, .st-bread.breadcrumb > .last a:link, .st-bread.breadcrumb > .last a:visited {
    color: var(--title);
}

.pagesection, .custom_pagination, .btn-group-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    color: var(--text-dim);
    background: none;
    border: 0;
    box-shadow: none;
}

/* page numbers: small square buttons */
.custom_pagination a:link, .custom_pagination a:visited, .pagesection a.navPages:link, .pagesection a.navPages:visited,
a.navPages:link, a.navPages:visited, .pagelinks a:link, .pagelinks a:visited, .custom_pagination strong, .pagelinks strong, .pagesection strong {
    display: inline-block;
    min-width: 26px;
    margin: 0 1px;
    padding: 3px 7px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    color: var(--gold-light);
    text-shadow: 1px 1px 1px #000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: none;
}

.custom_pagination a:hover, a.navPages:hover, .pagelinks a:hover {
    color: var(--gold-hover);
    text-decoration: none;
    background: var(--surface-hover);
    border-color: var(--gold-dim);
}

.custom_pagination strong, .pagelinks strong, .pagesection strong {
    font-weight: bold;
    color: #fff;
    background: #4d4031;
    border-color: var(--gold);
}

.custom_pagination span.navExpandPages, .pagesection span.navExpandPages {
    background: none;
    border: 0;
}

/* the page links behind topics on the board's page are small */
#messageindex small[id^=pages] a:link, #messageindex small[id^=pages] a:visited {
    min-width: 0;
    padding: 0 4px;
    font-size: 11px;
    line-height: 16px;
}

/* headings: orange text over a thin line
------------------------------------------------------- */
div.cat_bar, div.title_bar, div.title_barIC, .table_list tbody.header td,
#forum_content div.cat_bar, #forum_content div.title_bar, #forum_content div.title_barIC, #forum_content div.cat_bar-green {
    height: auto;
    margin: 16px 0 8px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.table_list tbody.header td {
    padding: 0;
    border-bottom: 0;
}

.table_list tbody.header td div.cat_bar {
    margin-bottom: 0;
}

h3.catbg, h3.catbg2, h4.catbg, h4.catbg2, h3.titlebg, h4.titlebg,
.catbg, .catbg2, .titlebg, .titlebg2,
#forum_content div.cat_bar h3.catbg, #forum_content div.title_bar h3.titlebg, #forum_content div.title_bar h4.titlebg,
#forum_content div.cat_bar-green h3.catbg {
    height: auto;
    min-height: 0;
    padding: 4px 0 6px;
    font: bold 17px/1.3 var(--font-text);
    color: var(--orange);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

h4.titlebg, h3.titlebg, #forum_content div.title_bar h3.titlebg, #forum_content div.title_bar h4.titlebg {
    font-size: 15px;
    color: var(--gold-light);
}

/* some headings float their content (pages, quick reply, the first section of the side menus) */
div.cat_bar, div.title_bar, h3.catbg, h4.catbg, h3.titlebg, h4.titlebg {
    display: flow-root;
}

/* the "Pages" or counters floated into a heading stay on its baseline */
h3.catbg > .floatright, h4.catbg > .floatright, h3.titlebg > .floatright, h3.catbg > .righttext {
    margin-top: 2px;
    font-size: 13px;
    font-weight: normal;
    color: var(--text-dim);
}

/* icons in front of a heading (the statistics) sit in the middle of its text */
span.ie6_header:has(> img) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#forum_content span.ie6_header > img {
    margin: 0;
}

.catbg .ie6_header img.icon, #quickReplyExpand {
    margin: -3px 6px 0 0;
    vertical-align: middle;
    filter: invert(1) sepia(1) saturate(3) hue-rotate(-10deg) brightness(.75);
}

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited,
.table_list tbody.header td a {
    color: var(--orange);
}

h3.titlebg a:link, h3.titlebg a:visited, h4.titlebg a:link, h4.titlebg a:visited {
    color: var(--gold-light);
}

h3.catbg a:hover, h4.catbg a:hover, h3.titlebg a:hover, h4.titlebg a:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

h3.catbg img, h4.catbg img, h3.titlebg img, h4.titlebg img {
    vertical-align: middle;
    margin: -3px 6px 0 0;
}

/* "Unread Posts" behind a category's name */
.catbg a.unreadlink:link, .catbg a.unreadlink:visited {
    font: normal 13px var(--font-text);
    color: var(--gold-light);
}

.catbg a.unreadlink:hover {
    color: var(--gold-hover);
}

/* the toggle of the info center and the news: the script swaps the gif, so the gif is
   pushed out of its box and the chevron of the category toggles is drawn as background */
.catbg img#upshrink_ic, .catbg img#newsupshrink {
    float: right;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    margin: 0;
    object-position: -100px 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%23c5b398' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    filter: none;
    transition: transform .2s, border-color .2s;
}

.catbg img#upshrink_ic:hover, .catbg img#newsupshrink:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%23ead2af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: var(--surface-hover);
    border-color: var(--gold);
}

.catbg img#upshrink_ic[src*="expand"], .catbg img#newsupshrink[src*="expand"] {
    transform: rotate(180deg);
}

/* boxes: cards a step above the content box
------------------------------------------------------- */
.windowbg, .windowbg2, .windowbg3, .windowbg4, #preview_body,
.approvebg, .approvebg2, .lockedbg, .lockedbg2, .stickybg, .stickybg2,
.highlight, .highlight2, .windowbg_info, .infocenter {
    color: var(--text);
    background-color: var(--surface);
}

span.topslice, span.botslice, span.topslice span, span.botslice span,
span.upperframe, span.lowerframe, span.upperframe span, span.lowerframe span {
    display: none;
}

.roundframe, div.windowbg > .content, div.windowbg2 > .content, .infocenter_section .windowbg, .windowbg_info,
.description, .plainbox, .information, .tborder, #profileview .content, .flow_auto {
    color: var(--text);
}

.roundframe, div.windowbg, div.windowbg2, .description, p.description, .information, .windowbg_info, .plainbox, .well {
    box-sizing: border-box;
    padding: 12px 16px;
    color: var(--text);
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: none;
}

.description, .information, .plainbox {
    margin: 6px 0 12px;
}

/* boxes inside boxes get the darker inset instead of another card */
.roundframe .windowbg, .roundframe .windowbg2, div.windowbg .windowbg2, div.windowbg2 .windowbg,
.roundframe .roundframe, div.windowbg .roundframe, div.windowbg2 .roundframe {
    background: var(--inset);
}

.windowbg .content, .windowbg2 .content, .roundframe .content {
    background: none;
    border: 0;
    padding: 0;
}

div.tborder, .tborder {
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
}

.smalltext, .middletext, .stats, .lastpost, .board_description, .description_board,
.table_list tbody.content td.info p, #messageindex td p {
    color: var(--text-dim);
}

.smalltext a:link, .smalltext a:visited, .middletext a:link, .middletext a:visited {
    color: var(--link);
}

.smalltext a:hover, .middletext a:hover {
    color: var(--link-hover);
}

/* board index: one card per category, a header strip on top and the boards as rows.
   the table is laid out as blocks and grids, a tbody can't get a frame otherwise
------------------------------------------------------- */
table.table_list {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-spacing: 0;
}

.table_list > tbody {
    display: block;
}

/* the gaps between the cards come from the headers */
.table_list > tbody.divider {
    display: none;
}

.table_list > tbody.header {
    margin-top: 20px;
}

.table_list > tbody.header:first-child {
    margin-top: 4px;
}

.table_list > tbody.header tr, .table_list > tbody.header td {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

/* the header strip: darker, with a gold line on top like the frames of the site */
#forum_content .table_list tbody.header div.cat_bar {
    margin: 0;
    padding: 0 12px 0 16px;
    background: var(--header);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 2px 6px #00000040;
}

#forum_content .table_list tbody.header div.cat_bar h3.catbg {
    padding: 11px 0;
    font-size: 16px;
    letter-spacing: .02em;
}

/* the child boards on a board's page: their heading sits above the table, it becomes the header strip */
#forum_content .childboards > div.cat_bar {
    margin: 4px 0 0;
    padding: 0 12px 0 16px;
    background: var(--header);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 6px 6px 0 0;
}

#forum_content .childboards > div.cat_bar h3.catbg {
    padding: 11px 0;
    font-size: 16px;
}

.childboards .table_list > tbody.content {
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.childboards {
    margin-bottom: 14px;
}

/* a collapsed category is only its header */
#forum_content .table_list tbody.header:has(+ tbody.divider) div.cat_bar {
    border-radius: 6px;
}

/* the boards of a category, also used alone for the child boards on a board's page */
.table_list > tbody.content {
    /* greeny pads everything named .content */
    padding: 0 !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 8px #00000059;
    overflow: hidden;
}

.table_list > tbody.header + tbody.content {
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.table_list tbody.content tr {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 130px 27%;
    align-items: center;
    background: none;
    transition: background-color .2s;
}

.table_list tbody.content tr + tr {
    border-top: 1px solid var(--divider);
}

.table_list tbody.content tr:hover {
    background: var(--surface-alt);
}

#forum_content .table_list tbody.content td {
    display: block;
    width: auto;
    height: auto;
    padding: 12px 14px;
    background: none;
    border: 0;
    border-radius: 0;
}

/* the columns: state, board, counts, last post */
#forum_content .table_list tbody.content td.icon {
    padding-right: 0;
    text-align: center;
}

#forum_content .table_list tbody.content td.info {
    padding-left: 12px;
}

/* the counts and the last post get a line on their left, like columns */
#forum_content .table_list tbody.content td.stats, #forum_content .table_list tbody.content td.lastpost {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--divider);
}

.table_list tbody.content td.stats p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}

.table_list tbody.content td.stats strong {
    font-size: 14px;
    color: var(--title);
}

#forum_content .table_list tbody.content td.lastpost {
    font-size: 12px;
}

.table_list tbody.content td.lastpost p {
    margin: 0;
    line-height: 1.6;
}

.table_list tbody.content td.lastpost strong {
    color: var(--text);
}

.table_list tbody.content td.info p {
    margin: 2px 0 0;
}

.table_list tbody.content td.info p.children, .table_list tbody.content td.info p.moderators {
    margin-top: 4px;
    font-size: 12px;
}

.table_list .child-ts {
    font-weight: bold;
    color: var(--text-dim);
}

/* below 992px bootstrap hides the counts and the last post */
@media (max-width: 991px) {
    .table_list tbody.content tr {
        grid-template-columns: 62px minmax(0, 1fr);
    }
}

/* the state of a board: a round badge with a speech bubble, orange when there's something new */
.board-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    color: var(--gold-dim);
    vertical-align: middle;
    background: var(--inset);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    transition: border-color .2s, color .2s;
}

.board-state::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

a:hover > .board-state {
    color: var(--gold-light);
    border-color: var(--gold);
}

.board-state-new {
    color: var(--orange);
    background: #3a2a18;
    border-color: var(--orange);
    box-shadow: 0 0 8px rgba(250, 146, 24, .35);
}

.board-state-new-children {
    color: var(--gold-light);
    border-color: var(--gold);
}

.board-state-redirect::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* the key below the boards, centered on the line
   of the mark read button */
#posting_icons {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0;
    margin: 8px 0 12px;
}

/* the button ends with the cards above, without the padding of index.css */
.mark_read {
    padding: 0;
}

.mark_read .ew-button-strip {
    margin: 8px 0 12px;
}

.board-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--text-dim);
}

.board-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.board-legend .board-state {
    width: 24px;
    height: 24px;
    box-shadow: none;
}

.board-legend .board-state::before {
    width: 12px;
    height: 12px;
}

/* category headings: the name left, unread posts and the toggle right */
.table_list tbody.header h3.catbg {
    display: flex;
    align-items: center;
    gap: 14px;
}

.table_list tbody.header h3.catbg > a[href]:not(.collapse2):not(.unreadlink) {
    order: -1;
    margin-right: auto;
}

.table_list tbody.header h3.catbg > a.unreadlink {
    order: 1;
    margin: 0;
}

.table_list tbody.header h3.catbg > a.collapse2 {
    order: 2;
}

/* the toggle of a category: a chevron, pointing down while the category is collapsed */
a.cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    float: none;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    color: var(--gold-light);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    transition: color .2s, border-color .2s, background-color .2s;
}

a.cat-toggle::before {
    content: '';
    width: 12px;
    height: 8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s;
}

a.cat-toggle.is-collapsed::before {
    transform: rotate(180deg);
}

a.cat-toggle:hover {
    color: var(--gold-hover);
    background: var(--surface-hover);
    border-color: var(--gold);
}

.table_list tbody.content td.info a.subject:link, .table_list tbody.content td.info a.subject:visited {
    font-size: 16px;
    font-weight: bold;
    color: var(--title);
}

.table_list tbody.content td.info a.subject:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

.table_list tbody.content td.lastpost a:link, .table_list tbody.content td.lastpost a:visited,
.table_list tbody.content td.info .moderators a:link {
    color: var(--link);
}

.table_list tbody.content td.lastpost a:hover, .table_list tbody.content td.info .moderators a:hover {
    color: var(--link-hover);
}

/* tables: cards like the categories of the board index. the gold line on top, the header row
   as the strip, one tint for the rows with lines between them and the boards' hover
------------------------------------------------------- */
table.table_grid, table.shd_ticketlist, #admin_content table.table_grid, table.table_grid.bordercolor, .bordercolor > table,
#mlist table, table.list_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 6px;
    box-shadow: 0 2px 8px #00000059;
    overflow: hidden;
}

table.table_grid th, table.table_grid thead td, table.table_grid tr.catbg th, table.table_grid tr.titlebg th,
table.table_grid tr.catbg td, table.table_grid tr.titlebg td,
table.shd_ticketlist tr.titlebg td, table.shd_ticketlist tr.catbg td, table.shd_ticketlist th,
tr.catbg th, tr.catbg2 th, tr.titlebg th, tr.titlebg2 td, tr.catbg td, tr.titlebg td {
    padding: 8px 10px;
    font: bold 12px/1.3 var(--font-text);
    color: var(--gold-light);
    text-align: left;
    text-transform: none;
    background: var(--head);
    border: 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.table_grid th a:link, table.table_grid th a:visited, tr.catbg th a:link, tr.catbg th a:visited,
tr.titlebg th a:link, tr.titlebg th a:visited, tr.catbg2 td a:link, tr.catbg2 td a:visited,
tr.titlebg2 td a:link, tr.titlebg2 td a:visited, tr.titlebg td a:link, tr.titlebg td a:visited {
    color: var(--gold-light);
}

table.table_grid th a:hover, tr.catbg th a:hover, tr.titlebg th a:hover, tr.titlebg td a:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

.table_grid tr.catbg, .table_grid tr.titlebg, .topic_table table thead {
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

table.table_grid td, table.shd_ticketlist td {
    padding: 8px 10px;
    font-style: normal;
    color: var(--text);
    background: none;
    border: 0;
    border-top: 1px solid var(--divider);
    vertical-align: middle;
}

table.table_grid tbody tr, table.shd_ticketlist tr {
    transition: background-color .2s;
}

table.table_grid tbody tr:not(.catbg):not(.titlebg):hover, table.shd_ticketlist tr.windowbg:hover,
table.shd_ticketlist tr.windowbg2:hover {
    background: var(--surface-alt);
}

/* the first row under the header needs no line, the header has one */
table.table_grid thead + tbody tr:first-child td, table.table_grid tr.catbg + tr td, table.table_grid tr.titlebg + tr td,
table.shd_ticketlist tr.titlebg + tr td {
    border-top: 0;
}

/* the footer row of the helpdesk lists (pages) */
table.shd_ticketlist tr.titlebg:last-child td {
    font-weight: normal;
    color: var(--text-dim);
    background: var(--head-soft);
    border-top: 1px solid var(--border);
    border-bottom: 0;
}

/* headings of cards: a heading right above a box or a list becomes the gold header strip
   of a card like a category of the board index, the box or the list hangs below it
------------------------------------------------------- */
#forum_content :is(div.cat_bar, div.title_bar):has(+ :is(div.windowbg, div.windowbg2, table.table_grid, table.shd_ticketlist)) {
    margin-bottom: 0;
    padding: 0 12px 0 16px;
    background: var(--header);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 2px 6px #00000040;
}

#forum_content :is(div.cat_bar, div.title_bar):has(+ :is(div.windowbg, div.windowbg2, table.table_grid, table.shd_ticketlist)) > :is(h3, h4) {
    padding: 11px 0;
    font-size: 16px;
    letter-spacing: .02em;
    color: var(--orange);
}

#forum_content :is(div.cat_bar, div.title_bar) + :is(div.windowbg, div.windowbg2, table.table_grid, table.shd_ticketlist) {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

/* sticky and locked topics get a small tint, still readable */
table.table_grid td.stickybg, table.table_grid td.stickybg2, table.table_grid tr.stickybg td {
    background: rgba(90, 70, 40, .35);
}

table.table_grid td.lockedbg, table.table_grid td.lockedbg2 {
    background: none;
}

table.table_grid td.approvebg, table.table_grid td.approvebg2, .approvebg, .approvebg2 {
    background: rgba(110, 50, 40, .35);
}

#messageindex td.subject a:link, #messageindex td.subject a:visited, .table_grid td.subject > div > span > a:link,
.table_grid td.subject > div > span > a:visited {
    font-size: 14px;
    font-weight: bold;
    color: var(--title);
}

#messageindex td.subject a:hover, .table_grid td.subject > div > span > a:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

#messageindex td.subject p a:link, #messageindex td.subject p a:visited {
    font-weight: normal;
    font-size: inherit;
    color: var(--link);
}

#messageindex td.stats, #messageindex td.lastpost, .table_grid td.stats, .table_grid td.lastpost {
    font-style: normal;
    color: var(--text-dim);
}

.table_grid td.icon1 img, .table_grid td.icon2 img {
    filter: drop-shadow(0 0 2px #000);
}

/* bootstrap tables (stats, who's online) */
.table {
    color: var(--text);
    background: var(--surface);
}

.table > thead > tr > th {
    color: var(--gold-light);
    background: var(--head);
    border-bottom: 1px solid var(--border);
}

.table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th {
    border-color: var(--divider);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--surface-alt);
}

.table-hover > tbody > tr:hover {
    background-color: var(--surface-hover);
}

/* who's viewing the board or topic */
span#whoisviewing, p#whoisviewing, .whoisviewing {
    padding: 6px 0;
    color: var(--text-dim);
    background: none;
    border: 0;
    box-shadow: none;
}

/* the info center of the board index */
.infocenter_section {
    margin-bottom: 6px;
}

.infocenter_section .windowbg, .infocenter_section .windowbg2 {
    padding: 10px 14px;
}

.infocenter_section p.inline, .infocenter_section p.last {
    border-color: var(--divider);
}

#upshrinkHeaderIC p.last {
    border-top: 1px solid var(--divider);
}

/* posts: one card each, the poster in a darker column
------------------------------------------------------- */
.body_message {
    display: flex;
    margin: 0 0 12px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

/* topics put the text next to .post_wrapper, personal messages put it inside */
.body_message .post_wrapper {
    display: flex;
    flex: 0 0 auto;
    background: none;
}

.body_message .post_wrapper:has(> .col-md-10) {
    flex: 1 1 auto;
    min-width: 0;
}

.body_message .poster, .body_message .poster h4, .body_message .poster ul, .body_message .poster li {
    color: var(--text);
    background: none;
    box-shadow: none;
    border: 0;
}

.body_message .poster, .body_message .poster.col-md-2 {
    flex: 0 0 190px;
    float: none;
    box-sizing: border-box;
    width: 190px;
    padding: 12px 8px;
    background: var(--inset);
    border-right: 1px solid var(--border);
}

.body_message .col-md-10 {
    flex: 1;
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

.body_message .body_content {
    width: auto;
    margin: 0;
    padding: 12px 16px;
}

.body_message .poster h4 {
    font-size: 15px;
    font-weight: bold;
}

.body_message .poster h4 a:link, .body_message .poster h4 a:visited {
    color: var(--gold-light);
}

.body_message .poster .img-thumbnail {
    padding: 0;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}

.body_message .poster li.postcount, .body_message .poster li.thankscount, .body_message .poster li.membergroup,
.body_message .poster li.postgroup, .body_message .poster li.title {
    color: var(--text-dim);
}

.body_content, .postarea, .post, .inner, .keyinfo, .moderatorbar, .body_message .flow_hidden {
    color: var(--text);
    background: none;
    border: 0;
    box-shadow: none;
}

.arrow-left {
    display: none;
}

/* subject and date, with a line below */
.body_message .keyinfo {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--divider);
}

.keyinfo h5 {
    margin: 0;
}

.keyinfo h5 a:link, .keyinfo h5 a:visited {
    font-size: 16px;
    font-weight: bold;
    color: var(--title);
}

.keyinfo h5 a:hover {
    color: var(--gold-hover);
    text-decoration: none;
}

.keyinfo .smalltext {
    color: var(--text-dim);
}

.post .inner {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.moderatorbar {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--divider);
}

.moderatorbar .smalltext, .moderatorbar .signature, .signature, .attachments {
    color: var(--text-dim);
    border-color: var(--divider);
}

.signature {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--divider);
}

/* quick buttons of a post: quote, modify, remove */
.quickbuttons li a:link, .quickbuttons li a:visited, ul.quickbuttons li a {
    color: var(--gold-light);
    background-color: transparent;
}

.quickbuttons li a:hover {
    color: var(--gold-hover);
}

/* likes */
.thanks.smalltext, .thanks.smalltext span {
    color: var(--text-dim);
}


/* quotes and code in posts */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    margin: 0 0 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    background: var(--inset);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--gold-dim);
    border-radius: 0 4px 4px 0;
}

blockquote.bbc_alternate_quote {
    background: var(--surface-alt);
}

.codeheader, .quoteheader, div.quoteheader, div.codeheader {
    margin-top: 6px;
    padding: 0 0 3px;
    font-size: 12px;
    color: var(--gold-light);
    background: none;
}

.quoteheader a:link, .quoteheader a:visited, .codeheader a:link, .codeheader a:visited {
    color: var(--gold-light);
}

code.bbc_code {
    display: block;
    margin: 0 0 10px;
    padding: 8px 12px;
    font: 13px/1.4 Consolas, "Courier New", monospace;
    color: #e6e6e6;
    text-shadow: none;
    background: var(--input-bg);
    border: 1px solid var(--divider);
    border-radius: 4px;
}

.bbc_link:link, .bbc_link:visited {
    color: var(--link);
}

.bbc_link:hover {
    color: var(--link-hover);
}

/* spoilers of the quick spoiler mod */
.sp-wrap {
    color: var(--text);
    background: var(--inset);
    border: 1px solid var(--divider);
    border-radius: 4px;
}

.sp-head {
    color: var(--gold-light);
}

.sp-body {
    color: var(--text);
    background: none;
    border-top-color: var(--divider);
}

/* polls */
#poll .content, #poll_options dl.options, #poll_options .options {
    color: var(--text);
    background: none;
}

.bar {
    background-color: var(--inset);
    border-color: var(--border);
}

.bar div {
    background-color: var(--gold);
}

/* forms: dark fields with a light text, a gold line on focus
------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], input[type=tel],
input[type=url], input[type=file], input[type=date], input:not([type]), input.input_text, input.input_password,
textarea, select, .input_select, .form-control,
#forum_content input[type=text], #forum_content input[type=password], #forum_content textarea, #forum_content select {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    font: 13px/1.4 var(--font-text);
    color: #f1ece4;
    text-shadow: none;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px #00000080;
    opacity: 1;
}

textarea, #forum_content textarea {
    min-height: 0;
}

/* our own caret, like the select boxes of the main site */
select, .input_select, #forum_content select {
    -webkit-appearance: none;
    appearance: none;
    height: 30px;
    padding: 3px 26px 3px 8px;
    line-height: 22px;
    cursor: pointer;
    background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c5b398' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;
}

/* lists with several rows stay normal lists */
select[multiple], select[size]:not([size="1"]), #forum_content select[multiple], #forum_content select[size]:not([size="1"]) {
    height: auto;
    padding: 4px;
    background-image: none;
}

select option, select optgroup {
    color: #f1ece4;
    background: #252525;
}

select optgroup {
    color: var(--gold-light);
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus,
input[type=number]:focus, input[type=url]:focus, input:not([type]):focus, input.input_text:focus, input.input_password:focus,
textarea:focus, select:focus, .form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: inset 0 1px 2px #00000080, 0 0 0 2px #a5937840;
}

input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly] {
    color: var(--text-dim);
    background-color: var(--inset);
}

input[disabled], textarea[disabled], select[disabled] {
    cursor: not-allowed;
}

input::placeholder, textarea::placeholder {
    color: var(--text-faint);
}

/* checkboxes are on/off switches like the server flags of the main site: a dark track with a
   knob that slides to the right and turns light gold. radio buttons are round fields with a dot */
input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    box-sizing: border-box;
    min-height: 0;
    margin: 0 6px 0 0;
    padding: 0;
    border: 1px solid var(--input-border);
    box-shadow: inset 0 1px 2px #00000080;
    cursor: pointer;
}

input[type=checkbox] {
    width: 40px;
    min-width: 40px;
    height: 22px;
    vertical-align: middle;
    background: var(--inset) radial-gradient(circle, var(--text-faint) 0 7px, transparent 7.5px) left center / 20px 20px no-repeat;
    border-radius: 11px;
    transition: border-color .2s, background-color .2s, background-position .2s;
}

input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
    background-color: #a5937859;
    background-image: radial-gradient(circle, var(--gold-light) 0 7px, transparent 7.5px);
    background-position: right center;
    border-color: var(--gold);
}

/* neither on nor off: the knob in the middle */
input[type=checkbox]:indeterminate {
    background-position: center;
}

input[type=checkbox]:checked:hover, input[type=checkbox]:indeterminate:hover {
    background-color: #a5937880;
}

input[type=radio] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    vertical-align: -3px;
    background: var(--input-bg);
    border-radius: 50%;
    transition: border-color .2s, background-color .2s;
}

input[type=radio]:checked {
    background: var(--gold-light) radial-gradient(circle, #1d1915 0 3px, transparent 3.5px);
    border-color: var(--gold);
}

input[type=radio]:checked:hover {
    background-color: var(--gold-hover);
}

input[type=checkbox]:hover, input[type=radio]:hover {
    border-color: var(--gold-hover);
}

input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
    outline: none;
    border-color: var(--gold-hover);
    box-shadow: 0 0 0 2px #a5937860;
}

input[type=checkbox][disabled], input[type=radio][disabled] {
    opacity: .45;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    input[type=checkbox], input[type=radio] {
        transition: none;
    }
}

/* the file field's button like the other buttons */
input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 4px 12px;
    font: bold 12px var(--font-text);
    color: var(--gold-light);
    background: linear-gradient(#36322c, #29261f);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}

input[type=file]::file-selector-button:hover {
    color: var(--gold-hover);
    border-color: var(--gold);
}

/* browsers paint their own light background into autofilled fields */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1ece4;
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    caret-color: #f1ece4;
}

fieldset {
    margin: 8px 0;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

fieldset fieldset, .roundframe fieldset, .windowbg fieldset, .windowbg2 fieldset {
    background: var(--inset);
}

legend {
    width: auto;
    margin: 0;
    padding: 0 6px;
    font-size: 13px;
    font-weight: bold;
    color: var(--gold-light);
    border: 0;
}

label, dl.settings dt, dl.settings dd, dl.register_form dt, #login dt, #login dd {
    color: var(--text);
}

/* the setting lists of the admin center and the profile: a line between the settings */
dl.settings {
    margin: 0;
}

dl.settings dt, dl.settings dd {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* the help icon stays next to the first line of its label, also when the label wraps.
   the invisible character gives the link the height of a line to center the icon in */
dl.settings dt:has(> a.help) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

dl.settings dt > a.help {
    display: flex;
    flex: none;
    align-items: center;
}

dl.settings dt > a.help::after {
    content: '\200b';
}

dl.settings dt > a.help img {
    display: block;
    top: 0;
    margin: 0;
}

dl.settings dt:has(> a.help) > span {
    flex: 1;
    min-width: 0;
}

dl.settings dt span.smalltext, dl.settings dt .smalltext {
    display: block;
    margin-top: 2px;
    font-weight: normal;
    color: var(--text-dim);
}

dl.settings dt.windowbg, dl.settings dt.settings_title {
    color: var(--orange);
    background: none;
}

dl.settings dd input[type=text], dl.settings dd input[type=password], dl.settings dd select {
    max-width: 100%;
}

hr.hrcolor, .settings hr {
    margin: 8px 0;
}

/* the editor of posts and messages */
#bbcBox_message, #smileyBox_message, .richedit_resize, #editor_container {
    background: none;
}

#bbcBox_message img, #bbcBox_message .bbc_button {
    background-color: #d8d2c6;
    border-radius: 2px;
}

#bbcBox_message select {
    height: 24px;
    min-height: 0;
    padding: 0 22px 0 4px;
    font-size: 12px;
    line-height: 22px;
}

.richedit_resize, div.richedit_resize {
    background-color: var(--surface-alt);
    border-color: var(--border);
}

#postMoreOptions, #postAttachment, #postAttachment2, #postAdditionalOptions, #postAttachment3 {
    color: var(--text);
}

#quickReplyOptions .roundframe, #quickreplybox .roundframe {
    background: var(--surface);
}

/* error, notice and success boxes: a solid box with a coloured edge
------------------------------------------------------- */
.errorbox, .noticebox, .successbox, #profile_error, #profile_success, .information.error {
    padding: 10px 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 4px;
}

.errorbox, #profile_error {
    background: rgba(130, 45, 35, .3);
    border-color: #6b3a33;
    border-left-color: #e0574a;
}

.errorbox h3, .errorbox p.alert, .error {
    color: #ff9c8f;
}

.noticebox {
    background: rgba(130, 95, 40, .28);
    border-color: #5c4d36;
    border-left-color: var(--orange);
}

.successbox, #profile_success {
    background: rgba(50, 120, 60, .24);
    border-color: #3a5c3d;
    border-left-color: #5cb860;
}

.alert {
    color: #ff9c8f;
}

/* smf ends floated rows with <br class="clear" />. it only has to clear the floats, but browsers
   draw a line break as a line of text whatever its css says, an empty line between the boxes.
   so it's hidden: the next element (scripts don't count) clears the floats instead, and the box
   around it holds its floats itself, for the breaks at the end of a box */
br.clear, br.clear_left, br.clear_right {
    display: none;
}

:is(br.clear, br.clear_left, br.clear_right) + :not(script),
:is(br.clear, br.clear_left, br.clear_right) + script + :not(script),
:is(br.clear, br.clear_left, br.clear_right) + script + script + :not(script) {
    clear: both;
}

:is(div, form):has(> :is(br.clear, br.clear_left, br.clear_right)) {
    display: flow-root;
}

/* smf's red words, bootstrap's .alert would make them a padded box */
span.alert {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* the tabs of the profile, the messages and the admin center (GenericMenu)
------------------------------------------------------- */
#adm_submenus, #adm_submenus ul, .buttonlist ul {
    background: none;
    border: 0;
}

/* the tabs sit in a strip like the header of a card */
#forum_content #adm_submenus {
    margin: 4px 0 12px;
    padding: 0 8px;
    background: var(--header);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 6px;
    box-shadow: 0 2px 6px #00000040;
}

#adm_submenus ul.dropmenu {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
}

#adm_submenus ul.dropmenu li {
    float: none;
    margin: 0;
}

#adm_submenus ul.dropmenu li a.firstlevel, #adm_submenus ul.dropmenu li a.firstlevel span.firstlevel {
    display: block;
    margin: 0;
    padding: 0;
    font: 13px/1.3 var(--font-text);
    color: var(--gold-light);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#adm_submenus ul.dropmenu li a.firstlevel {
    padding: 11px 14px;
    transition: color .2s, background-color .2s;
}

#adm_submenus ul.dropmenu li a.firstlevel:hover {
    color: var(--gold-hover);
    background: #FFFFFF12;
}

#adm_submenus ul.dropmenu li a.active.firstlevel, #adm_submenus ul.dropmenu li a.active span.firstlevel {
    color: var(--title);
    font-weight: bold;
}

#adm_submenus ul.dropmenu li a.active.firstlevel {
    box-shadow: inset 0 -2px 0 var(--orange);
}

/* the upper tab menus of the profile and the messages */
.dropmenu li a.firstlevel, .dropmenu li a.firstlevel:link, .dropmenu li a.firstlevel:visited {
    color: var(--gold-light);
    font: 14px var(--font-text);
}

.dropmenu li a.firstlevel span.firstlevel {
    padding: 6px 10px;
    white-space: nowrap;
}

.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel,
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel,
.dropmenu li a.active, .dropmenu li a.active span.firstlevel {
    color: var(--gold-hover);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dropmenu li ul {
    background: #252525;
    border: 2px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 8px 20px #000000A0;
}

.dropmenu li li, .dropmenu li li.additional_items {
    background: none;
}

.dropmenu li li a:link, .dropmenu li li a:visited, .dropmenu li li a span {
    font-size: 13px;
    color: var(--gold-light);
}

.dropmenu li li a:hover, .dropmenu li li:hover > a, .dropmenu li li a:hover span {
    color: var(--gold-hover);
    background-color: #FFFFFF12;
}

.dropmenu li li a.chosen, .dropmenu li li a.chosen span {
    color: var(--gold-hover);
    font-weight: bold;
}

.buttonlist ul li a, .buttonlist ul li a span {
    color: var(--gold-light);
    background: none;
}

.buttonlist ul li a.active, .buttonlist ul li a.active span {
    color: var(--gold-hover);
    background: none;
    box-shadow: inset 0 -2px 0 var(--orange);
}

.buttonlist ul li a:hover, .buttonlist ul li a:hover span {
    color: var(--gold-hover);
    background: none;
}

/* the side menu of the profile, the messages and the admin center: one panel per section
------------------------------------------------------- */
@media (min-width: 768px) {
    #left_admsection {
        width: 210px;
        padding-right: 16px;
    }
}

.adm_section {
    margin: 0 0 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

#forum_content .adm_section div.cat_bar {
    margin: 0;
    background: var(--head);
    border-bottom: 1px solid var(--border);
}

#forum_content .adm_section h4.catbg, .adm_section h4.catbg a:link, .adm_section h4.catbg a:visited {
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--orange);
}

.adm_section h4.catbg a:link, .adm_section h4.catbg a:visited {
    padding: 0;
}

.adm_section h4.catbg img {
    display: none;
}

.left_admmenu, .left_admmenu ul {
    margin: 0;
    padding: 4px 0;
    background: none;
    border-radius: 0;
}

.left_admmenu li {
    padding: 0;
}

.left_admmenu li + li {
    border-top: 1px solid var(--divider);
}

.left_admmenu a:link, .left_admmenu a:visited {
    display: block;
    padding: 6px 12px 6px 10px;
    font: 13px/1.35 var(--font-text);
    color: var(--gold-light);
    border-left: 3px solid transparent;
    transition: color .2s, background-color .2s, border-color .2s;
}

.left_admmenu a:hover {
    color: var(--gold-hover);
    text-decoration: none;
    background: var(--surface-hover);
    border-left-color: var(--gold-dim);
}

.left_admmenu strong a:link, .left_admmenu strong a:visited {
    font-weight: bold;
    color: var(--title);
    background: var(--surface-hover);
    border-left-color: var(--orange);
}

/* tablets and phones: greeny makes the side menu full width but keeps it floating,
   the page next to it gets squeezed to nothing. the sections go into a grid above the page */
@media (max-width: 961px) {
    #left_admsection {
        float: none !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        align-items: start;
        gap: 8px;
        margin-bottom: 14px;
    }

    /* the jump anchor of the menu, not a cell of the grid */
    #left_admsection > #admin_menu {
        position: absolute;
    }

    #left_admsection .adm_section {
        width: auto !important;
        margin: 0;
        padding: 0 !important;
    }
}

/* the admin center
------------------------------------------------------- */
#admin_content .windowbg, #admin_content .windowbg2 {
    color: var(--text);
}

/* news and versions of simplemachines.org and simpledesk.net, we never update from there */
#live_news, #supportVersionsTable, #update_section, #sd_live_news, #sd_update_section {
    display: none !important;
}

#forum_content #sd_supportVersionsTable {
    float: none;
    width: auto;
}

#admin_main_section + .windowbg2, #admin_main_section ~ .windowbg2 {
    margin-top: 8px;
}

/* the quick search of the admin center */
#quick_search {
    display: flex;
    align-items: center;
    gap: 6px;
}

#quick_search input[type=text], #quick_search select {
    width: auto;
    margin: 0;
}

#quick_search select {
    min-width: 140px;
}

#quick_search input.button_submit {
    margin: 0;
}

/* the quick tasks of the admin center: tiles. admin.css of the default theme
   is loaded after this file, so these rules need the extra id */
#forum_content #quick_tasks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
}

#forum_content #quick_tasks li {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-content: center;
    gap: 2px 12px;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    background: var(--inset);
    border: 1px solid var(--divider);
    border-radius: 4px;
    transition: border-color .2s;
}

#forum_content #quick_tasks li:hover {
    border-color: var(--gold-dim);
}

/* the icon sits left of the name and the description */
#forum_content #quick_tasks li > a {
    grid-row: span 2;
    align-self: center;
}

#forum_content #quick_tasks .home_image {
    display: block;
    float: none;
    margin: 0;
}

#forum_content #quick_tasks li h5 {
    margin: 0;
    font-size: 14px;
}

#forum_content #quick_tasks li h5 a:link, #forum_content #quick_tasks li h5 a:visited {
    color: var(--title);
}

#forum_content #quick_tasks li .task {
    font-size: 12px;
    color: var(--text-dim);
}

#forum_content legend {
    color: var(--gold-light);
}

#forum_content .table_caption, #forum_content tr.table_caption td {
    color: var(--gold-light);
}

#forum_content .perm_read {
    background-color: #2c4a2a;
}

#forum_content .perm_write {
    background-color: #5a2a26;
}

#forum_content .perm_execute {
    background-color: #5a4226;
}

#forum_content .perm_custom, #forum_content .perm_nochange, #forum_content .perm_groups,
#forum_content #manage_boards li#recycle_board {
    background-color: var(--inset);
}

#forum_content code#find_code, #forum_content code#replace_code, #forum_content pre.file_content {
    color: #e6e6e6;
    background: var(--input-bg);
}

#forum_content .maintenance_finished, #forum_content #task_completed {
    color: var(--text);
    background: rgba(50, 120, 60, .24);
    border: 1px solid #3a5c3d;
    border-left: 4px solid #5cb860;
    border-radius: 4px;
}

/* the moderation center: its blocks in a grid, so the news block can go without
   leaving a hole in the left/right columns */
#forum_content #modcenter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

#forum_content #modcenter > .cat_bar, #forum_content #modcenter > .information {
    grid-column: 1 / -1;
}

#forum_content #modcenter .modblock_left, #forum_content #modcenter .modblock_right {
    float: none;
    width: auto;
    margin: 0 0 12px;
}

#forum_content #modcenter > br.clear, #forum_content #modcenter .modblock_left:has(#smfAnnouncements),
#forum_content #modcenter .modblock_right:has(#smfAnnouncements) {
    display: none;
}

@media (max-width: 767px) {
    #forum_content #modcenter {
        grid-template-columns: 1fr;
    }
}

/* the board list of the board management: rows with lines in between */
#forum_content #manage_boards ul {
    max-height: none;
    margin: 0 0 10px;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: 4px;
}

#forum_content #manage_boards li, #forum_content #manage_boards li.windowbg, #forum_content #manage_boards li.windowbg2 {
    margin: 0;
    padding: 6px 10px;
    background: none;
    border: 0;
    border-top: 1px solid var(--divider);
}

#forum_content #manage_boards li:first-child {
    border-top: 0;
}

#forum_content #manage_boards li.windowbg:hover, #forum_content #manage_boards li.windowbg2:hover {
    background: var(--surface-hover);
}

#forum_content #manage_boards li a:link, #forum_content #manage_boards li a:visited {
    color: var(--title);
}

#forum_content #manage_boards li .modify_boards a:link, #forum_content #manage_boards li .modify_boards a:visited,
#forum_content #manage_boards li span.floatright a:link, #forum_content #manage_boards li span.floatright a:visited {
    margin-left: 8px;
    color: var(--gold-light);
}

/* the package manager and other lists */
.ftp_details, #need_writable_list {
    color: var(--text);
}

/* the helpdesk (SimpleDesk). its helpdesk.css is loaded after this file
   and forces big white table headers, so these rules need the extra id
------------------------------------------------------- */
#forum_content table.shd_ticketlist {
    border: 1px solid var(--border);
}

#forum_content .shd_ticketlist .titlebg:first-child, #forum_content .shd_ticketlist .titlebg:first-child td,
#forum_content .shd_ticketlist .titlebg:first-child a {
    font-size: 12px;
    color: var(--gold-light);
}

#forum_content .shd_ticketlist .titlebg:first-child a:hover {
    color: var(--gold-hover);
}

#forum_content .shd_ticketlist td {
    border-bottom: 0;
}

#forum_content .shd_ticketlist td.shd_nowrap {
    white-space: nowrap;
}

#forum_content .shd_ticketlist .shd_smallicon {
    margin: -2px 4px 0 0;
    vertical-align: middle;
}

/* the empty lists say so instead of showing a bare header */
#forum_content .shd_ticketlist td.shd_noticket {
    display: table-cell;
    padding: 14px;
    color: var(--text-dim);
    font-style: italic;
}

/* the tables sit in a column of the page, they bring their own gaps */
#forum_content table.shd_main_hd {
    width: 100%;
    margin-top: 0;
}

/* the ticket lists are cards (see "headings of cards"). the line breaks between them make way
   for the same gap as between the categories */
#forum_content table.shd_main_hd td > br {
    display: none;
}

#forum_content .tborder:has(> table.shd_ticketlist) {
    margin-top: 20px;
}

/* icon, name and count on the left, the pages on the right */
#forum_content .tborder > div.cat_bar:has(+ table.shd_ticketlist) h3.catbg {
    display: flex;
    align-items: center;
    gap: 8px;
}

#forum_content .tborder > div.cat_bar:has(+ table.shd_ticketlist) h3.catbg > .floatright {
    order: 1;
    margin: 0 0 0 auto;
}

#forum_content .information li dt, #forum_content .shd_ticketdetails dt {
    color: var(--text-dim);
}

#forum_content .shd_assignees:hover {
    background-color: var(--surface-hover);
}

#forum_content ul.shd_profile_nav_inline li {
    border-right-color: var(--divider);
}

/* the ticket: the details on the left in the darker inset */
#forum_content .shd_ticket_side_column .information, #forum_content .shd_ticketdetails {
    background: var(--inset);
}

#forum_content .shd_ticket_description {
    border-bottom: 1px solid var(--divider);
}

/* the ticket's form fields get full width from helpdesk.css, buttons don't need that */
#forum_content .shd_ticket input[type=submit], #forum_content .shd_ticket input[type=button], #forum_content .shd_ticket button {
    width: auto;
    margin: 4px 2px !important;
    padding: 6px 14px;
    font-size: 13px !important;
}

#forum_content .shd_ticket img {
    scale: 1;
}

#forum_content .shd_main_log, #forum_content .shd_empty_log {
    color: var(--text-dim);
}

/* misc
------------------------------------------------------- */
.calendar_today, td.calendar_today {
    background-color: rgba(250, 146, 24, .18);
}

#display_jump_to, #message_index_jump_to {
    background: none;
}

.img-thumbnail {
    background-color: transparent;
    border-color: var(--border-strong);
}

.label-default, .badge {
    background-color: var(--gold-dim);
}

/* the jump to box and the quick moderation selection */
#display_jump_to, #message_index_jump_to, .quickModeration {
    color: var(--text-dim);
}

/* the shoutbox of SMFPacks */
#shoutbox, .shoutbox, #shoutbox_container {
    color: var(--text);
    background: none;
}

/* bootstrap's own text colours on dark ground */
.text-muted, .help-block {
    color: var(--text-dim);
}

/* recent posts */
.core_posts .counter {
    color: var(--gold-dim);
}

.list_posts {
    border-top: 1px solid var(--divider);
}

/* small screens: the box gets the full width, posts stack the poster above the text */
@media (max-width: 767px) {
    #forum_content, #footer {
        width: 100%;
        border-radius: 0;
    }

    #forum_content {
        margin-top: 60px;
        padding: 10px 10px 16px;
    }

    .st-bread.breadcrumb {
        font-size: 14px;
    }

    .ew-button-strip {
        justify-content: flex-start;
    }

    .body_message {
        flex-direction: column;
    }

    .body_message .post_wrapper {
        flex-direction: column;
    }

    .body_message .poster, .body_message .poster.col-md-2 {
        flex: none;
        width: auto;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .body_message .body_content {
        padding: 10px 12px;
    }

    /* greeny shows the avatar at 130px on phones, with !important */
    .body_message .poster img.display-profile {
        width: 64px !important;
        height: 64px !important;
    }

    #forum_content #quick_tasks {
        grid-template-columns: 1fr;
    }
}