/***************************************************************
*
*
* Дизайн разработан max, the murderer! в 2021 году для проекта RELAXCROSS
* С багами и благодарностями обращаться в телеграм @renegay
*
*
***************************************************************/









/***************************************************************
- BASIC
***************************************************************/


/* Variables
--------------------------------- */
:root {
    --html: 60 116 203;
    --body: 23 36 58;
    --pun: 232 232 232;
    --pun_darken: 221 222 223;
    --basic: 23 36 58;
    --light: 232 232 232;
    --accent: 60 116 203;
    --texture_pun: url(http://forumstatic.ru/files/001b/64/5f/75938.png) top center repeat;
    --texture_html: url(http://forumstatic.ru/files/001b/64/5f/21877.png) repeat;
    --font: 'Beware';
    --warning: 255 183 57;
}

[theme='dark'] {
    --html: 18 48 94;
    --pun: 32 45 65;
    --pun_darken: 43 56 75;
    --basic: 210 210 210;
    --texture_pun: url(http://forumstatic.ru/files/001b/64/5f/97849.png) top center repeat;
    --texture_html: url(http://forumstatic.ru/files/001b/64/5f/18840.png) repeat;
}


/* Bg
--------------------------------- */

html {
    background: url(http://forumstatic.ru/files/001b/64/5f/37513.svg) 50% -700px no-repeat,
                url(http://forumstatic.ru/files/001b/64/5f/12194.svg) center bottom no-repeat,
                var(--texture_html) 0 0, rgb(var(--html));
    transition: background-color .2s ease;
    min-width: 1234px;
}


/* Header & Body
--------------------------------- */

body {
    width: 1000px;
    background: rgb(var(--body));
    border: 1px solid rgb(var(--light)) !important;
    margin: 184px auto 256px !important;
    padding: 40px 16px 32px !important;
    box-shadow: 0px 2.2138051986694336px 1.6050087213516235px 0px rgba(0, 0, 0, 0.0253),
                0px 5.32008171081543px 3.8570592403411865px 0px rgba(0, 0, 0, 0.0364),
                0px 10.017241477966309px 7.262500286102295px 0px rgba(0, 0, 0, 0.045),
                0px 17.869047164916992px 12.955059051513672px 0px rgba(0, 0, 0, 0.0536),
                0px 33.422088623046875px 24.231014251708984px 0px rgba(0, 0, 0, 0.0647),
                0px 80px 58px 0px rgba(0, 0, 0, 0.09);
}

#pun {
    background: rgb(var(--pun)) var(--texture_pun);
    border: 1px solid rgb(var(--accent));
    transition: background-color .2s ease;
    padding: 16px;
    margin: 0 auto;
}

.frame {
    position: absolute;
    width: 1072px;
    height: 540px;
    z-index: -1;
    left: -50px;
    top: 120px;
    border-radius: 16px;
    border: 1px solid rgb(var(--accent));
}


/* Footer
--------------------------------- */

#pun-crumbs2 {
    margin: 16px -17px 0 !important;
    background: rgb(var(--body));
    border-top: 1px solid rgb(var(--accent));
}

#pun-index #pun-crumbs2 {
    border-top: none;
}

#pun-about {
    background: rgb(var(--body));
    margin: -12px -17px -16px !important;
    padding-bottom: 16px;
}

#pun-about .container {
    text-align: center;
    margin-bottom: 16px;
}

#pun-about .container,
#pun-crumbs2 .container,
#pun-about .container a:hover,
#pun-crumbs2 .container a:hover {
    color: rgb(var(--light));
}


/* Banners */

#banners-box {
    background: rgb(var(--body));
    margin: 0 -18px -18px;
    height: 83px;
    overflow: hidden;
    text-align: center;
}

.banners-content {
    animation: marquee 10s linear infinite forwards;
}

.banners-content:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-40%);
    }
    100% {
        transform: translateY(0);
    }
}

.banners-content img {
    transition: all ease .2s;
    width: 88px;
    height: 31px;
}

.banners-content img:hover {
    opacity: .74;
}


/* Basic body color
------------------------------------------------------------- */

html,
body,
.punbb .container,
.punbb .post-body,
#pun-title,
.punbb .section,
.punbb .forum,
.punbb .formal,
.punbb .modmenu,
.punbb .info,
.punbb .category,
.punbb .post,
#pun-debug h2,
.punbb-admin #pun-admain h2,
.punbb td,
.punbb fieldset,
#viewprofile ul,
#profilenav ul,
.punbb .post .post-body,
.post-links ul,
.post-links,
.usertable table,
.punbb th,
.punbb .quote-box,
.punbb .code-box,
#pun-ulinks li,
li#onlinelist,
#pun-help .formal .info-box h3.legend span,
li#onlinelist div,
#pun-help .formal .info-box h3.legend,
.punbb .divider,
.punbb .formal fieldset .post-box,
.punbb .info-box {
    border: none;
    color: rgb(var(--basic));
}


/***************************************************************
- HEADLINES
***************************************************************/


/* Category
------------------------------------------------------------------ */

#pun .category h2,
#pun-stats h2,
#pun-debug h2,
#viewprofile h2,
#post-form h2,
.punbb .main h1 {
    padding: 30px 16px 0;
    margin: 16px !important;
    box-sizing: border-box;
    height: 48px;
    background: rgb(var(--body)) var(--texture_html) 0 0;
    border: 1px solid rgb(var(--accent));
    transition: background-size .2s ease;
    position: relative;
    overflow: hidden;
    font-family: var(--font), 'Inter', Verdana, sans-serif;
    color: rgb(var(--light));
    text-align: right !important;
    font-weight: normal;
    font-size: 64px;
    line-height: 20px;
}

#pun .category h2:nth-child(even) {
    text-align: left;
}

#pun .category h2 span,
#pun-stats h2 span,
#pun-debug h2 span,
.punbb .main h1 span,
#viewprofile h2 span,
#post-form h2 span {
    position: relative;
}

#pun-viewtopic h1,
#pun-viewforum h1,
#pun-modviewforum h1,
#pun-searchtopics h1,
.punbb .main h1 {
    margin-bottom: 40px !important;
}

.punbb .main h1 {
    font-size: 32px;
    padding-top: 8px;
    line-height: 100%;
}


/* Hide categories */

#pun-index .category h2 .aimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 16px 'Inter', Verdana, sans-serif !important;
    text-transform: uppercase;
    color: rgb(var(--light));
    opacity: 0;
    z-index: 1;
}

