@charset "UTF-8";

/***************************************************************
****** Design Application for Mybb developed Kolobdur1974 ******
****************************************************************/

/*************************************************************
A - SETUP
**************************************************************/

/* M_A1 Основное, сброс настроек браузера
-------------------------------------------------------------*/

/* M_A1.1 */
html.mobile {box-sizing: border-box;} 
 
/* M_A1.2 */
html.mobile, html.mobile body {
    background-color: var(--bodybg);
    background-repeat: repeat;
    background-position: center;
    overflow-x: hidden;    
  margin: 0; 
  padding: 0;
  overflow: auto;
  width: 100%;
}

/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */

/* M_A1.3.1 */
html.mobile body {
  position: relative;
  font-size: 116.01%;
  -webkit-animation: bugfix infinite 1s;
}

/* M_A1.3.2 */
html.mobile @-webkit-keyframes bugfix {
  to {
    padding: 0;
  }
}

/* M_A1.4 */
html.mobile .punbb * {margin: 0}

/* M_A1.5 */
html.mobile table {
  table-layout: fixed;
  width: 100%;
}

/* M_A1.6 */
html.mobile ul, html.mobile dl, html.mobile li, html.mobile dd, html.mobile dt {
  padding: 0;
  list-style: none;
}

/* M_A1.7 */
html.mobile img {
  border:none;
  max-width:100%;
  height:auto;
}

/* M_A1.8 */
html.mobile br {line-height: 2em;}

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

/* M_A1.10 */
html.mobile .acchide,
html.mobile #pun-index #pun-main h1,
html.mobile #pun-pagelinks h2,
html.mobile #pun-status h2,
html.mobile .punbb .forum h2,
html.mobile .punbb .multipage .topic h2,
html.mobile .punbb dl.post-sig dt span,
html.mobile .punbb p.crumbs strong,
html.mobile .punbb .divider hr,
html.mobile .punbb .required label em,
html.mobile .punbb .formsubmit label,
html.mobile .punbb .submitfield label,
html.mobile .punbb .modmenu label,
html.mobile #pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden;
  }
  
/* M_A1.11 */
html.mobile #pun-status, html.mobile #BookmCntToggle.default-style, html.mobile #pun-break1, html.mobile #pun-index #pun-crumbs1, html.mobile #pun-crumbs2, html.mobile #pun-break2, html.mobile #pun-break3, html.mobile #pun-break4, html.mobile .category th, html.mobile .category .tc2, html.mobile .category .tc3, html.mobile .forum th, html.mobile .forum .tc2, html.mobile .forum .tc3, html.mobile #post-form legend , html.mobile .punbb:not(#pun-messages) .main table thead, html.mobile .punbb:not(#pun-index) #pun-announcement, .mask-content:after, .mask-content2:after {
  display: none;
  width: 0;
}

/* M_A1.12
 * Удаляем рекламу (в случае возмущения партнера удалить этот код) */
html.mobile #pun-break2 + .section,
html.mobile .section[style="border:0 !important; max-width:100%; text-align:center"],
html.mobile .punbb .section[style="border:0 !important; max-width:100%; text-align:center"] div iframe {
  display: none !important;
}
 
/* M_A2 Общие настройки формы, кнопок, и select
-------------------------------------------------------------*/
 
/* M_A2.1 */
html.mobile .punbb form {
  width: 99%;
  margin: 0 auto 4vw auto; 
}
 
/* M_A2.2 */
html.mobile button, html.mobile input[type="reset"], html.mobile input[type="submit"], html.mobile input[type="button"] {
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0.8vw;
  -moz-border-radius: 0.8vw;
  -ms-border-radius: 0.8vw;
  -o-border-radius: 0.8vw;
  border-radius: 0.8vw;
  background: #dfdfdf;
  background: -moz-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  background: -webkit-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  border: 0.2vw solid #ccc;
  cursor: pointer;
  overflow: visible;
  padding: 0.4vw 2vw;
  width: auto;
  font-size: 3.6vw;
}
 
/* M_A2.3 */
html.mobile .punbb select {
  background: #fff;
  border: 0.4vw solid #eee;
  border-radius: 0.6vw;
  padding: 0.6vw 4vw 0.6vw 0.6vw;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'%3E%3C/path%3E%3C/svg%3E");
  background-position: calc(100% - 1vw) 50%;
  background-repeat: no-repeat;
  background-size: 5vw;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 4vw;
}

/* M_A2.4 */
html.mobile .punbb select option:checked {
  background: olive linear-gradient(olive, olive);
  color: blue;
}

/* M_A2.5 */
html.mobile .punbb select option:hover {
  background: olive linear-gradient(olive, olive);
  color: blue;
}

/* M_A2.6 */
html.mobile select::-ms-expand {
  display: none;
}
 
/* M_A3 Общие настройки шрифта, заголовков и ссылок
-------------------------------------------------------------*/
 
/* M_A3.1 */
html.mobile .punbb {
  font: normal 4vw tahoma, verdana, arial, helvetica, sans-serif;
  width: 100%;
  height: auto;
  margin-top: 16vw;
}

/* M_A3.2 */
html.mobile .punbb h1 {
  line-height: 1.3em;
  font-size: 5vw;
}

/* M_A3.3 */
html.mobile .punbb h2 {font-size: 5vw;}

/* M_A3.4 */
html.mobile .punbb h3 {font-size: 4vw;}

/* M_A3.5 */
html.mobile .punbb h1, html.mobile .punbb h2 {
  text-align: center;
  padding-bottom: 4vw;
  margin-bottom: 4vw;
}

/* M_A3.6 */
html.mobile .punbb h1.title-logo {border-bottom: none;width: 100%; visibility: hidden;}

/* M_A3.7 */
html.mobile .punbb a, html.mobile .punbb a:link, html.mobile .punbb a:visited {
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.27s ease, background-color 0.27s ease, margin 0s linear, padding 0s linear;
}

/* M_A4 Таблицы
-------------------------------------------------------------*/

/* M_A4.1 */
html.mobile .main table {
  width: 100%;
}

/* M_A4.2 */
html.mobile .punbb:not(#pun-profile) .main table tr {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  margin: 0 0 4vw 0;
  padding: 0;
}

/* M_A4.3 */
html.mobile .main .tcl {
  align-self: flex-start;
  flex: 1;
  margin-left: 2vw;
  padding-left: 2vw;
}

/* M_A4.4 */
html.mobile .main .tcr {
  align-self: flex-start;
  flex: 0 0 0.2vw;
  padding-left: 20vw;
  margin: 2vw 0 4vw 0;
}

/*************************************************************
M_B - Меню
**************************************************************/

/* M_B1 Общие настройки левого и правого меню
-------------------------------------------------------------*/

/* M_B1.1 Настраиваем общий блок для двух меню */
html.mobile .newheader {
  top: 0;
  width: 100%;
  height: 12vw;
  position: fixed;
  z-index:1000;
  color: var(--nav-button-text);
}



/* M_B1.5 */
html.mobile #pun-navlinks, html.mobile #pun-ulinks {
  width: 50vw;
  min-width: 50vw;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 10px;
  z-index: 2000;
}

/* M_B1.6 */
html.mobile #pun-navlinks {
  /* сдвигаем (прячем) панель относительно левого края страницы */
  left: -50vw;
  /* плавный переход смещения панели */
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  transition: left 0.3s;
}

/* M_B1.7 */
html.mobile #pun-ulinks {
  /* сдвигаем (прячем) панель относительно правого края страницы */
  right: -480vw;
  /* плавный переход смещения панели */
  -webkit-transition: right 0.3s;
  -moz-transition: right 0.3s;
  transition: right 0.3s;
}

 /* M_B2 Кнопка переключения панели, тег <label>
-------------------------------------------------------------*/

