@import url(https://forumstatic.ru/files/001c/52/c6/73890.css); /*Сброс стилей*/
@import url(style_cs.1764961971.css);

/*******************************************************
Подключение шрифтов
*******************************************************/
@import url('https://forumstatic.ru/files/001b/df/32/99049.css'); /*Font Awesome ver 6.5.1*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap'); /*IBM Plex Sans*/

@font-face {
  font-family: 'Stetica Regular';
  src: url('https://forumstatic.ru/files/001c/92/3e/23327.eot'),
    url('https://forumstatic.ru/files/001c/92/3e/16437.woff2') format('woff2'),
    url('https://forumstatic.ru/files/001c/92/3e/18211.woff') format('woff'),
  url('https://forumstatic.ru/files/001c/92/3e/71714.ttf') format('truetype'),
  url('https://forumstatic.ru/files/001c/92/3e/29544.svg') format('svg');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Stetica Bold';
  src: url('https://forumstatic.ru/files/001c/92/3e/27473.eot'),
    url('https://forumstatic.ru/files/001c/92/3e/69503.woff2') format('woff2'),
    url('https://forumstatic.ru/files/001c/92/3e/33774.woff') format('woff'),
  url('https://forumstatic.ru/files/001c/92/3e/97877.ttf') format('truetype'),
  url('https://forumstatic.ru/files/001c/92/3e/81877.svg') format('svg');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Stetica Medium';
  src: url('https://forumstatic.ru/files/001c/92/3e/35784.eot'),
    url('https://forumstatic.ru/files/001c/92/3e/73834.woff2') format('woff2'),
    url('https://forumstatic.ru/files/001c/92/3e/68857.woff') format('woff'),
  url('https://forumstatic.ru/files/001c/92/3e/42633.ttf') format('truetype'),
  url('https://forumstatic.ru/files/001c/92/3e/98271.svg') format('svg');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Stetica Black';
  src: url('https://forumstatic.ru/files/001c/92/3e/13349.eot'),
    url('https://forumstatic.ru/files/001c/92/3e/72843.woff2') format('woff2'),
    url('https://forumstatic.ru/files/001c/92/3e/88639.woff') format('woff'),
  url('https://forumstatic.ru/files/001c/92/3e/95916.ttf') format('truetype'),
  url('https://forumstatic.ru/files/001c/92/3e/85665.svg') format('svg');
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: 'Grotesk';
  src: url('https://forumstatic.ru/files/001c/92/3e/14132.eot'),
    url('https://forumstatic.ru/files/001c/92/3e/76907.woff2') format('woff2'),
    url('https://forumstatic.ru/files/001c/92/3e/65438.woff') format('woff'),
  url('https://forumstatic.ru/files/001c/92/3e/41053.ttf') format('truetype'),
  url('https://forumstatic.ru/files/001c/92/3e/72141.svg') format('svg');
  font-style: normal;
  font-weight: 400;
}

/******************************************************
Корневые элементы
*******************************************************/
:root {
  --link-dark: #00426A;
  --text-dark: #1D1E20;
  --text-light: #FFFFFF;
  --accent: #A77A45;
  --bg-color: #1D1E20;
  --bg-light: #C0C3C5;

  --font-icon: fontawesome;
  --font-basic: 'IBM Plex Sans';
}

/*Всплывающие подсказки*/
#tooltip {
  position: absolute;
  background: var(--text-dark) !important;
  z-index: 999;
  max-width: 180px;
  border-radius: 25px;
  font-family: 'Stetica Medium';
  font-size: 11px;
  display: none;
  color: var(--text-light);
  text-align: center;
  padding: 4px 10px;
}

/*Спец посты*/
.custom_tag_h2 {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  margin: 0 auto;
}

.custom_tag_h2img {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
}

.custom_tag_h2img p {
  height: 100%;
}

.custom_tag_h2img p img.postimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.custom_tag_h2text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.custom_tag_h2text p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 30px;
  word-wrap: break-word;
  font-family: 'Stetica Bold';
  color: var(--text-light);
}