#pun-index .category h2:hover span {
    opacity: 0;
}

#pun-index .category h2 span {
    transition: opacity .2s ease;
    cursor: pointer;
}

#pun-index .category h2:hover .aimg {
    opacity: 1;
}


/* Basic headlines
------------------------------------------------------------------ */

#profilenav h2 {
    padding-bottom: 8px!important;
}

#post-form h2 {
    text-align: center;
}


/* Profile page
------------------------------------------------------------------ */

#pun-profile #profilenav {
    margin: 0 0 16px 0;
    display: block!important;
    width: 100%;
}

#pun-profile #profilenav h2 {
    display: none;
}

#pun-profile #profilenav ul {
    margin: 0;
    padding: 0 16px;
}

#pun-profile #profilenav ul li {
    display: inline-block;
}

#pun-profile #profilenav ul li a {
    padding-right: 8px;
}

#pun-profile #profile .container {
    padding: 0 0;
}

#pun-profile fieldset:not(.radiofield) {
    padding: 0 2em;
}

#pun-respect .main .tcr {
    width: 20%!important;
}

#pun-respect .tc3:nth-child(4) {
    width: 30%!important;
}


/* Redirect
------------------------------------------------------------------ */

#pun-redirect {
    background: rgb(var(--body)) var(--texture_html) 0 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 80px;
}

#pun-redirect h1 {
    border: 1px solid rgb(var(--light));
    margin: 32px 16px 16px !important;
}

.redirect-page #pun {
    background: transparent;
    box-shadow: none;
    border: none !important;
}

#pun-redirect #pun-main {
    background: rgb(var(--body));
    border: 1px solid rgb(var(--light));
    padding: 0 16px 24px;
    box-shadow: 0px 2.2138051986694336px 1.6050087213516235px 0px rgba(0, 0, 0, 0.0253),
                0px 5.32008171081543px 3.8570592403411865px 0px rgba(0, 0, 0, 0.0364),
                0px 10.017241477966309px 7.262500286102295px 0px rgba(0, 0, 0, 0.045),
                0px 17.869047164916992px 12.955059051513672px 0px rgba(0, 0, 0, 0.0536),
                0px 33.422088623046875px 24.231014251708984px 0px rgba(0, 0, 0, 0.0647),
                0px 80px 58px 0px rgba(0, 0, 0, 0.09);
}

#pun-redirect #pun-main a:hover {
    color: rgb(var(--light));
}

#pun-redirect .container {
    color: rgb(var(--light));
}


/***************************************************************
- ICONS & TRS
***************************************************************/

.punbb .forum .container {
    margin: 0 -17px;
}

.punbb .forum table tr .tcl {
    padding-left: 16px;
}

.punbb .forum table tr .tcr {
    padding-right: 16px;
}

.punbb table thead {
    font-size: 10px;
    box-shadow: 0 -1px 0 inset rgb(var(--basic) / .05);
}

.punbb:not(#pun-index) table div.icon {
    background: rgb(var(--basic) / .12);
    border-radius: 4px;
    width: 8px;
    height: 8px;
    float: left;
    margin: 3px 8px 0 0em;
}

.punbb:not(#pun-index) table tr.inew div.icon {
    background: rgb(var(--accent));
}

.punbb:not(#pun-index) table tr.isticky div.icon {
    background: rgb(var(--warning));
}

.punbb:not(#pun-index) table tr.iredirect td {
    opacity: .38;
}

.punbb:not(#pun-index) table tr.iredirect .tcl .byuser:after {
    content: '[Тема перенесена]';
    margin: 0 4px;
}

.punbb:not(#pun-index) table tr.iclosed div.icon {
    background: rgb(var(--basic) / .12);
}


/* Viewforum
------------------------------------------------------------------ */

#pun-searchtopics tr a,
#pun-viewforum tr a,
#pun-modviewforum tr a {
    font-weight: normal;
}

#pun-searchtopics tr.inew strong a,
#pun-viewforum tr.inew strong a,
#pun-modviewforum tr.inew strong a {
    font-weight: bold!important;
}

/* General
------------------------------------------------------------------ */


/* New messages quantity on index page
------------------------------------------------------------------ */


/***************************************************************
- PROFILE
***************************************************************/

.punbb .post .post-author {
    float: left;
    margin: -17px 0 32px -32px;
    width: 246px;
    text-align: center;
    background: rgb(var(--body));
    overflow: hidden;
    position: sticky;
    top: 63px;
    color: rgb(var(--light));
    border-right: 1px solid rgb(var(--accent));
    transition: all .2s ease;
    height: 100%;
}

.punbb .post .post-author a:hover {
    color: rgb(var(--light));
}

.punbb .post-author .pa-author {
    padding: 16px 16px 0 0;
    margin: 0 0 0 16px;
    font-family: var(--font), serif;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid rgb(var(--accent));
}

#tuser {
    position: absolute;
    margin: -2px 0 0 2px!important;
    font-size: 16px !important;
}

.punbb .post-author .pa-title {
    padding: 8px 16px 12px;
    font-size: 10px;
    text-align: center;
}

.punbb .post-author .pa-avatar {
    padding: 16px;
    background: rgb(0 0 0 / .24);
    width: min-content;
    display: inline-flex;
    margin-bottom: 16px;
}

.punbb .post-author .pa-avatar img {
    max-width: 180px;
}

.punbb .post-author .pa-posts,
.punbb .post-author .pa-respect,
.punbb .post-author .pa-fld4 {
    display: inline-block;
    margin: 0 0 8px 0 !important;
    background: rgb(var(--light) / .05);
    padding: 8px 0;
    box-sizing: border-box;
    width: 65.5px;
    height: 50px;
}

.punbb .post-author .pa-fld4 {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    float: right;
    margin: 0 16px 0 -12px !important;
}

.punbb .post-author .pa-fld4 b,
.punbb .post-author .pa-respect .fld-name {
    font-size: 0;
    display: block;
}

.punbb .post-author .pa-posts,
.punbb .post-author .pa-respect {
    margin-right: 5px !important;
}

.punbb .post-author .pa-respect a:first-child:before,
#pun.isguest .punbb .post-author .pa-respect .fld-name:before,
.punbb .post-author .pa-posts a:before {
    font-family: 'Font Awesome 5 Free';
    font-size: 16px;
    color: rgb(var(--accent));
    display: block;
    font-weight: 900;
    margin-bottom: 4px;
}

