@font-face {
    font-family: 'dinpro';
    src: url('http://forumstatic.ru/files/001b/b6/34/80092.otf');
    font-style: normal;
    font-weight: 100;
  }
  
  
  @import url('https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined');
  @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
  .material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' 0,
  'opsz' 40
  }
  
  
  :root {
  --body: rgb(57 57 57);
  --pun: rgb(141 141 141);
  --input: rgb(140 140 140);
  --body_border: rgb(53 87 86);
  --pun_border: rgb(72 72 72);
  --accent: rgb(30 30 30);
  --forum: rgb(116 116 116);
  --background:  rgb(115 115 115);
  
  --lin: rgb(11 79 76);
  --hov_lin: rgb(96 63 96);
  --hov_text: rgb(172 172 172);
  
  --accent_hed: rgb(124 124 124);
  --border: 1px solid rgb(30 30 30);
  }
  
  
  /********************************** BASIC **********************************/
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    position:relative;
  }
  
  h1.title-logo, #pun-navlinks h2, #pun-ulinks h2, #pun-status h2, 
  #pun-crumbs1 .container.crumbs strong, #pun-crumbs1 .container.crumbs em:nth-child(2), #pun-crumbs2 .container.crumbs strong, 
  #pun-break1, #pun-break2, #pun-break3, #pun-break4, #pun-index #pun-main h1, #pun-main .category table thead, 
  ::marker, .punbb .multipage .topic h2, .acchide, #pun-pagelinks h2, .punbb .forum h2, 
  .punbb dl.post-sig dt span, .punbb p.crumbs strong, .punbb .divider hr, .punbb .required label em, .punbb .formsubmit label, .punbb .submitfield label, .punbb .modmenu label, 
  #pun-userlist .main h2
  {
    display: none;
  }
  ul li { 
    list-style-type: none; 
  }
  
  .punbb .post-links ul:after, .punbb .main div.inline:after, .punbb .post-box:after, .punbb .linksb:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    line-height: 0.0;
    font-size: 0;
  }
  
  table {
  border-spacing: 0;
  border-collapse: collapse;
  }
  
  a {
  text-decoration: none;
  color: var(--lin);
  }
  
  a:hover {
  text-decoration: none;
  color: var(--hov_lin);
  }
  
  body {
  background: var(--body);
  font-family: 'dinpro';
  font-size: 12px;
  color: rgb(29 29 29);
  }
  
  .punbb {
  width: 1000px;
  min-height: 500px;
  background: var(--pun);
  box-shadow: 0 0 0px 1px var(--pun_border);
  border: 7px solid var(--accent);
  margin: 710px auto 50px;
  outline: 1px solid var(--body_border);
  outline-offset: 25px;
  padding-bottom: 50px;
  }
  
  fieldset {
    border: none;
  }
  
  /* ---------------------------- Inputs & Buttons -------------------------------------- */
  
  .punbb textarea,
  .punbb input[type="number"],
  .punbb select,
  .punbb input[type="text"],
  .punbb input[type="password"],
  #s-block input {
    padding: 5px 10px !important;
    box-sizing: border-box;
    border: 1px solid var(--accent) !important;
    background: var(--input) !important;
    line-height: 130%!important;
    border-radius: 0 !important;
  }
  
  .punbb select {
    cursor: pointer;
    padding-top: 7px;
  }
  
  .punbb select option {
    background: var(--background);
    background-size: 15%;
    border-radius: 0;
  }
  
  
  .punbb input[type="submit"],
  .punbb input[type="button"],
  .punbb button:not(.reaction-picker-button):not(.reaction-chip):not(.emoji-mart-anchor):not(.emoji-mart-anchor-selected):not(.emoji-mart-search-icon):not(.emoji-mart-emoji) {
    background: var(--accent);
    color: var(--accent_hed);
    padding: 3px 5px;
    cursor: pointer;
    transition: all .2s ease;
    -webkit-appearance: none;
    border: none;
  }
  
  .punbb input[type="submit"]:hover,
  .punbb input[type="button"]:hover {
    background: var(--hov_lin);
    color: var(--hov_text);
  }
  
  .punbb input[type="text"]:focus-visible,
  .punbb textarea:focus-visible,
  .punbb input[type="number"]:focus-visible,
  .punbb select:focus-visible,
  .punbb input[type="text"]:focus-visible,
  .punbb input[type="password"]:focus-visible {
  outline: none;
  }
  
  
  /* Scrollbar
  ------------------------------------------------------------------ */
  
  ::-webkit-scrollbar {
    width: 6px;
    height: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--accent_hed);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--accent);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--lin);
  }
  
  
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent);
  }
  
  
  
  div#pun-redirect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--pun);
    box-shadow: 0 0 0px 1px var(--pun_border);
    border: 7px solid var(--accent);
    padding: 20px;
    margin: auto;
    width: auto;
    min-height: auto;
  }
  
  #title-logo-table {
    content: url('https://taenee94.github.io/barsik-mursik/0123/img/shapca.png');
    width: 1184px !important;
    height: 527px;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #pun-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    background: var(--accent);
    box-shadow: 0 0 0px 1px var(--pun_border);
    border: 7px solid var(--accent);
   outline: 1px solid var(--body_border);
   outline-offset: 25px;
  }
  
  
  
  #pun-navlinks, #pun-ulinks {
    position: absolute;
    width: 1100px;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
  }
  
  #pun-navlinks {
    top: 10px;
  }
  
  #pun-ulinks {
    top: 40px;
  }
  
  #pun-ulinks ul.container {
    margin: 0;
  }
  
  #pun-navlinks li, #pun-ulinks li {
    display: inline-block;
    margin: 0 5px;
  }
  
  #pun-navlinks li a, #pun-ulinks li a {
    color: var(--pun);
    font-size: 18px;
    text-transform: uppercase;
  }
  
  #pun-navlinks li a:hover, #pun-ulinks li a:hover {
  color: rgb(138 112 141);
  }
  
  #pun-navlinks li a{
    font-size: 18px;
  }
  
  #pun-ulinks li a {
    font-size: 10px;
  }
  
  #pun-status {
    position: relative;
    top: -1px;
    left: -1px;
    background:var(--forum);
    border: var(--border);
    line-height: 25px;
    padding: 0 15px;
    margin-right: 20px;
  }
  #pun-status strong {
    font-weight: 300;
  }
  #pun-crumbs1, #pun-crumbs2 {
    padding: 20px;
  }
  
  #pun-crumbs2 {
    position: absolute;
    bottom: 55px;
  }
  
  /* ---- Улучшить аккаунт  ---- */
  #pun-status .item4.status-right {
    float: inherit;
    margin-left: 10px;
  }
  
  
  /* ---- Категории и форумы  ---- */
  #pun-main .category, #pun-stats {
    position: relative;
    left: -1px;
    background: var(--forum);
    border: var(--border);
    margin: 0 20px 20px 0;
  }
  
  .main .category h2, #pun-stats h2 {
    background: var(--accent);
    text-align: center;
    margin: 0px -1px 20px 0px;
    padding: 0 10px;
  }
  
  #pun-main .category h2 span, #pun-stats h2 span, .main h1 span {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--accent_hed);
    font-weight: 100;
    vertical-align: middle;
    line-height: 30px;
  }
  
  
  #pun-index .category tr {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #pun-main .category table td.tcl {
    position: relative;
    border: var(--border);
    border-left: none;
    border-right: 3px solid var(--accent);
    width: 55%;
  }
  
  #pun-main .category div.icon,
  #pun-main .category TR.inew Div.icon {
    width: 100.1%;
    height: 25px;
    position: absolute;
    top: 5px;
    left: 0;
  }
  
  Div.icon {
    background: var(--accent);
  }
  
  TR.inew Div.icon {
    background: var(--hov_lin) !important;
  }
  
  TR.isticky Div.icon {
    background: #8c8686;
  }
  
  TR.iclosed Div.icon {
    background: #595757;
  }
  
  .icon[data-new-topics]:before, .subforums span[data-new-topics]:before {
   background: var(--accent) !important;
    color: var(--pun) !important;
    top: 10px;
    left: 10px;
    border-radius: 0 !important;
    padding: 8px 5px !important;
    line-height: 2px !important;
  }
  
  #pun-main .category table td.tcl .tclcon h3 {
    position: relative;
    top: -8px;
    padding: 3px;
    text-align: center;
    height: 25px;
  }
  
  #pun-main .category table td.tcl .tclcon h3 a {
    font-size: 75%;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--accent_hed);
  }
  
  #pun-main .category table td.tcl .tclcon h3 a:hover {
    color: var(--hov_lin);
  }
  #pun-main .category table TR.inew td.tcl .tclcon h3 a {
    color: var(--hov_text);
  }
  #pun-main .category table TR.inew td.tcl .tclcon h3 a:hover {
    color: var(--accent_hed);
  }
  
  .forumDescription {
    max-height: 130px;
    width: 101%;
    overflow-y: auto;
    margin: 5px 0;
    padding-right: 10px;
  }
  
  #pun-main .category .tclcon {
    padding: 10px;
    text-align: justify;
    font-size: 14px;
  }