/* M_B2.1 */
html.mobile .nav-toggle, html.mobile .nav-toggle2 {
  /* абсолютно позиционируем */
  position: absolute;
  /* отступ от верхнего края панели */
  top: 0;
  /* внутренние отступы */
  padding: 1vw 2vw;
  /* вид курсора */
  cursor: pointer;
  /* размер шрифта */
  font-size: 8vw;
  line-height: 1;
  /* всегда поверх других элементов страницы */
  z-index: 2001;
  /* анимируем цвет текста при наведении */
  -webkit-transition: color .25s ease-in-out;
  -moz-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out;
}

/* M_B2.2 */
html.mobile .nav-toggle {
  /* относительно левого края панели */
  left: 50vw;
}

/* M_B2.3 */
html.mobile .nav-toggle2 {
  /* относительно правого края панели */
  right: 480vw;
}

/* M_B3 Определяем текст кнопки, символ Unicode (TRIGRAM FOR HEAVEN)
 * цвет текста при наведении, чекбокс, переключатель
-------------------------------------------------------------*/

/* M_B3.1 */
html.mobile .nav-toggle:after {content: '\2261';}

/* M_B3.2 */
html.mobile .nav-toggle2:after {content: '\205E';}

/* M_B3.3 */
html.mobile .nav-toggle:after , html.mobile .nav-toggle2:after {color: var(--nav-button-text);  text-decoration: none;}

/* M_B3.4 цвет текста при наведении */
html.mobile .nav-toggle:hover, html.mobile .nav-toggle2:hover {color: var(--nav-button-text); }

/* M_B3.5
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */
html.mobile [id='nav-toggle'], html.mobile [id='nav-toggle2'] {
    position: absolute;
    display: none;
}

/* M_B3.6
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks > .nav-toggle, 
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks > .nav-toggle2 {
  left: auto;
  right: 2px;
  top: 1em;
}

/* M_B4 Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
-------------------------------------------------------------*/

/* M_B4.1 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks {
  overflow-y: auto;
}

/* M_B4.2 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks {
  position: fixed;
}

/* M_B4.3 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks {
  left: 0;
  background-color: rgba(0, 0, 0, .4);
}

/* M_B4.4 */
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks {
  right: 0;
  background-color: rgba(0, 0, 0, .4);
}

/* M_B5 Формируем стиль заголовка (логотип) панели 
-------------------------------------------------------------*/

/* M_B5.1 */
html.mobile #pun-navlinks h2, html.mobile #pun-ulinks h2 {
  width: 90%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
  font-size: 3vw;
  line-height: 1.1em;
  opacity: 0;
  transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -webkit-transform: scale(0.1, 0.1);
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transition: opacity 0.8s, transform 0.8s;
  -ms-transition: opacity 0.8s, -ms-transform 0.8s;
  -moz-transition: opacity 0.8s, -moz-transform 0.8s;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  border: none;
  color: var(--nav-button-text);
  background: var(--nav-button-bg);
  box-shadow: var(--nav-button-drop); 
  padding: 3px;
}

/* M_B5.2 */
html.mobile #pun-navlinks h2 a, html.mobile #pun-ulinks h2 a {
  color: var(--nav-button-text);
  text-decoration: none;
  text-transform: uppercase;
  
}


/* M_B5.3 плавное появление заголовка (логотипа) при раскрытии панели */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks h2,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks h2 {
  opacity: 1;
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/* M_B6 формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
-------------------------------------------------------------*/

/* M_B6.1 */
html.mobile #pun-navlinks > ul, html.mobile #pun-ulinks > ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* M_B6.2 */
html.mobile #pun-navlinks > ul > li, html.mobile #pun-ulinks > ul > li {
  line-height: 2.5;
  opacity: 0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
  -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
  -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
  transition: opacity .5s .1s, transform .5s .1s;
}

/* M_B6.3 */
html.mobile [id='nav-toggle']:checked ~ #pun-navlinks > ul > li,
html.mobile [id='nav-toggle2']:checked ~ #pun-ulinks > ul > li {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

/* M_B7 определяем интервалы появления пунктов меню
-------------------------------------------------------------*/

/* M_B7.1 */
html.mobile #pun-navlinks > ul > li:nth-child(2),
html.mobile #pun-ulinks > ul > li:nth-child(2) {
  -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
  transition: opacity .5s .2s, transform .5s .2s;
}

/* M_B7.2 */
html.mobile #pun-navlinks > ul > li:nth-child(3),
html.mobile #pun-ulinks > ul > li:nth-child(3) {
  -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
  transition: opacity .5s .3s, transform .5s .3s;
}

/* M_B7.3 */
html.mobile #pun-navlinks > ul > li:nth-child(4),
html.mobile #pun-ulinks > ul > li:nth-child(4) {
  -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
  transition: opacity .5s .4s, transform .5s .4s;
}

/* M_B7.4 */
html.mobile #pun-navlinks > ul > li:nth-child(5),
html.mobile #pun-ulinks > ul > li:nth-child(5) {
  -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
  transition: opacity .5s .5s, transform .5s .5s;
}

/* M_B7.5 */
html.mobile #pun-navlinks > ul > li:nth-child(6),
html.mobile #pun-ulinks > ul > li:nth-child(6) {
  -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
  transition: opacity .5s .6s, transform .5s .6s;
}

/* M_B7.6 */
html.mobile #pun-navlinks > ul > li:nth-child(7),
html.mobile #pun-ulinks > ul > li:nth-child(7) {
  -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
  transition: opacity .5s .7s, transform .5s .7s;
}

/* M_B8 оформление ссылок пунктов меню
-------------------------------------------------------------*/

/* M_B8.1 */
html.mobile #pun-navlinks > ul > li > a ,
html.mobile #pun-ulinks > ul > li > a {
  display: inline-block;
  position: relative;
  padding: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 4vw;
  color: var(--button-text);
  padding: 3px;
  width: 100%;
  text-decoration: none;
  /* плавный переход */
  -webkit-transition: color .5s ease, padding .5s ease;
  -moz-transition: color .5s ease, padding .5s ease;
  transition: color .5s ease, padding .5s ease;
  z-index: 2001;
}

/* M_B8.2 состояние ссылок меню при наведении */
html.mobile #pun-navlinks > ul > li > a:hover,
html.mobile #pun-navlinks > ul > li > a:focus,
html.mobile #pun-ulinks > ul > li > a:hover,
html.mobile #pun-ulinks > ul > li > a:focus {
  color: white;
  padding-left: 15px;
}

/* M_B8.3 before, линия подчеркивания ссылок меню */
html.mobile #pun-navlinks > ul > li > a:before,
html.mobile #pun-ulinks > ul > li > a:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  -webkit-transition: width 0s ease;
  transition: width 0s ease;
}

/* M_B8.4 after, линия подчеркивания ссылок меню */
html.mobile #pun-navlinks > ul > li > a:after,
html.mobile #pun-ulinks > ul > li > a:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  -webkit-transition: width .5s ease;
  transition: width .5s ease;
}

/* M_B8.5 before
 * анимируем линию подчеркивания ссылок при наведении */
/*html.mobile #pun-navlinks > ul > li > a:hover:before,
html.mobile #pun-ulinks > ul > li > a:hover:before {
  width: 0%;
  background: #3bc1a0;
  -webkit-transition: width .5s ease;
  transition: width .5s ease;
} */

/* M_B8.6 after
 анимируем линию подчеркивания ссылок при наведении 
html.mobile #pun-navlinks > ul > li > a:hover:after,
html.mobile #pun-ulinks > ul > li > a:hover:after {
  width: 0%;
  background: transparent;
  -webkit-transition: width 0s ease;
  transition: width 0s ease;
} */

/* M_B9 фон затемнения на основной контент, при этом элементы блокируются
-------------------------------------------------------------*/

/* M_B9.1 */
html.mobile .mask-content, html.mobile .mask-content2 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  padding: 0;
}