.punbb .post-author .pa-respect a:first-child:hover:before,
.punbb .post-author .pa-posts a:hover:before {
    color: rgb(var(--black) / .87)
}

.punbb .post-author .pa-respect a:first-child:before,
#pun.isguest .punbb .post-author .pa-respect .fld-name:before {
    content: '\f004';
}

.punbb .post-author .pa-posts a:before {
    content: '\f0e0';
}

.punbb .post-author .pa-online,
.punbb .post-author .pa-last-visit {
    padding: 8px 0;
}

.punbb .post-author .pa-online strong:before {
    content: '';
    background: rgb(39 174 96 / 1);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 8px 0 0;
    animation: blinkColor .9s linear infinite;
}

.punbb .post-author .awrd-toggle {
    background: rgb(var(--accent));
    padding: 4px 0;
    margin: 16px 0 0 15px;
    font-size: 14px;
    font-family: 'Inter', Verdana, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    transition: all .2s ease;
}

.punbb .post-author .awrd-toggle:hover {
    cursor: pointer;
    background: transparent;
    color: rgb(var(--accent));
}

.punbb .post-author .awrd {
    padding: 16px 8px 12px;
}

.punbb .post-author .mini_awards_label,
.punbb .post-author .awrd br {
    display: none;
}

.punbb .post-author .mini_awards img {
    transition: all .2s ease;
}

.punbb .post-author .mini_awards img:hover {
    opacity: .8;
}

.punbb .post-author .pa-fld1 {
    border: 1px solid rgb(var(--accent));
    margin: 0 16px 8px;
    padding: 8px 16px 16px;
    background: rgb(var(--light) / .05);
}

.punbb .post-author .pa-fld1 lzname {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.punbb .post-author .pa-fld1 fan {
    background: rgb(var(--accent));
    display: block;
    margin: 0 -16px;
    padding: 4px 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.punbb .post-author .pa-fld1 lzinfo {
    font-size: 10px;
}

#pun-searchposts .post-author .pa-author,
#pun-post .post-author .pa-author {
    font-size: 14px !important;
    padding: 10px 16px 6px;
}

#pun-searchposts .post-author .pa-author strong,
#pun-post .post-author .pa-author strong {
    font-weight: normal;
}

#pun-searchposts .post-author {
    padding-bottom: 8px;
}


/* Post date & number
------------------------------------------------------------------ */

#pun-main .post h3 {
    background: rgb(var(--pun_darken)) var(--texture_pun);
    padding: 1px 16px;
    margin: 0 16px 0 215px;
    position: sticky;
    top: 63px;
    z-index: 1;
    transition: margin .2s ease;
}

.punbb .post h3 span {
    font-weight: 500;
}

.punbb .post h3 span strong {
    float: right;
    text-align: right;
}


/* Custom post content */

.post h3 .text-control {
    display: inline-block;
    margin: 0 8px;
}

.post h3 .text-control:hover,
.post h3 .text-control:focus,
.post h3 .text-control:active {
    opacity: .6;
}

.post h3 .fa-text-width {
    margin-left: 8px;
}

.post h3 #post-width,
.post h3 #post-lineheight,
.post h3 #post-font {
    padding: 0 2px 0 0;
    height: 14px;
    border-radius: 0;
    border: 0;
    display: inline-block;
    outline: none;
    line-height: 10px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 62px;
    background: transparent;
    margin-left: 4px;
}

.post h3 .hideprofile i {
    color: rgb(var(--basic));
}

.post h3 .hideprofile_label {
    display: inline-block;
}

.post h3 #post-width:hover,
.post h3 #post-lineheight:hover,
.post h3 #post-font:hover {
    background: transparent;
}

.post h3 .fas {
    font-size: 12px;
}

.post h3 .fa-arrows-alt-h {
    margin-right: 4px;
}

.post.profilehidden h3 span .fa-arrows-alt-h:before {
    content: '\f30b';
}

.post.profilehidden .post-author {
    border-width: 0;
    width: 0 !important;
    height: 0 !important;
}

.post.profilehidden h3 {
    margin-left: 16px !important;
}

.post.profilehidden .post-links li.pl-email.profile,
.post.profilehidden .post-links li.pl-email.pm,
.post.profilehidden .post-links li.pl-email.email {
    display: none;
}

.post .post-body {
    transition: margin ease .2s;
}

.post.profilehidden .post-body {
    margin-left: 0;
}

.punbb .post-content,
.punbb .post-content p {
    transition: all .2s ease;
}


/* Font slider */

.FNTslider {
    position: absolute;
    right: 80px;
    margin-top: 2px !important;
    z-index: 0;
    background: rgb(var(--basic) / .12);
    width: 110px;
    height: 11px;
}

.FNTslider .before {
    height: 11px;
    position: absolute;
    background: rgb(var(--accent) / .38);
}

.FNTslider .thumb {
    width: 11px;
    height: 11px;
    position: relative;
    background: rgb(var(--accent));
    cursor: pointer;
}


/* Post rating */

.post[data-group-id="3"] .post-rating {
    display: none;
}

.post-rating {
    margin-top: 16px !important;
}

.post-vote {
    display: block !important;
    font-size: 0;
}

.post .post-vote p {
    padding: 3px 0 !important;
    margin-top: -4px !important;
}

.post .post-vote a:before {
    content: '\f004';
    font-family: 'Font Awesome 5 Free';
    font-size: 24px;
    color: rgb(var(--accent));
}

.post .post-vote a.liked:before {
    content: '\f004';
    font-family: 'Font Awesome 5 Free';
    font-size: 24px;
    font-weight: 900;
}

.post .post-vote:not(.self) a:hover:before {
    content: '\f004';
    font-family: 'Font Awesome 5 Free';
    font-size: 24px;
    font-weight: 900;
}


/* Post links */

.punbb .post-links {
    padding: 0 16px 0 0;
}

.punbb .post-links li a {
    padding: 0 4px;
}

.punbb .post-links li:not(:last-child) a {
    margin-right: 8px;
}

.punbb .post-links li a:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 6px;
    color: rgb(var(--black) / .38);
}

.punbb .post-links li.pl-email.profile a:before {
    content: '\f406';
}

.punbb .post-links li.pl-email.pm a:before {
    content: '\f0e0';
}

.punbb .post-links li.pl-email.email a:before {
    content: '\f1fa';
}