.guestbook {
  background: url(https://forumstatic.ru/files/001c/92/3e/63356.png) no-repeat center / cover;
  padding: 0 50px;
  margin: 0 0 20px;
}

.guestbook__info-header {
  background: #A2A9B2;
  font-family: 'Stetica Bold';
  padding: 5px;
  font-size: 10px;
}

.post-content .guestbook__info-header p {
  text-align: center;
}

.guestbook__info-block {
  display: flex;
  gap: 30px;
  color: var(--text-light);
  margin: 40px 0 0;
  align-items: stretch;
}

.guestbook__info-text {
  flex: 1;
  align-self: end;
  line-height: 150%;
}

.guestbook__link p {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.guestbook__link p a {
  background: var(--link-dark);
  padding: 3px 15px;
  font-family: 'Stetica Bold';
  transition: all 0.8s ease;
}

.guestbook__link p a:hover {
  background: var(--accent);
  color: var(--text-light);
}

.guestbook__info-reservation {
  flex-basis: 37.5%;
  border: 1px solid var(--accent);
  background: rgba(47, 48, 50, 0.7);
  min-height: 120px;
  padding: 20px 20px 10px;
  position: relative;
}

.guestbook__info-reservation > p {
  max-height: 100px;
  overflow: auto;
  font-size: 11px;
}

.info-reservation {
  display: flex;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.info-reservation p {
  background: var(--accent);
  text-transform: uppercase;
  text-align: center;
  padding: 5px;
  margin: 0 auto;
  font-family: 'Stetica Bold';
}

.guestbook__info-reservation .info-reservation p {
  padding: 5px;
}

.guestbook__ams {
  display: flex;
  gap: 15px;
  padding: 20px 0 0;
}

.guestbook__ams-item {
  position: relative;
}

.post-content .guestbook__ams-item img.postimg {
  margin: 0;
  border: 1px solid var(--accent);
  height: 60px;
  object-fit: cover;
}

.ams-item__descr {
  opacity: 0;
  position: absolute;
  background: #2F3032;
  padding: 5px;
  font-size: 8px;
  font-family: 'Stetica Regular';
  line-height: 130%;
  margin: 4px 0 0;
  transition: all 0.8s ease;
  pointer-events: none;
  z-index: 1;
}

.guestbook__ams-item .ams-item__descr p {
  text-align: left;
}

.guestbook__ams-item .ams-item__descr p:first-child {
  padding: 0 0 6px;
  text-transform: uppercase;
  font-family: 'Stetica Bold';
}

.guestbook__ams-item:hover .ams-item__descr {
  opacity: 1;
}

.guestbook__container .code-box {
  background: #A2A9B2;
  display: flex;
  margin: 40px 0 0;
  gap: 5px 20px;
  justify-content: center;
  padding: 5px 0 0;
}

.guestbook__container .code-box .legend {
  border-bottom: 0px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.guestbook__container .code-box .scrollbox {
  padding-bottom: 5px;
}

.appearance-month {
  background: url(https://forumstatic.ru/files/001c/92/3e/96783.png) no-repeat center / cover;
  padding: 60px 40px 45px;
  margin: 0 0 20px;
}

.appearance-month__container {
  display: flex;
  flex-wrap: wrap;
  gap: 45px 30px;
  justify-content: center;
}

.post-content .appearance-month__item img.postimg {
  margin: 0 0 5px;
  border: 1px solid var(--accent);
  height: 124px;
  object-fit: cover;
}

.post-content .appearance-month__item p {
  text-align: center;
}

.pers-action__list {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
}

.pers-action__item {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
}

.pers-action__item  .quote-box {
  flex: 1;
  display: flex;
}

.post-content .custom_tag_h2img p,
.post-content .custom_tag_h2text p,
.post-content .guestbook__info-header p,
.post-content .guestbook__link p,
.guestbook__ams .guestbook__ams-item p {
  padding: 0;
}

/*Оформление текста*/
em.bbuline {
  text-decoration: underline;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

abbr {
  cursor: help !important;
  border-bottom: 1px dashed #000;
}

/*Кнопки вверх-вниз*/
.scrollbuttons {
  position: fixed;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: 10000;
}

.go-up, 
.go-down {
  opacity: 0;
  position:absolute;
  z-index:9999;
  cursor:pointer;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  width: 30px;
  height: 30px;
  background: var(--accent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.go-up.show, 
.go-down.show {
  opacity: 1;
}

.go-up {
  right: 10px;
  bottom: 50px;
}

.go-down {
  right: 10px;
  bottom: 10px;
}

/************************* 
Стиль для Быстрой смены аккаунтов 
Deff 
*************************/ 
/*Cкрытие формы входа без клика*/ 
#pun-navlinks a:not(.NextShow)+span.odd{ 
display:none!important; 
}

#navlogout {
  position: relative;
}

#navlogout .odd {
  position: absolute !important;
}

/*Стиль доп-иконки Выход!*/ 
#pun-navlinks a#New-exit {
  background: transparent!important; 
  position:absolute;
  z-index:100000!important;
  margin-top: -21px !important;
  margin-left: 40px !important;
  display:inline-block!important; 
}
#pun-navlinks #New-exit img{ 
position: absolute;
width: 24px;
height: auto;
transition: .63s;
}
#pun-navlinks #New-exit:hover img{
transition: .63s;
 opacity: .42;
}
.punbb #pun-navlinks a#New-exit:before {
    content:none;
}
.punbb #pun-navlinks #form-login input{
text-align: center;
border: 1px solid #5D6755;
text-rendering: auto; 
color: #000000!important;  
margin-top: 4px!important;
margin-bottom: 3px!important;
border-radius: 5px; 
letter-spacing: 0.2; 
word-spacing: normal; 
text-transform: none; 
text-indent: 0px; 
text-shadow: none; 
display: inline-block!important; 
text-align: center;
box-sizing: border-box;
height:20px;
width:67px;
width: 110px;
padding: 4px;
font: normal normal 400 11px/normal Verdana!important; rgb(199,199,194)
background-color: rgba(199,199,194,.88);
} 
.punbb #form-login #fld1,#form-login #fld2{ 
background-color: rgba(199,199,194,.88);
} 
.punbb #pun-navlinks #form-login input[type="submit"]{ 
margin: 13px 0 2px!important;
box-sizing: border-box;
height:26px;
width:67px;
font-size: 11px!important;
color: #ffffff !important;
background: #bf8e3a;
border: 1px outset rgba(161,172,152,.8)!important;
text-align: center;
padding: 0 4px!important;
border-radius: 13px;
font-family: Verdana!important;
font-weight: 700!important;
transition: all 0.5s ease-in-out 0s;
letter-spacing: 0.8;
cursor:pointer;

