@import url('https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');
/*variables*/
:root {
  --default-font-family: 'Victor Mono';
  --nav-menu-icon-size: 64px;
  --default-gap: 8px;
  --avatar-width: 300px;
  --icons-width: 60px;
  --reply-buttons-size: 40px;
  --font-size: 16px;
  --thin-solid-body-border: 1px solid var(--body-color);
}
:root{
    --punbb-color: #f7e2d2;
    --body-color: #a5b1a0;
    --text-color: #15191c;
    --soft-text-color: #3d424d;
    --accent-color: #b1714e;
}
/* Apply a light color scheme */
@media screen and (max-width: 800px) {
    :root {
        --font-size: 20px;
    }
}
@media (prefers-color-scheme: light) {
    :root{
        --punbb-color: #f7e2d2;
        --body-color: #a5b1a0;
        --text-color: #15191c;
        --soft-text-color: #3d424d;
        --accent-color: #b1714e;
    }
}
/* Apply a dark color scheme */
@media (prefers-color-scheme: dark) {
    :root{
        --punbb-color: #4e5f5b;
        --body-color: #2e2828;
        --text-color: #cfe1ef;
        --soft-text-color: #a1d6dd;
        --accent-color: #d65924;
    }
}

/*scrollbars*/
/* For browsers that support `scrollbar-*` properties */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--punbb-color) var(--body-color);
  }
}

/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
  html::-webkit-scrollbar {
    background: var(--body-color);
  }
  html::-webkit-scrollbar-thumb {
    background: var(--punbb-color);
  }
}
/*common page styles*/
body{ 
    font-family: var(--default-font-family);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin: 0;
    background: var(--body-color);
    color: var(--text-color);
    font-size: var(--font-size);
    text-size-adjust: none;
}
#pun_wrap {
    grid-column: 2/3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}
#pun {
    width: 1440px;
    max-width: 98vw;
    grid-column: 2/3;
}

.punbb {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--punbb-color);
    min-height: 100vh;
    padding: calc(var(--default-gap) * 2);
    box-shadow: 0 0 4px var(--accent-color);
}
a {
    font-style: italic;
    color: var(--soft-text-color);
}
a:hover {
    text-shadow: 0 0 2px var(--accent-color);
}
.container table {
    width: 100%;
    margin: var(--default-gap) 0;
    border: var(--thin-solid-body-border);
    border-bottom: 0;
}
.forum .container table {
    border: 0;
}
.container thead th {
    border-bottom: var(--thin-solid-body-border);
    padding: var(--default-gap);
}
.container table td {
    border-bottom: var(--thin-solid-body-border);
    padding: var(--default-gap);
}
fieldset, input, button, textarea, select, option {
    border: var(--thin-solid-body-border);
    background: var(--punbb-color);
    color: var(--text-color);
    margin: var(--default-gap) 0;
}
legend {
    padding: var(--default-gap);
    border: var(--thin-solid-body-border);
    background: var(--body-color);
}
input:not([type=radio]), button, textarea, select, option {
    box-shadow: 0 0 2px 0px var(--soft-text-color);
    padding: calc(var(--default-gap) / 2);
    box-sizing: border-box;
}
input:focus, button:focus, textarea:focus, select:focus, option:focus {
    box-shadow: 0 0 5px 1px var(--accent-color) inset;
    border: 1px solid var(--soft-text-color) !important;
}
hr {
    border-bottom: 1px solid var(--punbb-color);
    box-shadow: 0 0 1px 0px var(--soft-text-color);
}
/*Remove unnessesary*/
#pun-status h2, #pun-main h1, .crumbs strong, #pun-navlinks h2, #pun-ulinks h2, .acchide, .usertable h2, .forum h2, .topic h2{
    display: none;
}

/*Stick navlinks to header*/
.punbb > * {
    grid-column: 1 / 3;
}
#pun-title {
    grid-column: 1 / 2;
}
#pun-navlinks {
    grid-column: 2 / 3;
}
@media screen and (min-width: 1000px) {
    #pun-title, #pun-navlinks {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--punbb-color);
    }
}

