/******************************************************
Base
*******************************************************/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button, input {
  background: transparent;
  border: 0;
  padding: 0;
}

.punbb table {
  table-layout: fixed;
  width: 100%;
}

em {
  font-style: normal;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, th,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/******************************************************
�������� ��������
*******************************************************/
#pun-title, 
#pun-navlinks h2,
#pun-ulinks h2,
#pun-status h2,
#pun-announcement h2,
#pun-break1,
#pun-break2,
#pun-main h1,
.crumbs strong,
.crumbs strong+em,
#pun-break3,
#pun-break4,
.forum h2,
.topic h2,
.sharelink,
#post-form h2,
#post legend span,
#formkey, 
#formetc,
.author-avatar,
#image_upload_input,
.pa-online,
#pun-userlist h2,
#userlist legend span,
.pa-respect > a,
#viewprofile-next #profilenav h2,
.polltext,
.theme-pages,
.closedatafield,
.stickytext,
#profilenav h2,
.mess-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

.mod-awards-list .catleft, 
.mod-awards-list .catright,
p:empty,
.category thead,
.category .tcr br,
#viewprofile-next #profilenav,
.forum thead,
.modmenu span,
#formkey, 
#formetc,
.topic a.sharelink,
#pun-status .status-right,
.acchide,
.post-sig dt span,
.clearer,
#messages legend,
.lastedit,
.forum .tc3,
.messages-container thead,
#pun-index #pun-crumbs2 {
  display: none;
}

/******************************************************
����������
*******************************************************/
/* ��� Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to right,
    transparent 2px,
    #C0C3C5 2px,
    #C0C3C5 3px,
    transparent 3px
  );
}

::-webkit-scrollbar-thumb {
  background-color: var(--text-light);
  border-radius: 10px;
}

/* ��� Firefox */
@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--text-light) transparent;
  }

  html::before {
    content: "";
    position: fixed;
    top: 0;
    right: 2px;
    width: 1px;
    height: 100%;
    background: #C0C3C5;
    pointer-events: none;
    z-index: 9999;
  }
}

/******************************************************
�����
*******************************************************/
/*�����*/
body {
  font-variant-numeric: lining-nums proportional-nums;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.7;
  color: var(--main-text-color);
  padding: 0 10px;
  background: url(https://forumstatic.ru/files/001c/52/c6/87881.jpg) no-repeat top center fixed;
  background-size: cover;
}

body a {
  color: var(--accent-red);
  transition: color 0.8s ease;
}

body a:hover {
  color: var(--link-dark-hover);
}

#pun {
  padding: 462px 0 125px 0;
}

.punbb {
  width: 1100px;
  margin: 0 auto;
  position: relative;
  background: url(https://forumstatic.ru/files/001c/52/c6/68842.png) no-repeat top, url(https://forumstatic.ru/files/001c/52/c6/66968.png) no-repeat bottom, url(https://forumstatic.ru/files/001c/52/c6/89426.png);
  background-size: contain;
  padding: 70px;
}

.formal fieldset {
  min-width: 0;
}

.fs-box #tags {
  position: relative;
}

/*�������, ������ � ��.*/
.punbb select {
  border-radius: 3px;
  border: 1px rgba(52, 66, 70, 0.37) solid;
  background: none;
  text-transform: lowercase;
  color: var(--link-dark);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url(https://forumstatic.ru/files/001c/52/c6/88079.svg);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 6px;
  padding: 0 22px 0 12px;
  font-weight: 600;
}

option {
  background: #babbbb;
}

.resizable-textarea textarea {
  display: block;
  margin-bottom: 0pt;
}

textarea {
  background: #babbbb;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.08) inset;
  border: 1px solid #888F98;
  outline: none;
  padding: 8px 12px;
  appearance: none;
  -webkit-appearance: none;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
}

input.button {
  position: relative;
  transition: all 0.3s ease;
  transform: translateY(0);
  text-transform: uppercase;
  font-size: 12px;
  color: var(--link-dark);
  cursor: pointer;
}

.punbb input {
  padding: 4px 10px 4px 10px;
  outline: none;
  background: #babbbb;
}

.inputfield, 
.selectfield:not(:last-child) {
  margin: 0 10px 0 0;
}

.inputfield, 
.selectfield {
  display: inline-block;
  margin: 0 0 20px;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  padding: 5px;
  cursor: pointer;
  transition: all .4s ease-in-out 0s;
  border-radius: 100%;
  border: 1px solid var(--link-dark);
  background: none;
}

input[type="checkbox"]:checked, 
input[type="radio"]:checked,
#messages .pmtc24 input[type="checkbox"]:checked {
  background: #082d44;
}