/* M_B9.2 */
html.mobile [id='nav-toggle']:checked ~ .mask-content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s;
}

/* M_B9.3 */
html.mobile [id='nav-toggle2']:checked ~ .mask-content2 {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s;
}

/* M_B10 Добавляем картинку перед ссылкой меню, символ Unicode (TRIGRAM FOR HEAVEN)
 * Левое меню
-------------------------------------------------------------*/

/* M_B10.1 */
html.mobile #pun-navlinks, html.mobile #pun-ulinks {
  box-sizing: border-box;
}

/* M_B10.2 */
html.mobile #navindex span:before,
html.mobile #navuserlist span:before,
html.mobile #navrules span:before,
html.mobile #navsearch span:before,
html.mobile #navprofile span:before,
html.mobile #navpm span:before,
html.mobile #navadmin span:before,
html.mobile #navlogout span:before,
html.mobile #navlogin span:before,
html.mobile #navregister span:before {
  text-decoration: none;
  padding-right: 3vw;
}



/* M_B11 Правки для ЛС
-------------------------------------------------------------*/

/* M_B11.1 */
html.mobile #pun-navlinks li#navpm span.num_msg {margin: -2vw 0 0 -24vw !important;z-index: 1;}

/* M_B11.2 */
html.mobile #navpm span.num_msg:before {z-index: -1;}

/*************************************************************
M_C - Общие настройки главной страницы, аватарки для форума 
***   и unicode для страницы форума
**************************************************************/

/* M_С1 Общие настройки главной страницы
-------------------------------------------------------------*/

/* M_C1.1 */
html.mobile #pun-stats ul, html.mobile #pun-about .container  {padding: 0 4vw 4vw 4vw;}

/* M_C1.2 */
html.mobile #pun-stats ul li:not(:nth-child(1)) {padding: 3vw 0;}

/* M_C1.3 */
html.mobile #pun-stats ul li:nth-child(1) {padding-bottom: 3vw;}

/* M_C1.4 */
html.mobile #pun-about .container span  {float: right;}

/* M_C1.5 */
html.mobile .forum .tclcon span {font-size:0;}

/* M_С2 Аватарка для форума
-------------------------------------------------------------*/

/* M_C2.1 */
html.mobile #pun .punbb .user-avatar img.ava {
  border-width: 0.6vw !important;
  height: 8vw;
  width: 8vw;
  margin: 0.2vw 2.6vw 0.4vw 0px;
}

/* M_C2.2 */
html.mobile #pun .punbb .user-avatar {height: 8vw;}

/* M_C2.3 */
html.mobile #pun .punbb .user-avatar img.on_ {
  width: 1.8vw;
  height: 1.8vw;
  margin: 1vw 3vw 0 -8vw;
}

/* M_С3 Unicode для страницы форума
-------------------------------------------------------------*/

/* M_C3.1 */
html.mobile .stickytext:before,
html.mobile .closedatafield:before {
  text-decoration: none;
  padding-right: 1vw;
}

/* M_C3.2 */
html.mobile .stickytext:before {content: '\A71D';font-size: 8vw;}

/* M_C3.3 */
html.mobile .closedatafield:before {content: '\1F512';font-size: 3vw;}

/*************************************************************
M_D Хлебные крошки
**************************************************************/

/* M_D.1 */
html.mobile .crumbs, html.mobile .linkst, html.mobile .linksb {
 /* border-top: 1vw double #DADADA;
  border-bottom: 1vw double #DADADA; */
  margin-bottom: 2vw;
  font-size: 0;
  text-align: center;
}

/* M_D.2 */
html.mobile .crumbs a {font-size: 4vw;margin-right: 1vw;}

/* M_D.3 */
html.mobile .crumbs a:before {
    content: "";
    display: inline-block;
    width: 2.8vw;
    height: 2.8vw;
    border-radius: 50%;
    background: rgba(190, 190, 190, 0.7);
    margin-right: 1vw;
}

/*************************************************************
M_E - Страница темы, Посты
**************************************************************/

/* M_E1 Общие настройки Поста, минипрофиля и кнопок в посту
-------------------------------------------------------------*/

/* M_E1.1 */
html.mobile .punbb .fs-box p, html.mobile .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;
}

/* M_E1.2 */
html.mobile .punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
}

/* M_E1.3 */
html.mobile .post-content p {
  clear: both;
}

/* M_E1.4 */
html.mobile .post>.container, html.mobile .post-author ul, html.mobile .post-links ul, html.mobile #profilenav ul {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: 0 0 4vw 0;
  padding: 0; 
}

/* M_E1.5 */
html.mobile .post-author ul, html.mobile .post-links ul {position: relative;margin: 0;}

/* M_E1.6 */
html.mobile .post h3 span {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border-top: 0.4vw solid #e5e5e5;
  margin-bottom: 0.3vw;  
}

/* M_E1.7 */
html.mobile .post-author, html.mobile .post-links, html.mobile .post h3 {background-color: #f5f5f5;}

/* M_E1.8 */
html.mobile .post-author, html.mobile .post-body, html.mobile .post-links {
  width: 100%; 
  padding: 0;
}

/* M_E1.9 */
html.mobile .post-author {order: 2;}

/* M_E1.10 */
html.mobile .post-links {
  order: 1;
  margin-bottom: 1vw; 
  padding: 1vw 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.20);
}

/* M_E1.11 */
html.mobile .post-body {order: 3;
    background-color: var(--base-page);}

/* M_E2 Настройки минипрофиля
-------------------------------------------------------------*/

/* M_E2.1 */
html.mobile .post-author ul li {
  display: none;
  padding: 1.6vw;
}

/* M_E2.2 */
html.mobile .post-author ul li.pa-author,
html.mobile .post-author ul li.pa-avatar,
html.mobile .post-author ul li.pa-title,
html.mobile .post-author ul li.pa-posts,
html.mobile .post-author ul li.pa-respect,
html.mobile #pun-searchposts .post-author ul li.pa-replies {
  display: block;
}

/* M_E2.3 */
html.mobile .pa-avatar, html.mobile .pa-author, html.mobile .pa-title, html.mobile .topic a.sharelink, html.mobile .punbb a.permalink, html.mobile .post h3 strong {
  align-self: center;
}

/* M_E2.4 */
html.mobile .pa-avatar {
  order: -1;
  position: absolute;
  top: -1vw;
}

/* M_E2.5 */
html.mobile .pa-title, html.mobile .pa-respect {margin: 0 0 0 auto;}

/* M_E2.6 */
html.mobile .pa-author {margin-left: 14vw;}

/* M_E2.7 */
html.mobile .pa-author, html.mobile .pa-title {margin-top: 1.3vw;}

/* M_E2.7.1 Правка для поиска постов */
html.mobile #pun-searchposts .pa-author {margin: 0 auto 0 0;}

/* M_E2.8 */
html.mobile .pa-posts, html.mobile .pa-respect {
  font-size: 3vw;
  width: 40%;
  margin-top: 1vw;
}

/* M_E2.9 */
html.mobile .pa-respect {text-align: right;}

/* M_E2.10 */
html.mobile .pa-avatar img {
    max-height: 10vw;
    width: auto;
    border-radius: 1vw;
}

/* M_E2.11 */
html.mobile .pa-author img {display: none;}

/* M_E2.12 */
html.mobile .punbb li.pa-author a {
  color: #557fae;
  font-weight: 600;
}

/* M_E2.13 */
html.mobile .pa-author:before {
  content: "";
  display: inline-block;
  width: 2.8vw;
  height: 2.8vw;
  border-radius: 50%;
  background: rgba(190, 190, 190, 0.7);
  margin-right: 0.6vw;
}

/* M_E2.14 */
html.mobile .online .pa-author:before {
  background: rgba(56, 155, 34, 0.7);
}

/* M_E3 Кнопки и unicode для кнопок
-------------------------------------------------------------*/