/*header*/
h1.title-logo {
    display: flex;
}
#title-logo-tdl h1{
    color: var(--soft-text-color);
    font-size: calc(var(--font-size) * 3 / 2);
    text-align: justify;
}
/*Cur too long forum names in header*/
#title-logo-tdl h1 span{
    margin: 0 var(--default-gap);
    max-height: 4em;
    overflow: hidden;
}
#title-logo-tdl h1:before {
    content: '>>mybb';
    font-size: calc(var(--font-size) * 3);
}

/*navigation links*/
#pun-navlinks ul{
    list-style-type: none;
    margin: 0;
    padding: 0 0 var(--default-gap);
    display: flex;
    flex-wrap: wrap;
    gap: var(--default-gap);
}
#pun-navlinks li {
    display: flex;
    align-items: flex-end;
}
/*i wanted to specify "pun-navlinks a", but, well, extra-links...*/
@media screen and (min-width: 541px) {
    #pun-navlinks a span {
        display: grid;
        justify-items: center;
    }
    li#navindex a span:before, li#navuserlist a span:before, li#navrules a span:before, li#navsearch a span:before, li#navprofile a span:before, li#navpm a span:before, li#navadmin a span:before, li#navlogout a span:before, li#navlogin a span:before, li#navregister a span:before {
        width: var(--nav-menu-icon-size);
        display: block;
        height: var(--nav-menu-icon-size);
        content: '';
        background: var(--soft-text-color);
    }
    #navindex a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"/><path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"/></svg>');
    }
    #navuserlist a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z"/><path d="M10 16h6"/><path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M4 8h3"/><path d="M4 12h3"/><path d="M4 16h3"/></svg>');
    }
    #navrules a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><path d="M9 17h6"/><path d="M9 13h6"/></svg>');
    }
    #navsearch a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/><path d="M17 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"/><path d="M16.346 9.17l-.729 -1.261c-.16 -.248 -1.056 -.203 -1.117 .091l-.177 1.38"/><path d="M19.761 14.813l-2.84 -5.133c-.189 -.31 -.592 -.68 -1.421 -.68c-.828 0 -1.5 .448 -1.5 1v6"/><path d="M7.654 9.17l.729 -1.261c.16 -.249 1.056 -.203 1.117 .091l.177 1.38"/><path d="M4.239 14.813l2.84 -5.133c.189 -.31 .592 -.68 1.421 -.68c.828 0 1.5 .448 1.5 1v6"/><rect width="4" height="2" x="10" y="12"/></svg>');
    }
    #navprofile a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>');
    }
    #navpm a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"/><path d="M3 7l9 6l9 -6"/></svg>');
    }
    #navadmin a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 16m0 1.5a1.5 1.5 0 0 1 1.5 -1.5h11a1.5 1.5 0 0 1 1.5 1.5v0a1.5 1.5 0 0 1 -1.5 1.5h-11a1.5 1.5 0 0 1 -1.5 -1.5z"/><path d="M12 16q -2.5 -8 -6 -8q -2.5 0 -3 2c2.953 .31 3.308 3.33 4 6"/><path d="M12 16q 2.5 -8 6 -8q 2.5 0 3 2c-2.953 .31 -3.308 3.33 -4 6"/><path d="M9 9.5q 2 -3.5 3 -3.5t 3 3.5"/></svg>');
    }
    #navadmin {
        font-size: 0;
    }
    #navadmin span:after {
        content: 'Админка';
        font-size: var(--font-size);
    }
    #navlogout a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 4m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M4 17l5 1l.75 -1.5"/><path d="M15 21l0 -4l-4 -3l1 -6"/><path d="M7 12l0 -3l5 -1l3 3l3 1"/></svg>');
    }
    #navlogin a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20.942 13.018a9 9 0 1 0 -8.942 7.982"/><path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M9.5 15c.658 .672 1.56 1 2.5 1c.213 0 .424 -.017 .63 -.05"/><path d="M16 22l5 -5"/><path d="M21 21.5v-4.5h-4.5"/></svg>');
    }
    #navregister a span:before{
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12a9 9 0 1 0 -8.994 9"/><path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M9.5 15a3.5 3.5 0 0 0 5 0"/><path d="M19 22.5a4.75 4.75 0 0 1 3.5 -3.5a4.75 4.75 0 0 1 -3.5 -3.5a4.75 4.75 0 0 1 -3.5 3.5a4.75 4.75 0 0 1 3.5 3.5"/></svg>');
    }
}