.punbb .post-links li.pl-delete a:before {
    content: '\f2ed';
}

.punbb .post-links li.pl-edit a:before {
    content: '\f304';
}

.punbb .post-links li.pl-email.profile a:before {
    content: '\f406';
}

.punbb .post-links li.pl-quote a:before {
    content: '\f10e';
}

.punbb .post-links li.pl-BBquote a:before {
    content: '\f121';
}



/* Change avatar hover effect */

#fram_avtar {
    position: absolute;
    z-index: -1;
    left: -9999px;
}

.pa-avatar.item2 img.allow_change {
    transition: all .2s ease;
    border: 1px solid transparent;
}

.pa-avatar.item2 img.allow_change:hover {
    cursor: pointer;
    border: 1px solid rgb(var(--accent));
}

#set_avatar .loader {
    position: absolute;
    margin-left: 10em;
}


/* Signature
------------------------------------------------------------------ */

.punbb .post-sig dt {
    width: 40%;
    border: 1px solid rgb(var(--basic) / .12);
    margin: 10px 0px 10px 0;
    margin-left: 30%;
}

#profile-signature ul {
    border-top: 1px solid rgb(0 0 0 / 0.12) !important;
}


/***************************************************************
- BUTTONS, INPUTS, BOXES
***************************************************************/


/* Boxes
------------------------------------------------------------------ */

#pun-main .code-box,
#pun-main .quote-box {
    background: rgb(var(--basic) / .05);
    letter-spacing: 0.4px;
}

.punbb .quote-box cite,
.punbb .code-box strong.legend a {
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: 700;
    padding: 8px 6px;
    font-size: 14px;
    font-style: normal;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.punbb .quote-box cite .author-avatar {
    margin: 0;
}

.author-avatar+span {
    margin-left: 8px !important;
}

.author-avatar>img {
    border: none !important;
    width: 32px !important;
    opacity: .87;
    margin: 0 !important;
    border-radius: 4px;
    transition: all .2s ease;
}

.author-avatar>img:hover {
    opacity: 1;
}

.quote-box .qc-post-link img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.punbb .post-content .blockcode div {
    margin: 8px;
    line-height: 150%;
    font-size: 11px;
}

#post-preview blockquote {
    margin-left: 5px!important;
}


/* Spoiler
------------------------------------------------------------------ */

.post-content .spoiler-box>div {
    padding: 8px 0;
    text-align: center;
    margin: 0 12px;
    font-size: 14px;
    letter-spacing: 0.4px;
    font-family: 'Inter', Verdana, serif;
    font-weight: 700;
    text-transform: uppercase;
}

#pun-main .spoiler-box blockquote .htmldemo {
    padding: 0.3em 0.3em 0.6em 0.3em;
}


/* Modal
------------------------------------------------------------------ */

.inner,
.punbb .pun-modal .section {
    background: rgb(var(--pun)) var(--texture_pun);
}

#pun-report .bg,
#pun-reputation .bg,
#pun-admin-award-form .bg {
    background: #0d0d0d !important;
}

#pun_wrap #post .container[id$=font-area] {
    height: 166px;
    overflow-y: auto;
}


/* Inputs & Buttons
------------------------------------------------------------------ */

.punbb textarea,
.punbb input[type="search"],
.punbb input[type="number"],
.punbb select,
.punbb input[type="text"],
.punbb input[type="password"],
#s-block input {
    padding: 8px 8px;
    box-sizing: border-box;
    border: none !important;
    background: rgb(var(--basic) / .05);
    color: rgb(var(--basic));
    line-height: 130%!important;
    transition: background ease .2s;
}

.punbb textarea:hover,
.punbb input[type="search"]:hover,
.punbb input[type="number"]:hover,
.punbb select:hover,
.punbb input[type="text"]:hover,
.punbb input[type="password"]:hover,
#s-block input:hover {
    background: rgb(var(--basic) / .08);
}

.punbb select {
    cursor: pointer;
    padding-top: 7px;
}

.punbb select option {
    background: rgb(var(--body));
    color: rgb(var(--light));
}

#isk {
    border: none !important;
}

.punbb input[type="submit"],
.punbb input[type="button"],
.punbb button {
    transition: all ease .2s;
    background: rgb(var(--body));
    color: rgb(var(--light));
    border: none !important;
    padding: 8px 16px;
    margin: 0.25em 0.5em 0.25em 0;
    font: normal 1em 'Inter', Verdana, sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 700;
}

.punbb button {
    background: transparent;
    color: rgb(var(--basic));
    border: 1px dashed rgb(var(--basic) / .38) !important;
}

.punbb button:hover,
.punbb button:focus {
    background: rgb(var(--basic) / .05);
}

.punbb input[type="submit"]:hover,
.punbb input[type="button"]:hover {
    background: rgb(var(--accent));
}

.punbb button:active,
.punbb input[type="submit"]:active,
.punbb input[type="button"]:active {
    transform: translateY(1px);
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

#reputationButtonCancel {
    margin-left: 6px;
}

.fs-box.hashelp .container,
#post-sig .container {
    background: rgb(var(--pun)) var(--texture_pun);
    border: 1px solid rgb(var(--basic)) !important;
    padding: 8px !important;
}

#stTs {
    box-shadow: none!important;
    right: unset;
    left: -24px;
    top: 33px !important;
}

#keyboard-span input {
    cursor: pointer;
    padding: 0 10px;
    margin: 1px!important;
    background: rgb(var(--basic) / .05) !important;
    box-shadow: none;
    border: 1px solid currentColor !important;
}

.punbb button:hover,
.punbb button:focus,
.punbb input[type="submit"]:hover,
.punbb input[type="submit"]:focus {
    cursor: pointer;
}

button:focus,
input:focus,
textarea:focus {
    outline: none;
}

.punbb label:not(.adlabel) {
    font-weight: normal;
    font-size: 10px;
    letter-spacing: 0.4px;
    color: rgb(var(--basic) / .6);
    line-height: 20px;
}

.punbb input~label {
    font-size: 1em !important;
    text-transform: none !important;
}

#s-block {
    margin: 4px 0;
}

#s-block #isk {
    color: rgb(var(--basic));
}




/***************************************************************
- LINKS
***************************************************************/


/* Basic
------------------------------------------------------------------ */

.punbb a,
.punbb a:link,
.punbb a:visited,
.punbb-admin #pun-admain a,
.punbb-admin #pun-admain a:link,
.punbb-admin #punbb-admain a:visited {
    color: rgb(var(--accent));
    text-decoration: none;
    transition: all .2s ease;
}