/* M_E3.1 */
html.mobile .post-links a:before, html.mobile .topic a.sharelink:before  {
  font-size: 6vw;    
  padding: 0 3vw;
  color: #557fae;
}

/* M_E3.2 */
html.mobile .pl-email:nth-child(1) a:before {content: '\1F464';}

/* M_E3.3 */
html.mobile .pl-email:nth-child(2) a:before {content: '\1F582'; color: #000000;}

/* M_E3.4 */
html.mobile .pl-email:nth-child(3) a:before, html.mobile #pun-messages .pl-email:nth-child(1) a:before {content: '\0040';}

/* M_E3.5 */
html.mobile .pl-website a:before {content: '\1F310';}

/* M_E3.6 */
html.mobile .pl-delete a:before {content: '\2718';color :red;}

/* M_E3.7 */
html.mobile .pl-edit a:before {content: '\270E';color: #000000;}

/* M_E3.8 */
html.mobile .pl-quote a:before {content: '\1F677';}

/* M_E3.9 */
html.mobile .topic a.sharelink:before {content: '\003C';}

/* M_E3.10 */
html.mobile .pl-email:nth-child(3), html.mobile .pl-website {margin: 0 auto 0 0;}

/* M_E4 Настройки заголовка поста и тела поста
-------------------------------------------------------------*/

/* M_E4.1 */
html.mobile .topic a.sharelink {
  order: 3;
  font-size: 0;
  margin: 0 0 0 auto;
}

/* M_E4.2 */
html.mobile .punbb .post a.permalink {
  margin: 0 0 0 auto;
  color: #8B8989;
}

/* M_E4.3 */
html.mobile .post h3 strong {padding-left: 4.6vw;}

/* M_E4.4 Правка для поиска постов*/
html.mobile #pun-searchposts .post h3 strong {
 padding: 0;
 text-align: center;
 width: 100%;
 }
 
 /* M_E4.5 */
html.mobile .post h3 strong:before {
 content: 'Пост \2116';
 display: inline-block;
 }

/* M_E4.6 */
html.mobile .post-box {
  padding: 2vw 4vw;
  word-wrap: break-word;
}

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

/* M_E5.1 */
html.mobile .quote-box, html.mobile .code-box {
  margin: 3vw 1vw;
  padding: 2vw;
  color: #333;
  border-style: solid;
  border-width: 0 0 0 1.6vw;
  border-radius: 1.6vw;
  background-color: #F8F9Fb;
}

/* M_E5.2 */
html.mobile .quote-box cite, html.mobile .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
}

/* M_E5.3 */
html.mobile .punbb .code-box {
  background-color: #f7f7f7;
  color: #333;
  border-radius: 1.6vw;
  border: 0.4vw solid #ccc;
}

/* M_E5.4 */
html.mobile .punbb pre {font: 1.1em/140% Courier New, monospace;}

/* M_E5.5 */
html.mobile .scrollbox {
  width: 100%;
  overflow: auto;
}

/* M_E5.6 */
html.mobile .quote-box .quote-box {
  background: #ECF0F5;
}

/* M_E6 Настройки подписи, кода и спойлера
-------------------------------------------------------------*/

/* M_E6.1 */
html.mobile .post-sig {
  width: 90%;
  margin: 0 auto;
}

/* M_E6.2 */
html.mobile .post-sig dt {
  display: block;
  border-top: 1vw double #DADADA;
  width: 50%;
  margin: 2vw auto;
}

/* M_E6.3 */
html.mobile .post div.post-rating p.container, html.mobile .post-vote .container {
  border: solid 0.4vw #e9e9e9 !important;
  background-color: #f4f4f4;
  border-radius: 1vw;
}

/* M_E6.4 */
html.mobile .post-rating a {
  display: inline-block; 
  margin: 0 auto;
}

/* M_E7 Modmenu, нумерация страниц
-------------------------------------------------------------*/

/* M_E7.1 */
html.mobile #pun-viewforum .modmenu strong a, html.mobile .post-links a {font-size: 0;}

/* M_E7.1.1 Правка для поиска постов */
html.mobile #pun-searchposts .post-links a {
  font-size: 4vw;
  color: #FF0000;
  font-weight: 600;
  opacity: 0.8;
}

/* M_E7.1.2 Правка для поиска постов */
html.mobile #pun-searchposts .post-links ul li {width: 100%;text-align: center;}

/* M_E7.2 */
html.mobile #topic-modmenu strong, html.mobile #topic-modmenu span {
  padding: 0.5em 0;
  vertical-align: top;
  display: inline-block;
}

/* M_E7.3 */
html.mobile .modmenu:not(#topic-users-in) span {float: right;}

/* M_E7.4 */
html.mobile #topic-users-in span {display: block;}

/* M_E7.5 */
html.mobile #topic-modmenu {border-top: solid 0.4vw #eee;}

/* M_E7.6 */
html.mobile .modmenu {border-bottom: solid 0.4vw #eee;padding: 0.5em 1em;}

/* M_E7.7 */
html.mobile #pun-viewforum .modmenu strong {float: left;margin-top: -3.1vw;}

/* M_E7.8 */
html.mobile #pun-viewforum .modmenu strong a:before {
  content: '\1F6E0';
  font-size: 8vw;
  padding: 1vw;
  color: #20B2AA;
  border: 1vw solid #eee;
  border-radius: 2vw;
}

/* M_E7.9 */
html.mobile .linkst, html.mobile .linksb {
  text-align: right;
  padding: 0.4em 1em 1.5em 1em;
  font-size: 1.1em;
}

/* M_E7.13 */
html.mobile .linkst:after, html.mobile .linksb:after {
  content: " ";
  display: table;
  clear: both;
}

/* M_E7.11 */
html.mobile #pun-viewforum .linkst {padding-bottom: 4em;}
  
/* M_E7.12 */
html.mobile .postlink {
  float: right;
  width: 25.8vw;
  font-weight: bold;
  font-size: 2vw;
  text-align: center;
  color: #FF0000;
}

html.mobile .postlink a {display: block;font-size: 4vw;}

/* M_E7.14 */
html.mobile .pagelink {
  float: left;
  width: 70%;
  text-align: left;
}

/* M_E7.15 */
html.mobile .subscribelink {
  clear: both;
  padding-top: 6vw;
  padding-bottom: 0.5em;
  font-size: 3.8vw;
}

/* M_E8 Форма, вв-коды, кнопки
-------------------------------------------------------------*/

/* M_E8.1 */
html.mobile .formal:not(#similar-topics) h2 {display: none;}

/* M_E8.2 */
html.mobile .areafield {width: 100%;}

/* M_E8.3 */
html.mobile .punbb #main-reply {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

/* M_E8.4 */
html.mobile .punbb .main #form-buttons table tr {
  flex-flow: row wrap;
  justify-content: center;
  border-bottom: none;
}

/* M_E8.5 */
html.mobile #form-buttons td {
  margin: 0 0.2vw;
  padding: 0 2vw;
  line-height: 0;
  width: 5vw;
  border-bottom: solid 0.4vw #eee;
}

/* M_E8.6 */
html.mobile .formsubmit {margin: 1em 0;}

/* M_E8.7 */
html.mobile .formsubmit input[name="submit"] {float: left;margin-left: 2vw;}

/* M_E8.8 */
html.mobile .formsubmit input[name="preview"] {float: right;margin-right: 2vw;}

/* M_E9 ВВ-коды
-------------------------------------------------------------*/

/* M_E9.1 */
html.mobile .fs-box {position: relative;}

/* M_E9.2 */
html.mobile div[id$="-area"] {
    border-radius: 1vw;
    background: #fcfcfc;
    border: 0.4vw solid #ccc;
}

/* M_E9.3 */
html.mobile div[id$="-area"] div {padding: 1vw 0; text-align: center; border-bottom: solid 0.4vw #eee;}

/* M_E9.4 */
html.mobile #font-area {
  margin: 0 25vw 0 0;
  left: 3.5vw;
  top: 7.6vw;
}