#pun-navlinks .isactive a{
    color: var(--body-color);
}
#pun-navlinks .isactive a span:before {
    background: var(--body-color);
}
#navpm a span[data-last-unread] {
    color: var(--accent-color);
}
#navpm a span[data-last-unread]:before {
    background: var(--accent-color);
}

/*user links*/
#pun-ulinks ul{
    list-style-type: none;
    margin: calc(var(--default-gap) * 2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--default-gap) * 2);
    justify-content: center
}
/*Forum cards*/
#pun .icon[data-new-topics]:before {
    background: var(--accent-color);
    z-index: 1;
}
.subforums {
    border: var(--thin-solid-body-border);
    padding: calc(var(--default-gap));
    margin: calc(var(--default-gap) * -1) calc(var(--default-gap) * -1) var(--default-gap);
}
.main:not(.mod-page) .category  .tc2 {
    border-top: var(--thin-solid-body-border);
    border-left: var(--thin-solid-body-border);
}
.main:not(.mod-page).category .tc3 {
    border-top: var(--thin-solid-body-border);
    border-right: var(--thin-solid-body-border);
}
.main:not(.mod-page).category .container table  .tcr {
    border: var(--thin-solid-body-border);
    border-top-width: 0;
}
.main:not(.mod-page) .category .container table td {
    border-bottom: 0;
}
.main:not(.mod-page) .category .tcl .intd {
    display: flex;
}
.main:not(.mod-page) .category thead{
    display: none;
}
.category tbody{
    display: flex;
    align-items: stretch;
    gap: var(--default-gap);
    flex-wrap: wrap;
} 
.category tr {
    position: relative;
    border: var(--thin-solid-body-border);
    background: var(--punbb-color);
    padding: var(--default-gap);
    flex-grow: 1;
    flex-basis: 400px;
}
.main:not(.mod-page) .category tr {
    border-left-width: var(--icons-width);
    width: 49%;
    flex-basis: 400px;
    display: grid;
    grid-template-areas:
        "a a"
        "e e"
        "b c"
        "d d";
    grid-template-rows: 1fr var(--default-gap) auto auto;
}
.mod-page .category tr {
    flex-basis: 100%;
    text-align: center;
    display: grid;
    grid-auto-flow: column;
}
.main:not(.mod-page) .category tr:before{
    content: 'Old';
    position: absolute;
    top: var(--default-gap);
    padding: var(--default-gap);
    background: var(--punbb-color);
    display: block;
    width: var(--icons-width);
    box-sizing: border-box;
    corner-shape: bevel;
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    background: var(--body-color);
    border: 1px solid var(--punbb-color);
    text-shadow: 0 0 2px var(--accent-color);
    box-shadow: 0px 1px 0px var(--soft-text-color);
    left: calc(var(--icons-width) * -1);
    border-bottom-left-radius: var(--default-gap);
}