#poll-special td {
  cursor:default;
}

abbr {
  border-bottom: 1px dashed;
  cursor: help;
}

/*���������*/
#pun-navlinks .container {
  display: flex;
  gap: 20px;
  font-weight: 600;
  font-size: 16px;
}

#pun-navlinks .container a {
  color: var(--accent-blue);
}

#pun-ulinks .container {
  display: flex;
  gap: 10px;
  font-weight: 500;
  text-transform: lowercase;
  font-size: 13px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--borders-color);
  margin: 8px 0 20px;
}

.linkst {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 15px;
}

.linksb {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  font-size: 12px;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin: 15px 0 0;
}

.pagelink strong {
  margin: 0 2px;
}

.postlink.long {
  display: flex;
  gap: 20px;
}

.new-topic, 
.new-poll {
  background: rgba(0, 0, 0, .05);
  padding: 5px 15px 3px;
  transition: all .8s ease;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid var(--link-light);
}

#pun-viewforum .linksb noindex {
  order: 1;
}

#pun-viewforum .linksb .subscribelink {
  order: 2;
}

#pun-viewforum .linksb .pagelink {
  order: 3;
}

#pun-viewtopic .linksb .postlink {
  order: 1;
}

#pun-viewtopic .linksb .subscribelink {
  order: 2;
}

#pun-viewtopic .linksb .pagelink {
  order: 3;
}

/*�����������*/
#pun-status .container {
  display: flex;
  font-size: 12px;
  font-family: var(--font-family);
}

/*������� ������*/
#pun-crumbs1,
#pun-crumbs2 {
  margin: 20px 0;
  font-family: var(--font-family);
  text-transform: uppercase;
  font-size: 12px;
}

#pun-crumbs1 a,
#pun-crumbs2 a {
  font-weight: 600;
}

/*�������*/
.user-avatar {
  width: 37px;
  height: 37px;
  position: relative;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  cursor: pointer;
  transition: all 0.8s ease;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
  background-color: #c8c1ab;
  mask-image: url(https://forumstatic.ru/files/001c/52/c6/41146.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/52/c6/41146.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.forum .user-avatar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

span.avatar-image[style*="default_avatar.jpg"] {
  background-image: url(https://upforme.ru/uploads/001c/42/be/4/582793.gif) !important;
}

.messages-container .user-avatar {
  display: inline-block;
  margin-right: 10px;
  flex-shrink: 0;
}

.isonline {
  position: absolute;
  right: -8px;
  bottom: -9px;
  background: url(https://forumstatic.ru/files/001c/52/c6/84340.png) no-repeat center / cover;
  width: 31px;
  height: 25px;
}

.isonline::before {
  content: 'on';
  transform: rotate(353deg);
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-family);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

/*���������*/
.category {
  background: url(https://forumstatic.ru/files/001c/52/c6/91657.png) no-repeat top center;
}

.category:not(:last-child) {
  margin-bottom: 30px;
}

.category h2 {
  text-align: center;
  color: var(--accent-blue);
  font-family: var(--third-family);
  font-size: 32px;
  text-transform: lowercase;
  font-weight: 400;
}

.category tbody {
  display: flex;
  gap: 30px;
  flex-direction: column;
}

.category tr {
  display: grid;
  justify-content: end;
  align-items: start;
  grid-template-columns: 63% 1fr;
  gap: 0 65px;
}

.category .tcl {
  grid-column: 1 / 2;
}

.category .intd {
  position: relative;
}

div.icon.inew {
  background: url(https://forumstatic.ru/files/001c/52/c6/87704.png) #3B4559;
  border: 1px solid #282F3C;
  border-radius: 10px;
  position: absolute;
  top: 9px;
  height: 30px;
}

.tcl .inew.icon[data-new-topics]:before, 
.tcl .inew.subforums span[data-new-topics]:before {
  --text: "����� ������� ";
  content: var(--text) attr(data-new-topics);
  padding: 10px 15px 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--third-text-color);
  height: 29px;
  display: block;
  background: none;
  position: relative;
  line-height: 1;
  margin: 0;
}

.inew h3 {
  padding: 0 0 0 140px;
}

.tclcon h3 a {
  border-radius: 10px;
  padding: 0px 15px 8px;
  background: var(--opacity-cover);
  text-shadow: 0 0 8px #f6eed1;
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 24px;
  text-transform: lowercase;
}

#pun-index .category .tc2,
#pun-index .category .tc3 {
  display: none; /*������� ��������� � ������*/
}

.category .tcr {
  grid-column: 2 / 3;
  align-self: center;
  display: grid;
  grid-template-columns: 37px 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 4px 15px;
}

.category .user-avatar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  align-self: center;
}

.category .lastpost-link {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: end;
  line-height: 1;
  font-weight: 600;
}

.category .lastpost {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-size: 11px;
  line-height: 1;
}

/*���������� �� �������*/
#pun-stats {
  margin: 30px 0 0;
  background: url(https://forumstatic.ru/files/001c/52/c6/91657.png) no-repeat top center;
}

#pun-stats h2 {
  text-align: center;
  color: var(--accent-blue);
  font-family: var(--third-family);
  font-size: 32px;
  text-transform: lowercase;
  font-weight: 400;
}

#pun-stats h2 span {
  text-align: center;
}

.statscon {
  margin-top: 10px;
  position: relative;
}

.statscon .container {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 15px 2px;
  font-size: 10px;
  text-transform: uppercase;
  text-align: justify;
  position: relative;
  z-index: 1;
  padding: 10px;
}

.statscon .item1,
.statscon .item2,
.statscon .item3,
.statscon .item4 {
  background: var(--opacity-cover);
  border-radius: 5px;
  padding: 3px 10px;
}

#onlinelist {
  grid-column: 1 / -1;
}

