/* загрузка шрифтов
-------------------------------------------------------------*/

@import url(style_cs.1769531656.css);

@import url('https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css');

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Полезные сервисные настройки
-------------------------------------------------------------*/

.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  line-height: 0.0;
  font-size: 0;
}

.punbb .post.new-ajax > * {
    border-width: 1px;
}

/* Основные переменные
------------------------------------------*/

:root {

--bodybg: #353535 url(https://forumstatic.ru/files/001c/92/79/22330.jpg) no-repeat top center/cover; /* фон форума */
--navlink: #b9b9b9; /* верхняя навиг ссылки */
--punbg: #EAEAEA; /* фон тела */
--back1: #f3f3f3; /* фон в статистике */
--fa: 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; /* шрифт иконок */
--p-width:220px;
--jst: "Jost", sans-serif;
--josef: "Josefin Sans", sans-serif;
--font3: "Playfair Display", serif;

--punul: #e3e3e3; /* фон подложек */
--topictext: #000;
--linkmain2: #874d4d; /* основные ссылки */
--texth3: #535353;
--testcolor: #e7e7e7;
--quotcolor: #b56668;

/* нов руты
------------------------------------------*/
--linkmain: #bc5a5a; /* основные ссылки */
--hlink: #000; /* при наведении общ */

--lighttext: #efefef;
--lighthovtext: #d1d1d1;
--lightred: #BC5A5A;
--darkred: #803032;
--categred: #c14d49;
--textblack: #000;
--doppun: #efefef;
--bordercolor: #d3d3d3;
--darkhover: #e3e3e3;
--butbg: #e3e3e3;
--backh3: #ebebeb;
--testcolor: #8c5c5e;
--colorauthor: #803032;
--swcolor: #803032;
--newshov: #dedede;
}

/* Дополнительные переменные
------------------------------------------*/

/*  для темной темы */

.dark {
--punbg: #2b2b2b; /* фон тела */
--testcolor: #000;
--lightred: #793f40;
--darkred: #a5696b;
--categred: #793f40;
--textblack: #bdbdbd;
--linkmain: #a5696b; /* основные ссылки */
--hlink: #e4e4e4;
--doppun: #353535;
--bordercolor: #4b4b4b;
--darkhover: #2b2b2b;
--punul: #353535;
--butbg: #2b2b2b;
--backh3: #2b2b2b;
--texth3: #8a5b5d;
--colorauthor: #a5696b;
--swcolor: #793f40;
--newshov: #262626;
--quotcolor: #793f40;
}


/* Основные настройки
------------------------------------------*/

* {
margin: 0;
padding: 0;
border:0;
text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scrollbar-color: #fff #000;
scrollbar-width: thin;
}

/*

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-track {
  background-color: #000;
}

*::-webkit-scrollbar-thumb {
  background-color: #fff;
}  */

/* скролл начало
------------------------------------------*/

@supports not selector(::-webkit-scrollbar) {
  
{
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--acc1)) rgba(var(--acc1), .4);;}
}

/* прокрутка хром etc */

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

*::-webkit-scrollbar-track {
  background-color: rgba(var(--acc1), .4);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgb(var(--acc1));
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--acc2);
}


/* конец скролла
------------------------------------------*/

a, .punbb #pun-admain a {
color: var(--linkmain);
text-decoration:none;
}

a:hover, .punbb #pun-admain a:hover {
color: var(--hlink);
text-decoration:none;
}

input[type=text], select, input[type=password] {
    background: var(--doppun);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    border-radius: 5px;
    font-size: 11px;
    margin: 5px 0px;
    color: var(--textblack);
    border: 1px solid var(--doppun);
    font-family: var(--jst);
    padding: 5px;
}

textarea {
padding:5px 10px;
}

ul li {
list-style:none;
}

h1, h2 {
padding: 5px 20px;
text-align: center;
}

:focus {
outline:none;
}

table, table tbody {
width: 100%;
display: flex;
flex-direction: column;
gap: 0px 10px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--doppun);
}

.main tr {
    width: 100%;
    justify-content: space-between;
    display: flex;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
}

.tcl { 
width: 50%;
}