.main:not(.mod-page) .category tr.inew:before {
    content: 'New!';
    background: var(--punbb-color);
    color: var(--soft-text-color);
    text-shadow: 0 0 2px var(--soft-text-color);
    box-shadow: 0px 1px 0px var(--soft-text-color);
}
@media screen and (min-width: 1000px) {
    .main:not(.mod-page) .category tr:nth-of-type(even) {
        border-right-width: var(--icons-width);
        border-left-width: 0;
    }
    .main:not(.mod-page) .category tr:nth-of-type(even):before {
        left: auto;
        border-bottom-left-radius: 0;
        right: calc(var(--icons-width) * -1);
        border-bottom-right-radius: var(--default-gap);
    }
    .main:not(.mod-page) .category tr:last-of-type {
        border-right-width: var(--icons-width);
    }
}
.main:not(.mod-page) .category tr .tcl{
    width: 100%;
}
.main:not(.mod-page) .category tr td {
    min-width: 49%;
    padding: var(--default-gap);
    box-sizing: border-box;
}
.main:not(.mod-page) .category .tclcon {
    position: relative;
    flex-grow: 1;
}
.main:not(.mod-page) .category .tclcon h3{
    position: sticky;
    top: 0;
    margin: calc(var(--default-gap) * -1) calc(var(--default-gap) * -1) calc(var(--default-gap) * 2);
    border: var(--thin-solid-body-border);
    padding: var(--default-gap);
    background: var(--body-color);
}
.main:not(.mod-page) .category tr .tcl{
    display: grid;
    transition: max-height .5s;
    overflow: hidden;
    grid-area: a;
}
.tcl h3 {
    margin: calc(var(--default-gap)*0.5);
}
.main:not(.mod-page) .category .container {
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition: padding 1s, margin 1s;
}

.main:not(.mod-page) .category tr .tc2{
    grid-area: b;
}
.main:not(.mod-page) .category tr .tc2:before{
    content: 'Тем: ';
}
.main:not(.mod-page) .category tr .tc3{
    grid-area: c;
    border-top: var(--thin-solid-body-border);
    border-right: var(--thin-solid-body-border);
}
.main:not(.mod-page) .category tr .tc3:before{
    content: 'Сообщений: '
}
.main:not(.mod-page) .category tr td.tcr{
    grid-area: d;
    border: var(--thin-solid-body-border);
    border-top: 0;
}
.category table{
    width: 100%;
}
.category, #pun-announcement, #pun-stats {
    background: var(--body-color);
    padding: var(--default-gap);
    margin: var(--default-gap) 0;
}
#pun-announcement .container, #pun-stats .container {
    background: var(--punbb-color);
    padding: var(--default-gap);
}

/*statistics*/
#pun-stats ul {
    list-style-type: none;
    display: grid;
    gap: var(--default-gap);
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}
#pun-stats ul > * {
    max-width: calc(100vw - 8 * var(--default-gap));
    box-sizing: border-box;
}
.statscon {
    margin-bottom: calc(var(--default-gap) * -2);
}
li#onlinelist {
    grid-column: 1 / -1;
    border-top: var(--thin-solid-body-border);
    padding-top: var(--default-gap);
}
@media screen and (min-width: 1100px) {
    #pun-stats .item2, #pun-stats .item4 {
        text-align: right;
    }
}

/*button row styles uls*/
#viewprofile-next ul, #profile ul, .post-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--default-gap);
    flex-wrap: wrap;
}
#viewprofile-next li, #profile li, .post-links li {
    border: 1px solid var(--soft-text-color);
    padding: var(--default-gap) calc(var(--default-gap) * 2) !important; /*damn rewright extra.css zero paddings*/
}

/*profile*/
#viewprofile tr {
    display: flex;
    gap: var(--default-gap);
    flex-flow: row-reverse;
    flex-wrap: wrap;
}
#viewprofile tr #profile-left {
    text-align: right;
    width: 29%;
}
#viewprofile-next li.isactive, #profile li.isactive {
    background: var(--body-color);
}
#viewprofile-next li.isactive a, #profile li.isactive a{
    color: var(--punbb-color);
}
#profile-signature {
    flex-basis: 100%;
}