#onlinelist.onlinelist {
  margin-top: 10px;
  position: relative;
  padding: 0 0 15px;
}

#onlinelist.onlinelist::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #9B917A 0%, rgba(155, 145, 122, 0) 100%);
  pointer-events: none;
}

#onlinelist a {
  font-weight: 700;
}

/*�������� ������ �������*/
.forum tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.forum tr:not(:last-child) {
  margin: 0 0 10px;
}

.forum .tcl {
  flex-basis: 100%;
}

.forum .intd {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}

.forum .tclcon {
  padding-left: 25px;
  display: grid;
  grid-template-columns: auto;
  min-width: 0;
}

.forum .tclcon a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 470px;
}

.forum .tclcon .byuser {
  grid-column: 1 / 2;
}

.forum .tclcon .byuser {
  margin-left: 0;
  display: block;
  font-size: 10px;
}

#pun-viewforum .forum .tc2 {
  align-items: center;
}

.forum .tc2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-basis: 20%;
  opacity: .5;
  line-height: 1;
}

.forum .tc2::after {
  content: '�������';
}

.forum .tcr {
  display: grid;
  gap: 0 15px;
  grid-template-columns: 37px 1fr;
  flex-basis: 40%;
  line-height: 1.5;
  margin: 0 0 0 -3px;
}

.forum .tcr a {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-size: 13px;
  align-self: end;
}

.forum .byuser {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-size: 12px;
}

/*������*/
.post h3 {
  font-size: 12px;
  padding: 5px 0;
  margin-bottom: 15px;
}

.post h3 > span {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.post h3 strong::before {
  content: ", #";
}

.post > .container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
}

.post-author {
  position: relative;
  align-self: start;
}

.post-author ul {
  display: grid;
  grid-template-columns: 50% 50%;
}

.pa-author, 
.pa-title, 
.pa-fld1, 
.pa-ip, 
.pa-fld2, 
.pa-avatar {
  grid-column: 1 / -1;
}

.pa-author {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  padding: 0 15px;
}

.pa-title {
  font-size: 9px;
  opacity: .6;
  text-transform: uppercase;
  padding: 0 15px;
}

.pa-avatar {
  margin: 15px 0;
  text-align: center;
}

.pa-avatar img {
  max-width: 180px;
  max-height: 180px;
}

.pa-posts, 
.pa-fld3, 
.pa-respect, 
.pa-fld4 {
  grid-column: 1 / 2;
  font-size: 9px;
  text-transform: uppercase;
  line-height: 140%;
  opacity: .8;
}

.pa-posts {
  align-self: end;
}

.pa-ip {
  text-align: center;
  font-size: 8px;
  padding: 20px 0 10px;
}

.post-body {
  min-width: 0;
}

.post-box {
  position: relative;
  font-size: 15px;
  padding-bottom: 37px;
}

.post-content p {
  padding: 0 0 24px 0;
  text-align: justify;
}

.spoiler-box,
.code-box,
.quote-box {
  background: #babbbb;
  margin-bottom: 20px;
}

.quote-box cite {
  font-size: 12px;
  font-weight: 700;
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid #888F98;
  margin-bottom: 10px;
  font-style: normal;
}