/* M_E9.5 */
html.mobile #size-area {
  margin: 0 50vw 0 0;
  left: 13vw;
  top: 7.6vw;
}

/* M_E9.6 */
html.mobile #size-area div {margin-top: 4vw;}

/* M_E9.7 */
html.mobile #image-area, html.mobile #video-area, html.mobile #smilies-area, html.mobile #keyboard-area {left: 0vw;}

/* M_E9.8 */
html.mobile #image-area, html.mobile #video-area, html.mobile #color-area, html.mobile #smilies-area, html.mobile #keyboard-area {width: 91vw;}

/* M_E9.9 */
html.mobile .punbb div#color-area {left: 3.6vw;border: none;}

/* M_E9.10 */
html.mobile .punbb .main div#color-area table tr {margin: 0;}

/* M_E9.11 */
html.mobile #image-area, html.mobile #video-area, html.mobile #color-area {top: 15.4vw;}

/* M_E9.12 */
html.mobile .punbb .main #image-area-tcon-computer table tr, html.mobile .punbb .main #color-area table tr, html.mobile .punbb .main #table-area table tr {flex-flow: row wrap;}

/* M_E9.13 */
html.mobile textarea#video-area-tinp, html.mobile textarea#image-area-tinp, html.mobile div[id$="-area"] div#load-image-container {padding: 0;}

/* M_E9.14 */
html.mobile .punbb #imageupload-right {max-width: 52%;}

/* M_E9.15 */
html.mobile .punbb .main #table-area table tr {margin: 0;}

/* M_E9.16 */
html.mobile #table-area {right: 4vw;top: 15.4vw;}

/* M_E9.17 */
html.mobile #smilies-area, html.mobile #keyboard-area, html.mobile #addition-area {top: 22.8vw;}

/* M_E9.18 */
html.mobile #addition-area {right: 0vw;}

/* M_E9.19 */
html.mobile #pun-messages #post-form div[id$="-area"].container {padding-left: 0;}

/* M_E9.20 */
html.mobile .punbb #color-area td img, html.mobile .punbb #table-area td img {
  width: 10vw;
  height: 10vw;
  outline: solid 0.8vw #191970;
  margin: 0.5vw;
}

/* M_E10 Похожие темы
-------------------------------------------------------------*/

/* M_E10.1 */
html.mobile #similar-topics div.container {padding: 1em !important;}

/* M_E10.2 */
html.mobile #similar-topics table tr {display: table-row;}

/* M_E10.3 */
html.mobile #similar-topics td.st-tc2 {display: none;width: 0;}

/* M_E10.4 */
html.mobile .punbb #similar-topics td.st-tcr {
  padding-right: 0;
  width: auto;
}

/*************************************************************
M_F - Профиль
**************************************************************/

/* M_F1.1 */
html.mobile #profilenav ul li {width: 50%;text-align: center;}

/* M_F1.2 */
html.mobile #profilenav ul li:nth-child(2n) {margin: 0 auto 0 0;}

/* M_F1.3 */
html.mobile #profilenav ul li a {
  padding: 1vw 2vw;
  margin-bottom: 1vw;
  display: inline-block;
  width: 80%;
  font-weight: 600;
  border-radius: 0.8vw;
  background: #dfdfdf;
  background: -moz-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  background: -webkit-linear-gradient(top, #dfdadf 0%, #fbfbfb 100%);
  border: 0.2vw solid #ccc;
  overflow: visible;
}

/*************************************************************
M_G -  Статистика форума, Участники, Поиск, ЛС
**************************************************************/

/* M_G1 Общее для стaтистики форума, Участники, Поиск, ЛС
-------------------------------------------------------------*/

/* M_G1.1 */
html.mobile #pun-statistic.punbb .main table tr, html.mobile #pun-userlist.punbb .main table tr, html.mobile #pun-messages.punbb .main table tr {flex-flow: row wrap;}

/* M_G1.2 */
html.mobile #pun-statistic tr .tcl {border: none;font-weight: 600;}

/* M_G1.3 */
html.mobile #pun-statistic tr .tcl, html.mobile #pun-statistic tr .tc2, html.mobile #pun-userlist tr .tcl, html.mobile #pun-userlist tr .tc2 {
  width: 50% !important;
  flex-basis: auto;
  padding: 0;
  margin-left: 0;
  margin-bottom: 4vw;
  text-align: center !important;
}

/* M_G1.4 */
html.mobile #pun-statistic tr .tc3 {
  width: 32.7% !important; 
  text-align: center;
  border-top: 0.8vw dotted #F5F5F5;
  padding: 3vw 0;
}

/* M_G1.5 */
html.mobile #pun-statistic tr td:before, html.mobile #pun-userlist tr td:before {
  display: block;
  text-align:center;
  font-size: 3vw;
  color: rgba(139, 137, 137, 0.9);
  padding-bottom: 1vw;
}

/* M_G1.6 */
html.mobile #pun-statistic tr td:nth-child(3):before, html.mobile #pun-userlist tr td:nth-child(5):before {content: 'Зарегистрирован:';}

/* M_G1.7 */
html.mobile #pun-statistic tr td:nth-child(4):before, html.mobile #pun-userlist tr td:nth-child(4):before {content: 'Сообщений:';}

/* M_G2 Администрация, Приглашающие, Участники
-------------------------------------------------------------*/

/* M_G2.1 */
html.mobile #administration tr td:nth-child(5):before, html.mobile #most_invitations tr td:nth-child(5):before, html.mobile #pun-userlist tr td:nth-child(6):before {content: 'Был:';}

/* M_G2.2 */
html.mobile #pun-statistic #most_invitations tr td:nth-child(4):before {content: 'Приглашений:';}

/* M_G3 Самые активные, Самые неотлучные
-------------------------------------------------------------*/

/* M_G3.1 */
html.mobile #most_active tr td:nth-child(5):before {content: '% Сообщений форума:';}

/* M_G3.2 */
html.mobile #most_connected tr td:nth-child(5):before {content: 'Провел на форуме:';}

/* M_G4 Самые читаемые темы, Самые комментируемые темы
-------------------------------------------------------------*/

/* M_G4.1 */
html.mobile #pun-statistic #most_viewed_topics tr .tc3, html.mobile #pun-statistic #most_replied_topics tr .tc3 {width: 50% !important;}

/* M_G4.2 */
html.mobile #pun-statistic #most_viewed_topics tr td:nth-child(3):before, html.mobile #pun-statistic #most_replied_topics tr td:nth-child(3):before {content: 'Ответов:';}

/* M_G4.3 */
html.mobile #pun-statistic #most_viewed_topics tr td:nth-child(4):before, html.mobile #pun-statistic #most_replied_topics tr td:nth-child(4):before {content: 'Просмотров:';}

/* M_G5 Участники
-------------------------------------------------------------*/

/* M_G5.1 */
html.mobile #pun-userlist tr, html.mobile #pun-messages tr {justify-content: space-between;align-items: center;}

/* M_G5.2 */
html.mobile #pun-userlist tr .tcl {border: none;font-weight: 600;}

/* M_G5.3 */
html.mobile #pun-userlist tr span>a, html.mobile #pun-messages tr a {display: inline-block;margin-top: 1.6vw;}

/* M_G5.4 */
html.mobile #pun-userlist tr .tc3 {border-top: 0.8vw dotted #F5F5F5;text-align: center;}

/* M_G5.5 */
html.mobile #pun-userlist tr td:nth-child(3):before {content: 'Уважение:';}

/* M_G6 ЛС и Поиск
-------------------------------------------------------------*/

/* M_G6.1 */
html.mobile #pun-messages.punbb .main table .tcl, html.mobile #pun-messages.punbb .main table .tc3 {width: 62% !important;}