.intd {
    display: flex;
    gap: 20px;
    align-content: center;
    align-items: center;
}

tr .icon {
    display: block;
    width: 40px;
    height: 40px;
    background: url(https://forumstatic.ru/files/001c/92/79/75108.png) no-repeat;
    flex-shrink: 0;
    background-size: contain;
    filter: grayscale(1);
    opacity: 0.5;
}

 /*иконки подфорумы*/
#pun-viewforum table div.icon, #pun-messages table div.icon, #pun-searchtopics table div.icon{       
    background-repeat: no-repeat;
    border-style: none;
    display: block;
    float: left;
    height: 25px;
    margin-right: 7px;
    margin-top: 2px;
    position: relative;
    width: 25px;
    padding-left: 0px !important;

}

#pun-viewforum tr.inew div.icon, #pun-messages tr.inew div.icon { background: url(https://forumstatic.ru/files/001c/92/79/75108.png) no-repeat; }

#pun-viewforum tr.isticky div.icon, #pun-messages tr.isticky div.icon {  }

#pun-viewforum tr.iclosed div.icon. #pun-messages tr.iclosed div.icon { }

.tclcon h3 a {
    font-family: var(--jst);
    font-weight: 700;
    font-size: 13px;
    line-height: 138%;
    text-transform: uppercase;
    color: var(--textblack);
}

.tclcon h3 a:hover { color: var(--darkred); }

/* описание форума */

.fordescr {
    font-family: var(--jst);
    font-weight: 400;
    font-size: 9px;
    line-height: 144%;
    text-transform: uppercase;
    color: var(--textblack);
    padding: 5px 0px;
    width: 420px;
}

.forlinks
{
    display: flex;
    gap: 5px;
    padding: 5px 0px;
}

.forlinks a {
    color: #eee;
    font-weight: bold;
    font-size: 8px;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--jst);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    background: var(--lightred);
    border-radius: 5px;
    transition: transform .25s cubic-bezier(.25, 1.5, .5, 1);
    padding: 2px 15px;
    border: 1px solid var(--bordercolor);
}

.forlinks a:hover {
    color: var(--textblack);
    background: var(--darkhover);
}

.tc3, .tc2 {  
width: 10%;
text-align: center;
}

.tcr { 
width: 30%;
}

.modmenu .container {
display: flex;
justify-content: space-between;
}

.modmenu .container:after {
display:none;
}


/* форумная таблица
------------------------------------------*/

/* фон */

html {
  background: var(--bodybg);
}

/* заплатка для фиксированного фона */

body::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  z-index: -10;
  background: var(--bodybg);
}

.dark body::before {filter: brightness(0.2);
}

/* тело форума */

#pun {
background: var(--punbg);
width:1000px;
margin: 50px auto 50px;
box-shadow: 0 0 0 0px #803032 inset, 0 -30px 0 -21px #803032, 0 30px 0 -21px #803032;

}

.punbb #html-footer .container { 
padding:0px;
}

.punbb #pun-about p.container {
    text-transform: lowercase;
    text-align: center;
}

.banners {
background: url(https://forumstatic.ru/files/001c/92/79/24809.jpg);
    height: 123px;
    width: 1000px;
    display: flex;
}

.dark .banners {
filter: brightness(0.7); }

.bcontainer {
width: 560px;
    margin: 40px auto;
    height: 31px;
    overflow: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bcontainer a {
    display: block;
    height: 31px;
    width: 88px;
}

.punbb >div .container {
padding:10px 20px;
}

.punbb {
font: normal 11px/16px Jost, Verdana, Arial, sans-serif;
display: flex;
flex-direction: column;
color: var(--textblack);
}

h1.title-logo {
display: none;
}

#pun-navlinks ul.container, #pun-ulinks ul.container{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
justify-content: center;
}

#pun-navlinks ul.container {
padding: 15px 20px;
}

#pun-navlinks {
    order: -1;
    position: absolute;
    width: 1000px;
z-index: 2;
}

#pun-navlinks ul.container a {
color: var(--navlink); 
font-family: var(--josef);
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
text-align: center;
transition: color 0.3s ease;
}