/*border: 2px outset #83693E!important; 
color:#565462!important;
font-weight:700!important; */
} 
.punbb #pun-navlinks #form-login input[type="submit"]:hover{
  opacity:0.6;
}

/*Стиль формы входа*/ 
.punbb #pun-navlinks #form-login { 
background: #242523;
min-height:183px;
border: 1px solid #626262;
border-radius: 0px 0px 6px 6px;
color: #bcbcbc;
display: block;
font: 12px "IBM Plex Sans";
left: 0px;
padding: 8px 12px;
margin: 1px 0;
position: absolute !important;
text-align: center;
word-spacing: normal;
white-space: normal;
/*text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.235);*/
text-transform: none;
letter-spacing: 0.2px!important; 
top: 8px;
width: 122px;
z-index: 100000!important;
}
#pun-navlinks #navlogin #form-login {
  margin-left: -20px;/*Подвижки формы влево от вход*/ 
} 
#pun-navlinks #navlogout #form-login { 
  margin-left: -20px;/*Подвижки формы влево от выход*/
} 
.ismoderator #pun-navlinks #navlogout #form-login {
  margin-left: -20px!important;/*Подвижки формы влево от выход для АМС*/
} 
/*Стиль ссылок в форме "Не зарегистрированы" и "Забыли пароль" */ 
#pun-navlinks #form-login input[value="Войти"]+p{ 
 margin: 11px 8px;
} 
.punbb #pun-navlinks #form-login a.Rega, 
.punbb #pun-navlinks #form-login a.Forgot{ 
position:relative; 
text-transform: none!important; 
z-index:20; 
cursor:pointer; 
font: normal normal 200 10px/normal IBM Plex Sans!important; 
letter-spacing: 0.4!important; 
display:inline;
background: none!important;
padding: 0 0 0 3px!important;
color: #627ab8;
font-size: 9px!important;
/*text-shadow: 1px 1px 1px rgba(40, 52, 61, 0.39);*/
}
.punbb #pun-navlinks #form-login a.Rega:hover, 
.punbb #pun-navlinks #form-login a.Forgot:hover{
  color: #a1b0d6;
}
.punbb #pun-navlinks #form-login a.Rega:before, 
.punbb #pun-navlinks #form-login a.Forgot:before{
  content:none;
}
/* Помечаем красным незаполненные поля!*/ 
#form-login input.none{ 
outline:red dashed 2px!important; 
} 

/*Форма слева(с Никами) */ 
#List-UserNames { 
  position:absolute; 
  min-height:90px; 
  width:220px; 
  right: 120px; 
  padding: 15px; 
  background: var(--bg-light);
  text-align: center;
} 

#List-UserNames ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#List-UserNames li {
  background: var(--link-dark);
  padding: 5px;
}

/*Стиль контейнера под список Ников*/ 
.punbb #List-UserNames ul{
padding: 0;
overflow:hidden; 
overflow-y:auto; 
min-height:36px; 
max-height:72px;/*Видимое число Ников без прокрутки! сейчас - 4*/ 
} 
.punbb #List-UserNames li {
display: block!important;
position: relative;
background: #bf8e3a;
text-align: left;
box-shadow: 2px 2px 1px rgb(19, 20, 15);
padding-left: 5px!important;
font: normal normal 700 12x/normal IBM Plex Sans!important;
letter-spacing: 0.4;
margin: 1px auto!important;
padding: 2px 0;
transition: .33s;
}
.punbb #List-UserNames li:hover{ 
opacity:.84; 
/*background:#83693E!important;*/
} 
/*Стиль Ников*/ 
.punbb #List-UserNames li>b{ 
cursor: pointer;
opacity: .9;
color: #fffefe;;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
letter-spacing: 0.3;
} 
.punbb #List-UserNames li>b:hover{ 
opacity:.93; 
text-shadow:1px 1px 1px rgba(0,0,0,.6); 
} 
/*Скролл контейнера с никами*/ 
#List-UserNames ul::-webkit-scrollbar { 
width: 3px; 
height: 5px; 
} 
#List-UserNames ul::-webkit-scrollbar-track { 
background-color: #393A38; 
border: 0px solid #d7d8d9; 
box-shadow: none; 
} 
#List-UserNames ul::-webkit-scrollbar-thumb {
background-color: #C0BFBD;
border: 0px solid #d7d8d9; 
box-shadow: none; 
} 

/*Кнопки Удалить (правее ников)*/ 
#List-UserNames ul li>span { 
display:inline-block; 
padding:0 3px; 
position:absolute; 

opacity:.88; 
cursor:pointer; 
top:0;bottom:0; 
right:2px; 
color:#fff; 
font: normal normal
 