.quiet-quote {
  padding: 20px 15px 5px;
  background: var(--bg-light);
  margin-bottom: 20px;
  border-left: 3px solid var(--link-dark);
}

blockquote .quote-box {
  background: #babbbb;
}
 
.code-box {
  padding: 10px 15px 5px;
}

.code-box .legend {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid #babbbb;
  margin-bottom: 10px;
}

.code-box .scrollbox {
  height: auto !important;
  padding-bottom: 10px;
}

.scrollbox {
  width: 100%;
  overflow: auto;
  max-height: 200px;
}

pre {
  font-size: 11px;
  font-family: #babbbb;
  line-height: 140%;
}

.quote-box {
  padding: 20px 15px 5px;
  font-size: 13px;
}

.spoiler-box {
  padding: 15px;
}

.spoiler-box > div {
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}

.spoiler-box > div.visible {
  border-bottom: 1px solid #888F98;
  padding: 0 0 10px;
}

.spoiler-box > div::before {
  content: '\f06e';
  font-family: fontawesome;
  margin: 0 15px 0 0;
}

.spoiler-box > div.visible::before {
  content: '\f070';
  font-family: fontawesome;
  margin: 0 15px 0 0;
}

.post-content img.postimg {
  max-width: 100%;
  margin: 0.4em 0;
  vertical-align: middle;
}

.post-sig {
  margin: 35px 0 0;
}

.post-sig dt {
  margin: 0 auto 20px;
  width: 40%;
  border-top: 1px solid rgba(2, 15, 15, 0.30);
}

.post-sig dd p {
  padding: 0;
}

.post-rating {
  position: absolute;
  right: 0;
  bottom: 0;
}

.post-rating .container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.mylike .post-rating .container {

}

.mylike .post-vote {
  display: none;
}

.mylike .post-rating a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

.post-rating a {
  cursor: pointer;
}

.post-vote {
  position: absolute;
  right: 0;
  bottom: 43px;
}

.post-vote a {
  font-size: 0;
  display: block;
}

.post-links {
  grid-column: 1 / -1;
}

.post-links ul {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*����� ������*/
#post-form {
  margin: 30px 0 0;
}

#post .areafield.required {
  position: relative;
}

#post {
  position: relative;
}

#form-buttons {
  margin: 15px 0;
}

#form-buttons tr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

#form-buttons td {
  position: relative;
  cursor: pointer;
  width: 16px;
  height: 16px;
  line-height: 1;
}

#form-buttons td:hover {
  color: var(--link-light-hover);
}

#form-buttons td img {
  height: 16px;
  width: 100%;
  position: relative;
}

#button-font::before, 
#button-size::before, 
#button-bold::before, 
#button-italic::before, 
#button-underline::before, 
#button-indent::before, 
#button-strike::before, 
#button-left::before, 
#button-center::before, 
#button-right::before, 
#button-link::before, 
#button-spoiler::before, 
#button-image::before, 
#button-video::before, 
#button-hide::before, 
#button-quote::before, 
#button-code::before, 
#button-color::before, 
#button-keyboard::before, 
#button-table::before, 
#button-addition::before, 
#button-mask::before, 
#button-grouphide::before, 
#button-float::before, 
#button-sticker::before, 
#button-Change�ase::before, 
#floatbut::before, 
#button-justify::before, 
#button-html::before, 
#button-removeprofile::before,
#button-transL::before  {
  width: 100%;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: FontAwesome;
  text-align: center;
  z-index: 0;
}

#button-font::before {content: '\f031';}
#button-size::before {content: '\f034';}
#button-bold::before {content: '\f032';}
#button-italic::before {content: '\f033';}
#button-underline::before {content: '\f0cd'; top: 1px;}
#button-indent::before {content: '\f03c';}
#button-strike::before {content: '\f0cc';}
#button-left::before {content: '\f036';}
#button-center::before {content: '\f037';}
#button-right::before {content: '\f038';}
#button-link::before {content: '\f0c1';}
#button-spoiler::before {content: '\f070'; font-size: 17px;}
#button-image::before {content: '\f03e'; font-size: 18px;}
#button-video::before {content: '\f167'; font-size: 18px; top: 0px;}
#button-hide::before {content: '\f023';}
#button-quote::before {content: '\f10e';}
#button-code::before {content: '\f121';}
#button-color::before {content: '\f576';}
#button-sticker::before {content: '\f118';}
#button-keyboard::before {content: '\f11c'; font-size: 16px;}
#button-table::before {content: '\f0ce';}
#button-addition::before {content: '\f0fe';}
#button-mask::before {content: "\f630";}
#button-grouphide::before {content: "\f502";}
#button-float::before {content: "\f03b";}
#button-Change�ase::before {content: "\f891";}
#button-justify::before {content: "\f039";}
#floatbut::before {content: "\f03b";}
#button-html::before {content: "\f1c9";}
#button-removeprofile::before {content: "\f504";}
#button-transL::before {content: "\f362";}