#pun-main .category .container table {
    width: 100%;
}
  
  #pun-main .category table td.tcr {
    width: 25%;
    position: relative;
    left: 1px;
    border: var(--border);
    border-right: none;
    text-align: center;
  }
  
  
  #pun-main .category table td.tcr .user-avatar {
    float: right;
    height: 60px;
    width: 60px;
    background: rgb(125 74 134);
    margin: -1px 0;
  }
  
  #pun-main .category table td.tcr .user-avatar span.avatar-image {
    height: 60px;
    width: 60px;
    border-radius: 0;
    opacity: 0.4;
    filter: sepia(1);
    border: var(--border);
  }
  
  #pun-main .category table td.tcr .user-avatar span.avatar-image:hover {
    filter: sepia(0);
    opacity: 1;
  }
  
  #pun-main .category table td.tcr .lastpost {
    font-size: 12px;
    vertical-align: middle;
    margin: 0 5px;
  }
  
  
  #pun-main .category table td.tcr a.lastpost-link {
    display: block;
    background: var(--accent);
    text-transform: uppercase;
    font-size: 13px;
    padding: 2px;
    width: 185px;
    margin: -1px;
    color: rgb(138 112 141);
  }
  
  #pun-main .category table td.tcr a.lastpost-link:hover {
    background: var(--hov_lin);
    color: var(--hov_text);
  }
  
  #pun-main .category table td.tcr br {
    display: none;
  }
  
  .punbb .user-avatar span.isonline {
    background: var(--lin);
    top: 52px;
    left: 0px;
    border-radius: 0;
  }
  
  #pun-main .category table .tc2, #pun-main .category table .tc3 {
    background: var(--accent);
    color: var(--accent_hed);
    min-width: 100px;
    padding: 2px 3px;
    font-size: 10px;
    text-align: center;
  }
  
  #pun-main .category table .tc2:before {
    content: 'Тем: ';
  }
  
  #pun-main .category table .tc3:before {
    content: 'Сообщений: ';
  }
  
  #pun-main .category table .tc2 {
    position: absolute;
    right: 288px;
    margin-bottom: 20px;
  }
  
  #pun-main .category table .tc3 {
    position: relative;
    top: 10px;
  }
  
  
  /* -----  СТАТИСТИКА ------*/
  #pun-stats ul.container {
    display: grid;
    padding: 0 15px 15px 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
        "item1 item2 item3 item4"
        "onlinelist onlinelist onlinelist onlinelist"
        "users_24h users_24h users_24h users_24h"
        "statistics statistics statistics statistics"
        "birthday birthday birthday birthday";
    justify-items: stretch;
  }
  
  #pun-stats li.item1 {grid-area: item1;}
  #pun-stats li.item2 {grid-area: item2;}
  #pun-stats li.item3 {grid-area: item3;}
  #pun-stats li.item4 {grid-area: item4;}
  #pun-stats li.item5.onlinelist {grid-area: onlinelist;margin: 25px 0 10px;}
  #pun-stats li.item5.users_24h {grid-area: users_24h;margin: 10px 0;}
  #pun-stats li.item5.statistics {grid-area: statistics;margin-top: 10px;}
  #pun-stats li.item6.birthday {grid-area: birthday; margin-top: 10px;}
  
  #pun-stats li.item1, #pun-stats li.item2, #pun-stats li.item3, #pun-stats li.item4 {
    display: inline-block;
    background: var(--accent);
    width: max-content;
    padding: 2px 5px;
    color: var(--accent_hed);
  }
  
  #pun-stats .statscon li.item4 span, #pun-stats .statscon li.item3 span {font-size: 0px;}
  #pun-stats .statscon li.item4 span:after, #pun-stats .statscon li.item3 span:after {
    content: '';
    font-size: 13px;
  }
  #pun-stats .statscon li.item4 span:after {content: 'С нами: ';}
  #pun-stats .statscon li.item3 span:after {content: 'Участников: ';}
  
  #pun-stats .statscon li strong {
    font-weight: 100;
  }
  
  #pun-stats .statscon li.item4 a {
    text-transform: uppercase;
    font-size: 10px;
    color: rgb(138 112 141);
  }
  
  #pun-about {
      position: absolute;
      margin: 10px auto;
      bottom: 22px;
      left: 50%;
      transform: translate(-50%);
      color: rgb(115 115 115);
      font-size: 12px;
  }
  
  #pun-about a {
    color: rgb(115 115 115);
  }
  
  /********************************** POSTS **********************************/
  
  .main h1 {
    background: var(--accent);
    text-align: center;
    margin-right: 20px;
    padding: 0 10px;
  }
  
  .main .linkst {
    position: relative;
  }
  
  .main .linkst .postlink, .main .linkst .pagelink {
    position: absolute;
    line-height: 25px;
  }
  
  .main .linkst .postlink {
    right: 35px;
    top: -30px;
  }
  
  .main .linkst .postlink a {
    color: rgb(138 112 141);
  }
  
  .main .linkst .pagelink {
    margin-left: 15px;
  }
  
  
  
  
  .punbb .post-body {
    margin: 15px 15px 15px 235px;
    text-align: justify;
  }
  
  .punbb .post .post-author {
    float: left;
    position: relative;
    width: calc(210px + 6px);
    height: 100%;
    text-align: center;
    background: var(--background);
    border: 1px solid var(--accent);
    margin: 0px 10px 10px -1px;
    padding-top: 9px;
    box-sizing: border-box;
    color: rgb(var(--body));
  }
  
  .indOnline, .indOffline {
    position: absolute;
    top: -1px;
    left: -1px;
    background: var(--lin);
    border: var(--border) !important;
    width: 10px;
    height: 10px;
    transition: all .2s ease;
    cursor: pointer;
  }
  
  .indOffline {
    background: var(--hov_lin);
  }
  
  .punbb .post .post-author .pa-author, #profile-left #profile-name {
    background: var(--accent);
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    padding: 3px 5px;
  }
  
  .punbb .post .post-author .pa-author a,  #profile-left #profile-name strong {
    color: var(--pun);
    font-weight: 100 !important;
  }
  
  
  .punbb .post .post-author .pa-title, #profile-title {
    font-size: 11px;
    margin: 5px;
  }
  
  .punbb .post .post-author .pa-online, .punbb .post .post-author .pa-last-visit {
    display: none;
  }
  
  .punbb .post .post-author .pa-posts, .punbb .post .post-author .pa-respect {
    display: inline-block;
    width: 108px;
    font-size: 11px;
    margin: -2px;
    position: relative;
    bottom: -1px;
    padding: 5px;
    overflow: auto;
    white-space: -moz-nowrap; /* Firefox */
    white-space: -o-nowrap; /* Opera */
    white-space: nowrap; /* Chrome */
  }
  
  .punbb .post .post-author .pa-respect {
  border-left: var(--border);
  }
  
  .punbb .post .post-author .pa-avatar:after, #pa-online {
    content: '';
    display: block;
    height: 15px;
    background: var(--accent);
    color: var(--accent_hed);
  }
  .punbb .post .post-author .pa-avatar:after, .punbb .post .post-author .pa-posts, .punbb .post .post-author .pa-respect, .punbb .post .post-author .pa-author {
    margin-right: -1px;
  } 
  
  .punbb .post .post-author .pa-avatar img, #pa-avatar img {
    margin-bottom: -2.5px;
    border: 1px solid var(--body_border);
    border-bottom: none;
    margin-left: -1px !important;
  }
  
  
  
  #pun-main .post h3, #pun-main .formal h2 {
    background: var(--background);
    border: 1px solid var(--accent);
    margin: 0px 20px -1px -1px;
    padding: 3px 10px;
  }
  
  #pun-main .post h3 span .permalink {
  margin-left: 230px;
  }
  
  .punbb .post h3 span strong {
    font-weight: normal;
    float: right;
    text-align: right;
    margin-top: 1px;
  }
  
  .punbb .post h3 span strong:before {
  content: 'Пост: ';
  }
  
  .topic a.sharelink {
    display: none;
  }
  
  .FNTslider {
    display: inline-block;
    float: right;
    position: relative;
    margin: 4px 16px 0 0 !important;
    background: var(--pun);
    width: 120px;
    height: 9px;
  }
  
  .FNTslider .before {
    height: 5px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--lin);
  }
  
  .FNTslider .thumb {
    width: 5px;
    height: 9px;
    position: relative;
    background: var(--lin);
    cursor: pointer;
  }
  
  .punbb .post-content {
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
  }
  
  
  .punbb .modmenu .container {
    padding: 1.5em 16px 0.5em;
    text-align: right;
    margin-top: 0;
  }
  .punbb .modmenu .container strong {
    float: left;
  }
  
  
  .punbb .post-links {
    margin: 15px !important;
  }
  
  body .punbb .post-links ul {
    text-align: right;
    padding: 0 24px !important;
  }
  
  .punbb .post-links li {
    display: inline;
  }
  
  .punbb .post-links li.pl-email, .punbb .post-links .pl-website {
    float: left;
    margin-right: 15px;
  }
  
  .punbb .post-links li.pl-delete a, .punbb .post-links li.pl-edit a, .punbb .post-links li.pl-quote a {
    color: var(--accent_hed);
  }
  
  .punbb .post-links li.pl-delete, .punbb .post-links li.pl-edit, .punbb .post-links li.pl-quote {
    background: var(--accent);
    padding: 3px 7px 4px;
    margin-left: 10px;
  }
  
  .punbb .post-links li.pl-delete:hover, .punbb .post-links li.pl-edit:hover, .punbb .post-links li.pl-quote:hover {
    background: var(--hov_lin);
    
  }
  .punbb .post-links li.pl-delete a:hover, .punbb .post-links li.pl-edit a:hover, .punbb .post-links li.pl-quote a:hover {
    color: var(--hov_text);
  }
  
  .punbb .post-body .post-content table td {
    border-collapse: collapse;
    border: 1px solid var(--pun_border);
  }
  
  .main .linkst .postlink, .main .linkst .pagelink {
    position: absolute;
    line-height: 25px;
  }
  
  .main .linkst .postlink {
    right: 35px;
    top: -30px;
  }
  
  .main .linkst .postlink a {
    color: rgb(138 112 141);
  }
  
  .main .linkst .pagelink {
    margin-left: 15px;
  }
  
  
  
  .punbb .post-content .quote-box, .punbb .post-content .code-box {
    background: var(--background);
    border: var(--border);
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .punbb .post-content .quote-box cite {
    color: var(--lin);
    font-weight: 600;
    font-size: 13px;
  }
  
  .punbb .post-content .code-box .blockcode, .punbb .post-content .code-box blockcode {
    margin-top: 15px;
    
  }
  
  .punbb .post-content .blockcode, .punbb .post-content blockquote {
    overflow: auto;
  }
  .punbb .post-body .post-box {
    padding-bottom: 50px;
  }
  
  
  /* -----  РЕЙТИНГ ПОСТА ------*/
  .punbb .post-rating {
    position: absolute;
    right: 10px;
    bottom: 17px;
    }
  .punbb .post-rating a {
    font-size: 12px !important;
    color: var(--body);
  }
  
  .post-vote {
    display: block !important;
    position: absolute !important;
    right: 20px;
    bottom: 0px;
  }
  .post-vote .container {
  float: right !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  top: 49px;
  right:0;
  }
  
  div.post-vote p {z-index: 2;}
  div.post-vote p a.negative {display: none;}
  div.post-vote p a.positive, div.post-vote p a.positive:hover {color: transparent;}
  div.post-vote p a.positive:after {color: var(--hov_lin);position: relative;font-size: 14px;font-family: 'Material Icons';content: '\e87d';border: 1px solid var(--forum);padding: 2px;}
  
  
  /* -----  РЕАКЦИИ ------*/
  #pun .post-body .reactions-container {flex-direction: row-reverse;justify-content: flex-start;margin-right: 14px;}
  #pun .post-body .reaction-picker-panel {right: 0;}
  #pun .post-body .emoji-mart {box-shadow: 2px 2px 10px var(--accent);background: var(--accent_hed);border: var(--border);border-radius: 0;}
  #pun .emoji-mart-bar {border:0px solid transparent;}
  #pun .post-body .reaction-chip {background-color: var(--pun);border: 1px solid var(--forum);border-radius: 1px;}
  #pun .post-body .reaction-picker-button {border-radius: 0px;width: 21px;height: 21px;padding: 5px;margin-top: 5px;border: 1px solid var(--forum);}
  #pun .post-body .reaction-picker-button svg {color: var(--hov_lin) !important;}
  #pun .post-body .reaction-chip.reaction-chip--clicked {background: var(--accent_hed);color: var(--lin);}
  #pun .emoji-mart-search input {margin-bottom: 6px;border: var(--border);box-shadow: none;background: var(--input);border-radius: 0px;color: var(--body_border);}
  #pun .emoji-mart-category-label span {background: none;}
  #pun .emoji-mart-anchor {color: var(--body);}
  #pun .emoji-mart-anchor.emoji-mart-anchor-selected {color: var(--hov_lin) !important;}
  #pun .reactions-root .emoji-mart-anchor-selected .emoji-mart-anchor-bar {background: var(--hov_lin) !important;}
  #pun .reactions-root .emoji-mart-category .emoji-mart-emoji:hover:before {background: var(--input);border-radius: 0;}
  
  
  /* -----  ФОРМА ОТВЕТА ------*/
  
  #pun-main .formal h2 {
     text-align: center;
     font-weight: 100;
  }
  
  .linksb {
    position: relative;
  }
  
  .linksb .subscribelink {
    position: absolute;
    right: 30px;
    top: 5px;
  }
  
  .linksb .postlink {
    display: none;
  }
  
  .linksb .pagelink {
    position: absolute;
    top: 5px;
    left: 15px;
  }
  
  form#post {
    background: var(--background);
    margin: 15px 20px 0 -1px;
    border: 1px solid var(--accent);
  }
  
  .punbb .formal fieldset legend {
    position: relative;
    background: var(--accent);
    width: 100%;
    color: var(--accent_hed);
    text-align: center;
    text-transform: uppercase;
    padding: 5px;
  }
  
  .punbb:not(#pun-admin_forums) form#post fieldset {border: none;}
  
  small#plng {
    position: absolute;
    right: 10px;
  }
  
  .punbb:not(#pun-admin_forums) .punbb .formal fieldset .fs-box {
    margin: 5px 15px;
  }
  
  .punbb:not(#pun-admin_forums) .punbb .formal fieldset .fs-box .input textarea {
    background: var(--input);
  }
  
  .punbb:not(#pun-admin_forums) form#post p.formsubmit {
    background: var(--accent);
    margin: -1px !important;
    text-align: center;
  }
  
  .punbb:not(#pun-admin_forums) form#post p.formsubmit .button {
    background: none;
    border: none;
    color: var(--accent_hed);
    text-transform: uppercase;
    margin: 5px 10px;
  }
  
  .punbb:not(#pun-admin_forums) form#post p.formsubmit .button:hover {
  color: var(--hov_lin);
  cursor: pointer;
  }
  
  .fs-box.hashelp .container, #post-sig .container {
    background: var(--background);
    padding: 8px 12px !important;
    border: var(--border);
    box-shadow: 0px 0px 3px var(--accent);
    max-height: 180px;
    overflow-y: auto;
  }
  
  .punbb .hashelp {
    position: relative;
  }
  
  
  .punbb:not(#pun-admin_forums) #form-buttons tr {height: 30px;} /*высота иконок*/
  .punbb:not(#pun-admin_forums) #form-buttons td {display: inline-block !important;position: relative;width: 26px;height: 26px;line-height: 1!important;text-align: center;background: var(--input) !important;margin: 5px;border-radius: 5px;} /*скрываем стандартные картинки*/
  .punbb:not(#pun-admin_forums) #form-buttons td img {position: absolute; z-index: 1; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0;} /*убираем лишние отступы между картинками*/
  .punbb:not(#pun-admin_forums) #form-buttons td::before  {position: relative;top: 4px;z-index: 1;font-size: 19px;font-family: "Material Icons Outlined";font-weight: 900;color: var(--accent);} /*параметры для иконочного шрифта - вид, размер, жирность и т.д. можно и цвет задать*/
  
  .punbb:not(#pun-admin_forums) td#button-font::before {content: '\e167';} /*иконка вида шрифта*/
  .punbb:not(#pun-admin_forums) td#button-transL::before {content: '\e8e2';} /*иконка транслита*/
  .punbb:not(#pun-admin_forums) td#button-size::before {content: '\e262';} /*иконка размера шрифта*/
  .punbb:not(#pun-admin_forums) td#button-bold::before {content: '\e238'; } /*иконка жирного текста*/
  .punbb:not(#pun-admin_forums) td#button-italic::before {content: '\e23f';} /*иконка курсива*/
  .punbb:not(#pun-admin_forums) td#button-underline::before {content: '\e249';} /*иконка подчёркнутого текста*/
  .punbb:not(#pun-admin_forums) td#button-strike::before {content: '\e239'; } /*иконка зачёркнутого текста*/
  .punbb:not(#pun-admin_forums) td#button-indent::before {content: '\e23e'; } /*иконка красной строки*/
  .punbb:not(#pun-admin_forums) td#button-left::before {content: '\e236'; } /*иконка текста слева*/
  .punbb:not(#pun-admin_forums) td#button-center::before {content: '\e234'; } /*иконка текста по центру*/
  .punbb:not(#pun-admin_forums) td#button-right::before {content: '\e237'; } /*иконка текста справа*/
  .punbb:not(#pun-admin_forums) td#button-link::before {content: '\e157'; } /*иконка ссылки*/
  .punbb:not(#pun-admin_forums) td#button-spoiler::before {content: '\e14e'; } /*иконка спойлера*/
  .punbb:not(#pun-admin_forums) td#button-image::before {content: '\e3f4'; } /*иконка картинки*/
  .punbb:not(#pun-admin_forums) td#button-video::before {content: '\e064';} /*иконка видео*/
  .punbb:not(#pun-admin_forums) td#button-hide::before {content: '\e63f';} /*иконка скрытого текста*/ 
  .punbb:not(#pun-admin_forums) td#button-quote::before {content: '\e244';} /*иконка цитаты*/
  .punbb:not(#pun-admin_forums) td#button-code::before {content: '\e8be';} /*иконка кода*/
  .punbb:not(#pun-admin_forums) td#button-color::before {content: '\e40a';} /*иконка цвета текста*/
  .punbb:not(#pun-admin_forums) td#button-smile::before {content: '\e813';} /*иконка смайлов*/
  .punbb:not(#pun-admin_forums) td#button-keyboard::before {content: '\e312';} /*иконка клавиатуры*/
  .punbb:not(#pun-admin_forums) td#button-table::before {content: '\f1be';} /*таблица*/
  .punbb:not(#pun-admin_forums) td#button-addition::before {content: '\e5c5';} /*дополнительно*/
  .punbb:not(#pun-admin_forums) td#button-files_rusff::before {content: '\e2cc';} /*файлы*/
  .punbb:not(#pun-admin_forums) td#button-mask::before {content: '\e9ed';} /*маска*/
  .punbb:not(#pun-admin_forums) td#button-good::before {content: '\e876';} /*анкета принята*/
  
  
  .punbb:not(#pun-admin_forums) #form-buttons td#button-graffiti_rusff {
  display: none !important;
  }
  
  
  /********************************** LIST **********************************/
  
  #pun-userlist #userlist, #pun-searchtopics .forum, #pun-search formal, #pun-online .online-list {
    margin: 20px 20px 20px 0;
  }
  
  #pun-userlist #userlist legend, #pun-search legend {
    background: none;
    text-align: left;
    color: var(--accent);
  }
  
  #pun-userlist .linkst, #pun-searchtopics .linkst, #pun-search .linkst, #pun-respect .linkst {
    border: var(--border);
    height: 25px;
    margin-right: 20px;
    background: var(--forum);
  }
  
  #pun-userlist fieldset, #pun-searchtopics fieldset, #pun-search fieldset {
    padding: 15px;
  }
  
  #pun-userlist #userlist p, #pun-searchtopics p, #pun-search p {
    display: inline-block;
    margin: 0 15px;
  }
  
  #pun-userlist #userlist p label, #pun-searchtopics p label, #pun-search p label{
    text-transform: uppercase;
    display: block;
    margin-bottom: -5px;
  }
  
  
  #pun-userlist #userlist p.infofield, #pun-search p.infofield {
    display: block;
    margin-top: 15px;
  }
  
  #pun-userlist .usertable table, #messages .fs-box table, #pun-searchtopics table, #pun-search table,  #pun-online table,
  #pun-respect .main table {
    width: 100%;
    border-spacing: 0 10px !important;
    border-collapse: separate;
  }
  
  #pun-userlist .usertable table, #pun-respect .main table {
    padding-right: 20px;
  }
  
  #pun-userlist .usertable table tr, #pun-searchtopics table tr, #pun-search table tr, #pun-online table tr,
  #pun-respect .main table tr {
    background: var(--forum);
    outline: var(--border);
  }
  
  #pun-userlist .usertable table thead, #pun-userlist .usertable table .user-avatar, #pun-searchtopics table .user-avatar,
  #pun-respect .main table thead, #messages .fs-box table thead, #messages .fs-box table .user-avatar {
    display: none;
  }
  
  #pun-userlist .usertable table td, #pun-searchtopics table td, #pun-search table td, #pun-online table td,
  #pun-respect .main table td {
    padding: 5px 10px;
  }
  
  #pun-userlist .linksb, #pun-searchtopics .linksb, #pun-search .linksb, #pun-online .linksb, #pun-respect .main .linksb {
    border: var(--border);
    height: 25px;
    margin-right: 20px;
    background: var(--forum);
  }
  
  
  
  /* -----  ПРОФИЛЬ ------*/
  #pun-profile #profilenav h2, 
  #pun-profile #viewprofile-next #profilenav {
    display: none;
  }
  
  #pun-profile #viewprofile {
    margin: 25px 0;
    position: relative;
  }
  
  #pun-profile #profile-left {
    width: calc(210px + 6px) !important;
    text-align: center;
    background: var(--background);
    border: 1px solid var(--accent) !important;
    border-left: none !important;
    padding-top: 10px !important;
    color: rgb(var(--body));
    display: inline-block;
  }
  
  #profile-left #profile-title strong,
  #profile-left #pa-online strong,
  #profile-left #pa-edit strong {
    font-weight: 100 !important;
  }
  
  #pa-edit a {
    font-size: 15px;
    text-transform: uppercase;
    color: var(--accent);
  }
  
  li#pa-edit {
    padding: 4px;
  }
  
  #pun-profile #profile-right {
    border: var(--border) !important;
    border-top-width: 30px !important;
    display: inline-block;
    position: absolute;
    right: -2px;
    min-height: 100%;
    background: var(--background);
    color: rgb(var(--body));
    padding: 5px 20px 20px;
    line-height: 23px;
  }
  
  #pun-profile #profile-right li strong {
    padding: 0;
  }
  
  #pun-profile #viewprofile table {
    table-layout: fixed;
    width: 100%;
    border-collapse: revert;
  }
  
  #profilenav, #profile fieldset:not(.radiofield) {
    display: block;
    margin: 0px 20px 20px -1px;
    border: var(--border);
    background: var(--forum);
    line-height: 16px;
  }
  
  #profile fieldset legend {
  outline: var(--border);
  }
  
  #profilenav {
    padding: 5px;
  }
  
  #profilenav li {
    display: inline-block;
    margin: 0 2px;
  }
  
  #profilenav li a {
    text-transform: uppercase;
    font-size: 10px;
  }
  
  #profile fieldset {
    padding-bottom: 10px;
  }
  
  
  
  /* -----  ЛС ------*/
  
  #pun-messages #profilenav {
    float: left;
    padding: 0;
  }
  
  #pun-messages #profilenav h2 {
    background: var(--accent);
    color: var(--accent_hed);
    margin: 0;
  }
  
  #pun-messages #profilenav li {
    display: block;
    margin: 6px;
  }
  
  #pun-messages #profilenav li a {
    font-size: 12px;
  }
  
  #pun-messages #profilenav li.item1.isactive a {
    font-weight: bold;
  }
  
  
  #pun-messages .pa-posts,  #pun-messages .pa-reg, #pun-messages .pa-avatar:after {
    display: none;
  }
  
  
  
  #pun-viewforum table {
    width: 100%;
    border-spacing: 0 10px !important;
    border-collapse: separate;
    padding-right: 20px;
  }
  
  #pun-userlist .usertable table {
    padding-right: 20px;
  }
  
  #pun-viewforum table tr{
    background: var(--forum);
    outline: var(--border);
  }
  
  #pun-viewforum table .user-avatar {
    display: none;
  }
  
  #pun-viewforum table td {
    padding: 5px 10px;
  }
  
  #pun-viewforum .linksb, #pun-viewforum .linkst {
    border: var(--border);
    height: 25px;
    margin-right: 20px;
    background: var(--forum);
    position: relative;
  }
  
  #pun-viewforum table thead {
    display: none;
  }
  
  
  #pun-viewforum .postlink.long {
    text-align: end;
    top: 0px;
    right: 10px;
  }
  
  #pun-viewforum .postlink.long a {
    color: var(--lin);
  }
  
  #pun-viewforum .postlink.long a:hover {
    color: var(--hov_lin);
  }
  
  .tclcon .stickytext, .tclcon .closedatafield {
    display: none;
  }
  
  #pun-viewforum table .icon-new {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  #pun-viewforum table tr, #pun-viewforum table .tclcon,
  #pun-viewforum table td:not(.tcl) {
    position: relative;
    z-index: 1;
  }
  
  #pun-viewforum table tr.inew a {
    color: var(--accent_hed);
    font-weight: 100;
  }
  
  #pun-viewforum table tr.inew a:hover {
    color: var(--accent);
  }
  
  
  form#messages .fs-box table {
  padding: 5px;
  }
  
  form#messages .fs-box table thead th {
  text-align: justify;
  }
  
  form#messages .fs-box table tbody tr {
  background: var(--input);
  }
  
  form#messages .fs-box table tbody tr td {
  padding: 5px;
  }
  
  form#messages .fs-box table tbody tr td.tcl {
  padding-left: 20px;
  }
  
  form#messages .fs-box table tbody tr.inew {
  background: var(--hov_lin);
  }
  
  form#messages .fs-box table tbody tr.inew a {
  color: var(--hov_text);
  }
  
  
  
  
  /********************************** УВЕДОМЛЕНИЯ **********************************/
  
  span.bubble:after {
    content: '\e7f4';
    background-color: transparent;
    border: none;
    font-family: 'Material Icons';
    color: #83478e;
    position: absolute;
    display: block;
    z-index: -1;
    font-size: 20px;
    left: -3px;
    top: -8px;
  }
  
  span.bubble {
    background: none;
    display: block;
    z-index: 0;
    right: -10px;
    top: -12px;
    font-size: 9px;
  }
  
  span.num_msg, span.num_msg:before {
    background: #83478e !important;
  
  }
  
  span.num_msg {
    margin-left: -1px !important;
    margin-top: -9px !important;
    font-size: 10px !important;
    line-height: 11px !important;
    border-radius: 1px !important;
    padding: 1px 6px !important;
  }
  
  span.num_msg:before {
      margin-left: -7px !important;
    margin-top: -7px !important;
  }
  
  
  
  
  
  /********************************** СЛАЙДЕР И ТАБЛИЦА **********************************/
  #slideshow {margin:0 auto;width: 1184px;height: 474px;position: absolute;z-index: 1;top: 59px;left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);outline: 1px solid var(--pun_border);}
  #slideshow #slidesContainer {
  margin:0 auto;
  width: 1184px !important;
  height: 474px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
  }
  #slideshow #slidesContainer .slide {
  margin:0 auto;
  width: 1184px;
  height: 474px;
  position: relative;
  }
  .control {
  display:block;
  width: 30px;
  height: 34px;
  text-indent:-10000px;
  position:absolute;
  top: 50%;
  top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  cursor: pointer;
  z-index:100;
  }
  #leftControl {
  left: 10px;
  background: url("http://forumupload.ru/uploads/001b/b6/34/3/416582.png") no-repeat 0 0;
  }
  #rightControl {
  right: 10px;
  background: transparent url("http://forumupload.ru/uploads/001b/b6/34/3/37466.png") no-repeat 0 0;
  }
  
  #slideshow #slidesContainer .slide .lin {
    position: absolute;
    right: 100px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  
  #slideshow #slidesContainer .slide .lin a {
    display: block;
    background: var(--accent);
    font-size: 12px;
    width: 100%;
    padding: 5px 10px;
    margin: 5px;
    color: var(--accent_hed);
    text-align: center;
  }
  
  #slideshow #slidesContainer .slide .lin a:hover {
    background: var(--hov_lin);
    color: var(--hov_text);
  }
  
  
  
  #html-header #active {
    position: absolute;
    z-index: 1;
    width: 986px;
    top: 555px;
    text-align: center;
  }
  
  #html-header #active div {
    display: inline-block;
  }
  
  #html-header #active #ep1, #html-header #active #ep2 {
    display: flex;
    align-items: center;
  }
  
  #html-header #active #ep1 {
    margin-bottom: 10px;
  }
  
  #html-header #active #char {
    position: relative;
  }
  
  #html-header #active #char .description {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    opacity: 0;
    width: 505px;
    height: 135px;
    padding: 10px;
    text-align: justify;
    overflow-y: auto;
    transition: 2s;
  }
  
  #html-header #active #char .description:hover {
    opacity: 1;
    background: #afafafa1;
  }
  
  #html-header #active img {
    border: 1px solid var(--lin);
  }
  
  #html-header #active #char img {
    width: 507px;
    height: 137px;
  }
  
  #html-header #active #episode {
    margin-right: 45px;
  }
  
  #html-header #active #ep1 a, #html-header #active #ep2 a {
        display: inline-block;
        text-transform: uppercase;
        font-size: 13px;
        padding: 2px;
        width: 190px;
        background: var(--hov_lin);
        color: var(--input);
  }
  
  #html-header #active #ep1 a:hover, #html-header #active #ep2 a:hover {
    color: rgb(138 112 141);
    background: var(--accent);
  }
  
  #html-header #active:after {
    content: '';
    display: block;
    position: absolute;
    border: 1px solid var(--hov_lin);
    width: 1051px;
    height: 75px;
    top: 33px;
    left: -32px;
    z-index: -1;
  }
  
  #html-header #active #episode:after {
    content: '';
    display: block;
    position: absolute;
    width: 300px;
    height: 140px;
    top: 0;
    left: 170px;
    background: var(--body);
    z-index: -1;
  }
  /* Стрелки */
  .go-up, .go-down {
    cursor: pointer;
    display: none;
    margin-left: 1090px !important;
    position: fixed;
    z-index: 9999;
    font-family: Verdana, sans-serif;
    font-size: 30px;
    opacity: 1;
    color: var(--lin);
    transition: 1s;
  }
  .go-up {
    padding: 8px 11px 9px;
    bottom: 32%;
  }
  .go-down {
    padding: 9px 11px 30px;
    bottom: 16%;
  }
  .go-down:hover, .go-up:hover {
  color: var(--hov_lin);
  }