.punbb a:hover,
.punbb-admin #pun-admain a:hover {
    color: rgb(var(--basic));
}


/* Navlinks
------------------------------------------------------------------ */

#pun-navlinks {
    margin: -58px -33px 3px !important;
    position: sticky;
    top: 0;
    background: rgb(var(--body));
    padding: 9px 16px;
    z-index: 10;
    border-top: 1px solid rgb(var(--light));
}

#pun-navlinks .container li a {
    font-weight: 700;
    padding: 0 8px;
    text-transform: uppercase;
    font-family: 'Inter', Verdana, sans-serif;
    font-size: 16px;
    color: rgb(var(--light));
}

#pun-navlinks .container li a:hover,
#pun-navlinks .container li a:focus {
    color: rgb(var(--accent));
}


/* Admin-menu */

#pun-navlinks .container li#navadmin {
    position: relative;
}

#pun-navlinks .container li#navadmin .adminmenu {
    position: absolute;
    width: 100%;
    left: 0;
    background: rgb(var(--body));
    padding: 16px 24px;
    box-sizing: border-box;
    transition: all .2s ease;
    transform: scaleY(0);
    opacity: 1;
    transform-origin: 0 0;
}

#pun-navlinks .container li#navadmin:hover .adminmenu {
    opacity: 1;
    transform: scaleY(1);
}

#pun-navlinks .container li#navadmin .adminmenu li a {
    display: block;
    text-align: left;
    font-size: 14px !important;
    text-transform: none;
    font-weight: 400;
    padding: 8px 0 !important;
}

#pun-navlinks .container li#navadmin .adminmenu li a:hover {
    color: rgb(var(--accent));
}

#pun-navlinks .container li#navadmin .adminmenu li:not(:last-child) a {
    border-bottom: 1px solid rgb(var(--light) / .05)
}

#pun-navlinks .container li#navadmin .adminmenu li ul {
    position: absolute;
    width: max-content;
    left: calc(100% - 22px);
    top: 83px;
    background: rgb(var(--body));
    padding: 8px 16px 8px 22px;
    transition: all .2s ease;
    transform: scaleX(0);
    opacity: 1;
    transform-origin: 0 0;
}

#pun-navlinks .container li#navadmin .adminmenu li.forms a {
    position: relative;
}

#pun-navlinks .container li#navadmin .adminmenu li.forms > a::after {
    content: '\f054';
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: rgb(var(--light));
    position: absolute;
    top: 11px;
    right: 0;
    font-size: 12px;
}

#pun-navlinks .container li#navadmin .adminmenu li.forms > a:hover::after {
    color: rgb(var(--accent))
}

#pun-navlinks .container li#navadmin .adminmenu li.forms:hover ul {
    opacity: 1;
    transform: scaleX(1);
}

#pun-navlinks .container li#navadmin .adminmenu li ul li a {
    font-size: 12px !important;
    border: none !important;
}


/* Ulinks
------------------------------------------------------------------ */

#pun-ulinks {
    margin: 0 -16px 4px;
    padding: 5px 16px 6px;
    position: sticky;
    top: 38px;
    background: rgb(var(--pun)) var(--texture_pun);
    z-index: 9;
}

#pun-ulinks .container li a {
    padding: 0 4px;
}

#pun-ulinks .container .item3,
#pun-ulinks .container .item5 {
    display: none;
}


/* Notifications link size fix for iOS */

#pun-ulinks li.item7 a {
    position: relative;
}


/***************************************************************
- FORUMS
***************************************************************/


/* Basic
--------------------------------------------------------------- */

#pun-index .category tr {
    background: rgb(var(--basic) / .05);
    transition: background .2s ease;
    display: block;
    margin: 0 16px 16px !important;
}

#pun-index .category tr:hover {
    background: rgb(var(--basic) / .1);
}

#pun-index .category tr.inew {
    background: rgb(var(--body));
    box-shadow: 0 0 0 1px inset rgb(var(--accent));
}

#pun-index .category tr.inew a:hover {
    color: rgb(var(--light));
}

#pun-index .category tr.inew #padforum {
    border-color: rgb(var(--light));
}

#pun-index .category tr.inew td {
    color: rgb(var(--light));
}

#pun-index .category tr td {
    padding: 24px;
}

#pun-index .tcl h3 {
    margin-bottom: 8px;
}

#pun-index .tcl h3 a {
    font-size: 24px;
    font-family: 'Inter', Verdana, sans-serif;
    display: block;
}

#pun-index .tcl #padforum {
    padding: 8px;
    border: 1px solid rgb(var(--basic));
    font-size: 10px;
    line-height: 140%;
}

#pun-index .tcl #padforum br {
    display: none;
}

#pun-index .tcl #linksforum {
    margin: 8px -8px 0;
    padding: 8px 8px 0;
    border-top: 1px solid rgb(var(--basic));
    margin-top: 8px;
}

#pun-index .tcl #linksforum a {
    text-transform: uppercase;
    font-weight: 700;
}

#pun-index .tcl #linksforum a:not(:last-child)::after {
    content: '/';
    margin: 0 3px 0 6px;
    color: rgb(var(--basic));
    font-weight: normal;
}

#pun-index tr.inew .tcl #linksforum a:not(:last-child)::after {
    color: rgb(var(--light));
}

#pun-index .tc2,
#pun-index .tc3 {
    width: 7%;
}

#pun-index .main .tcr {
    text-align: left;
}

.punbb .user-avatar {
    margin: 2px 12px 0 0 !important;
}

.punbb .user-avatar .avatar-image {
    border: 1px solid rgb(var(--basic) / .38);
    border-radius: 0 !important;
}

.punbb .user-avatar .isonline {
    top: -4px !important;
    right: -7px !important;
    border: 2px solid rgb(var(--pun_darken));
    animation: none !important;
    z-index: 1 !important;
}

#forum_f17 #textforum br {
    display: block !important;
}



/***************************************************************
- MISC
***************************************************************/


/* PM
------------------------------------------------------------- */

#pun-messages .FNTslider {
    margin-top: -11px !important;
    right: 48px;
}

#pun-messages .post-author .pa-reg {
    display: none;
}


/* New messages in forums
------------------------------------------------------------- */