#button-mask, 
#button-grouphide, 
#floatbut, 
#button-transL {
  background: none !important;
}

#button-sticker {
  background: none !important; 
  width: 26px; 
  height: 16px;
}

#floatbut {
  width: 25px; 
  height: 18px;
}

.fs-box #tags a {
  text-transform: uppercase;
  font-size: 10px;
}

.fs-box #tags .container {
  position: absolute;
  top: -15px;
  z-index: 2;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #babbbb;
  box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 10%) inset, 0px 0px 4px rgb(0 0 0 / 78%);
}

#tags .container {
  position:absolute; 
  right: -27px; 
  top:43px; 
  z-index:2;
}

#font-area {
  height: 300px;
  overflow-y: auto;
  text-align: left;
  width: 220px;
}

#font-area span, 
#font-area img {
  height: 15px;
}

#font-area span, 
#font-area img, 
#size-area span, 
#size-area img {
  display: block; 
}

#font-area img {
  width: 100%; 
  margin-top: -15px;
}

#size-area span, 
#size-area img {
  height: 24px;
}

#size-area img {
  width: 100%; 
  margin-top: -24px;
}

#font-area div, 
#size-area div, 
#color-area div, 
#table-area div, 
#addition-area div, 
#smilies-area div a, 
#smilies-area img,
#image-source-list a, 
#image-area-actions a, 
#spoiler-sels a, 
#video-host-list a {
  cursor:pointer;
}

#video-area, 
#spoiler-area {
  width: 86vw;
  max-width: 450px;
  min-width: 200px;
}

#image-area {
  width: 86vw;
  max-width: 550px;
  min-width: 200px;
}

#image-source-list,
#video-host-list {
  margin-top: 10px
}

#video-host-list {
  line-height: 170%;
}

#image-area-tcon-computer {
  margin:0 0 1em;
}

#image-area-tcon-computer tr {
  display: flex;
  gap: 20px;
}

#imageupload-right {
  height: 180px;
  overflow: auto;
  padding: 10px;
  flex-basis: 100%;
}

#imageQueue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#image-area-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#uploadQueueItem {
  padding: .8em 1em;
  border: 1px solid #ccc;
}

.uploadQueueItem {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 5px;
  border: 1px solid rgba(52, 66, 70, 0.37);
  background: rgba(0, 0, 0, .1);
  position: relative;
}

.uploadQueueItem .cancel {
  font-weight: 700;
  position: absolute;
  right: 4px;
  top: 0;
}

#imageQueue .uploadQueueItem .cancel a {
  font-size: 14px;
}

.fileName {
  margin-bottom: 10px;
  display: block;
}

.uploadProgress {
  height: 3px;
  margin: 2px 0 0;
  background: #000304;
}

.uploadProgressBar {
  background: #008182;
  height: 3px;
  width: .1%;
  transition: width .1s linear;
}

.uploadQueueItem.error {
  border-color: rgba(255, 0, 0, 0.25);
  background-color: rgba(255, 0, 0, 0.08);
}

#uploaded-images {
  display: flex;
  gap: 5px;
  max-height: 144px;
  overflow-y: auto;
  flex-wrap: wrap;
}

#uploaded-images img {
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  cursor: pointer;
}

#insert-image-tip {
  margin-top: 10px;
}

#upload-button-container, 
#image-width, 
#image-thumb-width, 
#image-insert-format, 
#insert-all-images-container {
  margin-top: 10px;
}

#upload-button-container img {
  cursor: pointer; 
  width: 120px; 
  height: 30px;
}

#spoiler-sels,
#image-area-sels,
#video-area-hsel {
  font-family: var(--text-main);
  text-transform: uppercase;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#video-area-hsel div:not(#video-host-list) {
  margin-bottom: 10px;
}

#addition-area {
  font-family: var(--text-main);
  text-transform: uppercase;
  font-size: 12px;
}

#spoiler-type-list, 
#image-source-list {
  display: flex;
  gap: 20px;
}

#video-area-msg {
  line-height: 2em;
}