#pun-navlinks ul.container a:hover {
color: #d1d1d1;
animation: breathe 1.2s ease-in-out infinite;
}

#pun-ulinks {
    position: absolute;
    top: 441px;
    width: 1000px;
z-index: 1;
}

#pun-ulinks ul.container {
padding: 7px 20px;
}


#pun-ulinks ul.container a {
font-family: var(--josef);
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    color: var(--lighttext);
     transition: color 0.3s ease;
}


#pun-ulinks ul.container a:hover {
animation: breathe 1.2s ease-in-out infinite;
color: var(--lighthovtext);
}

#pun-title {
    height: 422px;
    width: 1000px;
    background: url(https://forumstatic.ru/files/001c/92/79/23113.jpg);
    position: relative;
    z-index: 0;
}

.dark #pun-title { filter: brightness(0.7); }


.linkst, .linksb {
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.punbb .postlink.long {
width: fit-content;

}

.punbb .main .linksb:after {
display:none;
}

.punbb .user-avatar .avatar-image {
    border-radius: 50%;
    height: 29px !important;
    width: 29px !important;
    opacity: 0.85;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    border: 2px solid var(--lightred);
}

.punbb .user-avatar {
    height: 29px !important;
    width: 29px !important;
    margin-left: 10px !important;
}

#pun-viewforum .user-avatar .avatar-image, #pun-userlist .user-avatar .avatar-image,
#pun-viewforum .user-avatar, #pun-userlist .user-avatar {    
    height: 20px !important;
    width: 20px !important;
}

#pun-userlist .user-avatar .isonline, #pun-viewforum .user-avatar .isonline  {
    top: 0px !important;
    right: -4px !important;
}

.punbb .user-avatar .isonline {
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
position: absolute;
top: 0px !important;
right: 10px !important;
animation: blinkColor .9s 
linear infinite;
-moz-animation: blinkColor .9s linear infinite;
-webkit-animation: blinkColor .9s 
linear infinite;
background: #ffffff !important;
z-index: 100;
}


/* главная страница
------------------------------------------*/

#pun-index thead, #pun-index .tc3, #pun-index .tc2, #pun-announcement h2, #pun-main h1 span, #pun-stats h2, li.pa-reg {
display: none;
}

#pun-index .tcl {
width: 60%;
}

#pun-index .tcr {
width: 40%;
}

#pun-index .tcr a {
    text-transform: uppercase;
    font-size: 9px;
    font-weight: bold;
   color: var(--darkred);
}

#pun-index .tcr a:hover { color: var(--textblack); }

#pun-index .user-avatar {
    height: 36px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
}

#pun-index .user-avatar .isonline {
    top: 2px !important;
    right: 2px !important;
}

#pun-index span.lastpost {
    text-transform: uppercase;
    font-size: 9px;
    color: var(--textblack);
}

/* категория
------------------------------------------*/

.category h2 {
    background: url(https://forumstatic.ru/files/001c/92/79/86345.png) no-repeat top center;
    height: 73px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category h2 span {
font-family: var(--font3);
    font-weight: 400;
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    color: var(--categred);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    line-height: 28px;
    display: block;
    height: 41px;
}

.category-1 h2:before {
    content: 'text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text';
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 8px;
    text-transform: uppercase;
    text-align: center;
    color: #dcdcdc;
    position: absolute;
    max-width: 680px;
    line-height: 12px;
}

.punbb .category .container {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--doppun);
    max-width: 928px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0px;
    border: 1px solid var(--bordercolor);
}


.category tr {
    padding: 20px;
}

.category tr:not(:last-of-type) { 
    border-bottom: 1px solid var(--bordercolor);
}


/* прочие страницы
------------------------------------------*/
#pun-searchtopics .tc2 {
width: 30%;
}

#pun-ulinks, #pun-crumbs1, #pun-index .tcr {
text-transform: uppercase;
 }

p.container.crumbs {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    color: var(--textblack);
    margin: 12px 0px 0px;
}


#pun-status {
font-family: var(--font-family);
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    color: var(--textblack);
    margin: 0px;
}

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


#pun-navlinks {
text-transform: uppercase; }