700 10.56px/normal IBM Plex Sans; 
text-shadow:1px 1px 1px rgba(0,0,0,.6); 
} 
/*Текст при отсутствии запомненных Ников!*/ 
#List-UserNames ul:empty:before{ 
display:inline-block; 
content: "У Вас нет запомненных ников, введенных через форму справа, или через перенос ниже!"; 
} 
/*Кнопка выход-2*/ 
#navlogin #exit-2 { 
display:none; 
} 
#pun:not(.isguest) #navlogout .Rega, 
#pun:not(.isguest) #navlogout .Forgot { 
display:none!important; 
} 

/*Стиль блока с инпутом для переноса и вставки запомненных Аккаунтов*/ 
#List-UserNames ul+span{ 
  display:inline-block; 
  padding: 10px 0 0;
} 

/*Сам инпут*/ 
.punbb #List-UserNames input { 
border: 1px solid #5D6755!important; 
text-shadow: none!important; 
color:#333!important;
background-color: #c7c7c2;
font: normal normal 400 11px/normal IBM Plex Sans!important; 
/* box-shadow: inset 0px 0px 3px rgba(100,102,80,.97); */ 
margin-top: 9px; 
padding: 2px !important; 
vertical-align: middle; 
} 
/*Стрелочки к инпуту*/ 
#List-UserNames ul+span b{ 
font: normal normal 400 13px/normal IBM Plex Sans; 
padding:0 3px; 
color: #bcbcbc;
} 
/*Кликалка слева, чуть выше инпута*/ 
#List-UserNames .a1-copy{ 
display:inline-block!important; 
cursor:pointer; 
float:left; 
} 
/*Кликалка справа*/ 
#List-UserNames .a1-paste{ 
cursor:pointer; 
display:inline-block!important; 
float:right; 
} 
/*Подсказки на кликалках*/ 
.tipsy.a11 { 
font: normal normal 400 11px/normal IBM Plex Sans!important; 
margin-top:-22px!important; 
margin-left: 148px!important; 
max-width:170px; 
} 
/************************* 
//Конец Стиля для Быстрой смены аккаунтов 
*************************/

.settings_wrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 36px;
  height: 36px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center
}

.settings_wrap .slide_button {
	width: 36px;
	height: 36px;
	font-size: 0;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--beg000);
}

.settings_wrap .slide_button:before {
	content: "";
	mask: url(https://forumstatic.ru/files/001c/37/2a/84490.svg) no-repeat center center;
	-webkit-mask: url(https://forumstatic.ru/files/001c/37/2a/84490.svg) no-repeat center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background: var(--text-light);
	width: 16px;
	height: 16px;
	display: block;
}

.settings_wrap .slide_block {
	position: absolute;
	width: 238px;
	top: 0;
	display: none;
	left: calc(100% + 10px);
}

.settings_container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0px;
}

#chfont {
  text-align: center;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: var(--accent);
  padding: 9px;
  color: var(--text-light);
}

#chfontbut {
	display: none !important;
}

#chfont select {
  cursor: pointer;
  background: var(--text-dark);
  color: var(--text-light);
}

#chfontsize {
	width: auto;
	display: flex;
	align-items: center;
	font: 300 12px var(--font);
	gap: 5px;
	margin-left: 5px
}


.fsizeplus,
.fsizeminus {
	box-sizing: border-box;
	color: var(--text1);
	cursor: pointer;
	font-size: 0;
	width: 13px;
	height: 13px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center
}

