/* Offside Mode Support - black/bone brand theme. Applied 2026-10-23. Previous cream version: black header + bone page with old staircase logo (revert by restoring it). */
:root {
    --primary: #EDEAE2;
    --secondary: #CFCBC0;
    --tertiary: #8F8B80;
    --main-background: #0D0D0D;
    --surface: #161615;
    --foreground: #EDEAE2;
    --font__pri-clr: #EDEAE2;
    --font__sec-clr: #B9B5AA;
}
html, body, .wrapper, .main, .main__content, .content, .contr { background: #0D0D0D !important; color: #EDEAE2 !important; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, p, li, label, .label, span, td, th, div { color: inherit; }
a { color: #EDEAE2; }
a:hover { color: #FFFFFF; }
.header { background: #0D0D0D !important; border-bottom: 1px solid #2A2A28; }
.breadcrumbs { background: #121211 !important; border-bottom: 1px solid #2A2A28; }
.breadcrumbs a, .breadcrumbs span, .breadcrumbs__inner * { color: #B9B5AA !important; }
.breadcrumbs__inner span:last-child, .breadcrumbs__inner .last { color: #EDEAE2 !important; }
a.header__logo {
    display: inline-block !important;
    width: 190px !important; height: 50px !important;
    overflow: hidden !important; color: transparent !important;
    font-size: 0 !important; line-height: 0 !important; text-indent: -9999px !important;
    background: url("/img/offside-lockup-header.png") no-repeat left center !important;
    background-size: contain !important;
}
a.header__logo * { display: none !important; }
/* cards, boxes, article lists */
.navlink, .article, .preview, .boxed, .kb-suggestions, .form, .form-submit-ticket, .ticket-create, .suggest-preview, .tabbed__tabs, .block, .topics__block, .article__content {
    background: #161615 !important; color: #EDEAE2 !important; border-color: #2A2A28 !important; box-shadow: none !important;
}
.navlink { border: 1px solid #2A2A28 !important; }
.navlink:hover, .preview:hover { border-color: #EDEAE2 !important; }
.navlink__title, .preview__title, .article__heading, .search__title, .article__heading--form { color: #EDEAE2 !important; }
.navlink__descr, .preview__text, .suggest-preview__text, .lightgrey, .article-heading-tip { color: #B9B5AA !important; }
.tabbed__head, .tabbed__head_tabs, .tabbed__head_tabs * { background: transparent !important; color: #EDEAE2 !important; border-color: #EDEAE2 !important; }
.icon-in-circle { background: #EDEAE2 !important; }
.icon-in-circle svg, .icon-in-circle .icon { fill: #0D0D0D !important; color: #0D0D0D !important; }
.help-search, .search__form, .search { background: #161615 !important; }
.help-search { border: 1px solid #2A2A28; }
/* inputs */
input, select, textarea, .form-control, .selectize-input, .selectize-dropdown, .dropdown-select {
    background: #0D0D0D !important; color: #EDEAE2 !important; border: 1px solid #4A4944 !important;
}
input::placeholder, textarea::placeholder { color: #8F8B80 !important; }
input:focus, textarea:focus, select:focus, .form-control:focus { border-color: #EDEAE2 !important; outline: none !important; box-shadow: none !important; }
.selectize-dropdown .option:hover, .selectize-dropdown .active { background: #2A2A28 !important; color: #EDEAE2 !important; }
/* buttons */
.btn, a.btn, button.btn, .btn-full, .btn--blue-border, .btn-refresh {
    background: #EDEAE2 !important; color: #0D0D0D !important; border: 1px solid #EDEAE2 !important; border-radius: 2px !important; font-weight: 700; letter-spacing: .04em;
}
.btn:hover, .btn-full:hover, .btn--blue-border:hover { background: #FFFFFF !important; color: #0D0D0D !important; }
.btn *, .btn-full * { color: #0D0D0D !important; fill: #0D0D0D !important; }
.search__submit { background: #EDEAE2 !important; }
.search__submit .icon, .search__submit svg { fill: #0D0D0D !important; }
.icon { fill: currentColor; }
.error, .text-danger { color: #FF8A80 !important; }
.divider { border-color: #2A2A28 !important; }
/* footer */
.footer { background: #0D0D0D !important; border-top: 1px solid #2A2A28; color: #8F8B80 !important; }
.footer a { color: #B9B5AA !important; }
table, td, th { border-color: #2A2A28 !important; }

.article > .block__head { background: #161615 !important; border-bottom: 1px solid #2A2A28 !important; }
.block__head, .block__head * { color: #EDEAE2 !important; }
html body main .article .block__head .h-3, html body .article .block__head h3, html body .block__head h3.h-3, html body .content .block__head * { color: #EDEAE2 !important; }