#pun-online .tcl.action {
    width: 35% !important;
}

#pun-online .tcl {
    width: 35%;
}

#pun-report .inner, #pun-reputation .inner, #pun-admin-award-form .inner {    background: var(--punbg);
}



/* предпросмотр профиля */

.punbb #profile-left {
    background: var(--punbg);
    text-align: center;
    padding: 20px 10px !important;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
}

li#profile-name {
    font-family: var(--font3);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    color: var(--colorauthor);
    line-height: 0;
    margin-bottom: 13px;
}

li#profile-title {
    font-weight: normal !important;
    margin-bottom: 10px;
}

.punbb li#pa-edit {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    background: var(--doppun);
    border-radius: 5px;
    transition: transform .25s cubic-bezier(.25, 1.5, .5, 1);
    text-transform: lowercase;
    padding: 3px 10px;
    border: 1px solid var(--bordercolor);
    width: max-content;
    margin: 10px auto;
}

.punbb li#pa-edit:hover {
background: #bc5a5a; color: #eee; }
.punbb li#pa-edit a:hover { color: #eee; }



div#viewprofile .container tr  {
padding: 20px;
}

#profile-right li {
    padding: 5px 20px;
    color: var(--textblack);
    background: var(--punbg);
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    margin-bottom: 10px;
    width: max-content;
    margin-left: 20px;
}

#profile-right li strong, #profile-right li span {
    text-align: center;
    padding: 0px !important;
}

#pun-profile legend {
    top: 12px;
    position: relative;
    font-size: 10px;
    text-transform: lowercase;
    margin: 0px 10px 5px;
    font-weight: bold;
}

/* топик
------------------------------------------*/

.topic a.sharelink {
   display: none;
}

.topic h2 {
    font-size: 10px;
    text-transform: uppercase;
}

h3 span {
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
}

a.permalink {
    order: -1;
    color: var(--texth3);
    text-transform: uppercase;
}

.postlink span  {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    background: var(--butbg);
    border-radius: 5px;
    transition: transform .25s cubic-bezier(.25, 1.5, .5, 1);
    padding: 3px 15px;
    border: 1px solid var(--bordercolor);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold; display: inline-block;
}

.postlink span:hover {
transform: scale(1.12); }


.post-author {
    width: var(--p-width);
    text-align: center;
    background: var(--butbg);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 40px 5px 50px;
    position: relative;
    height: max-content;
}

.post-author:before {
    content: '';
    width: 220px;
    position: absolute;
    background: url(https://i.pinimg.com/736x/2e/e1/bc/2ee1bcf015f26ad2dba62bc3a2a96ed3.jpg) no-repeat;
    height: 40px;
    left: 0px;
    top: 0px;
    border-radius: 5px 5px 10px 10px;
}

#pun-post .post-author:before {
    background: none;
}

.post-box {
    padding-top: 10px;
}

.post-box p {
    padding-bottom: 10px;
}

.post-author ul {
    background: var(--doppun);
    padding: 10px 0px;
    height: 100%;
}

.post-author ul:before {
    content: '';
    height: 8px;
    width: 210px;
    top: 32px;
    left: 5px;
    background: var(--doppun);
    display: block;
    position: absolute;
}

li.pa-author, li.pa-author a, p.pa-author {
    font-family: var(--font3);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    color: var(--colorauthor);
    line-height: 0;
    margin-bottom: 13px;
}

li.pa-author a:hover { color: var(--textblack); }

li.pa-title {
    font-size: 8px;
    text-transform: uppercase;
    margin: 5px auto;
    width: 180px;
}

li.pa-online {
    text-transform: lowercase;
    color: var(--colorauthor);
}

.post-author.online .pa-author a:before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--linkmain);
    position: relative;
    z-index: 3;
    display: block;
    border-radius: 50%;
    left: 93%;
    top: -10px;
    animation: blinkColor .9s linear infinite;
    -moz-animation: blinkColor .9s linear infinite;
    -webkit-animation: blinkColor .9s linear infinite;
}

.pa-author a:before {
    content: '';
    background: #000;
    display: block;
    width: 7px;
    height: 7px;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    left: 93%;
    top: -10px;
}