#viewprofile-next ul table {
    width: 100%;
}
/*PM & posts*/
#navpm {
    position: relative;
}
#navpm span.num_msg {
    position: absolute;
    bottom: 1.5em;
    right: 0;
    background: var(--accent-color);
    border-radius: 50%;
    padding: var(--default-gap);
}
#navpm.isactive span.num_msg {
    background: var(--soft-text-color);
    text-shadow: 0 0 2px #576072;
}
#navpm span.num_msg:before {
    display: none;
}
.post-author ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.post-author {
    width: var(--avatar-width);
    border: 1px solid var(--body-color);
}
.post-author li {
    padding: 0 var(--default-gap);
}
li.pa-author {
    background: var(--body-color);
    padding: var(--default-gap);
}
li.pa-author a{
    color: var(--punbb-color);
    text-shadow: 0 0 1px var(--punbb-color);
}
.pa-author #tuser {
    margin-left: 0;
}
.pa-title {
    font-weight: 600;
}
.pa-avatar img, #profile-left img {
    max-width: 100%;
    height: auto;
}
.pa-avatar {
    corner-shape: bevel;
    border-bottom-right-radius: calc(var(--default-gap)*8) var(--default-gap);
    overflow: hidden;
    text-align: center;
}
.post .container {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--default-gap) * 2);
    align-items: flex-start;
}
.post .post-body {
    flex-grow: 1;
    flex-basis: 50%;
}

.post-links {
    border-top: 2px dashed var(--body-color);
    width: 100%;
    padding: var(--default-gap) 0;
}
.parsedsig {
    width: 100%;
}
.parsedsig dd{
    margin: 0;
    padding: var(--default-gap) 0;
}
.post-sig dd {
    padding: 0;
    margin: 0;
    border-top: 2px dashed var(--body-color);
}
.post-sig dt {
    display: none;
}
.post h3 strong:before {content: '#';}
.post h3 strong:after {content: ' ';}
.email {
    margin-right: auto;
}
.tooltipsy {
    max-width: 300px;
    background: var(--punbb-color) !important;
    border: 2px solid var(--soft-text-color);
}
.post {
    border: 1px solid var(--body-color);
    margin: calc(var(
    --default-gap) * 3) 0;
    padding: var(
    --default-gap);
}
.post h3 {
    border-bottom: 1px solid var(--body-color);
    margin-top: 0;
    padding-bottom: var(--default-gap);
}
.quote-box, .code-box {
    border: 1px solid var(--soft-text-color);
    margin: var(--default-gap);
    padding: calc(var(--default-gap) * 2);
    corner-shape: bevel;
    border-bottom-right-radius: calc(var(--default-gap)*8) var(--default-gap);
    box-shadow: 0 0 10px inset var(--body-color);
}
blockquote {
    margin: 0;
    padding: 0;
}
.scrollbox {
    max-width: 100%;
    overflow: auto;
}
.blockcode {
    display: grid;
}
#post-form .fs-box, #pun-admain .fs-box, #profile .fs-box{
    display: block;
}
#post fieldset {
    background: var(--body-color);
}
#post fieldset#post-preview {
    background: var(--punbb-color);
}
#post fieldset legend {
    background: var(--punbb-color);
    color: var(--soft-text-color);
}
.fs-box, .fs-box .selectfield, .fs-box .inputfield {
    display: flex;
    gap: var(--default-gap);
    flex-wrap: wrap;
    align-items: center;
}
.fs-box .infofield {
    width: 100%;
}
.forum thead th {
    border-top: 1px solid var(--body-color);
}
tr.isticky + tr:not(.isticky) > td {
    border-top: 1px solid var(--body-color);
    padding-top: var(--default-gap);
    margin-top: calc(var(--default-gap) * 2);
}
#tags {
    position: relative;
}
#tags .container {
    border: 1px dashed var(--soft-text-color);
    padding: var(--default-gap);
    background: var(--punbb-color);
}
#messages tr td, #messages tr th {
    width: auto !important;
}