#video-area-tinp, 
#image-area-tinp {
  margin: .5em 0; 
  padding: .3em; 
  border: 1px solid var(--link-dark-hover);
  outline: none;
  height: 70px;
}

#spoiler-area {
  right: 60px;
}

#video-area,
#table-area,
#image-area,
#smilies-area,
#keyboard-area,
#addition-area {
  right: 0;
}

#table-area table {
  width:auto;
}

#table-area div { 
  text-align:center;
}

#color-area td, 
#table-area td { 
  line-height:0;
}

#color-area {
  width: 86vw;
  max-width: 320px;
  min-width: 200px;
}

#table-area td {
  border: 1px solid #797a6f;
}

#table-area td.selected {
  background: rgba(3, 43, 48, .1);
}

#color-area td img, 
#table-area td img {
  width: 100%; 
  height: 20px; 
  cursor: pointer;
}

#keyboard-area {
  text-align: center;
}

#keyboard-span input {
  margin: 6px 7px 0 0;
  padding: 0 10px;
  height: 25px;
  min-width: 30px;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid rgba(52, 66, 70, 0.37);
  transition: all 0.3s ease;
  transform: translateY(0);
}

#keyboard-span input:hover {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

#addition-area div {
  height:24px; 
}

.icons-search:before { content: '\e095'; } /* '' */
.icons-font:before { content: '\e800'; } /* '� �' */
.icons-size:before { content: '\e801'; } /* '� �' */
.icons-video:before { content: '\e802'; } /* '� �' */
.icons-image:before { content: '\e803'; } /* '� �' */
.icons-plus:before { content: '\e804'; } /* '� �' */
.icons-cancel:before { content: '\e805'; } /* '� �' */
.icons-minus:before { content: '\e806'; } /* '� �' */
.icons-star:before { content: '\e807'; } /* '� �' */
.icons-cog:before { content: '\e808'; } /* '� �' */
.icons-play:before { content: '\e809'; } /* '� �' */
.icons-pause:before { content: '\e80a'; } /* '� �' */
.icons-fast-fw:before { content: '\e80b'; } /* '� �' */
.icons-fast-bw:before { content: '\e80c'; } /* '� �' */
.icons-code:before { content: '\e80d'; } /* '� �' */
.icons-table:before { content: '\e80e'; } /* '� �' */
.icons-spoiler:before { content: '\e80f'; } /* '� �' */
.icons-calendar:before { content: '\e810'; } /* '� �' */
.icons-pencil:before { content: '\e811'; } /* '� �' */
.icons-hide:before { content: '\e812'; } /* '� �' */
.icons-list:before { content: '\e813'; } /* '� �' */
.icons-indent-left:before { content: '\e814'; } /* '� �' */
.icons-indent-right:before { content: '\e815'; } /* '� �' */
.icons-trash-empty:before { content: '\e816'; } /* '� �' */
.icons-off:before { content: '\e817'; } /* '� �' */
.icons-heart:before { content: '\e818'; } /* '� �' */
.icons-user:before { content: '\e819'; } /* '� �' */
.icons-left:before { content: '\e81a'; } /* '� �' */
.icons-center:before { content: '\e81b'; } /* '� �' */
.icons-right:before { content: '\e81c'; } /* '� �' */
.icons-italic:before { content: '\e81d'; } /* '� �' */
.icons-bold:before { content: '\e81e'; } /* '� �' */
.icons-comment:before { content: '\e81f'; } /* '� �' */
.icons-resize-full:before { content: '\e820'; } /* '�  ' */
.icons-resize-small:before { content: '\e821'; } /* '� �' */
.icons-quote:before { content: '\e822'; } /* '� �' */
.icons-share:before { content: '\e823'; } /* '� �' */
.icons-smile:before { content: '\e824'; } /* '� �' */
.icons-youtube:before { content: '\e825'; } /* '� �' */
.icons-link:before { content: '\e826'; } /* '� �' */
.icons-volume-off:before { content: '\e827'; } /* '� �' */
.icons-volume-down:before { content: '\e828'; } /* '� �' */
.icons-volume:before { content: '\e829'; } /* '� �' */
.icons-volume-up:before { content: '\e82a'; } /* '� �' */
.icons-addition:before { content: '\e82b'; } /* '� �' */
.icons-infinity:before { content: '\e82c'; } /* '� �' */
.icons-facebook:before { content: '\f09a'; } /* '' */
.icons-strike:before { content: '\f0cc'; } /* '' */
.icons-underline:before { content: '\f0cd'; } /* '' */
.icons-mail:before { content: '\f0e0'; } /* '� ' */
.icons-keyboard:before { content: '\f11c'; } /* '' */
.icons-help:before { content: '\f128'; } /* '' */
.icons-vkontakte:before { content: '\f189'; } /* '' */
.icons-color:before { content: '\f1fb'; } /* '' */
.icons-odnoklassniki:before { content: '\f263'; } /* '' */
.icons-vimeo:before { content: '\f27d'; } /* '' */