.pa-posts, .pa-respect, .pa-fld5, .pa-fld4 {
    display: inline-flex;
    margin: 10px 5px;
    flex-direction: column;
    padding: 3px 8px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.11);
    background: var(--doppun);
    border-radius: 5px;
    font-size: 9px;
    min-width: 20px;
}

.pa-posts .fld-name, .pa-respect .fld-name, .pa-fld5 .fld-name, .pa-fld4 .fld-name {
    display: block; 
    font-size:0px;
}

.pa-posts .fld-name:before, .pa-respect .fld-name a:before, .gid3 .pa-respect .fld-name:before, .pa-fld5 .fld-name:before, .pa-fld4 .fld-name:before {
font-family: var(--fa);
font-size: 10px; 
font-weight: bold;
} 

.pa-posts .fld-name:before {
content: '\f0e0';
}

.pa-respect .fld-name a:before, .gid3 .pa-respect .fld-name:before {
content: '\f004'; color: var(--textblack);
} 
.pa-respect .fld-name a:hover:before, .gid3 .pa-respect .fld-name:hover:before {color: #803032;}


.pa-fld5 .fld-name:before {
content: '\f005';
} 

.pa-fld4 .fld-name:before {
content: '\f304';
}

li.pa-fld3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
}


li.pa-fld3:before {
    content: '';
    width: 210px;
    height: 15px;
    background: var(--doppun);
    display: block;
    position: absolute;
    left: 5px; z-index: 1;
}

li.pa-fld2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 40px;
}

li.pa-fld2 img {
    width: 220px;
    border-radius: 5px 5px 10px 10px;
    height: 100%;
    object-fit: cover;
}

li.pa-fld2:after {
    content: '';
    height: 8px;
    width: 210px;
    bottom: 0;
    left: 5px;
    background: var(--doppun);
    display: block;
    position: absolute;
}

.punbb .post-rating a {
    background: var(--punbg);
    font-size: 12px !important;
    border-radius: 10px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 3px 20px;
    border: 1px solid var(--bordercolor);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.punbb .post-vote a {
    background: var(--punbg);
    font-size: 15px !important;
    border-radius: 10px;
    font-weight: bold;
    padding: 3px 6px;
    border: 1px solid var(--bordercolor);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}


.punbb .post-rating a:before {
    content: '\f004';
    font-family: var(--fa);
    padding-right: 5px;
    color: var(--grayc);
}

.punbb a.positive,
.punbb a.negative {
    position: relative;
    display: inline-block;
    margin-top: 1px !important;
}

/* Контейнер для сердечек */
.heart-burst-container {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

/* Сердечки */

.heart-burst {
    position: absolute;
    font-family: var(--fa);
    color: #ff5f8f;
    opacity: 0;
    font-size: 14px;
    animation: heartFloat 1.5s ease-out forwards; /* увеличили длительность */
}

@keyframes heartFloat {
    0% {
        transform: translateY(0) scale(0.7);
        opacity: 1;
    }
    30% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) scale(0.8); /* выше поднимается */
        opacity: 0;
    }
}





#topic-users-in { text-transform: lowercase;}

#mask_dialog .inner {
    cursor: default;
    margin: 0;
    width: 760px;
    max-width: 99%;
    max-height: 90%;
    overflow-x: auto;
    z-index: 100;
    box-shadow: 0 0 40px #222;
    background: var(--doppun);
    padding: 8px;
}

#mask_dialog .hv-form-block input, #mask_dialog .hv-form-block textarea {
    width: 100%;
    border: 1px solid var(--bordercolor);
    background: var(--punbg);
}


/* плашка
------------------------------------------*/

.pltxt span {
    font-weight: bold;
    color: #eee;
    text-transform: uppercase;
    font-size: 9px;
    font-family: var(--jst);
}
.plsh {
    position: relative;
    gap: 10px;
    display: flex;
    z-index: 0;
    left: 0;
    width: 220px;
    height: 58px;
    border-radius: 10px 10px 0px 0px;
    top: 0px;
}

.pltxt {
    margin: 24px auto 0px;
    line-height: 12px;
}