.fsizeplus::after {
	content: "";
	mask: url(https://forumstatic.ru/files/001c/37/2a/27804.svg) no-repeat center center;
	-webkit-mask: url(https://forumstatic.ru/files/001c/37/2a/27804.svg) no-repeat center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background: var(--text-light);
	width: 12px;
	height: 12px;
	display: block;
}

.fsizeminus::after {
	content: "";
	mask: url(https://forumstatic.ru/files/001c/37/2a/92207.svg) no-repeat center center;
	-webkit-mask: url(https://forumstatic.ru/files/001c/37/2a/92207.svg) no-repeat center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background: var(--text-light);
	width: 12px;
	height: 12px;
	display: block;
}


/* Extra additions
-------------------------------------------------------------*/

#poll-special table.poll1 {width:auto}


#poll-special td.tar {text-align:right !important}
div.pa-respect span {font-size:0.9em; vertical-align:top}

.post-content .highlight-text {background-color:#ff0; color:#000}
.post-content .spoiler-box > blockquote {padding-top:1.4em; display:none}
.post-content .spoiler-box > blockquote.visible {display:block; overflow:auto}
.post-content hr {opacity:0.5; filter:alpha(opacity=50); margin-bottom:0.8em}
.post-content ul {padding:0 0 1em 2.3em}
.post-content ul li {list-style:inherit; margin-bottom:0.3em}
.post-content ul li ul {padding-bottom:0}
.post-content ul li > p {padding-bottom:0.3em}
.post-content ul li > p:last-of-type {padding-bottom:0}
#color-area, #table-area, #keyboard-area {width:auto}
#keyboard-area {text-align:center; padding-bottom:4px}
#imageup-area {width:170px}
#imageattach-area {width:770px; height:200px; padding:0px !important}
#table-area div {margin-top:1em; text-align:center}
#table-layout {margin-right:0.5em}
#font-area, #size-area {right: unset !important;}
#font-area span, #font-area img, #size-area span, #size-area img {display:block; position:relative; top:0; left:0}
#font-area span, #font-area img {height:15px}
#size-area span, #size-area img {height:24px}
#font-area span, #size-area span {padding:1px 0}
#addition-area div {height:24px; vertical-align:middle}
#font-area img {width:100%; margin-top:-15px}
#size-area img {width:100%; margin-top:-24px}
#keyboard-span {text-align:center; padding-bottom:10px; width:auto}
#imageup-area input {font-size:0.8em}
#imageup-area p {padding:0; margin:0}
#imageup-title {margin-bottom:10px !important}
#imageup-submit {margin-top:10px !important}
#pun-messages #post-form div.container {padding-left:2.3em}
#similar-topics {margin-top:1em}
#similar-topics div.container {padding-top:1.1em}
#similar-topics td {border:0; padding:0}
#similar-topics td.st-tcl {width:60%}
#similar-topics td.st-tc2 {width:25%; padding-right:1em; text-align:right}
#similar-topics td.st-tcr {width:15%; padding-right:1em; text-align:right}
li.pa-ua {margin-top: 0.7em; display: flex; justify-content: center;}
#pun-online .tcl.action {width:25%}
.punbb .post.new-ajax > * {border-width: 3px;}
.punbb .post.new-ajax {display: none;}

#pun-index .isub .tcl {padding-left: 3em !important;}
#pun-main #subforums {padding: 1em 0 1em 1em; margin-bottom: 5px;}

.notify-parent {position: relative;}
.notify-bubble {
    background: lightblue;
    border-radius: 3px;
    color: black;
    font: bolder 12px/1.2 Tahoma;
    margin: 0;
    min-width: 14px;
    padding: 0 1px;
    position: absolute;
    text-align: center;
}

.notify-bubble:after {
    border-color: lightblue transparent;
    border-style: solid;
    border-width: 3px 3px 0;
    content: "";
    display: block;
    left: 5px;
    position: absolute;
    width: 0;
}

/* Statistic */
#pun-statistic .tc3 {width:15%;}
#pun-statistic .tc-username {width:unset;text-align:left;}
#pun-statistic .tc-title {width:25%;text-align:left;}
#pun-statistic .tc-registered {width:20%;}
#pun-statistic .tc-topic {width:50%;}

/** Video-Button
---------------------------------------------------------------*/
#video-host-list {margin-top:.3em; line-height:1.8em}
#video-area-msg, #image-source-list, #image-area-actions, #spoiler-sels {line-height:2em}

p[class="checkfield"] img, div[class="checkfield"] img, fieldset[class="radiofield"] img {height:auto; max-height:50px}
.pa-fld1 img, .pa-fld2 img, .pa-fld3 img, .pa-fld4 img, .pa-fld5 img, .pa-fld6 img, .pa-fld7 img, .pa-fld8 img, .pa-fld9 img, .pa-fld10 img, .pa-fld11 img, .pa-fld12 img, .pa-fld13 img, .pa-fld14 img, .pa-fld15 img, .pa-fld16 img, .pa-fld17 img, .pa-fld18 img, .pa-fld19 img, .pa-fld20 img {vertical-align:text-top}

/** Image-Button
---------------------------------------------------------------*/
#image-area-tcon-computer {margin:0 0 1em}
#image-area-tcon-computer td {border:none !important; padding:0}
#imageupload-left {width:140px}
#imageupload-right {padding-left:9px !important; background:transparent !important; max-width:380px}
#image-area-actions {text-align:right}
* html #imageQueue {height:expression( this.scrollHeight > 65 ? "66px" :"auto" )} /* sets max-height for IE */
* html #uploaded-images {height:expression( this.scrollHeight > 143 ? "144px" :"auto" )}
#imageQueue {max-height:72px; overflow-y:auto; margin-bottom:10px}
#uploaded-images {max-height:144px; overflow-y:auto}
#upload-button-container, #image-width, #image-thumb-width, #image-insert-format, #insert-all-images-container {margin-top:10px}
#insert-image-tip {margin-top:10px}
#upload-button-container img {cursor:pointer; width:120px; height:30px}
#image_upload_input {position:absolute; z-index:-1; left:-9999px}
#selected-image-width, #selected-thumb-width {width:6em}
#upload-button-container input[type=button] {font-weight:bold}
#image-width, #image-thumb-width, #image-insert-format strong {font-size:.9em}
.uploadQueueItem.error {border-color:rgba(255,0,0,0.25); background-color:rgba(255,0,0,0.08)}


/** jQuery plugins
---------------------------------------------------------------*/
.tipsy {padding:5px; font-size:11px; font-family:tahoma,helvetica,verdana,arial; position:absolute; z-index:100000;}
.tipsy-inner {padding:5px 8px 4px; background-color:black; color:white; max-width:200px; text-align:center; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px}
.tipsy-arrow {position:absolute; width:0; height:0; border:solid 5px; border-color:transparent transparent black transparent}
.tipsy-n .tipsy-arrow {top:0; left:50%; margin-left:-5px; border-top:0}
.tipsy-nw .tipsy-arrow {top:0; left:11px !important; border-top:0}
.tipsy-ne .tipsy-arrow {top:0; left:auto !important; right:11px; border-top:0}
.tipsy-s .tipsy-arrow {bottom:0; left:50%; margin-left:-5px; border-color:black transparent transparent transparent; border-bottom:0}
.tipsy-sw .tipsy-arrow {bottom:0; left:11px !important; border-color:black transparent transparent transparent; border-bottom:0}
.tipsy-se .tipsy-arrow {bottom:0; left:auto !important; right:11px; border-color:black transparent transparent transparent; border-bottom:0}
.tipsy-e .tipsy-arrow {top:50%; margin-top:-5px; left:auto !important;right:0; border-color:transparent transparent transparent black; border-right:0}
.tipsy-w .tipsy-arrow {top:50%; margin-top:-5px; left:0 !important; border-color:transparent black transparent transparent; border-left:0}
.jGrowl {z-index:9999; color:#fff; font-size:12px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; position:fixed}
.jGrowl.top-left {left:0; top:0}
.jGrowl.top-right {right:0; top:0}
.jGrowl.bottom-left {left:0; bottom:0}
.jGrowl.bottom-right {right:0; bottom:0}
.jGrowl.center {top:0; width:50%; left:25%}
.jGrowl.center .jGrowl-closer,.jGrowl.center .jGrowl-notification {margin-left:auto; margin-right:auto}
.jGrowl-notification {background-color:#000; opacity:.9; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100)); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100)); zoom:1; width:250px; padding:10px; margin:10px; text-align:left; display:none; border-radius:5px; min-height:40px}
.jGrowl-notification .ui-state-highlight,.jGrowl-notification .ui-widget-content .ui-state-highlight,.jGrowl-notification .ui-widget-header .ui-state-highlight {border:1px solid #000; background:#000; color:#fff}
.jGrowl-notification .jGrowl-header {font-weight:700; font-size:.85em}
.jGrowl-notification .jGrowl-close {background-color:transparent; color:inherit; border:none; z-index:99; float:right; font-weight:700; font-size:1em; cursor:pointer}
.jGrowl-closer {background-color:#000; opacity:.9; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100)); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100)); zoom:1; width:250px; padding:10px; margin:10px; display:none; border-radius:5px; padding-top:4px; padding-bottom:4px; cursor:pointer; font-size:.9em; font-weight:700; text-align:center}
.jGrowl-closer .ui-state-highlight,.jGrowl-closer .ui-widget-content .ui-state-highlight,.jGrowl-closer .ui-widget-header .ui-state-highlight {border:1px solid #000; background:#000; color:#fff}
@media print {.jGrowl {display:none}}
.pun-modal {position:fixed; width:100%; height:100%; top:0; left:0; bottom:0; z-index:100000}
.pun-modal .modal-bg {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); cursor:pointer; z-index:110000}

.pun-modal h2,.pun-modal h1 {max-width:700px; margin:0!important}
.pun-modal .container {padding:.6em 1em; max-height:40em; overflow:auto}
.noscroll {overflow:hidden!important}

/** Social icons
---------------------------------------------------------------*/
.social {background-image:url('/i/social.1.png'); background-repeat:no-repeat; float:left; display:block; margin:3px 5px; width:16px; height:16px}
.social-facebook {background-position:0 0}
.social-google {background-position:-26px 0}
.social-mailru {background-position:-52px 0}
.social-odnoklassniki {background-position:-78px 0}
.social-twitter {background-position:-104px 0}
.social-vkontakte {background-position:-130px 0}
.social-yandex {background-position:-156px 0}
.social-youtube {background-position:-182px 0}
.social-instagram {background-position:-312px 0}
.social-linkedin {background-position:-338px 0}
.social-reddit {background-position:-442px 0}
.social-share {background-position:-468px 0}
.social-tumblr {background-position:-546px 0}
.post-share-tip {width:164px; height:124px}
.post-share-legend {background:rgba(255,255,255,0.2); text-align:center}
.post-share-tip span {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:#fff; font-size:13px; line-height:27px}
.post-share-icons {padding:10px}
.post-share-tip a {margin: 5px 10px}

/** Avatars
---------------------------------------------------------------*/


.punbb .flag-i {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
  margin-right: 1em;
}
.punbb .pa-author .flag-i {
  margin-right: 0.5em;
}
.punbb .flag-i:before {
  content: '\00a0';
}


@font-face {
  font-family: 'mybb';
  src: url('./res/font/icons.woff2?3') format('woff2'),
       url('./res/font/icons.woff?3') format('woff'),
       url('./res/font/icons.ttf') format('truetype'),
       url('./res/font/icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
i[class^="icons-"]:before, i[class*=" icons-"]:before, .i[class*=" icons-"]:before, .i[class^="icons-"] {
  font-family: "mybb";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@media (max-width: 1300px) {
  body::before {
    top: 15px;
  }
}

@media (max-width: 1140px) {
  body::before {
    width: 100%;
    left: 0;
  }
}

@media (max-width: 1000px) {
  .header-container__head {
    flex-direction: column;
    gap: 10px;
  }

  .header-info__quote i {
    -webkit-line-clamp: 4;
  }

  .news-container {
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0 16px 12px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 25px auto;
    width: calc(100% - 20px);
    scrollbar-width: none;
  }

  .category tr {
    gap: 0 25px;
  }
}

@media (max-width: 890px) {
  .forum .container {
    padding: 0 20px;
  }

  .linkst,
  .linksb {
    padding: 0 20px;
  }

  .post {
    padding: 0 20px;
  }

  .modmenu {
    margin: 15px 20px;
  }
  
  .post-sig {
    display: none;
  }

  #post-form {
    margin: 30px 20px 0 20px;
  }

  #pun-poll #post,
  #pun-delete .formal {
    margin: 0 20px;
  }

  #viewprofile {
    padding: 0 20px;
  }

  #profile {
    padding: 0 20px;
  }

  #pun-userlist .formal,
  #pun-login .formal,
  #pun-register .formal {
    padding: 0 20px;
  }

  .usertable {
    padding: 20px 20px 0;
  }

  .messages-container #post-form {
    margin: 30px 0 0;
  }
}

@media (max-width: 880px) {
  .category tr {
    grid-template-columns: 1fr;
  }

  .category .tcl {
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }

  .category .tcr {
    grid-column: 1 / -1;
    border-top: 1px solid #1d1e2029;
    padding-top: 20px;
  }
  
  .forum .tc2 {
    display: none;
  }

  #pun-searchtopics .forum .tc2 {
    display: block;
  }

  .post > .container {
    grid-template-columns: 1fr;
  }

  .awards-and-gifts-spoiler {
    display: none;
  }

  .post-author-custom {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
  }

  .post-author__title {
    grid-column: 1 / -1;
  }

  .post-author__avatar {
    grid-column: 1 / 2;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .post-author__about-pers {
    grid-column: 2 / 3;
    margin: 0;
  }

  .custom-spoiler__content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 824px) {
  .guestbook__info-block.info-block__top {
    flex-direction: column;
  }

  .guestbook__info-block {
    flex-direction: column-reverse;
  }
}

@media (max-width: 787px) {
  .main {
    margin: 0 20px;
  }

  #pun-crumbs1, 
  #pun-crumbs2 {
    margin: 0 20px;
  }

  #pun-crumbs2 {
    margin: 0 20px 30px;
  }

  .section.online-list {
    padding: 0 20px;
  }

  .category > .container {
    padding: 25px 20px 20px;
  }

  .category h2 span {
    font-size: calc(16px + (9 + 9 * 0.7) * ((100vw - 320px) / 1000));
  }

  .tclcon h3 {
    font-size: calc(16px + (6 + 6 * 0.7) * ((100vw - 320px) / 1000));
  }

  #pun-stats {
    margin: 30px 20px;
  }

  .onlinelist {
    padding: 20px 20px 0;
  }

  .users_24h {
    padding: 0 20px;
  }

  .all-stats-forum {
    padding: 5px 20px 0;
  }

  .footer-container {
    padding: 20px;
  }

  #pun-edit .main, 
  #pun-post .main {
    margin: -30px 20px 0;
  }

  #viewprofile tbody > tr {
    flex-direction: column;
  }

  #profile-left {
    width: 100%;
  }
}

@media (max-width: 740px) {
  .pun-header__container {
    padding: 50px 0 0 0;
  }

  #pun-ulinks .burger {
    display: flex;
    position: absolute;
    top: 50px;
    right: 10px;
  }

  #pun-ulinks .container {
    display: none;
  }

  #pun-ulinks.open .container {
    position: fixed;
    top: 0;
    right: 0;
    background: var(--bg-color);
    padding: 10px;
    z-index: 999;
    font-size: 16px;
    line-height: 140%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .close-btn-burger {
    font-size: 32px;
    cursor: pointer;
    color: var(--accent);
    transition: color 0.8s ease;
    display: block;
    text-align: end;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .header-container__info {
    margin: 30px 0;
  }

  .pers-action__item {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .forum tr {
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid #1d1e2029;
    padding-bottom: 10px;
  }

  .forum .tclcon .byuser {
    display: none;
  }

  .forum .tcr {
    display: flex;
    gap: 0 5px;
    flex-wrap: wrap;
  }

  .forum .tcr::before {
    content: 'Последнее сообщение:'
  }

  .forum .user-avatar {
    display: none;
  }
}

@media (max-width: 700px) {
  .footer-container {
    flex-direction: column-reverse;
  }

  .footer__banners-items {
    flex-basis: 79px;
  }

  .footer__info-items {
    flex-basis: 100%;
  }
}

@media (max-width: 680px) {
  .statscon .item4 {
    grid-row: 4 / 5;
    grid-column: 1 / -1;
  }

  .statscon ul::after {
    height: 62px;
  }

  .messages-container .post > .container {
    grid-template-columns: 1fr;
  }

  .messages-container .post-author {
    position: relative;
  }

  .messages-container .pa-avatar {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 80px;
    max-height: 80px;
    padding: 10px;
  }

  .messages-container .pa-author a {
    margin-right: 100px;
  }

  .guestbook__container .code-box {
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  .header-container__info {
    width: 100%;
    max-width: 430px;
    margin: 30px auto 30px;
  }

  .header-info__quote {
    display: none;
  }

  .header-info__about {
    flex-basis: 100%;
  }
}

@media (max-width: 625px) {
  .all-stats-forum .item4 {
    margin-left: 0;
  }

  #pun-profile #profile > .container {
    grid-template-columns: 1fr;
  }

  #profilenav {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }

  #profilenav ul {
    flex-wrap: wrap;
    flex-direction: row;
  }

  #profile .container fieldset, 
  #profile .container .formsubmit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 580px) {
  .messages-container tr {
    grid-template-columns: 93% min-content;
  }

  .messages-container .pmtc22 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin: 0 0 10px;
  }

  .messages-container .pmtc22::before {
    content: 'от ';
    margin-right: 5px;
  }

  .messages-container .user-avatar {
    display: none;
  }

  .messages-container .pmtc24 {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
  }
}