.icon[data-new-topics]:before,
.subforums span[data-new-topics]:before {
    background: rgb(var(--accent)) !important;
    color: rgb(var(--light)) !important;
    border-radius: 0 !important;
    padding: 4px 2px 4px 4px !important;
    margin: 6px 0 0 0 !important;
    right: calc(100% - 32px);
    font-size: 11px !important;
}


/* New posts in topic
------------------------------------------------------------- */

.post.isNew h3 .permalink::after {
    content: '';
    display: inline-block;
    position: relative;
    width: 6px;
    height: 6px;
    background: rgb(var(--accent));
    top: -1px;
    margin: 0 0 0 6px;
    border-radius: 50%;
}

.post:not(.isNew) h3>span:before {
    content: none;
}


/* PM notifications
------------------------------------------------------------- */

span.num_msg {
    color: rgb(var(--warning)) !important;
    background: transparent !important;
    position: relative !important;
    display: inline-block;
    margin: 0 0 0 -8px!important;
    font-size: 16px !important;
    transition: color .2s ease;
}

span.num_msg::before {
    background: none !important;
    content: '+' !important;
    position: relative !important; 
    display: inline !important;
    margin: 0 !important;
    top: 0 !important;
}


/* Notifications
------------------------------------------------------------- */

.bubble {
    position: relative !important;
    margin: 0 !important;
    top: -1px !important;
    right: -4px !important;
    margin-right: 2px !important;
    background: rgb(var(--warning)) !important;
    color: rgb(var(--body)) !important;
}

.bubble:after {
    display: none !important;
}

#notify-link .unreads, #navpm .unreads {
    box-shadow: none !important;
    background: rgb(var(--warning)) !important;
    color: rgb(var(--body)) !important;
    border-radius: 2px !important;
    font: unset !important;
    font-weight: 700 !important;
    font-size: 8px !important;
    min-width: unset !important;
    height: auto !important;
    padding: 0 4px 1px !important;
    z-index: 11 !important;
    top: -4px !important;
}


/* Statistics
------------------------------------------------------------- */

#pun-stats {
    background: rgb(var(--body));
    margin: 16px -17px 0;
    border-top: 1px solid rgb(var(--accent));
}

#pun-stats h2 {
    margin: 0 !important;
    padding-top: 40px;
    text-align: right !important;
    background: transparent;
    border: none;
    height: 56px;
    width: 40%;
    left: 60%;
}

#pun-stats .container {
    padding: 32px 16px 16px !important;
    margin-top: -59px;
    margin-bottom: -16px;
}

#pun-stats .container a:hover {
    color: rgb(var(--light))
}

li#onlinelist div {
    color: rgb(var(--light));
}

#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4 {
    color: rgb(var(--light));
    display: inline-block;
    margin-right: 12px;
}
li#onlinelist {
    border-top: 1px solid rgb(var(--light) / .05) !important;
    padding-top: 4px;
    color: rgb(var(--light)) !important;
}


/* Disable post preview while fast editing */

.post-box form #togglePreview {
    display: none;
}


/* Admin pages
------------------------------------------------------------- */

.punbb-admin {
    margin-bottom: 40px;
}

#pun-title TD.title-logo-tdr a {
    transition: none;
}

.punbb-admin #pun-status {
    display: none;
}

.adcontainer,
.adformal {
    border: none!important;
}

#pun-admain fieldset {
    border: 1px solid rgb(0 0 0 / 0.12) !important;
}

.adminmain {
    padding-left: 16em!important;
}

#pun-adnav {
    position: sticky;
    top: 60px;
    margin-left: -186px !important;
    width: 212px !important;
}

#pun-adnav .adcontainer li.isactive {
    list-style: disc;
    padding: 0.3em 1em 0.3em 0;
    margin-left: 1em;
}

.punbb-admin #pun-navlinks {
    margin-top: 0;
}

.punbb-admin #pun-ulinks {
    margin-bottom: 60px;
}

.punbb-admin #title-logo-tdr {
    margin-top: -24px;
    width: 932px!important;
    text-align: center;
    display: flex;
    justify-content: center;
}


/* Pun-status
------------------------------------------------------------------ */

#pun-status .container {
    text-align: center;
}

#pun-status .status-right {
    float: none !important;
}


/* Hide elements
------------------------------------------------------------------ */

#pun-announcement h2,
p.lastedit,
.topic a.sharelink,
.category .container thead,
.punbb td .modlist,
#navawards {
    display: none !important;
}

#button-files_rusff,
#button-graffiti_rusff {
    display: none !important;
}


/*  Font smoothing
------------------------------------------------------------------ */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Outline in Chrome
------------------------------------------------------------------ */

textarea:active,
input:active,
input:focus,
 :focus {
    outline-color: transparent;
}


/* Bookmarks
------------------------------------------------------------------ */

.post .bookmark {
    color: rgb(var(--accent)) !important;
}

#BookmCntToggle.default-style {
    color: rgb(var(--accent)) !important;
}

#MyBookmarks,
.editBookmark {
    background: rgb(var(--pun)) var(--texture_pun);
    padding-top: 8px;
}


/* Image upload
 -------------------------------------------------------------*/

#imageupload-left input[type=button] {
    width: auto!important;
}


/* Selection
------------------------------------------------------------------ */

::selection {
    color: rgb(var(--light));
    background: rgb(var(--accent));
}


/* Deleted text
------------------------------------------------------------------ */

del {
    -webkit-filter: blur(2px);
    filter: blur(2px);
    text-decoration: none;
    transition: all .2s ease-in-out;
}

del:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}


/* Underlined text
------------------------------------------------------------------ */

.bbuline {
    background: transparent;
    text-decoration-color: rgb(var(--accent)) !important;
    transition: all ease .25;
}


/* Hide table borders in post
----------------------------------------------------------------------- */

.post-content table td {
    border: none!important;
}


/* Scrollbar
------------------------------------------------------------------ */

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

::-webkit-scrollbar-track {
    background: rgb(var(--body));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--accent));
}

::-webkit-scrollbar-thumb:active {
    border: none;
}


/* Tooltips
------------------------------------------------------------------ */

#tooltip {
    position: absolute;
    background-color: #000000c5;
    z-index: 999;
    max-width: 200px;
    font-size: 11px;
    display: none;
    color: rgb(255 255 255 / .74);
    text-align: center;
    padding: 5px 8px 4px;
    border-radius: 3px;
    font-family: tahoma, helvetica, verdana, arial;
}


/* Admin headlines
------------------------------------------------------------------ */