.pltxt p {
    color: #ffffff;
    font-size: 7px;
    text-transform: uppercase;
}

/* лз
------------------------------------------*/
.lz {
    font-family: var(--jst);
    font-size: 7px;
    text-transform: uppercase;
    color: var(--textblack);
    width: 180px;
    margin: 0 auto;
}

.lz p {
    text-align: justify;
    padding-top: 5px;
    border-top: 1px solid var(--bordercolor);
}

.lz p a {
    font-weight: bold;
}

.lz a.name {
    font-size: 9px;
    font-weight: bold;
}


.post {
    margin-top: 20px;
}

.post h3 {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
    background: var(--backh3);
    border-radius: 5px 5px 0 0;
    margin: 0px 20px;
    font-family: var(--jst);
    font-size: 8px;
    color: var(--texth3);
    border-left: 1px solid var(--bordercolor);
    border-right: 1px solid var(--bordercolor);
    border-top: 1px solid var(--bordercolor);
}

.punbb .topic .post >.container {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 10px 20px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--doppun);
    margin: 0px 20px;
    padding-left: 12px;
    border: 1px solid var(--bordercolor);
}

.post-body {
    width: calc(100% - var(--p-width) - 20px);
}
.post-links ul { 
    display: flex;
    gap: 10px 15px;
    width: 100%;    
}

.post-links {
    flex-grow: 1;
    margin: 10px 0px;
    padding-left: 11px;
}

/* настройки кнопок под постом */

li.pl-delete {
    margin-left: auto;
}

li.pl-delete, li.pl-edit.edit-ajax, li.pl-quote, li.pl-edit, li.pl-email.profile, li.pl-email.email, li.pl-email.pm, li.pl-email {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    background: var(--butbg);
    border-radius: 5px;
    transition: transform .25s cubic-bezier(.25, 1.5, .5, 1);
    text-transform: lowercase;
    padding: 3px 5px;
    border: 1px solid var(--bordercolor);
} 

li.pl-delete:hover, li.pl-edit.edit-ajax:hover, li.pl-quote:hover, li.pl-edit:hover, 
li.pl-email.profile:hover, li.pl-email.email:hover, li.pl-email.pm:hover, li.pl-email:hover {
transform: scale(1.12); }

li.pl-delete:before {content:'\f1f8';}
li.pl-edit.edit-ajax:before {content:'\f044';}
li.pl-edit:before {content:'\f044';}
li.pl-quote:before {content:'\f10e';}
li.pl-email.profile:before {content:'\f007';}
li.pl-email.pm:before {content:'\f0e0';}
li.pl-email.email:before {content:'\40';}
li.pl-email:before {content:'\40';}

a.permalink:before, .post h3 strong:before, li.pl-delete:before, li.pl-edit.edit-ajax:before, li.pl-quote:before, li.pl-edit:before, li.pl-email.profile:before, li.pl-email.email:before, li.pl-email.pm:before, li.pl-email:before {
font-family: var(--fa);
padding-right: 5px;
color: var(--linkmain); 
font-weight: bold;
}

a.permalink:before {
    content: '\f073';
    color: var(--texth3);
}

.post h3 strong::before {
    content: '\23';
    color: var(--texth3);
}


.punbb .post .post-links ul:after, .punbb .post .container:after {display:none;}

#topic-users-in .container {
    display: block;
}

#pun-viewtopic .pagelink, #pun-viewforum .pagelink {
    margin-right: auto;
    order: -1;
}

 #pun-viewforum .postlink.long .new-topic {
margin-right: 15px;
}

#pun-viewtopic .subscribelink {
    flex-grow: 1;
    text-align: right;
    width: 100%;
    margin-top: 10px;
    text-transform: lowercase;
}

#pun-viewtopic h3 strong {order: 1;}

/* настройки цитаты спойлера и кода
------------------------------------------*/

.code-box {
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 15px;
    box-sizing: border-box;
    max-height: 200px;
    overflow: auto;
    flex-direction: column;
    background: #e1e1e1;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--punbg);
    margin: 20px;
    border: 1px solid var(--bordercolor);
}