.icons-cancel-outline:before { content: '\e82d'; } /* '� �' */
.icons-ok-outline:before { content: '\e82e'; } /* '� �' */

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

/*��������� ����*/
.modmenu {
  margin: 15px 0;
  font-size: 12px;
}

/******************************************************
������ ��������
*******************************************************/
/*������ ���������*/
.messages-container .post > .container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
}

/*�������� ������������*/
.section.online-list thead {
  text-transform: uppercase;
}

.section.online-list th {
  padding: 5px;
}

.online-list tr {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid rgba(2, 15, 15, 0.10);
}

.online-list td {
  padding: 15px 5px;
}

.online-list tbody .tcl, 
.online-list tbody .tc3 {
  text-align: center;
}

.online-list .action {
  width: 45% !important;
}

.online-list .tc3 {
  width: 30%;
}

/*������ ��������*/
#userlist .fs-box, 
#punbbsearch .fs-box, 
#punbbsearch legend {
  text-transform: uppercase;
  font-size: 10px;
}

.formal .inputfield:not(.longinput) {
  margin: 0 20px 0 0;
}

.infofield {
  padding: 0 0 20px;
  text-transform: none;
  line-height: 140%;
  font-size: 12px;
}

.usertable {
  padding: 30px 0 0;
}

.usertable table {
  border-spacing: 0 10px;
  border-collapse: separate;
}

.usertable thead {
  position: sticky;
  top: -1px;
  z-index: 2;
}

.usertable thead tr {
  text-transform: uppercase;
  font-size: 12px;
  background: #babbbb;
  transition: all 0.3s ease;
}

.usertable thead th {
  padding: 5px;
}

.usertable td, 
.usertable th {
  text-align: center;
  vertical-align: middle;
}

.usertable tbody tr {
  cursor: pointer;
}

.tcl.username {
  display: flex;
  align-items: center;
}

.tcl.username .user-avatar {
  order: 0;
}

.tcl.username .usersname {
  padding-left: 10px;
}

.usertable tbody tr:hover {
  transform: scale(1.03);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

#pun-searchtopics .linksb, 
#pun-userlist .linksb {
  flex-direction: row;
}

#pun-poll input[type="checkbox"], 
#pun-post input[type="checkbox"],
#pun-edit input[type="checkbox"] {
  margin: 3px 8px 3px 4px;
}

/*�������*/
#viewprofile {
  padding: 0 40px;
}

#viewprofile tbody > tr {
  display: flex;
  gap: 20px;
}

#profile-left {
  width: 240px;
}

#profile-name,
.messages-container .pa-author {
  color: var(--text-light);
  background: #2F3032;
  padding: 10px 20px 0;
  font-weight: 700;
}

#profile-title,
.messages-container .pa-title {
  color: var(--text-light);
  background: #2F3032;
  padding: 0 20px 10px;
  font-size: 10px;
  text-transform: lowercase;
}

#pa-avatar,
.messages-container .pa-avatar {
  display: flex;
  justify-content: center;
  padding: 30px;
  background: #888F98;
}

#pa-online {
  background: #A2A9B2;
  margin: 10px 0;
  text-align: center;
  font-size: 15px;
  padding: 13px;
}

#pa-edit {
  background: #2F3032;
  color: var(--text-light);
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px;
}

#pa-edit a {
  color: var(--text-light);
}

#profile-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  flex: 1;
}

#profile-right li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: auto;
  text-align: center;
  padding: 10px 10px;
  background: #A2A9B2;
  align-self: stretch;
  font-size: 12px;
}

#profile-right li span {
  padding: 0 0 10px;
}

#profile-right #pa-fld4 img {
  width: 30px;
  height: 30px;
}

#profile-right .lz_desc {
  border-bottom: 0px;
  color: var(--text-dark);
} 

#profile-signature {
  padding: 20px;
}

#profile-signature ul {
  border-style:dashed; 
  border-width:1px 0 0 0; 
  padding: 15px 0 0 0;
}

#profile {
  display: flex;
  padding: 0 40px;
}