.pmtc24 {
    display: flex;
    justify-content: center;
    align-items: center;
}
td.pmtcl1, .forum .tcl {
    border-left: 1px solid var(--body-color);
}
.forum .tcr {
    border-right: 1px solid var(--body-color);
}
#messages td a {
    white-space: break-spaces;
}
#messages td, .forum td {
    border-bottom: 1px solid var(--body-color);
    padding: var(--default-gap);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#messages tr, .forum tr {
    display: grid;
    position: relative;
    border-left: var(--icons-width) solid transparent;
    align-items: stretch;
}
#messages tr {
    grid-template-columns: 50fr 27fr 16fr 7fr;
}
div#topic-users-in .container {
    display: block;
}
.modmenu p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--default-gap);
    justify-content: space-between;
}
.forum tr {
    grid-template-columns: 5fr 100px 100px 4fr;
}
form .forum tr {
    grid-template-columns: 5fr 100px 100px 4fr 80px;
}
.forum tr.isticky, .forum tr.iclosed {
    grid-template-columns: 10px 5fr 100px 100px 4fr;
}
form .forum tr.isticky, form .forum tr.iclosed {
    grid-template-columns: 10px 5fr 100px 100px 4fr 80px;
}
@media screen and (max-width: 540px) {
    .forum tr {
        grid-template-columns: 5fr 4fr;
    }
    .forum tr.isticky, .forum tr.iclosed {
        grid-template-columns: 10px 5fr 4fr;
    }
}
tr.isticky:before {
    content: '';
    width: 10px;
    background: var(--accent-color);
}
tr.iclosed:before {
    content: '';
    width: 10px;
    background: var(--body-color);
}

tr.isticky + tr:not(.isticky):before {
    height: calc(100% - var(--default-gap) * 2);    position: relative;
    bottom: calc(var(--default-gap) * -2);
}
#messages tr:before, .forum td:before {
    content: 'Old';
    position: absolute;
    padding: var(--default-gap);
    background: var(--punbb-color);
    display: block;
    width: var(--icons-width);
    box-sizing: border-box;
    corner-shape: bevel;
    text-align: center;
    font-weight: bold;
    left: calc(var(--icons-width) * -1);
    border-bottom-left-radius: var(--default-gap);
    background: var(--punbb-color);
    color: var(--soft-text-color);
    text-shadow: 0 0 2px var(--soft-text-color);
    border: 1px solid var(--body-color);
    border-right-width: 0;
}
#messages thead tr:before, .forum thead tr:before {
    border-color: transparent;
    color: transparent;
    text-shadow: 0 0 0 transparent;
}

#messages tr.inew:before, .forum tr.inew td:before  {
    content: 'New!';
    color: var(--text-color);
    background: var(--body-color);
    text-shadow: 0 0 2px var(--accent-color);
}
@media screen and (max-width: 900px) {
.post-content table tr{
    display: flex;
    flex-wrap: wrap;
}
}
.post-content table td {
    border: var(--thin-solid-body-border);
}

/*redirect*/
div#pun-redirect {
    min-height: auto;
}
body.redirect-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#pun-redirect #pun-main h1 {display: block;margin: 0;}

/*admin*/
#pun-admain #pun-adnav a {
    color: var(--text-color);
}
#pun-admain #pun-adnav .isactive a {
    color: var(--accent-color);
}
#pun-admain #pun-adnav .isactive ul.adsubnav li a {
    color: var(--soft-text-color);
}
#adnav-standard ul {
    list-style-type: none;
}
#pun-admain form fieldset p, #pun-admain form fieldset .handle {
    background-color: var(--punbb-color);
    border-color: var(--body-color);
}