/* M_G6.2 */
html.mobile #pun-messages.punbb .main table .tc2 {width: 35% !important;}

/* M_G6.3 */
html.mobile #pun-messages .tc2 {text-align: right;}

/* M_G6.4 */
html.mobile #pun-messages .user-avatar {margin-top: -5vw;padding: 3vw 0;}

/* M_G6.5 */
html.mobile #pun-messages .pmtc33 {text-align: center;}

/* M_G6.6 */
html.mobile #pun-messages th {display: none;}

/* M_G6.7 */
html.mobile #pun-messages.punbb .main table th.pmtc24 {width: 100% !important;display: block;}

/* M_G6.8 */
html.mobile #pun-messages .pl-quote a:before {content: 'Ответить';}

/* M_G6.9 */
html.mobile #pun-searchposts .post h3 span {text-align: center;}


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

/* D6.1 */
html.mobile #pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
display: none
  }

/* D6.2 */
html.mobile #pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  }

/* D6.3 */
html.mobile #pun-announcement .container {
    background: var(--base-page);
  padding: 0.6em 0.2em 0.2em 0.2em;
text-align: center;
 margin: 0 auto;
 /*margin-bottom: -5px !important;*/

  }

  html.mobile .header_wrap {
    display: flex;
    justify-content: space-between;
    gap: 5px;
  }
  
  html.mobile .header_item.text {
    flex: 1;
    border: 1px solid var(--tab-border);
    background: var(--tab-bg);
    padding: 3px 5px;
    text-align: justify;
    height: 100px;
    overflow-y: auto;
    font-size: 10px;
    line-height: 120%;
  }
  
  html.mobile .header_item.text:first-letter, html.mobile .header_item.text b {
    font: 600 14px var(--font);
  }
  
  html.mobile .header_item.text span {
  width: 100%;
  text-align: right;
    text-transform: uppercase;
    font: 600 12px var(--font);
    display: inline-block;
  }
  
  html.mobile .header_item.text span a {  
  width: 100%;
  text-align: right;
  text-transform: uppercase;
    font: 600 11px var(--font);
    display: inline-block;
  }
  
  html.mobile .header_item.needed {
    width: 76px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
  }
  
  html.mobile .header_item.needed span {
    font: 700 14px var(--font);
    display: block;
    width: 100%;
    background: var(--tab-bg);
    padding: 2px 0;
    margin-bottom: 3px;
  }
  
  html.mobile .header_item.needed a {
    display: block;
    line-height: 0;
    border: none;
    padding: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--need-border);
  }
  
  html.mobile .header_item.needed img {
    filter: grayscale(100%) brightness(.6);
    width: 34px;
    height: 34px;
    object-fit: cover;
    line-height: 0 !important;
    transition: all .5s linear 0s;
  }
  
  html.mobile .header_item.needed img:hover {
    filter: none
  }
  
  html.mobile .header_item.stories{
  margin-left: -2em;
  margin-top: 5px;
  /*margin-bottom: -2px;*/
     text-transform: uppercase;
    font: 600 0.5em var(--font);
  }
  
  html.mobile .header_item.stories span{
   background: var(--tab-bg);
  padding: 2px 3px;
  white-space: normal;
  }


  /* ROOT */

  html.MOBILE :root {
    --base-bg: #000305;
    --pun-bg: #d6d6d6;
    --pun-image: url(https://forumstatic.ru/files/001b/b2/02/61656.jpg);
    --title: url(https://forumstatic.ru/files/001b/b2/02/68283.jpg);
    --foo: url(https://images2.imgbox.com/a6/ff/jro15ELU_o.png);
    --crumbs: url(https://forumstatic.ru/files/001b/b2/02/89979.png);
    --status: url(https://forumstatic.ru/files/001b/b2/02/82332.png);
    --category: url(https://forumstatic.ru/files/001b/b2/02/55326.png);
    
    --crumbs-a:#a59d61;
    --crumbs-ah: #b8bbb9;
    --crumbs-text: #b8bbb9;
    
    --font: Cormorant Unicase;
    
    --redir: url(https://forumupload.ru/uploads/001b/28/98/2/261215.png);
    
    --text: #353535;
    --link: #646666;
    --link2: #57653e;
    
    --nav-a: #968b72;
    --nav-drop: 0 0 10px #000, 0 0 5px #000, 0 0 40px #000;
    --nav-ah: #a59d61;
    --nav-drop-h: 0 0 15px #a0964e;
    
    --ul-a: #b8bbb9;
    --ul-ah: #968b72;
    
    --profile: url(https://images2.imgbox.com/fd/c8/b7N0WlW8_o.png) no-repeat bottom, url(https://images2.imgbox.com/19/f2/m0TsKG47_o.jpg) no-repeat top, url(https://forumstatic.ru/files/001b/b2/02/46236.jpg);
    
    --profile-on: url(https://images2.imgbox.com/f3/15/wrMJk0O5_o.png) no-repeat bottom, url(https://images2.imgbox.com/19/f2/m0TsKG47_o.jpg) no-repeat top, url(https://forumstatic.ru/files/001b/b2/02/46236.jpg);
    --p-name-a: #d0d1c1;
    --p-name-ah: #a59061;
    --profile-text: #788979;
    --p-link: #a59061:
    --p-link-h: #788979;
    
    --textarea: #c3c3c3;
    --border: #9c9c9c;
    --cita: rgba(208,208,208,.95);
    
    --h1: #3a3c40;
    --h1-border: #bbb9b9;
    
    --old: url(https://forumstatic.ru/files/001b/b2/02/16448.png);
    --new: url(https://forumstatic.ru/files/001b/b2/02/21310.png);
    --imp: url(https://forumstatic.ru/files/001b/b2/02/39564.png);
    --close: url(https://forumstatic.ru/files/001b/b2/02/72490.png);
    
    --button-bg: #565730;
    --button-border: #787366;
    --button-drop: 0 0 0 1px #565730 inset, 0 0 0 2px #6e703e inset, 0 0 10px 0px #9a9385, 0 0 10px 0 rgba(255,255,255,.2) inset;
    --button-text: #d7d7d7;
    
    --button-bg2: #454625;
    --button-border2: #787366 ;
    --button-drop2: 0 0 0 1px #454625 inset, 0 0 0 2px #6e703e inset, 0 0 10px 0px #9a9385, 0 0 10px 0 rgba(255,255,255,.2) inset;
    
    --h3: #2e2b28;
    --h3-h: #6a743b;
    --tcl: rgba(0,0,0,.04);
    --tcl-border: #a8a8a8;
    --tclcon: rgba(255,255,255,.1);
    --divider: url(https://forumstatic.ru/files/001b/b2/02/28532.jpg);
    --icon: url(https://forumstatic.ru/files/001b/b2/02/16448.png);
    --icon2: url(https://forumstatic.ru/files/001b/b2/02/21310.png);
    
    --fnt-bg: #c5c5c5;
    --fnt-out: #9d9d9d;
    --fnt-fill:#6b752d;
    --fnt-fill-border:#4d5613;
    
    --check-bg: #B88A46;
    --check-drop: 0 0 0 1px #A87E40 inset;
    
    --img-sp: url(https://forumstatic.ru/files/001b/b2/02/66273.jpg);
    --img-sp-drop: 0 0px 0px 0 #4f5723 inset;
    --img-sp-drop2: 0 -4px 10px 0 #4f5723 inset;
    
    --nav-button-text: #8f836a;
    --nav-button-bg: #131417;
    --nav-button-drop: 0 0 8px #6b6f70;
    --nav-box: #020506;
    --nav-box-border: #061510;
    --nav-box-a: #0f201d;
    --nav-box-ah: #233021;
    
    --tab-border: #9f9f9f;
    --tab-bg: rgba(0,0,0,.1);
    --need-border: #6a6a6a;
    
    --game-info: #535656;
    
    --header-text: #bbb2a3;
    --header-a: #a59061;
    --header-ah: #bbb2a3;
    
    --up: url(https://forumstatic.ru/files/001b/b2/02/81957.png);
    --down: url(https://forumstatic.ru/files/001b/b2/02/80392.png);
    }

  html.mobile .cosmos {
    --base-bg: #000305;
    --pun-bg: transparent;
    --bodybg: #050405;
    --pun-image: transparent;
    --base-page: #f4f3f1;
    --title: url(http://forumstatic.ru/files/001b/b3/4b/15227.png);
    --foo: url(http://forumupload.ru/uploads/001b/b3/4b/2/714543.png);
    --crumbs: url(http://forumupload.ru/uploads/001b/b3/4b/2/807239.png);
    --status: url(http://forumupload.ru/uploads/001b/b3/4b/2/607266.png);
    --category: url(http://forumupload.ru/uploads/001b/b3/4b/2/880885.png);
    --base-border: url(http://forumstatic.ru/files/001a/fb/3d/17136.png);
    
    --crumbs-a:#b5a0bd;
    --crumbs-ah: #b8bbb9;
    --crumbs-text: #b8bbb9;
    
    --text: #353535;
    --link: #646666;
    --link2: #7f628a;
    
    --font: Cormorant Unicase;
    
    --redir: url(https://forumupload.ru/uploads/001b/28/98/2/261215.png);
    
    --nav-a: #b79f89;
    --nav-drop: 0 0 10px #000, 0 0 5px #000, 0 0 40px #000;
    --nav-ah: #ffce9c;
    --nav-drop-h: 0 0 15px #ce80eb;
    
    --ul-a: #b8bbb9;
    --ul-ah: #968b72;
    
    --profile: url(http://forumupload.ru/uploads/001b/b3/4b/2/779336.png) no-repeat left bottom, url(http://forumupload.ru/uploads/001b/b3/4b/2/300706.png) no-repeat left top, url(http://forumupload.ru/uploads/001b/b3/4b/2/761660.png) repeat-y;
    --profile-on: url(http://forumupload.ru/uploads/001b/b3/4b/2/442545.png) no-repeat left bottom, url(http://forumupload.ru/uploads/001b/b3/4b/2/300706.png) no-repeat left top, url(http://forumupload.ru/uploads/001b/b3/4b/2/761660.png) repeat-y;
    --p-name-a: #d0d1c1;
    --p-name-ah: #a59061;
    --profile-text: #79727b;
    --p-link: #bfa69b;
    --p-link-h: #79727b;
    
    --textarea: #c3c3c3;
    ---border: #9c9c9c;
    
    --cita: rgba(208,208,208,.5);
    
    --h1: #3a3c40;
    --h1-border: #bbb9b9;
    
    --old: url(https://forumstatic.ru/files/001b/b2/02/16448.png);
    --new: url(https://forumstatic.ru/files/001b/b2/02/21310.png);
    --imp: url(https://forumstatic.ru/files/001b/b2/02/39564.png);
    --close: url(https://forumstatic.ru/files/001b/b2/02/72490.png);
    
    --button-bg: #574e57;
    --button-border: #352f34;
    --button-drop:  0 0 0 1px #584d4a inset, 0 0 0 2px #6d666d inset, 0 0 10px 0px #9a9385, 0 0 10px 0 rgba(255,255,255,.2) inset;
    --button-text: #dfd0c6e1;
    
    --button-bg2: #594b49;
    --button-border2: #787366;
    --button-drop2: 0 0 0 1px #433549 inset, 0 0 0 2px #6c5f79 inset, 0 0 10px 0px #9a9385, 0 0 10px 0 rgba(255,255,255,.2) inset;
    
    --h3: #2e2b28;
    --h3-h: #654a6f;
    --tcl: rgba(0,0,0,.04);
    --tcl-border: #a8a8a8;
    --tclcon: rgba(255,255,255,.1);
    --divider: url(http://forumupload.ru/uploads/001b/b3/4b/2/63637.png);
    --icon: url(https://forumstatic.ru/files/001b/b2/02/16448.png);
    --icon2: url(https://forumstatic.ru/files/001b/b2/02/21310.png);
    
    --fnt-bg: #c5c5c5;
    --fnt-out: #9d9d9d;
    --fnt-fill:#7f628a;
    --fnt-fill-border:#2d1c34;
    
    --check-bg: #B88A46;
    --check-drop: 0 0 0 1px #A87E40 inset;
    
    --img-sp: url(http://forumupload.ru/uploads/001b/b3/4b/2/14706.png);
    --img-sp-drop: 0 0px 0px 0 #78687f inset;
    --img-sp-drop2: 0 -4px 10px 0 #78687f inset;
    
    --nav-button-text: #d1c0b5e1;
    --nav-button-bg: #131417;
    --nav-button-drop: 0 0 8px #6b6f70;
    --nav-box: #020506;
    --nav-box-border: #3d2d48;
    --nav-box-a: #2a2231;
    --nav-box-ah: #53455d;
    
    --tab-border: #9f9f9f;
    --tab-bg: rgba(0,0,0,.1);
    --need-border: #6a6a6a;
    
    --game-info: #535656;
    
    --up: url(http://forumupload.ru/uploads/001b/b3/4b/2/495471.png);
    --down: url(http://forumupload.ru/uploads/001b/b3/4b/2/320636.png);

    --header-text: #bbb2a3;
    --header-a: #d1c0b5e1;
    --header-ah: #e2c5b2e1;
    }

    html.mobile #u-panel {
        display: none !important;
      }

      html.mobile .green {
        --base-bg: #000305;
        --pun-bg: #d6d6d6;
        --pun-image: url(https://forumstatic.ru/files/001b/b2/02/61656.jpg);
        --title: url(https://forumstatic.ru/files/001b/b2/02/68283.jpg);
        --foo: url(https://images2.imgbox.com/a6/ff/jro15ELU_o.png);
        --crumbs: url(https://forumstatic.ru/files/001b/b2/02/89979.png);
        --status: url(https://forumstatic.ru/files/001b/b2/02/82332.png);
        --category: url(https://forumstatic.ru/files/001b/b2/02/55326.png);
        
        --crumbs-a:#a59d61;
        --crumbs-ah: #b8bbb9;
        --crumbs-text: #b8bbb9;
        
        --font: Cormorant Unicase;
        
        --redir: url(https://forumupload.ru/uploads/001b/28/98/2/261215.png);
        
        
        --text: #353535;
        --link: #646666;
        --link2: #57653e;
        
        --nav-a: #968b72;
        --nav-drop: 0 0 10px #000, 0 0 5px #000, 0 0 40px #000;
        --nav-ah: #a59d61;
        --nav-drop-h: 0 0 15px #a0964e;
        
        --ul-a: #b8bbb9;
        --ul-ah: #968b72;
        
        --profile: url(https://images2.imgbox.com/fd/c8/b7N0WlW8_o.png) no-repeat bottom, url(https://images2.imgbox.com/19/f2/m0TsKG47_o.jpg) no-repeat top, url(https://forumstatic.ru/files/001b/b2/02/46236.jpg);
        
        --profile-on: url(https://images2.imgbox.com/f3/15/wrMJk0O5_o.png) no-repeat bottom, url(https://images2.imgbox.com/19/f2/m0TsKG47_o.jpg) no-repeat top, url(https://forumstatic.ru/files/001b/b2/02/46236.jpg);
        --p-name-a: #d0d1c1;
        --p-name-ah: #a59061;
        --profile-text: #788979;
        --p-link: #a59061:
        --p-link-h: #788979;
        
        --textarea: #c3c3c3;
        --border: #9c9c9c;
        --cita: rgba(208,208,208,.95);
        
        --h1: #3a3c40;
        --h1-border: #bbb9b9;
        
        --old: url(https://forumstatic.ru/files/001b/b2/02/16448.png);
        --new: url(https://forumstatic.ru/files/001b/b2/02/21310.png);
        --imp: url(https://forumstatic.ru/files/001b/b2/02/39564.png);
        --close: url(https://forumstatic.ru/files/001b/b2/02/72490.png);
        
        --button-bg: #565730;
        --button-border: #787366;
        --button-drop: 0 0 0 1px #565730 inset, 0 0 0 2px #6e703e inset, 0 0 10px 0px #9a9385, 0 0 10px 0 rgba(255,255,255,.2) inset;
        --button-text: #d7d7d7;
        
        --button-bg2: #454625;
        --button-border2: #787366 ;
        --button-drop2: 0 0 0 1px #454625 inset, 0 0 0 2px #6e703e inset, 0 0 10px 0px #9a9385, 0 0 10px 0 rgba(255,255,255,.2) inset;
        
        --h3: #2e2b28;
        --h3-h: #6a743b;
        --tcl: rgba(0,0,0,.04);
        --tcl-border: #a8a8a8;
        --tclcon: rgba(255,255,255,.1);
        --divider: url(https://forumstatic.ru/files/001b/b2/02/28532.jpg);
        --icon: url(https://forumstatic.ru/files/001b/b2/02/16448.png);
        --icon2: url(https://forumstatic.ru/files/001b/b2/02/21310.png);
        
        --fnt-bg: #c5c5c5;
        --fnt-out: #9d9d9d;
        --fnt-fill:#6b752d;
        --fnt-fill-border:#4d5613;
        
        --check-bg: #B88A46;
        --check-drop: 0 0 0 1px #A87E40 inset;
        
        --img-sp: url(https://forumstatic.ru/files/001b/b2/02/66273.jpg);
        --img-sp-drop: 0 0px 0px 0 #4f5723 inset;
        --img-sp-drop2: 0 -4px 10px 0 #4f5723 inset;
        
        --nav-button-text: #8f836a;
        --nav-button-bg: #131417;
        --nav-button-drop: 0 0 8px #6b6f70;
        --nav-box: #020506;
        --nav-box-border: #061510;
        --nav-box-a: #0f201d;
        --nav-box-ah: #233021;
        
        --tab-border: #9f9f9f;
        --tab-bg: rgba(0,0,0,.1);
        --need-border: #6a6a6a;
        
        --game-info: #535656;
        
        --header-text: #bbb2a3;
        --header-a: #a59061;
        --header-ah: #bbb2a3;
        
        --up: url(https://forumstatic.ru/files/001b/b2/02/81957.png);
        --down: url(https://forumstatic.ru/files/001b/b2/02/80392.png);
        }



        /* Элементы диза */
        html.MOBILE .punbb {
            height: auto;
            margin: 0px 100px;
          padding: 0px 0px;
            width: auto;
        }    
        html.mobile #pun {
            background: var(--pun-bg);
            margin: auto;
          box-sizing: border-box;
          background-size: cover;
          background-repeat: repeat-y;
        }
          html.mobile #pun-title {
            border: 0;
                width: 100% !important;
                min-height: 250px;
                padding: 0 !important;
                margin: 0 auto !important;
                background-image: var(--title);
                background-position: top center;
            background-size: cover;
            z-index: -999;
            }
            
            html.mobile .cosmos #pun-title {
                min-height: 180px !important;  
            }

            html.mobile .multipage {
                width: 90%;
                margin: auto;
                background-color: var(--base-page);
                background-repeat: repeat;
                  margin-top: 3em;
                border: 12px solid #B0A793;
                border-image-source: var(--base-border);
                border-image-slice:29 29 29 29;
                border-image-width:12px 12px 12px 12px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:repeat repeat;
                }

            html.mobile div.inner.post_reputation
            {
                width: 90%;
                margin: auto;
                background-color: var(--base-page);
                background-repeat: repeat;
                  margin-top: 3em;
                border: 12px solid #B0A793;
                border-image-source: var(--base-border);
                border-image-slice:29 29 29 29;
                border-image-width:12px 12px 12px 12px;
                border-image-outset:0px 0px 0px 0px;
                border-image-repeat:repeat repeat;
            }
            html.mobile #pun-about p.container {
                max-height: 200px;
                border: 0;
                width: 100% !important;
                margin: 0 auto;
                padding: 0 !important;
                background: var(--foo) no-repeat bottom;
                background-size: cover;
                background-position: center;
            background-repeat: no-repeat;
            }
            html.mobile #navbar-wrap {
                position: absolute;
                width: 30%;
                margin-left: 70% !important;
                top: 80px;
                font: 600 12px var(--font);
                text-transform: uppercase;
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 5px;
                z-index: 1000;
            }
            html.mobile .navbar_inner a {
                font-size: 10px;
            }
            html.mobile .go-down {
                top: 400px;
                margin-left: 60% !important;
                background: var(--down) no-repeat center;
            }
            html.mobile .go-up {
                top: 300px;
                margin-left: 60% !important;
                background: var(--up) no-repeat center;
            }

            html.mobile #pun-status a {
                color: var(--crumbs-a);
              }
              
              html.mobile #pun-status a:hover {
                color: var(--nav-a)
              }

              html.mobile .navbar_button {
                color: var(--nav-button-text);
                background: var(--nav-button-bg);
                box-shadow: var(--nav-button-drop);
                padding: 5px 0;
                cursor: pointer;
              }
              
              html.mobile .navbar_container {
                display: none;
                background: var(--nav-box);
                border: 1px solid var(--nav-box-border);
                padding: 5px;
              }

              html.mobile .navbar_inner {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 5px;
              }
              
              html.mobile .navbar_inner a {
                flex: auto;
                background: var(--nav-box-a);
                padding: 2px;
                font-size: 0.7rem;
                transition: all .6s linear 0s !important;
                box-sizing: border-box;
              }
              
              html.mobile .navbar_inner a:hover {
                background: var(--nav-box-ah)
              }

              html.mobile #html-header {
                color: var(--header-text);
                text-shadow: 1px 1px 1px #222
                }
                
                html.mobile #html-header a {
                color: var(--header-a)
                }
                
                html.mobile #html-header a:hover {
                color: var(--header-ah)
                }

                html.mobile #pun-announcement .container {
                              width:90% !important;
                 margin: 0 auto;
                 border: 12px solid #B0A793;
                                border-image-source: var(--base-border);
                                border-image-slice:29 29 29 29;
                                border-image-width:12px 12px 12px 12px;
                                border-image-outset:0px 0px 0px 0px;
                                border-image-repeat:repeat repeat;
                                margin-top: 1.5em !important;
                                z-index: 1200;
                
                  }

                  html.mobile #stylelist {
                    position: absolute;
                    top: 80px;
                    margin-left: 0px;
                    color: var(--game-info);
                    font-size: 10px;
                    display: flex;
                    z-index: 1000;
                    flex-direction: column;
                    gap: 1em;
                    width: 20%;
                  }

                  html.mobile #stylelist li {
                    color: var(--nav-button-text);
                    background: var(--nav-button-bg);
                    box-shadow: var(--nav-button-drop);
                    font: 600 10px var(--font);
                    text-transform: uppercase;
                    text-align: center;
                    padding: 0px 5px
                  }
                  
                  html.mobile #stylelist li.active {
                    filter: brightness(.6)
                  }
                  
                  html.mobile #stylelist a {
                    display: block;
                    padding: 4px;
                  }

                  html.mobile #banners img {
                    filter: grayscale(100%) opacity(50%);
                    transition: all .5s linear 0s
                  }
                  
                  html.mobile #banners img:hover {
                    filter: none
                  }
                  
                  html.mobile #pun-index .subforums {
                    font-size: 0;
                    margin: 15px 0 5px
                  }
                  
                  html.mobile #pun-index .subforums a {
                    background: var(--tab-bg);
                    padding: 5px 8px;
                    text-transform: uppercase;
                    font: 700 11px var(--font);
                    
                  }