#pun-admain h2,
#pun-admain legend span {
    background: rgb(245 245 245) !important;
    color: rgb(0 0 0 / 0.87);
    text-align: center;
    font-size: 12px!important;
    letter-spacing: .4px;
    padding: 4px 8px!important;
    margin-left: -11px!important;
}


/* Commas in topic
------------------------------------------------------------------ */

#topic-users-in a:not(:last-child)::after {
    content: ',';
}


/* Polls fix
------------------------------------------------------------------ */

#poll-special .poll2 td h1 {
    background: currentColor;
    padding: 1px;
}





/* Reply form
------------------------------------------------------------------ */

#main-reply {
    height: 200px;
}

#form-buttons td:hover {
    opacity: .6 !important;
}

#form-buttons table {
    width: 100% !important;
}

/* Up & Down arrows
------------------------------------------------------------------ */

.go-up,
.go-down {
    display: none;
    position: fixed;
    right: 0;
    z-index: 0;
    cursor: pointer;
    width: 100px;
    height: 50%;
    box-sizing: border-box;
    z-index: 1;
}

.go-up .inside,
.go-down .inside {
    display: flex;
    justify-content: center;
    height: 100%;
    opacity: .5;
    transition: opacity ease .2s;
}

.go-up .inside {
    align-items: flex-start;
    background: linear-gradient(to bottom, rgb(137 141 119 / 10%) 0%, rgba(0, 0, 0, 0) 100%);
}

.go-up .inside:before {
    content: '\f077';
    font-size: 20px;
    color: rgb(var(--light));
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    padding-top: 20px;
}

.go-down .inside {
    align-items: flex-end;
    background: linear-gradient(to top, rgb(137 141 119 / 10%) 0%, rgba(0, 0, 0, 0) 100%);
}

.go-down .inside:before {
    content: '\f078';
    font-size: 20px;
    color: rgb(var(--light));
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    padding-bottom: 20px;
}

.go-up .inside:hover,
.go-down .inside:hover {
    opacity: 1;
}

.go-up img {
    margin-top: 32px;
}

.go-down img {
    margin-bottom: 32px;
}

.go-up {
    top: 0;
}

.go-down {
    bottom: 0;
}

.go-down:hover,
.go-up:hover {
    opacity: 1;
}

/* Announcement
------------------------------------------------------------------ */

#dashboard {
    padding: 0 16px;
    margin-bottom: 8px;
    display: flex;
    height: 90px;
}

#dashboard .notices {
    width: 50%;
    padding-left: 16px;
    text-align: left;
    overflow-y: auto;
}

#pun-announcement a.notice {
    background: rgb(var(--basic) / .05);
    padding: 8px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#pun-announcement a.notice:hover,
#pun-announcement a.notice:focus,
#pun-announcement a.notice:active {
    background-position: 0 -100%;
}

#pun-announcement a.notice:not(:last-child) {
    margin: 0 8px 8px 0;
}

#pun-announcement a.notice .text {
    text-align: left;
}

#pun-announcement a.notice .text span {
    display: inline-block;
    width: 100%;
    font: 700 12px 'Inter', Verdana, sans-serif !important;
    letter-spacing: 0.4px;
    color: rgb(var(--accent));
    text-transform: uppercase;
    transition: all .2s ease;
    text-align: center;
}

#pun-announcement a.notice:hover {
    background: rgb(var(--accent));
    border-color: transparent;
}

#pun-announcement a.notice:hover span {
    color: rgb(var(--light));
    border-color: rgb(var(--light));
}


/* User Panel
------------------------------------------------------------------ */

#u-panel {
    width: 50%;
    height: 90px;
    display: flex;
    align-items: start;
    box-sizing: border-box;
    padding: 8px;
    background: rgb(var(--basic) / .05);
}

#u-panel a.guest_link {
    display: inline-block;
    margin-top: 8px;
}

#u-panel .avatar {
    display: flex;
    align-items: center;
}

#u-panel .noedit.avatar::before {
    content: none;
}

#u-panel .avatar img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    box-sizing: border-box;
}

#u-panel .avatar::before {
    content: '\f304';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: rgb(var(--light));
    font-size: 16px;
    background: rgb(var(--body));
    position: absolute;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    transition: all ease .2s;
    box-sizing: border-box;
}

#u-panel .avatar:hover::before {
    opacity: 1;
}

#u-panel .info_1 {
    width: 60%;
    height: 100%;
    overflow-y: -moz-scrollbars-vertical;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding: 0 8px 0;
    box-sizing: border-box;
}

#u-panel .info_1 a.link {
    display: block;
    font: 700 14px 'Inter', Verdana, sans-serif;
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(var(--basic));
    margin-bottom: 8px;
}

#u-panel .info_1 .current_label {
    display: inline-block;
    margin-top: 8px;
}

#u-panel .info_1 h2 {
    display: none;
}

#u-panel .info_1::-webkit-scrollbar {
    width: 1px;
}

#u-panel .info_1::-webkit-scrollbar-track,
#u-panel .info_1::-webkit-scrollbar-thumb {
    background: rgb(var(--basic));
}

#u-panel .info_1::-webkit-scrollbar-thumb {
    border: none;
}

#u-panel .current_link {
    white-space: nowrap;
}

#u-panel .info_2 {
    padding: 0 8px;
    width: 30%;
    box-sizing: border-box;
    text-align: left;
    line-height: 160%;
}

#u-panel lzname,
#pun-profile li#pa-fld1 lzname {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-right: 4px;
}

#u-panel fan,
#pun-profile li#pa-fld1 fan {
    margin: 4px 4px 4px 0;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    background: rgb(var(--basic) / .05);
}

#u-panel lzinfo,
#pun-profile li#pa-fld1 lzinfo {
    display: block;
    border-top: 1px solid rgb(var(--basic));
    padding-top: 8px;
    margin-top: 4px;
}

#u-panel #pun-status .container {
    text-align: left;
}



/* Dark theme switcher
------------------------------------------------------------------ */

.theme-switch-wrapper {
    z-index: 100;
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 16px;
}

.theme-switch {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 32px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: rgb(var(--light));
    border: 1px solid rgb(var(--light));
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: background .2s ease;
    padding: 0 2px;
}

.slider:hover {
    opacity: .8;
}

.slider:before {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f185';
    font-size: 15px;
    transition: all .2s ease;
    transform: translateX(0);
    color: rgb(var(--html));
}