/*userlist*/
.usertable tbody {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.usertable thead {
    display: none;
}
.usertable tr {
    display: grid;
    padding: .5em;
    margin: .5em;
    border: 2px solid var(--accent-color);
    background: var(--body-color);
    justify-items: center;
    flex-grow: 1;
}
.usertable tr a{
    color: var(--accent-color);
    font-weight: bold;
}
.usertable .user_title:before {
    content: 'Статус: ';
    font-weight: bold;
}
.usertable .relation:before {
    content: 'Репутация: ';
    font-weight: bold;
}
.usertable .num_posts:before {
    content: 'Сообщений: ';
    font-weight: bold;
}
.usertable .registered:before {
    content: 'Зарегистрирован(а): ';
    font-weight: bold;
}
.usertable .last_visit:before {
    content: 'Был(а): ';
    font-weight: bold;
}

/*Bookmarks*/
#MyBookmarks {
    background: var(--punbb-color);
}
#MyBookmarks h2 {
    font-size: 1.2em;
    color: var(--text-color);
}
/*adapt extra.css content to reply form O_O*/
#post fieldset #form-buttons{
    text-shadow: -1px -1px 0px var(--punbb-color), -1px 1px 0px var(--punbb-color), 1px -1px 0px var(--punbb-color), 1px 1px 0px var(--punbb-color);
}
#form-buttons tr td {
    background: transparent;
    display: flex;
    position: relative;
    width: var(--reply-buttons-size);
    height: var(--reply-buttons-size);
}
td[id^="button-"]:before {
    z-index: 1;
    position: absolute;
    color: var(--soft-text-color);
    font-family: "mybb";
    font-style: normal;
    font-weight: normal;
    speak: none;
    width: 100%;
    height: 100%;
    line-height: 1em;
    font-size: calc(var(--reply-buttons-size) - 2 * var(--default-gap));
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    padding: var(--default-gap);
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
}
#form-buttons tr {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--default-gap);
}
#form-buttons tr td img {
    z-index: 2;
    position: relative;
    height: 100%;
}
#button-font:before { content: '\e800'; } /* 'о Ђ' */
#button-size:before { content: '\e801'; } /* 'о Ѓ' */
#button-video:before { content: '\e802'; } /* 'о ‚' */
#button-image:before { content: '\e803'; } /* 'о ѓ' */
#button-italic:before { content: '\e81d'; } /* 'о ќ' */
#button-bold:before { content: '\e81e'; } /* 'о ћ' */
#button-strike:before { content: '\f0cc'; } /* 'пѓЊ' */
#button-underline:before { content: '\f0cd'; } /* 'пѓЌ' */
#button-left:before { content: '\e81a'; } /* 'о љ' */
#button-center:before { content: '\e81b'; } /* 'о ›' */
#button-right:before { content: '\e81c'; } /* 'о њ' */
#button-spoiler:before { content: '\e80f'; } /* 'о Џ' */
#button-link:before { content: '\e826'; } /* 'о ¦' */
#button-hide:before { content: '\e812'; } /* 'о ’' */
#button-code:before { content: '\e80d'; } /* 'о Ќ' */
#button-quote:before { content: '\e822'; } /* 'о ў' */
#button-color:before { content: '\f1fb'; } /* '' */
#button-table:before { content: '\e80e'; } /* 'о Ћ' */
#button-smile:before { content: '\e824'; } /* 'о ¤' */
#button-keyboard:before { content: '\f11c'; } /* 'п„њ' */
#button-addition:before { content: '\e82b'; } /* 'о «' */

/*statistics page o_o*/
#pun-statistic #pun-main h1 {
    display: block;
    color: var(--punbb-color);
    background: var(--body-color);
    padding: 0 var(--default-gap);
    margin: calc(var(--default-gap) * 2) 0 calc(var(--default-gap) * -1);
}

/*rusff additions*/
thead:has(+ #awards-content) {
    display: block;
}
#awards-content tr, thead:has(+ #awards-content) tr {
    border: var(--default-gap);
    grid-template-rows: unset;
    box-sizing: border-box;
}
#awards-content tr {
    border: var(--default-gap);
    grid-template-rows: unset;
    grid-template-areas: unset;
    width: 100%;
    grid-template-columns: 20% 20% 30% 30%;
    display: grid;
}
#awards-content {
    display: block;
}
thead:has(+ #awards-content) tr {
    display: flex;
    width: 100%;
}
#awards-content tr:before, thead:has(+ #awards-content) tr:before {
    display: none;
    content: '';
}

#awards-content tr td, thead:has(+ #awards-content) tr th {
    grid-area: unset;
    border: var(--thin-solid-body-border);
    box-sizing: border-box;
}
#awards-content td:before, thead:has(+ #awards-content) th:before {
    content: '';
    display: none;
}
#pun-report .inner, #pun-reputation .inner, #pun-admin-award-form .inner {
    background: var(--punbb-color);
    border: var(--default-gap) solid var(--body-color);
}

#pun-report .inner h1, #pun-reputation .inner h1, #pun-admin-award-form .inner h1{
    display: block;
    font-size 1.5em;
    margin: 0;
    padding: var(--default-gap);
    background: var(--body-color);
}