.code-box .legend {
    background: #000;
    width: max-content;
    color: #fff;
    border-radius: 5px;
    padding: 3px 15px 3px 15px;
    text-transform: uppercase;
    margin: 0px 0px 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: var(--quotcolor);
    font-size: 9px;
    font-weight: normal;
}

.code-box .legend a { color: #fff; }
.code-box .legend a:hover { color: #eee; }

.code-box .legend a:before {
    content: '\f121';
    font-family: var(--fa);
    padding-right: 5px;
    font-weight: bold;
}

.blockcode {       overflow: auto;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--bordercolor);
    font-family: var(--jst);
    background: var(--doppun);
 }

.blockcode pre {
    font-family: var(--jst);
}

.scrollbox {
    height: fit-content !important;
}


/* цитата с автором
------------------------------------------*/

.quote-box.answer-box {
    background: var(--punbg);
    margin: 20px;
    border: 1px solid var(--bordercolor);
    position: relative;
}

.quote-box.answer-box:before {
    content: '\f10e';
    position: absolute;
    font-family: var(--fa);
    font-weight: bold;
    font-size: 20px;
    top: -5px;
    left: 94%;
    color: var(--quotcolor);
}


cite {
    width: max-content;
    color: #fff;
    border-radius: 5px;
    padding: 3px 15px 3px 15px;
    text-transform: uppercase;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: var(--quotcolor);
    font-size: 9px;
    font-weight: normal;
    font-style: normal;
    position: absolute;
    transform: translateY(-10px);
    margin-left: 20px;
}

cite:before {
    content: '\f007';
    font-family: var(--fa);
    padding-right: 5px;
    font-weight: bold;
}

/* спойлер
------------------------------------------*/

.quote-box.spoiler-box {

    border-radius: 5px;
    padding: 10px 5px 3px 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--punbg);
    margin: 20px;
    border: 1px solid var(--bordercolor);
}

/* ИКОНКА (закрыта) */
.punbb .post-content .spoiler-box > div:before {
    content: '\e500';
    font-size: 13px;
    font-family: 'Font Awesome 6 Pro';
    color: var(--grayc);
    margin-right: 6px;
    display: inline-block;         
    transition: transform .35s ease; 
}

/* ИКОНКА (открыта) */
.punbb .post-content .spoiler-box > div.visible:before {
    content: '\e4ff';
    transform: rotate(90deg);
    color: var(--linkmain);
}

.punbb .post-content .spoiler-box > div.visible {background: none;
    border-bottom: 1px solid #c7c7c7;}


.punbb .post-content .spoiler-box > div {
    background: none;
    cursor: pointer;
    padding: 0px 15px 7px 15px;
}

/* Закрытый */
.punbb .post-content .spoiler-box > blockquote {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
}

/* Открытый */
.punbb .post-content .spoiler-box > blockquote.visible {
    animation: spoilerSlide .45s ease forwards;
}

blockquote.visible {
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--bordercolor);
    font-family: var(--jst);
    background: var(--doppun);
    margin: 10px;
}

blockquote {
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 15px;
    box-sizing: border-box;
    max-height: 200px;
    overflow: auto;
    flex-direction: column;
    background: #e1e1e1;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    margin: 20px;
    border: 1px solid var(--bordercolor);
    font-family: var(--jst);
    background: var(--doppun);

}


/* Анимация “выезда” */
@keyframes spoilerSlide {
    0% {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 2000px; /* можно больше, неважно */
    }
}


/* профиль и лс
------------------------------------------*/

#viewprofile-next #profilenav {
    display: none;
}

#profilenav {
    float: left;
    width: 150px;
    margin-left: -150px;
}

#profile .container {
    padding-left: 170px;
}

#profile .clearer {
    display: none;
}

#profile form#messages {
    margin-top: 10px;
}


/* форма ответа
------------------------------------------*/

textarea#main-reply {
    box-sizing: border-box; 
    border: 1px solid var(--bordercolor);
    font-family: var(--jst);
    background: var(--punbg);
    color: var(--textblack);
}


.resizable-textarea textarea   {    font-family: var(--jst);
    background: var(--doppun);
    color: var(--textblack); }