@media (max-width: 523px) {
  .header-logo__img {
    width: 100%;
    object-fit: cover;
  }

  .guestbook__ams {
    flex-wrap: wrap;
  }

  .guestbook__ams-item {
    flex-basis: 47%;
  }
}

@media (max-width: 500px) {
  #pun-announcement .container {
    padding: 1px 0 0;
  }

  .header-board {
    display: none;
  }

  .new-topic, 
  .new-poll {
    padding: 5px 10px 0;
  }

  .new-topic a, 
  .new-poll a {
    font-size: 0;
  }

  .new-topic a::before {
    content: '\f573';
  }

  .new-poll a::before {
    content: '\f681';
  }

  .new-topic a::before,
  .new-poll a::before  {
    font-family: var(--font-icon);
    font-size: 12px;
  }

  .custom-spoiler__content {
    padding: 10px 0 0;
  }

  .lz_desc {
    display: none;
  }

  .pa-stats-container {
    margin: 0 0 10px;
  }

  .post-author-custom {
    grid-template-columns: minmax(100px, 150px) minmax(220px, 1fr);
  }

  #profile input {
    width: 100%;
  }

  #profile #messages input {
    width: auto;
  }

  .guestbook__container .code-box pre {
    white-space: break-spaces;
    text-align: center;
  }
}