#pun-messages #profilenav {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 25px 0;
  gap: 15px;
}

#pun-messages #profilenav h2 {
  position: relative;
  display: block;
  text-align: left;
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
}

#profilenav ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#pun-profile #profile > .container {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  width: 100%;
}

#profilenav {
  grid-row: 1 / 5;
}

#profile .container fieldset, 
#profile .container .formsubmit {
  grid-column: 2;
  margin-bottom: 10px;
}

#profile2 > fieldset, 
#profile1 > fieldset, 
#profile4 > fieldset, 
#profile5 > fieldset,
#profile6 > fieldset,
#profile7 > fieldset,
#profile10 > fieldset,
#profile11 > fieldset {
  border: 1px rgba(52, 66, 70, 0.37) solid;
  padding: 20px;
}

#profile2 > fieldset legend, 
#profile1 > fieldset legend, 
#profile4 > fieldset legend, 
#profile5 > fieldset legend,
#profile6 > fieldset legend,
#profile7 > fieldset legend,
#profile10 > fieldset legend,
#profile11 > fieldset legend {
  padding: 5px;
  background: var(--accent);
  color: var(--text-light);
  font-size: 14px;
}

#pun-messages #profilenav ul {
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 0;
}

#profilenav li {
  padding: 6px 10px 3px;
  position: relative;
  transition: all 0.3s ease;
  transform: translateY(0);
  text-transform: uppercase;
  font-size: 12px;
}

#profilenav li.isactive {
  background: var(--link-dark);
  color: var(--text-light);
}

#profilenav li.isactive a {
  color: var(--text-light);
}

#profile .inputfield.required,
#profile .selectfield,
#profile .datafield,
#profile .inputfield {
  margin: 0 0 10px;
}

#profile .fs-box a {
  color: var(--link-dark);
}

#profile .inputfield.required .input,
#profile #num-posts .input,
#profile .input #fld6 {
  margin: 10px 0 0;
  display: block;
}

.infofield {
  padding: 0 0 20px;
  text-transform: none;
}

#profile5 .fs-box.hashelp {
  margin-top: 30px;
}

#profile5 .fs-box.hashelp textarea {
  margin-top: 10px;
}

#profile5 .parsedsig {
  margin-top: 10px;
}

#profile10 > fieldset legend {
  margin-left: 10px;
  padding: 0 5px;
}

#profile10 .select-file {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  flex-direction: row-reverse;
  position: relative;
  z-index: 5;
  margin-left: 1px;
}

#profile10 .pagelink {
  font-size: 12px;
}

#profile10 .pagelink a{
  padding-left: 5px;
}

#profile10 #file_upload {
  padding-right: 15px;
}

#profile10 .submitend {
  border-top: 1px dashed #888F98;
  padding-top: 10px;
}

#profile10 #update_comments {
  margin-bottom: 15px;
}

#profile10 .submitend .pagelink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

#profile10 .submitend .files-page-select {
  margin-left: auto;
}

#profile11 input.button {
  margin-top: 20px;
}

.messages-container table {
  border-spacing: 0 10px;
  border-collapse: separate;
}

.messages-container tr {
  display: grid;
  grid-template-columns: 70% 25% 5%;
  padding: 0 0 10px;
  border-bottom: 1px solid #888F98;
}

.messages-container .pmtcl1 {
  grid-column: 1 / 2;
  width: 100% !important;
  margin: 0 0 15px;
}

.messages-container th {
  padding: 5px;
}

.messages-container .pmtc22 {
  display: flex;
  align-items: center;
  width: 100% !important;
  min-width: 0;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.messages-container .pmtc33 {
  grid-column: 1 / 2;
  width: 100% !important;
}

.messages-container .pmtc24 {
  text-align: center;
  grid-column: 3 / 4;
  width: 100% !important;
  grid-row: 1 / 3;
  align-self: center;
}

#messages .pmtc24 input[type="checkbox"] {
  background: #9a9a9a;
}

.messages-container tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#messages tbody td {
  vertical-align: middle;
  position: relative;
}

.messages-container .pmtcl1 .tclcon {
  padding-left: 25px;
}

#messages .linksb {
  flex-direction: row;
}

/*�������� ������*/
#pun-about {
  text-align: center;
  text-transform: uppercase;
  font-size: 8px;
}

/*�������*/
#pun-admain .adformal h2, 
#pun-admain #pun-adnav h2 {
  border-style: none;
  background: #babbbb;
  color: var(--text-basic-dark);
  font-size: 12px;
  text-transform: lowercase;
  font-weight: 700;
}