#table-area table tr, #table-area table tbody {
    padding: 0px;
    display: flex;
    gap: 0px;
}

.punbb #form-buttons table {
    width: 100%;
}

.punbb #tags .container {
    position: absolute;
    right: 6px;
    top: 5px;
    z-index: 2;
    background: var(--doppun);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    max-height: 160px;
    overflow: auto;
}

#tags .container span:hover {
    background: var(--punbg);
}

#tags .container span{
    padding: 4px 10px;
    margin: 3px 0px;
}

#tags {
    position: relative;
}

#post-form h2 {
    display: none;
}

#post-form {
    margin-top: 10px;
}

form#post {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    padding: 20px 10px;
    background: var(--doppun);
    margin: 20px;
    border: 1px solid var(--bordercolor);
}

form#post #plng, #pun-messages #plng {
    background: none;
    box-shadow: none;
    font-size: 10px;
}

form#post #plng:after,  #pun-messages #plng:after {
    content: '\f101';
    font-family: var(--fa);
    color: #b56668;
    font-size: 9px;
    padding-left: 17px;
    font-weight: bold;
}

#post-preview legend {
    padding: 2px 10px;
    color: var(--textblack);
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    background: var(--punbg);
    text-transform: lowercase;
    font-size: 11px;
}

.fs-box  {
    padding: 10px;
}

.fs-box.inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}


.formal fieldset legend {
    top: 12px;
    position: relative;
    font-size: 10px;
    text-transform: lowercase;
    border-radius: 5px;
    margin: 15px 10px 0px;
    padding: 3px 10px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--doppun);
}

.pagelink strong {
    padding: 0px 4px;
    border-radius: 3px;
    font-size: 9px;
    text-align: center;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--doppun);
}

.pagelink {
    text-transform: uppercase;
    font-size: 9px;
}

#togglePreview {
    float: right;
    margin-top: -17px;
    margin-right: 9px;
}

small#togglePreview input[type=button] {
        border: 1px solid #b56668;
background: #b56668;
margin-bottom: 15px;
}

small#togglePreview input[type=button]:hover {
        border: 1px solid var(--textblack);
background: #000;
}

#form-buttons table tr {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin: 10px 0px 5px 0px;
    padding: 5px;
}

p.formsubmit {
        margin: 5px 10px;
}

.formsubmit input[type=button], .formsubmit input[type=submit] {
    margin-right: 10px;
}

input[type=button], input[type=submit] {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 7px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: #000;
    box-sizing: border-box;
    margin: 0px auto;
    color: #eee;
    text-transform: uppercase;
    font-size: 10px;

}

input[type=button]:hover, input[type=submit]:hover {
    background: #803032;
    border: 1px solid #803032;
}

/* счетчик символов
------------------------------------------*/

small#plng {
    padding: 2px 10px;
    color: var(--textblack);
    border-radius: 5px;
    text-transform: lowercase;
    font-size: 11px;
    margin: 0px 10px 0px 10px;
}

.fieldset legend {
    text-transform: lowercase;
}

/* статистика
------------------------------------------*/
#pun-stats .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 20px;
    text-transform: uppercase;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    background: var(--doppun);
    max-width: 928px;
    margin: 20px auto 10px;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--bordercolor);
    text-align: justify;
    font-size: 9px;
    color: var(--textblack);
}

#pun-stats .container a {
    font-weight: bold;
}

li#onlinelist.item5.onlinelist {
    margin-top: 10px;
}

li#onlinelist {
width: 100%;
text-align: justify;
}

#pun-stats .item1,
#pun-stats .item2,
#pun-stats .item3,
#pun-stats .item4 {
  background: var(--punbg);
  border-radius: 5px;
  padding: 5px 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,.1);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--jst);
  font-weight: 400;
  font-size: 9px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--textblack);
  white-space: nowrap;
}

#pun-stats .item4 span,
#pun-stats .item4 strong {
  display: inline-flex;
  align-items: center;
}


#pun-stats .item4 strong a {
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--textblack);
}

#pun-stats .item4 strong a:hover { color: #803032; }

#pun-stats ul.container li > * {
  line-height: 14px;
  vertical-align: middle;
}