@media (max-width: 453px) {
  .header-container__head {
   gap: 20px;
  }

  .header-navigation__pun-links a {
    font-family: var(--font-icon);
  }

  #pun-navlinks span {
    font-size: 0;
  }

  #navindex a:before {
    content: '\f015'; 
    font-size: 18px;
  }

  #navuserlist a:before {
    content: '\f0c0'; 
    font-size: 18px;
  }

  #navsearch a:before {
    content: '\f002'; 
    font-size: 18px;
  }

  #navprofile a:before {
    content: '\f2bb'; 
    font-size: 18px;
  }

  #navpm a:before {
    content: '\f0e0'; 
    font-size: 18px;
  }

  #navadmin a:before {
    content: '\f085'; 
    font-size: 18px;
  }

  #navlogout a:before {
    content: '\f2f5'; 
    font-size: 18px;
  }

  #navlogin a:before {
    content: '\f090'; 
    font-size: 18px;
  }

  #navregister a:before {
    content: '\f234'; 
    font-size: 18px;
  }

  .pr-li a:before {
    content: '\f0f3'; 
    font-size: 18px;
  }

  .header-container__navigation {
    width: 100%;
  }

  .category h2 {
    padding: 13px 10px 15px;
  }

  .footer__banners-items {
    justify-content: center;
  }

  .pa-fld5 {
    display: none;
  }

  .pa-stats-container {
    margin: 0;
  }

  .post-author__about-pers {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .custom-spoiler {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .custom-spoiler__content {
    flex-grow: 1;
    padding: 10px 0 10px;
  }
}

@media (max-width: 425px) {
  .post-author-custom {
    grid-template-columns: minmax(100px, 150px) minmax(110px, 1fr);
  }

  .pa-fld1 {
    display: none;
  }

  .stats-line {
    padding: 0 10px;
  }

  .stat-item-bank {
    display: none;
  }
}

@media (max-width: 400px) {
  .header-navigation__info {
    flex-direction: column;
  }

  .btn__navigation-link {
    width: 100%;
  }

  .header-info__welcome {
    padding: 7px 5px 5px;
  }

  #profile-signature {
    display: none;
  }

  .tcl.username .usersname {
    padding-left: 0;
  }

  .guestbook {
    padding: 0 10px;
  }

  .guestbook__info-reservation {
    padding: 20px 10px 10px;
  }

  .guestbook__info-reservation > p {
    padding: 0 10px 15px 0;
  }

 .guestbook__ams {
    justify-content: center;
  }

  .guestbook__ams-item {
    flex-basis: 45%;
  }
}

@media (max-width: 340px) {
  div.icon.inew {
    height: 16px;
    top: 0;
  }
}