input.checked+.slider {
    background-color: transparent;
}

input.checked+.slider:before {
    color: rgb(var(--light));
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f186';
    font-size: 13px;
    transform: translateX(12px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/* Header Table
------------------------------------------------------------------ */

#header_table {
    position: absolute;
    left: -2px;
    top: -196px;
    height: 171px;
    width: calc(100% + 36px) !important;
    margin: -16px;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    color: rgb(var(--light));
}

#header_table a:hover,
#header_table a:focus {
    color: rgb(var(--light));
}

#header_table ::-webkit-scrollbar-track {
    background: rgb(var(--accent));
}

#header_table ::-webkit-scrollbar-thumb {
    background: rgb(var(--light));
}

#header_table .activists,
#header_table .wanted {
    position: absolute;
    top: 0;
    width: 214px;
}

#header_table .activists {
    left: 0;
}

#header_table .wanted {
    right: 0;
    text-align: right;
}

#header_table .activists span,
#header_table .wanted span,
#header_table .bpost span,
#header_table .episodes span {
    display: block;
    font: normal 16px var(--font), sans-serif;
    text-transform: uppercase;
}

#header_table .activists a,
#header_table .wanted a {
    border: 1px solid rgb(var(--light));
    width: 48px;
    height: 48px;
    display: inline-block;
}

#header_table .activists img,
#header_table .wanted img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

#header_table .activists a::before,
#header_table .wanted a::before,
#header_table .bpost .content a::before {
    z-index: 1;
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    background: rgb(var(--accent));
    mix-blend-mode: multiply;
    transition: all .2s ease;
}

#header_table .bpost .content a::before {
    width: 56px;
    height: 56px;
}

#header_table .activists a:hover::before,
#header_table .wanted a:hover::before,
#header_table .bpost .content a:hover::before {
    width: 0;
}

#header_table .activists a:hover img,
#header_table .wanted a:hover img,
#header_table .bpost .content a:hover img {
    -webkit-filter: none;
    filter: none;
}

#header_table .episodes {
    position: absolute;
    top: 0;
    left: 228px;
}

#header_table .episodes .blocks {
    display: flex;
}

#header_table .episodes .blocks a {
    width: 156px;
    height: 48px;
    border: 1px solid rgb(var(--light));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 16px;
    color: rgb(var(--light));
    margin-right: 4px;
}

#header_table .episodes .blocks a:hover {
    background: rgb(var(--accent));
    border-color: rgb(var(--accent));
}

#header_table .episodes .blocks a,
#header_table .ams a,
#header_table .navblock a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
}

#header_table .bpost {
    position: absolute;
    top: 80px;
    left: 0;
    width: 312px;
}

#header_table .bpost .content a {
    border: 1px solid rgb(var(--light));
    display: inline-block;
}

#header_table .bpost .content a img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

#header_table .bpost .content {
    border: 1px solid rgb(var(--light));
    display: flex;
    height: 56px;
}

#header_table .bpost .content a {
    border-width: 0 1px 0 0;
}

#header_table .bpost .content .text {
    padding: 4px 4px 4px 8px;
    box-sizing: border-box;
}

#header_table .bpost .content .scroll {
    height: 100%;
    overflow-y: scroll;
}

#header_table a.forum_name {
    position: absolute;
    bottom: -40px;
    left: 320px;
    font-family: 'The Night Watch';
    font-size: 113px;
    letter-spacing: -6px;
    color: rgb(var(--light));
    transition: all .2s ease;
}

#header_table a.forum_name .cross {
    -webkit-text-stroke: 1px rgb(var(--light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(to right, rgb(var(--light)) 50%, rgb(var(--body) / 0) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: all .2s ease;
}

#header_table a.forum_name .cross:hover {
    background-position: 0% 0;
}

#header_table .ams {
    position: absolute;
    top: 76px;
    left: 328px;
}

#header_table .navblock {
    position: absolute;
    top: 76px;
    right: 0;
}

#header_table .ams a:not(:last-child)::after,
#header_table .navblock a:not(:last-child)::after {
    content: '/';
    color: rgb(var(--light));
    font-weight: 400;
    margin: 0 3px 0 6px;
}


/* Topic header template
------------------------------------------------------------------ */

.topic_template {
    background: rgb(var(--body)) var(--texture_html);
    color: rgb(var(--light));
    padding: 16px;
    font: normal 32px 'The Night Watch', 'Beware', Times New Roman, serif;
    text-align: center;
    margin-bottom: 16px !important;
    border: 1px solid rgb(var(--light));
}

.topic_template .headline {
    padding: 24px 16px;
    border: 1px solid rgb(var(--light));
    font-weight: 400;
    margin: 0 3px 0 6px;
}


/* Topic header template
------------------------------------------------------------------ */

.topic_template {
    background: rgb(var(--body)) var(--texture_html);
    color: rgb(var(--light));
    padding: 16px;
    font: normal 32px 'The Night Watch', 'Beware', Times New Roman, serif;
    text-align: center;
    margin-bottom: 16px !important;
    border: 1px solid rgb(var(--light));
}

.topic_template .headline {
    padding: 24px 16px;
    border: 1px solid rgb(var(--light));
    font-weight: 400;
    margin: 0 3px 0 6px;
}



/* Footer quotes rotator
------------------------------------------------------------------ */

#quote_rotator {
    position: absolute;
    width: calc(100% + 32px);
    margin: 32px 0 0 -32px;
    padding: 40px 256px 0;
    box-sizing: border-box;
    text-align: center;
    font: italic 16px 'Inter', Verdana, sans-serif;
    color: rgb(var(--light));
    letter-spacing: .25px;
}

#quote_rotator .quote_author {
    display: block;
    margin-top: 8px;
    font-size: 10px;
}



/* Mobile
------------------------------------------------------------------ */

@media screen and (max-device-width: 552px) {
    @supports (-webkit-touch-callout: none) {
        .go-up,
        .go-down {
            left: 0;
            margin-left: calc(1142px) !important;
            width: 88px;
            height: 88px;
        }
        .go-up .inside,
        .go-down .inside {
            align-items: center;
            background: rgb(var(--body));
        }
        .go-up {
            top: unset;
            bottom: 176px;
        }
        .go-down {
            bottom: 72px;
        }
        .go-up .inside:before {
            padding-top: 0;
            font-size: 48px;
        }
        .go-down .inside:before {
            padding-bottom: 0;
            font-size: 48px;
        }
    }
}