/* =============================================================
   STYLE.CSS — структура дизайну (назви змінних, полів і перемикач тем — як на квібблері)
   Кольори обох тем: див. блок «ПАЛІТРА І ТЕМИ» нижче.
   Темна тема: атрибут data-forum-theme="dark" на <html>.
   ============================================================= */

@import url(style_cs.1794010206.css);
/* Шрифти дизайну — тільки ті, що справді використовуються.
   Великий набір шрифтів для вибору в формі відповіді (Caveat, Oswald, Unbounded…)
   тепер вантажиться скриптом у HTML низу і тільки там, де є пости або форма відповіді:
   головна і списки тем відкриваються швидше. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Mulish:ital,wght@0,300..800;1,300..800&family=Antonio:wght@100..700&display=swap');
/* Шрифти з квібблера, яких тут ще не було (для постів і шаблонів у віконцях) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Instrument+Serif:ital@0;1&family=Unbounded:wght@200..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Material+Icons+Outlined&display=swap');
/* Font Awesome */

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

@import url('https://forumstatic.ru/files/001b/60/55/18659.css');
/* доп шрифты */

@import url(https://forumstatic.ru/files/001c/39/a8/62559.css);
/* власні шрифти квібблера (вантажаться тільки там, де їх справді використано) */
@font-face { font-family: horror; src: local("horror"), url(https://forumstatic.ru/files/0019/86/a2/53604.otf); font-display: swap; }
@font-face { font-family: Kudry; src: local("Kudry"), url(https://forumstatic.ru/files/001c/0a/be/46374.otf); font-display: swap; }
@font-face { font-family: Sagire; src: local("Sagire"), url(https://forumstatic.ru/files/001b/73/d1/52535.otf); font-display: swap; }
@font-face { font-family: Cinzel; src: local("Cinzel"), url(https://forumstatic.ru/files/001a/ff/52/15353.ttf); font-display: swap; }
@font-face { font-family: raleway; src: local("raleway"), url(https://forumstatic.ru/files/001b/70/14/27590.ttf); font-display: swap; }
@font-face { font-family: espina; src: local("espina"), url(https://forumstatic.ru/files/001b/70/14/43891.ttf); font-display: swap; }
@font-face { font-family: ramillas; src: local("ramillas"), url(https://forumstatic.ru/files/001b/70/14/21130.ttf); font-display: swap; }
@font-face { font-family: TheSilverEditorial; src: local("TheSilverEditorial"), url(https://forumstatic.ru/files/001c/a5/83/34024.ttf); font-display: swap; }
@font-face { font-family: nice; src: local("nice"), url(https://forumstatic.ru/files/001c/a5/83/60762.otf); font-display: swap; }
@font-face { font-family: things; src: local("things"), url(https://forumstatic.ru/files/001c/a5/83/33043.otf); font-display: swap; }
@font-face { font-family: fine; src: local("fine"), url(https://forumstatic.ru/files/001b/73/d1/67460.otf); font-display: swap; }

@font-face {
  font-family: 'PPNeueMachina';
  src: local("PP Neue Machina"), url(https://forumstatic.ru/files/001c/74/d2/72986.otf);
  font-display: swap;
}

/* =========================================================
   ПАЛІТРА І ТЕМИ (назви змінних — як на квібблері)
   Перемикач ставить на <html> атрибут data-forum-theme:
   "light" (або без атрибута) — світла, "mid" — середня, "dark" — темна.
   Світла — Troms&#248;: twilight purple #4A3B59 · snow drift #D4D8DD
                    mustard #D99B18 · dark ocean #182638
   Темна — Iceland: basalt #2B2D30 · sea-foam #D9DBDA
                    column grey #4F5254 · north atlantic blue #1A344D
   ========================================================= */

:root {
  --pwidth: 236px;                                   /* ширина мініпрофілю */
  --font-family: 'Rubik', sans-serif;
  --second-family: 'Rubik', sans-serif;
  --second-font: 'Playfair Display', serif;          /* нік і «ім'я, вік» */
  --fa: "Font Awesome 6 Pro", "Font Awesome 6 Free";

  --bg-header: url(https://forumstatic.ru/files/0019/86/a2/48915.png);   /* 1100x423 */
  --bg-footer: url(https://forumstatic.ru/files/0019/86/a2/39338.png);   /* 1100x123 */
  --bg-header-events: url(https://forumstatic.ru/files/001c/69/a5/74370.svg);
  --bg-guestroom: url(https://forumstatic.ru/files/001c/74/d2/23046.svg) top center no-repeat;
  --inew-icon: url(https://forumstatic.ru/files/001c/74/d2/65097.png) no-repeat center;
  --star-h2: url(https://forumstatic.ru/files/001c/74/d2/71318.svg);
  --avatar-newbie: url(https://forumstatic.ru/files/001c/74/d2/65737.svg);
  --ink-dark: #182638;                               /* темні плашки на шапці, однакові в усіх темах */

  /* вертикальні картинки категорій на головній (як на квібблері) */
  --cat1-img: url(https://forumstatic.ru/files/001c/a5/83/24761.jpg);
  --cat2-img: url(https://forumstatic.ru/files/001c/a5/83/57217.jpg);
  --cat3-img: url(https://forumstatic.ru/files/001c/a5/83/61580.jpg);
  --cat4-img: url(https://forumstatic.ru/files/001c/a5/83/79077.jpg);
  --cat5-img: url(https://forumstatic.ru/files/001c/a5/83/50824.jpg);
  --cat6-img: url(https://upforme.ru/uploads/001c/cf/a0/4/865488.png);
  --cat7-img: url(https://upforme.ru/uploads/001c/cf/a0/4/421802.png);
  --cat8-img: linear-gradient(135deg, #4A3B5955, #1A344D55); /* ЗАМІНИ на url(посилання) */
  --cat-overlay: rgba(0, 0, 0, 0);
  /* фон персональної сторінки і наскільки його притінити кольором теми */
  --char-bg-img: url(https://forumstatic.ru/files/001c/cf/a0/56813.png);
  --char-veil: 25%;
  /* корони форумів: стара / нова */
  --icon-old: url(https://upforme.ru/uploads/001c/a5/83/2/499178.png);
  --icon-new: url(https://upforme.ru/uploads/001c/a5/83/2/696156.png);
}

/* ---------- СВІТЛА · Troms&#248; ---------- */

:root:not([data-forum-theme="dark"]) {
  color-scheme: light;
  --page-bg: radial-gradient(1400px 620px at 50% -160px, rgba(74, 59, 89, .38), transparent 70%), #C9CED5;
  --pun-bg: #E4E7EB;                 /* тіло форуму */
  --sec-bg: #F3F4F6;                 /* картки, мініпрофіль */
  --card-bg: #E6E9ED;
  --link: #182638;                   /* основний текст */
  --link-hover: #4A3B59;             /* акцент */
  --link-hover-text: #4A3B59;        /* колір посилань при наведенні */
  --main-acc: #D4D8DD;               /* поля, кнопки, цитати */
  --add-acc: #BEC4CD;                /* рамки, підкладки */
  --meta-line: #C4C9D0;
  --muted: #687080;                  /* приглушений текст */
  --accent2: #D99B18;                /* mustard: дрібні акценти */
  --status: #D99B18;                 /* крапка онлайну */
  --head-link: #D7C9E6;              /* посилання на темних плашках шапки */
  --head-link-hover: #FFFFFF;

  --btn-bg: #4A3B59;
  --btn-text: #FFFFFF;               /* текст на акцентних плашках */
  --btn-border: #4A3B59;
  --btn-hover-bg: #F3F4F6;
  --btn-hover-text: #4A3B59;

  --user-bg-default:
    radial-gradient(60% 45% at 22% 28%, rgba(217, 155, 24, .55), transparent 70%),
    radial-gradient(55% 40% at 82% 18%, rgba(212, 216, 221, .55), transparent 70%),
    radial-gradient(70% 55% at 60% 75%, rgba(24, 38, 56, .55), transparent 70%),
    linear-gradient(160deg, #4A3B59, #2E3046);
  --plate-bg: linear-gradient(120deg, #182638 0%, #4A3B59 55%, #B98A3A 100%);
  --card-shadow: 0 12px 26px rgba(24, 38, 56, .14);
  --accent-glow: 0 4px 10px rgba(74, 59, 89, .35), inset 0 2px 8px rgba(255, 255, 255, .35);
  --box-shadow-news: 0 6px 14px rgba(24, 38, 56, .18), inset 0 0 8px rgba(212, 216, 221, .6);
  --box-shadow-inew: 2px 4px 6px rgba(24, 38, 56, .18), -3px -4px 5px rgba(255, 255, 255, .5);
  --bg-navlinks: rgba(74, 59, 89, .15);
  --bg-dark-rgba: rgba(24, 38, 56, .06);
  --bg-accent-rgba: rgba(74, 59, 89, .15);
  --post-body-color: rgba(255, 255, 255, .4);
}

/* ---------- СЕРЕДНЯ · сутінки (Troms&#248; + Iceland) ----------
   Приглушений сіро-блакитний, текст темний, акцент синьо-фіолетовий,
   mustard для дрібниць. Чого тут немає — береться зі світлої теми. */

:root[data-forum-theme="mid"] {
  color-scheme: light;
  --page-bg: radial-gradient(1400px 620px at 50% -160px, rgba(74, 59, 89, .55), transparent 70%), #7D8290;
  --pun-bg: #B9BEC6;                 /* тіло форуму */
  --sec-bg: #C9CDD4;                 /* картки, мініпрофіль */
  --card-bg: #AEB4BD;
  --link: #182638;
  --link-hover: #3D4A6B;
  --link-hover-text: #3D4A6B;
  --main-acc: #ABB1BA;
  --add-acc: #969CA7;
  --meta-line: #9EA4AE;
  --muted: #4E5666;
  --accent2: #D99B18;
  --status: #D99B18;
  --head-link: #D7C9E6;
  --head-link-hover: #FFFFFF;

  --btn-bg: #3D4A6B;
  --btn-text: #FFFFFF;
  --btn-border: #3D4A6B;
  --btn-hover-bg: #C9CDD4;
  --btn-hover-text: #3D4A6B;

  --user-bg-default:
    radial-gradient(60% 45% at 22% 28%, rgba(217, 155, 24, .4), transparent 70%),
    radial-gradient(55% 40% at 82% 18%, rgba(201, 205, 212, .5), transparent 70%),
    radial-gradient(70% 55% at 60% 75%, rgba(26, 52, 77, .6), transparent 70%),
    linear-gradient(160deg, #4A3B59, #1A344D);
  --plate-bg: linear-gradient(120deg, #182638 0%, #3D4A6B 55%, #B98A3A 100%);
  --card-shadow: 0 12px 26px rgba(24, 38, 56, .2);
  --accent-glow: 0 4px 10px rgba(61, 74, 107, .35), inset 0 2px 8px rgba(255, 255, 255, .3);
  --box-shadow-news: 0 6px 14px rgba(24, 38, 56, .22), inset 0 0 8px rgba(201, 205, 212, .5);
  --box-shadow-inew: 2px 4px 6px rgba(24, 38, 56, .22), -3px -4px 5px rgba(255, 255, 255, .3);
  --bg-navlinks: rgba(61, 74, 107, .18);
  --bg-dark-rgba: rgba(24, 38, 56, .08);
  --bg-accent-rgba: rgba(61, 74, 107, .18);
  --post-body-color: rgba(255, 255, 255, .25);
  --cat-overlay: rgba(20, 24, 28, .15);
  --char-veil: 55%;
}

/* ---------- ТЕМНА · Iceland ---------- */

:root[data-forum-theme="dark"] {
  color-scheme: dark;
  --page-bg: radial-gradient(1400px 620px at 50% -160px, rgba(26, 52, 77, .7), transparent 70%), #26292C;
  --cat-overlay: rgba(20, 24, 28, .45);
  --char-veil: 85%;
  --icon-old: url(https://upforme.ru/uploads/001c/a5/83/2/292276.png);
  --icon-new: url(https://upforme.ru/uploads/001c/a5/83/2/812674.png);
  --pun-bg: #3E4144;                 /* тіло форуму: темне, але не чорне */
  --sec-bg: #484B4F;
  --card-bg: #575B5F;
  --link: #D9DBDA;                   /* sea-foam */
  --link-hover: #6E96BE;             /* north atlantic blue, освітлений, щоб читався */
  --link-hover-text: #6E96BE;
  --main-acc: #53575B;
  --add-acc: #62666A;
  --meta-line: #62666A;
  --muted: #969A9C;
  --accent2: #8CACCA;
  --status: #6E96BE;
  --head-link: #9DBAD6;
  --head-link-hover: #FFFFFF;

  --btn-bg: #6E96BE;
  --btn-text: #141618;
  --btn-border: #6E96BE;
  --btn-hover-bg: #D9DBDA;
  --btn-hover-text: #1A344D;

  --user-bg-default:
    radial-gradient(55% 40% at 24% 26%, rgba(217, 219, 218, .38), transparent 70%),
    radial-gradient(60% 45% at 78% 35%, rgba(79, 82, 84, .9), transparent 70%),
    radial-gradient(70% 50% at 40% 80%, rgba(26, 52, 77, .9), transparent 70%),
    linear-gradient(160deg, #1A344D, #2B2D30);
  --plate-bg: linear-gradient(120deg, #1B1D20 0%, #1A344D 55%, #4F6E8C 100%);
  --card-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  --accent-glow: 0 4px 10px rgba(110, 150, 190, .3), inset 0 2px 8px rgba(255, 255, 255, .25);
  --box-shadow-news: 0 6px 14px rgba(0, 0, 0, .4), inset 0 0 8px rgba(79, 82, 84, .6);
  --box-shadow-inew: 2px 4px 6px rgba(0, 0, 0, .4), -3px -4px 5px rgba(255, 255, 255, .04);
  --bg-navlinks: rgba(110, 150, 190, .15);
  --bg-dark-rgba: rgba(0, 0, 0, .18);
  --bg-accent-rgba: rgba(110, 150, 190, .18);
  --post-body-color: rgba(79, 82, 84, .25);
}

@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (-o-min-device-pixel-ratio: 0/1), not all and (min-resolution: .001dpcm) {
  @supports (-webkit-appearance: none) {
    .cult-links a::after {
      content: "\271A";
      position: absolute;
      margin: 2px 6px;
      color: var(--muted);
      font-size: 1.3em;
    }
  }
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--link-hover) var(--main-acc);
  }
}

@supports (-webkit-touch-callout: none) {
  html {
    -webkit-text-size-adjust: 100%;
  }
}

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

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

a.group1,
a.group4,
a.group,
a.group5,
a.group6 {
  text-transform: lowercase;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  transition: ease-in-out .4s;
}

.ank-header {
  width: 600px;
  margin: 0 auto !important;
  border: 1px solid var(--add-acc);
}

.ank-imgs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-block: 4px;
}

.ank-name {
  text-align: center;
  display: block;
  font-size: 20px;
  background-color: var(--sec-bg);
  border-bottom: 1px solid var(--add-acc);
}

.ank-info {
  display: flex;
  background-color: var(--sec-bg);
  justify-content: center;
  gap: 10px;
  padding-block: 8px;
}

.ank-info li {
  text-align: center;
  width: 160px;
}

.ank-info li span {
  font-weight: 700;
  color: var(--link-hover);
}

.ank-desc {
  width: 560px;
  margin: 0 auto !important;
  white-space: pre-wrap;
}

.abilities {
  width: 560px;
  margin: 0 auto !important;
  background-color: var(--sec-bg);
  padding-inline: 20px;
  padding-bottom: 20px;
  border: 1px solid var(--add-acc);
  white-space: pre-wrap;
  margin-top: 20px !important;
}

.abilities span {
  display: block;
  background-color: var(--main-acc);
  border: 1px solid var(--add-acc);
  margin-top: 12px;
  padding-block: 4px;
  padding-left: 12px;
}

.post-links a {
  text-transform: lowercase;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  transition: color ease-in-out .4s;
  color: var(--link);
}

.post-links a:hover {
  color: var(--link-hover) !important;
}

/* A2.1 */

html,
body {
  margin: 0;
  padding: 0;
  color: var(--link);
}

/* A2.2 */

.punbb * {
  margin: 0;
}

/* A2.3 */

.punbb ul,
.punbb dl,
.punbb li,
.punbb dd,
.punbb dt {
  padding: 0;
  list-style: none;
}

/* A2.4 */

.punbb img {
  border: none;
}

/* A2.5 */

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

/* A2.6 */

.checkfield input[type="checkbox"],
.radiofield input[type="radio"] {
  margin: 0 0.3em;
}

/* A2.7 */

p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle;
}

/* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */

body {
  font-size: 100.01%;
  background: var(--page-bg);
  background-attachment: fixed;
  width: 1100px;
  margin: auto;
}

/* захист: html-шаблони в постах (гостьова тощо) інколи пишуть
   html, body { margin: 0 !important; background: ... !important }
   і зсувають увесь форум ліворуч. Ці правила сильніші за такі. */
/* віконце html-блоку в пості (кросворд, гостьова): його body отримує клас
   post-content і підхоплював відступи посту, через що висота рахувалась
   меншою і низ обрізався */
html.punbb:has(> body.post-content) {
  /* сам html віконця має клас punbb і підхоплював top: 60px форуму —
     вміст зсувався вниз на 60px і низ обрізався */
  top: 0 !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
html.punbb > body.post-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

html:root:root:has(> body #pun) {
  background: none !important;
  padding: 0 !important;
}
html:root:root > body:has(#pun) {
  width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: var(--page-bg) !important;
  background-attachment: fixed !important;
}

/* A3.2 */

.punbb {
  font: normal 68.75% rubik;
}

/* 3.3 */

.punbb textarea,
.punbb input,
.punbb select,
.punbb optgroup {
  font: 400 10px var(--font-family);
  outline: none;
  background: var(--main-acc);
  border: 0px solid var(--add-acc);
  border-radius: 10px;
  color: var(--link);
  font-size: 12px;
}

.punbb input {
  padding: 2px 12px;
}

/* A3.4 */

.punbb h1,
.punbb h2,
.punbb h3,
.punbb table,
.punbb h4,
.punbb th {
  font-weight: normal;
}

/* A3.5 */

.punbb h1 span,
.punbb h2 span,
.punbb legend span {
  font-size: 1.1em;
}

/* A3.6 */

.punbb pre {
  font: 400 12px var(--font-family);
}

/* A3.7 */

.punbb address,
.punbb em {
  font-style: normal;
}

/* A3.8 */

.punbb .post-content em {
  font-style: italic;
}

/* A3.9 */

.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}

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

#pun-pagelinks a:active,
#pun-pagelinks a:focus {
  color: var(--link);
  box-shadow: inset 1000px 0 0 0 var(--link-hover);
}

li.pl-edit {
  transition: color ease-in-out .4s;
}

li.pl-edit a:hover {
  color: var(--link-hover) !important;
}

/* A3.11 */

.punbb optgroup {
  font-weight: bold;
}

/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */

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

/* A4.2 */

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

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */

#pun {
  margin: 0 auto 18px auto;
  padding: 0 10px 10px 10px;
  border-style: none;
  border-width: 0;
  width: 1100px;
  border-radius: 5px;
}

/* A5.2 */

.punbb {
  float: left;
  width: 100%;
  top: 60px;
  margin-bottom: 150px;
  position: relative;
  height: auto;
  padding: 0px;
  background-color: var(--pun-bg);
  border-radius: 10px;
}

:root[data-forum-theme="dark"] div.punbb {
  background-color: var(--pun-bg);
}

/* A5.3 */

#pun-redirect,
#pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
}

/* A5.4 */

.punbb .main {
  margin-bottom: 1em;
}

/* A5.5 */

.punbb .category,
.punbb .post {
  margin-top: 20px;
}

.punbb .category {
  width: 940px;
  margin: 0 auto;
}

.punbb .category h2 {
  margin-top: 12px;
  padding: 0px !important;
}

/* A5.6 */

.punbb #pun-category1,
.punbb .toppost,
.punbb .topicpost {
  margin-top: 0;
}

/* 5.7 */

#pun-post .topic {
  margin-top: 1em;
}

/* A5.8 */

.punbb .section,
.punbb .forum,
.punbb .formal,
.punbb .modmenu,
.punbb .info,
.punbb .category,
.punbb .post {
  border-style: none none solid none;
  border-width: 0px 0px 0px 0px;
}

/* A5.9 */

.punbb .container {
  border-style: solid;
  border-width: 0px;
}

/* A5.10 */

.punbb .section h2,
#pun-main h1,
#pun-main h2,
#pun-stats h2,
#pun-debug h2 {
  padding: 0.5em 1em;
  border-style: none solid solid none;
  border-width: 0 0px 0px 0;
}

#pun-index .category h2 {
  width: 1100px;
  position: relative;
  left: -80px;
  height: 33px;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--add-acc) 80%, transparent);
}

#pun-index .category h2::before {
  content: '';
  position: absolute;
  width: 111px;
  height: 66px;
  top: 5px;
  left: 40px;
  background: var(--star-h2);
}

#pun-index .category h2 span {
  font: 800 42px var(--font-family);
  color: color-mix(in srgb, var(--add-acc) 90%, transparent);
  position: relative;
  top: 10px;
}

/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */

.punbb .post-content {
  padding: 20px 10px;
  margin: 0 0px 0 9px;
  box-sizing: border-box;
  width: 99.2%;
  border-radius: 10px;
  text-align: justify;
  color: var(--link);
}

/* B1.2 */

.punbb .post-sig dt {
  display: block;
  border-top: 1px dashed var(--link);
  width: 100%;
  margin: 10px 0;
  opacity: .2;
}

/* B1.3 */

.punbb .post-content p {
  margin-bottom: .6em;
  line-height: 150%;
  overflow-wrap: anywhere;
}

.post-content td {
  border-color: transparent;
}

/* B1.4 */

.punbb .post-content img {
  vertical-align: text-bottom;
}

/* B1.5 */

.punbb .post-content img.postimg {
  vertical-align: middle;
}

/* B1.6 */

.punbb .post-content .blockcode,
.punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--main-acc) 40%, transparent);
  border-radius: 4px;
}

.punbb .post-content .blockcode {
  padding: 1em;
  box-sizing: border-box;
}

/* B1.7 */

.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
}

/* B1.8 */

.punbb .post-content .quote-box:not(.hide-box):not(.spoiler-box) {
  margin: 35px 0 10px;
  padding: 1em;
  border-radius: 10px;
  background: color-mix(in srgb, var(--main-acc) 40%, transparent);
}

.punbb .post-content .spoiler-box {
  padding: 1em;
  background: color-mix(in srgb, var(--main-acc) 40%, transparent);
  border-radius: 10px;
}

.punbb .post-content .code-box {
  margin: 10px 0 10px;
  padding: 1em;
  border-radius: 10px;
}

.punbb .post-content .code-box {
  padding: 0em;
}


.hide-box {
  padding: 0px !important;
}

.hide-box blockquote {
  padding: 1em;
  box-sizing: border-box;
}

.hide-box cite {
  background: color-mix(in srgb, var(--add-acc) 20%, transparent);
  font: 400 12px var(--font-family);
  color: var(--link);
  height: 30px;
  width: 100%;
  padding: 8px 20px;
  border-radius: 4px;
  margin: 0px 0px 5px 0px;
  box-sizing: border-box;
}

/* B1.9 */

.punbb .quote-box cite,
.punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-style: normal;
  font-family: 400 10px var(--font-family);
  text-transform: lowercase;
}

.code-box strong.legend {
  background: color-mix(in srgb, var(--add-acc) 20%, transparent);
  font: 400 12px var(--font-family);
  height: 23px;
  width: 100%;
  padding: 3px 20px;
  border-radius: 4px;
  margin: 0px 0px 2px 0px;
  box-sizing: border-box;
}

.punbb .answer-box cite {
  background: color-mix(in srgb, var(--add-acc) 20%, transparent);
  text-transform: lowercase;
  position: absolute;
  font: 400 13px var(--font-family);
  color: var(--link);
  height: 17px;
  padding: 2px 13px 3px;
  border-radius: 4px;
  margin: -37px 6px;
  z-index: 0;
}

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */

.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
}

/* B2.2 */

.punbb .info-box * {
  padding: 0 0 0.7em 0;
}

/* B2.3 */

.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
}

/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */

.punbb .linkst {
  float: left;
  position: relative;
  width: 98.5%;
  font-size: 1em;
  height: 0;
}

/* B3.2 */

.multipage {
  margin-top: 3em;
}

/* B3.3 */

.linkst .pagelink {
  position: absolute;
  margin-top: -34px;
  left: 44px;
  color: var(--link);
  font-size: 0px;
  background: color-mix(in srgb, var(--link) 5%, transparent);
}

/* B3.4 */

.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 28px;
  width: 16em;
  text-align: right;
  z-index: 18;
  text-transform: lowercase;
}

/* B3.5 */

.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1em;
}

/* B3.6 */

.linksb .pagelink {
  float: left;
  position: relative;
  top: 3px;
  left: 32px;
  right: 14px;
  text-align: left;
  font-size: 0;
  background: color-mix(in srgb, var(--link) 5%, transparent);
}

/* B3.7 */

.linksb .postlink {
  float: right;
  width: 16em;
  right: 14px;
  position: relative;
}

/* B3.8 */

.subscribelink {
  clear: both;
  padding-top: 0.3em;
  width: 1044px;
  text-transform: lowercase;
}

/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */

.punbb .formal .container {
  padding: 0em 2.3em 1.1em 2.3em;
}

/* C1.2 */

.punbb .formsubmit {
  padding: 0 0 0 .7em;
  margin: 0em 0 0 0;
  display: flex;
  justify-content: flex-start;
}

/* C1.3 */

.punbb .formsubmit input,
.punbb .formsubmit a,
.punbb .formsubmit span {
  background: var(--main-acc);
  color: var(--link);
  border: none;
  border-radius: 26px;
  padding: 2px 15px 3px 15px;
  cursor: pointer;
  font: 400 12px var(--font-family);
  text-transform: lowercase;
  margin: 0 5px;
  outline: none;
  transition: background ease-in-out .4s;
  overflow: hidden;
  height: 32px;
}

.punbb .formsubmit input:hover,
.punbb .formsubmit a:hover,
.punbb .formsubmit span:hover {
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
}

.punbb .formsubmit a,
.punbb .formsubmit span,
input[type="submit"],
input[type="button"] {
  background: var(--main-acc);
  border: 0px solid;
  padding: 1px 20px 2px;
  cursor: pointer;
  font: 400 12px var(--font-family);
  color: var(--link);
  text-transform: lowercase;
  margin: 0 2px;
  transition: ease-in-out .4s;
  border-radius: 50px;
}

input[type="submit"]:hover,
input[type="button"]:hover {
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
}

/* C1.4 */

.punbb fieldset {
  border-style: solid;
  border-width: 0px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0;
  color: var(--link);
}

/* C1.5 */

.punbb fieldset legend {
  padding: 2px 5px 4px;
  margin: 23px 0 0 -5px;
  border-radius: 4px;
  font-size: 1.1em;
  text-transform: lowercase;
  z-index: 5;
}

#pun-viewtopic fieldset legend {
  position: absolute;
}

/* C1.6 */

.punbb fieldset legend span {
  font: 700 1em var(--font-family);
  padding: 1px 10px 2px;
  border-radius: 10px;
  text-transform: lowercase;
}

/* C1.7 */

.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0;
}

/* C1.8 */

.punbb .fs-box {
  padding: 1em 0 0.8em 0;
}

/* C1.9 */

.punbb .fs-box p,
.punbb .fs-box fieldset {
  padding: 0 0 0.8em 0;
}

/* C1.10 */

.punbb .inline .inputfield,
.punbb .inline .selectfield,
.punbb .inline .passfield {
  float: left;
  margin-right: 1em;
}

/* C1.11 */

.punbb .inline .infofield {
  clear: both;
}

/* C1.12 */

.punbb .datafield br {
  display: none;
}

/* C1.13 */

.punbb .required label,
.punbb .datafield span.input {
  font-weight: bold;
}

/* C1.14 */

.punbb .datafield span.input a {
  font-weight: normal;
}

/* C1.15 */

.punbb .areafield span.input,
.punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%;
}

/* C1.16 */

.punbb textarea,
.punbb .longinput input {
  width: 64%;
  margin: 0;
}

/* C1.17 */

.punbb .hashelp {
  position: relative;
}

/* C1.18 */

.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
}

/* c1.19 */

.punbb #profile .helplinks {
  top: 1.5em;
}

/* C1.20 */

.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
}

/* C1.21 */

#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
}

/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */

.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
}

/* C2.2 */

.punbb .main .tc2,
.punbb .main .tc3,
.punbb .main .tcmod {
  text-align: left;
  word-break: break-word;
}

#pun-viewforum .main .tc3,
#pun-viewforum .main .tc2 {
  width: 10%;
}

#pun-viewforum .main td.tcr {
  width: 40%;
}

#pun-viewforum .main .tcl {
  width: 65%;
}

#pun-searchtopics .tcr .user-avatar {
  display: none;
}

#forum>td.tc2,
#post>fieldset:nth-child(n)>legend>span,
#pun-index td.tc2,
#pun-index td.tc3,
#pun-navlinks #navawards,
#sparkle1,
#sparkle2,
#sparkle3,
#sparkle4,
#sparkle5,
.lastedit,
.punbb .datafield br,
.punbb thead,
.topic a.sharelink,
div#pun-live-rusff,
td.tc2.pmtc22>em {
  display: none;
}

#pun-main>div.usertable>div>table>thead,
.forum div table thead {
  display: contents;
}

#pun-main h1 {
  display: none;
}

/* C2.3 */

.hasicon>tr>td.tcr {
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  padding-left: 60px;
  justify-content: center;
  align-items: flex-start;
  border-left: 1px solid #81888b47;
}

.hasicon {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* C2.4 */

#pun-userlist .main .tcl {
  width: 40%;
}

#pun-modviewforum .main .tcl {
  width: 85%;
}

#pun-searchtopics .main .tcl {
  width: 90%;
}

#pun-searchtopics table>thead>tr {
  grid-template-columns: 5fr 3fr 2fr 2fr;
  display: none;
}

/* C2.5 */

#pun-userlist .main .tc2 {
  text-align: left;
}

#pun-searchtopics div.icon {
  display: none;
}

#pun-searchposts .post h3 {
  font: 400 10px var(--font-family);
}

#pun-searchposts li.pa-replies {
  background: var(--main-acc);
  text-align: center;
  font: 400 10px var(--font-family);
  margin: 10px;
  border-radius: 10px;
  padding: 3px 0 4px;
  text-transform: lowercase;
  color: var(--link);
}

#pun-searchposts .post h3 span {
  height: 20px;
  padding: 2px 15px 3px;
}

#pun-multimove .post-author::before,
#pun-multidelete .post-author::before,
#pun-searchposts .post-author::before {
  content: none !important;
}

#pun-searchposts .post .post-author {
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
}

/* C2.6 */

#pun-debug table .tcl {
  width: 15%;
  white-space: normal;
}

/* C2.7 */

#pun-debug .tcr {
  width: 90%;
  white-space: normal;
}

/* C2.8 */

#pun-index .tcl h3 {
  text-transform: lowercase;
  margin-bottom: 5px;
  padding: 0px 0 5px 0;
  line-height: 7px !important;
  width: fit-content;
  transition: ease-in-out .4s;
  font: 800 20px var(--font-family);
  color: var(--link-hover);
  border-bottom: 0;
  transform: translateY(0);
  transition: color ease-in-out .4s, transform ease-in-out .4s, text-shadow ease-in-out .4s;
}

/* без підкреслення: назва форуму м'яко піднімається, як кнопка перемикача тем */
#pun-index .tcl h3:hover {
  color: var(--link);
  border-bottom: 0;
  transform: translateY(-3px);
  text-shadow: 0 3px 6px color-mix(in srgb, var(--link-hover) 30%, transparent);
}

/* C2.9 */

.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
}

/* C2.10 */

.punbb td .modlist {
  display: block;
  padding-top: 0.3em;
}

/* C2.11 */

.punbb .main td {
  border-style: solid none none solid;
  border-width: 0px 0 0 0px;
  padding: 0.8em 1em;
}

/* C2.12 */

.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 0px;
  padding: 0.4em 1em 0.4em 1em;
}

/* C2.13 */

.punbb .main .tcl {
  border: 0;
}

/* C2.14 */

.punbb tbody.hasicon td.tcl {
  padding-left: 1.2em;
}

/* C2.15 */

.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
}

/* C2.16 */

.punbb table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
}

/* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */

.punbb .post .container {
  margin-top: 10px;
  margin-bottom: 5px;
}

/* C3.2 */

.punbb .post h3 {
  border-width: 0px;
  z-index: 9 !important;
}

/* C3.3 */

.punbb .post h3 span {
  padding: 1px 20px 3px;
  margin: 0px 40px 0 40px;
  display: block;
  background: color-mix(in srgb, var(--sec-bg) 30%, transparent);
  border-radius: 10px;
  max-width: calc(100% - 30px);
  box-sizing: border-box;
  position: relative;
}


div.pagelink {
  display: flex;
  font: 400 11px var(--font-family);
  text-transform: lowercase;
  align-items: center;
  padding: 2px 2px 2px 2px;
  border-radius: 4px;
  background: var(--bg-dark-rgba);
  width: auto !important;
  color: var(--link);
  gap: 1px;
}

div.pagelink>a {
  padding: 3px 8px 4px 8px !important;
  background: color-mix(in srgb, var(--link) 5%, transparent);
  margin: 0 !important;
  overflow: hidden;
  border-radius: 2px;
  font-size: 12px;
  width: 5px;
  display: flex;
  justify-content: center;
}

div.pagelink>a:hover {
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
}

div.pagelink>strong {
  padding: 3px 8px 4px 8px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--add-acc) 70%, transparent);
  font-size: 12px;
}

div.pagelink>*:first-child {
  margin-left: 0px;
}

/* ПРОФИЛЬ */

/* =========================================================
   МІНІПРОФІЛЬ У ПОСТІ (поля як на квібблері)
   Над карткою — фон юзера --user-bg, тане донизу.
   Свій фон: рядок .post[data-user-id="N"] нижче; без нього — градієнт теми.
   Картка: нік &#8594; підпис &#8594; аватар &#8594; fld1 (ім'я, вік) &#8594; fld2 (лз)
   &#8594; статистика .addflds (пости · репутація · гроші fld3) &#8594; плашка fld4.
   ========================================================= */

.punbb .post .post-author {
  --user-bg: var(--user-bg-default);
  position: relative;
  z-index: 0;
  float: left;
  display: block;
  width: var(--pwidth);
  height: auto;
  margin: 18px 0 40px 12px;
  border-radius: 16px;
}

.punbb .post .post-body {
  margin-left: calc(var(--pwidth) + 22px);
}

/* фон юзера */
.punbb .post .post-author::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  z-index: -1;
  border-radius: 16px;
  background: var(--user-bg) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

/* фони окремих юзерів */
#pun-viewtopic .post[data-user-id="2"] .post-author { --user-bg: url(https://i.pinimg.com/736x/f3/e1/36/f3e136d7fea2a18e434950ee3edc70eb.jpg); }
#pun-viewtopic .post[data-user-id="3"] .post-author { --user-bg: url(https://i.pinimg.com/1200x/d8/05/71/d80571d7e2cc676f52a7aa848134b313.jpg); }
#pun-viewtopic .post[data-user-id="4"] .post-author { --user-bg: url(https://i.pinimg.com/736x/e1/80/13/e180131a063087b1e65428a6ea5b7524.jpg); }
#pun-viewtopic .post[data-user-id="5"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/8c/2b/5/701926.png); }
#pun-viewtopic .post[data-user-id="6"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/cf/a0/6/161557.png); }
#pun-viewtopic .post[data-user-id="25"] .post-author { --user-bg: url(https://i.pinimg.com/736x/65/57/d2/6557d246d458de21ca1f2bd69e37fd25.jpg); }
#pun-viewtopic .post[data-user-id="57"] .post-author { --user-bg: url(https://i.pinimg.com/736x/4c/5e/d5/4c5ed50eec23a60e7c7cae2db53e27c5.jpg); }
#pun-viewtopic .post[data-user-id="58"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/cf/a0/6/73044.png); }
#pun-viewtopic .post[data-user-id="70"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/8c/2b/6/560386.png); }
#pun-viewtopic .post[data-user-id="74"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/cf/a0/6/105296.png); }
#pun-viewtopic .post[data-user-id="75"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/cf/a0/6/222806.jpg); }
#pun-viewtopic .post[data-user-id="80"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/cf/a0/6/222806.jpg); }
#pun-viewtopic .post[data-user-id="81"] .post-author { --user-bg: url(https://i.pinimg.com/736x/d3/b9/39/d3b93959eb97be45e4114c4158c36779.jpg); }
#pun-viewtopic .post[data-user-id="44"] .post-author { --user-bg: url(https://upforme.ru/uploads/001c/cf/a0/6/279498.png); }

/* картка */
.punbb .post .post-author > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 52px 14px 0;
  padding: 16px 14px 12px;
  list-style: none;
  text-align: center;
  color: var(--link);
  background: var(--sec-bg);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.punbb .post .post-author > ul > li,
.punbb .post .post-author > ul > .addflds {
  order: 10;
  box-sizing: border-box;
  max-width: 100%;
}

/* онлайн / офлайн — крапка на верхньому краї картки */
.punbb .post .post-author .indOnline,
.punbb .post .post-author .indOffline {
  position: absolute;
  top: 47px;
  left: 50%;
  right: auto;
  width: 10px;
  height: 10px;
  margin: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 2;
}

.punbb .post .post-author .indOnline {
  background: var(--status);
  box-shadow: 0 0 0 3px var(--sec-bg), 0 0 10px var(--status);
}

.punbb .post .post-author .indOffline {
  background: var(--add-acc);
  box-shadow: 0 0 0 3px var(--sec-bg);
}

.punbb .post .post-author :is(.pa-online, .pa-last-visit, .pa-reg, .pa-time-visit) {
  display: none !important;
}

/* лупа пошуку по темі — зліва вгорі картки */
.punbb .post .post-author #tuser {
  position: absolute !important;
  top: 64px;
  left: 26px;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
  opacity: .4 !important;
  z-index: 2;
}

.punbb .post .post-author #tuser:hover {
  opacity: .9 !important;
}

/* нік */
.punbb .post .post-author .pa-author {
  order: 1;
  padding: 0 24px !important;
  font: italic 600 21px/1.15 var(--second-font);
  letter-spacing: -.3px;
  text-transform: none;
  color: var(--link);
  overflow-wrap: anywhere;
}

.punbb .post .post-author .pa-author a {
  padding: 0 !important;
  font: inherit;
  color: inherit;
  text-transform: none;
  box-shadow: none !important;
  transition: color ease-in-out .4s;
}

.punbb .post .post-author .pa-author a:hover {
  color: var(--link-hover-text);
}

/* підпис */
.punbb .post .post-author .pa-title {
  order: 2;
  margin: 4px 0 0;
  padding: 0 8px;
  font: 400 10.5px/1.3 var(--font-family);
  text-transform: lowercase;
  color: var(--muted);
  background: none;
}

/* аватар */
.punbb .post .post-author .pa-avatar {
  order: 3;
  display: flex;
  justify-content: center;
  margin: 12px 0 14px;
  padding: 0;
}

.punbb .post .post-author .pa-avatar img {
  display: block;
  max-width: 180px;
  max-height: 230px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

/* fld1: ім'я, вік (посилання на анкету) */
.punbb .post .post-author .pa-fld1 {
  order: 4;
  margin: 0;
  padding: 0 6px;
  font: italic 600 20px/1.15 var(--second-font);
  text-transform: none;
  color: var(--link);
}

.punbb .post .post-author .pa-fld1 a {
  color: var(--link);
  text-transform: none;
}

.punbb .post .post-author .pa-fld1 a:hover {
  color: var(--link-hover-text);
}

/* fld2: лз, під ним лінія на всю ширину картки */
.punbb .post .post-author .pa-fld2 {
  order: 5;
  align-self: stretch;
  max-width: none;
  margin: 8px -14px 0;
  padding: 0 16px 12px;
  font: 400 10.5px/1.5 var(--font-family);
  text-align: justify;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--link) 85%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--link) 12%, transparent);
}

.punbb .post .post-author .pa-fld2 > div {
  width: auto !important;
  max-width: 100%;
}

.punbb .post .post-author .pa-fld2 a {
  color: var(--link-hover-text);
}

/* статистика: іконка + число в один ряд */
.punbb .post .post-author .addflds {
  order: 50;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 10px 0 2px;
}

.punbb .post .post-author .addflds > .addflds {
  padding: 0;
}

.punbb .post .post-author .addflds > li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
  font: 600 11px/1 var(--font-family);
  color: var(--link);
  background: none;
}

.punbb .post .post-author .addflds > li[data-val] {
  font-size: 0;
}

.punbb .post .post-author .addflds > li::before {
  font: 900 12px/1 var(--fa);
  color: color-mix(in srgb, var(--link) 35%, transparent);
  transition: color ease-in-out .4s;
}

.punbb .post .post-author .addflds > .pa-posts::before { content: '\f005'; }    /* зірка */
.punbb .post .post-author .addflds > .pa-respect::before { content: '\f004'; }  /* серце */
.punbb .post .post-author .addflds > .pa-giftbox::before { content: '\f06b'; }  /* подарунки */
.punbb .post .post-author .addflds > .pa-fld3::before { content: '\f81d'; }     /* гроші */

.punbb .post .post-author .addflds > li[data-val]::after {
  content: attr(data-val);
  font: 600 11px/1 var(--font-family);
  color: var(--link);
}

.punbb .post .post-author .addflds > li:hover::before {
  color: var(--link-hover-text);
}

/* репутація: плюс ховаємо, сердечко веде на статистику */
.punbb .post .post-author .pa-respect a[href*="relation.php"] {
  display: none !important;
}

.punbb .post .post-author .addflds > .pa-respect a,
.punbb .post .post-author .addflds > .pa-fld3 a {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: 0;
}

/* fld4: плашка внизу картки (посилання на особисту сторінку) */
.punbb .post .post-author .pa-fld4 {
  order: 99;
  align-self: stretch;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  margin: 14px -14px -12px;
  padding: 10px 16px 11px;
  background: var(--plate-bg);
  color: #F3F4F6;
  font: 400 8px/1.45 var(--font-family);
  text-transform: none;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.punbb .post .post-author .pa-fld4 a {
  display: block;
  color: inherit;
}

.punbb .post .post-author .pa-fld4::first-line {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.punbb .post .post-author .pa-fld4 img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.punbb .post .post-author .pa-fld4:has(img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .25);
}

/* =========================================================
   ПЕРЕМИКАЧ ТЕМ (код квібблера: #forum-theme-switch)
   Виглядає як раніше: одна кругла кнопка в шапці,
   показується та тема, на яку можна перемкнутись.
   ========================================================= */

#forum-theme-switch {
  position: absolute;
  top: 378px;
  margin-left: 62px;
  z-index: 25;
  display: flex;
  pointer-events: auto;
}

#forum-theme-switch button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
  background: var(--main-acc);
  box-shadow: 0 3px 3px #0000001c;
  transform: translateY(0);
  transition: transform ease-in-out .4s, box-shadow ease-in-out .4s;
}

#forum-theme-switch button:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-news);
}

/* показуємо одну кнопку — ту, що веде на наступну тему:
   світла &#8594; середня &#8594; темна &#8594; світла */
#forum-theme-switch button {
  display: none;
}

:root:not([data-forum-theme="mid"]):not([data-forum-theme="dark"]) #forum-theme-switch [data-theme-choice="mid"],
:root[data-forum-theme="mid"] #forum-theme-switch [data-theme-choice="dark"],
:root[data-forum-theme="dark"] #forum-theme-switch [data-theme-choice="light"] {
  display: block;
}

/* іконки Font Awesome замість картинок */
#forum-theme-switch button::before {
  display: block;
  font: 900 15px/34px var(--fa);
  color: var(--link-hover-text);
  text-align: center;
  transition: color ease-in-out .4s;
}

#forum-theme-switch button:hover::before {
  color: var(--link);
}

#forum-theme-switch [data-theme-choice="mid"]::before {
  content: '\f042';   /* півколо: середня */
}

#forum-theme-switch [data-theme-choice="dark"]::before {
  content: '\f186';   /* місяць: темна */
}

#forum-theme-switch [data-theme-choice="light"]::before {
  content: '\f185';   /* сонце: світла */
}

.pa-posts a:hover {
  box-shadow: none !important;
}

/* C3.6 */

.punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
}

/* C3.7 */

/* C3.8 */

/* ПРОФИЛЬ */

li.pa-fld5 div {
  border-radius: 7px;
  width: 22px;
  height: 22px;
}

li.pa-fld5 div.ls_star {
  background: url(https://forumstatic.ru/files/001c/74/d2/94076.png) no-repeat center, color-mix(in srgb, var(--link) 8%, transparent);
  background-size: 13px;
  filter: brightness(1.2);
}

#pa-fld5 div.ls_star {
  background: url(https://forumstatic.ru/files/001c/74/d2/94076.png) no-repeat center, color-mix(in srgb, var(--link) 8%, transparent);
  background-size: 13px;
  filter: brightness(1.2);
  width: 0px;
  height: 12px;
  border-radius: 5px;
}

li.pa-last-visit {
  display: none;
}

/* C3.11 */

.punbb .post-body {
  margin-left: 21.5em;
  padding: 0 0 1px 0;
  position: relative;
}

/* C3.12 */

.punbb .post-box {
  padding: 0px 1em 0 0;
  margin: 0 12px 0px 12px;
  position: relative;
  display: block;
  font: 400 12px var(--font-family);
  background: var(--post-body-color);
  border-radius: 10px;
}

/*C3.13 */

.punbb fieldset .post-box {
  margin-bottom: 0.8em;
}

.post-box a {
  transition: color ease-in-out .4s;
  color: var(--link-hover);
}

.post-box a:hover {
  color: var(--link) !important;
}

/* C3.14 */

.punbb .post-links {
  margin-left: 214px;
  margin-right: 4px;
  border-left-style: solid;
  border-left-width: 0px;
}

/* C3.15 */

.punbb .post-links ul {
  padding: 0 0em 0px 0em;
  height: 2em;
  line-height: 2em;
  margin-left: -18em;
  margin-top: 5px;
  margin-bottom: 5px;
  background: transparent;
  width: 122%;
  max-width: 990px;
  box-sizing: border-box;
  text-align: right;
}

/* C3.16 */

.punbb .post-links li {
  display: inline;
  padding-left: 1em;
}

.punbb .post-links li:first-child {
  padding-left: 0em;
}

.punbb .post-links li:last-child {
  margin-right: -10px;
}

/* C3.17 */

.pl-email,
.pl-website {
  float: left;
}

/* C3.18 */

.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
}

/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */

.punbb .modmenu .container {
  width: 1050px;
  padding: 0.5em 2.8em;
  text-align: right;
  text-transform: lowercase;
  left: 15px;
  position: relative;
  font: 400 10px var(--font-family);
  color: var(--link);
}

.punbb .modmenu .container a {
  transition: color ease-in-out .4s;
}

.punbb .modmenu .container a:hover {
  color: var(--link-hover) !important;
}

div.modmenu>p>span {
  display: none;
}

/* C4.2 */

.punbb .modmenu strong,
.punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
}

/* C4.3 */

.punbb .modmenu .container strong {
  float: left;
  color: var(--link);
}

/* C4.4 */

.punbb .modmenu input {
  margin-left: 1em;
}

/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */

.punbb .info .container {
  padding: 0.8em 4em;
  color: var(--link);
}

/* C5.2 */

.punbb .info .container .backlink {
  padding-top: 0.8em;
  color: var(--link);
}

/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */

#profile .container {
  padding-left: 18.6em;
}

/* C6.2 */

#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
}

/* C6.3 */

#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
}

/* C6.4 */

#viewprofile ul,
#profilenav ul {
  background: var(--main-acc);
  padding: 1.5em 18px 0.8em 18px;
  width: 157px;
  box-sizing: border-box;
  margin: 14px 0 15px 0px;
  border-radius: 10px;
}

/* C6.5 */

#viewprofile h2,
#profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
}

/* C6.6 */

#viewprofile h2 span,
#profilenav h2 span {
  padding: 0 5px;
  position: relative;
}

/* C6.7 */

#viewprofile li,
#setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
}

/* C6.8 */

#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
}

/*C6.9 */

#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
}

/* C6.10 */

#viewprofile li strong,
#viewprofile li div,
#setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
}

/* C6.11 */

.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em;
}

/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */

#pun-userlist .formal,
#pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
}

/* C7.2 */

#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
}

/* C7.3 */

#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  border-color: var(--main-acc);
  border-radius: 10px;
  color: var(--link);
}

#pun-userlist .isonline {
  right: 12px;
}

/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */

#pun-title {
  position: absolute;
  width: 1100px;
  top: 0px;
  height: 423px;
  background: var(--bg-header) center top / 100% auto no-repeat;
}

/* D1.2 */

#pun-title h1 {
  display: block;
  height: 40px;
  padding: 2em 1em 0 1em;
}

/* D1.3 */

#pun-title .container {
  border-style: none solid none solid;
}

/* D1.4 */

#pun-title h1 span {
  font-size: 1.5em;
  display: none;
}

#pun-title table {
  border: none;
  height: 40px;
  width: 100%;
}

#pun-title td.title-logo-tdl {
  border: none;
  width: 100%;
}

#pun-title td.title-logo-tdr {
  border: none;
  width: 468px;
}

::-moz-selection {
  color: var(--link);
  background: color-mix(in srgb, var(--link-hover) 28%, transparent);
}

::selection {
  color: var(--link);
  background: color-mix(in srgb, var(--link-hover) 28%, transparent);
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--main-acc) !important;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--link-hover) !important;
  border-radius: 10px;
}

/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */

#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
}

/* D2.2 */

#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0;
}

/* D2.3 */

#pun-pagelinks .container li {
  display: inline;
}

/* D2.4 */

#pun-pagelinks li a,
#pun-pagelinks a:link,
#pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float: left;
  width: 100%;
}

/* D2.5 */

#pun-pagelinks a:active,
#pun-pagelinks a:focus {
  position: relative;
  margin: 0;
}

#pun-pagelinks li a span {
  display: block;
  margin: 0 1em;
}

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */

#pun-navlinks .container {
  display: flex;
  width: 1100px;
  position: absolute;
  margin: -425px auto 0;
  height: 20px;
  padding: 5px 0 5px 0 !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#pun-navlinks .container a {
  color: color-mix(in srgb, var(--link) 70%, transparent);
}

/* D3.2 */

#pun-navlinks .container {
  padding: 0.7em 1em;
}

.container>li {
  color: var(--link-hover);
}

/* D.3 */

#pun-navlinks li {
  display: inline;
}

/* D3.4 */

#pun-navlinks li a {
  color: color-mix(in srgb, var(--link) 70%, transparent);
  font: 700 14px var(--font-family);
  text-transform: lowercase;
  text-decoration: none;
  margin: 3px 6px;
  transition: ease-in-out .4s;
  box-shadow: none;
  display: block;
  position: relative;
}

/* без підкреслення: при наведенні пункт м'яко піднімається,
   як кнопка перемикача тем */
#pun-navlinks li a::before {
  content: none !important;
}

#pun-navlinks li a {
  text-decoration: none !important;
  transition: color ease-in-out .4s;
}

#pun-navlinks li a:hover,
#pun-navlinks li.isactive a {
  color: var(--link-hover);
  box-shadow: none;
}

#pun-navlinks li a span {
  display: block;
  transform: translateY(0);
  transition: transform ease-in-out .4s, text-shadow ease-in-out .4s;
}

#pun-navlinks li a:hover span {
  transform: translateY(-3px);
  text-shadow: 0 3px 6px color-mix(in srgb, var(--link-hover) 35%, transparent);
}

/* D4 User links
-------------------------------------------------------------*/

/* D4.2 */

#pun-ulinks {
  margin: 50px 46px 5px;
  display: flex;
  justify-content: center;
}

#pun-ulinks .container {
  border: none;
  text-align: left;
  text-transform: lowercase;
  font: 400 10px var(--font-family);
}

/* D4.3 */

#pun-ulinks li,
#pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 0px;
  white-space: nowrap;
  color: var(--link);
  text-decoration: none;
  transition: ease-in-out .4s;
}

#pun-ulinks li,
#pun-ulinks li a:hover {
  color: var(--link-hover);
}

/* D4.4 */

#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em;
  margin: 0 0px;
}

/* D4.5 */

#pun-ulinks li.item1,
#pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0;
}

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */

#pun-status,
#pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  color: var(--link);
  font: 400 10px var(--font-family);
  text-transform: lowercase;
  margin-left: 18px;
}

/* D5.2 */

#pun-status .container {
  padding: 0.8em 38px 1em 1em;
}

/* D5.3 */

#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
}

/* D5.4 */

#pun-crumbs1 {
  overflow: hidden;
  margin-top: 0;
  z-index: 10;
  position: relative;
  font-weight: 700;
  font-family: var(--font-family);
}

/* D5.5 */

#pun-crumbs1 p.container {
  border-top: none;
  color: var(--link);
  padding: 0em 1em 1.8em 4.6em;
  font: 400 10px var(--font-family);
  text-transform: lowercase;
}

#pun-crumbs1 p.container a,
#pun-crumbs2 p.container a {
  transition: color ease-in-out .4s;
}

#pun-crumbs1 p.container a:hover,
#pun-crumbs2 p.container a:hover {
  color: var(--link-hover) !important;
}

/* D5.6 */

#pun-break1 {
  border-style: solid none;
  border-width: 0px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
}

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

#pun-announcement {
  width: 1100px;
  height: 407px;
  position: absolute;
  top: 0px;
  z-index: 5;
}

/* D6.1 */

#pun-announcement h2 {
  display: none;
}

/* D6.2 */

#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

/* D6.3 */

#pun-announcement .container {
  padding: 1em 0em 1em 0em;
  position: absolute;
  box-sizing: border-box;
  top: 0px;
  width: 1100px;
  height: 407px;
}

#pun-announcement>div>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 914px;
  overflow: auto;
}

#pun-announcement .html-box>a {
  display: flex;
  flex-shrink: 0;
  color: #000;
  text-decoration: none;
  padding: 10px 7px;
  border: solid var(--add-acc);
  border-width: 0 1px;
  margin: 0 3px;
  transition: ease-in-out .4s;
  align-items: center;
  flex-direction: row;
}

#pun-announcement .html-box>a>p {
  letter-spacing: .5px;
  font-family: var(--font-family);
  text-transform: lowercase;
  opacity: .7;
}

#pun-announcement .html-box>a:hover {
  background: #000;
  color: #fff;
}

#pun-announcement>div>div>a>span {
  font-weight: 900;
  font-size: 1.2em;
  font-family: 400 10px var(--font-family);
  padding-right: 5px;
  opacity: 1;
}

#html-header {
  height: 385px;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

#html-footer {
  background: var(--bg-footer) center bottom / 100% auto no-repeat;
  margin: 0;
  height: 123px;
}

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */

#pun-stats .container {
  padding: 1.2em 0em;
  position: relative;
  margin: 10px 42px;
  width: 1016px;
  box-sizing: border-box;
}

/* D7.2 */

#pun-stats li.item1,
#pun-stats li.item2 {
  clear: both;
  line-height: 150%;
}

/* D7.3 */

#pun-stats li.item3,
#pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  transition: color ease-in-out .4s;
}

#pun-stats li.item4:hover {
  color: var(--link-hover) !important;
}

/* D7.4 */

li#onlinelist {
  margin: 5px auto;
  width: 100%;
  color: var(--link);
  font: 400 12px var(--font-family);
}

/* D7.5 */

li#onlinelist div {
  border-top-style: solid;
  border-top-width: 0px;
  padding: 0.7em 0 0 0;
  font-family: 400 10px var(--font-family);
  text-transform: lowercase;
  color: var(--link);
  text-align: justify;
}

#onlinelist>div>a,
#onlinelist>div>span>a {
  text-transform: lowercase;
}

#onlinelist a {
  box-shadow: inset 0 0 0 0 var(--link-hover);
  color: var(--link);
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color ease-in-out .4s;
}

#onlinelist a:hover {
  color: var(--link-hover) !important;
}

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */

#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
}

/* D8.2 */

#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
}

/* D8.3 */

#pun-about {
  margin-top: -33px;
  width: 300px;
  float: right;
  text-align: end;
  z-index: 20;
  position: relative;
  font: 400 10px var(--font-family);
  text-transform: lowercase;
}

/* D8.4 */

#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
}

/* D8.5 */

#pun-about p span {
  display: block;
  padding-left: 50%;
  margin-right: 3.4em !important;
}

/* D5.4 */

#pun-crumbs2 {
  overflow: hidden;
  margin-top: 0;
  z-index: 10;
  position: relative;
  font-weight: 700;
  font-family: var(--font-family);
}

/* D5.5 */

#pun-crumbs2 p.container {
  border-top: none;
  color: var(--link);
  padding: 1em 2em 0.8em 4.1em;
  font: 400 10px var(--font-family);
  text-transform: lowercase;
}

/* D8.8 */

#pun-break4 {
  border-width: 0px;
}

/* D8.9 */

div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;
}

.punbb-admin #pun-title {
  position: relative;
}

/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */

#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
}

/* D9.2 */

#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.1em;
}

/* D9.3 */

#pun-help .formal p,
#pun-help .formal dd {
  margin-bottom: 1em;
}

/* D9.4 */

#pun-help .formal ul,
#pun-help .formal dl {
  padding: 0 0 0 1em;
}

/* D9.5 */

#pun-help .formal li {
  padding: 0;
  line-height: 130%;
}

/* D9.6 */

#pun-help .formal li * {
  vertical-align: text-top;
}

/* D9.7 */

#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace;
}

/* D9.8 */

#pun-help .formal .parsedmsg,
#pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
}

/* главная */

.punbb h2 span {
  font-size: 0em;
  display: flex;
  flex-direction: row-reverse;
  height: 31px;
  width: 96.7%;
  margin-left: 0px;
  background-position: top;
  background-repeat: no-repeat;
  align-items: center;
  margin-bottom: 8px;
  border-radius: 4px;
  text-transform: lowercase;
}

#pun-viewtopic h2 span {
  height: 0px;
}

.category>div>table>thead>tr {
  display: none;
}

.category tr {
  margin: 10px -26px 0px;
  width: 1000px;
  padding: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid var(--add-acc);
}

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

.isub {
  display: grid;
  background: #fff;
}

.isub>td.tcr>em {
  position: absolute;
}

.isub>td>div>div>h3>a {
  font-size: 1.34em;
  font-weight: bold;
  text-transform: uppercase;
  font-family: var(--font-family);
  padding: 4px 0 5px 0;
  transition: ease-in-out .4s;
}

.category>.container>table>tbody>tr.tcr {
  width: 100%;
}

td.tcl>div>div.tclcon>p {
  text-align: justify;
  color: var(--link);
  text-transform: lowercase;
  font: 500 10px var(--font-family);
}

.cult-links {
  margin-top: 10px;
}

.cult-links a {
  padding-right: 20px;
  text-transform: lowercase;
  font-family: "Commissioner", sans-serif;
}

.cult-links a::after {
  content: "\271A";
  position: absolute;
  margin: -3px 6px;
  color: var(--muted);
  font-size: 1.3em;
}

.cult-links a:last-child::after {
  content: "";
}

.lastpost-link {
  text-transform: lowercase;
  font: 500 12px var(--font-family);
  margin-top: -9px !important;
  padding: 0px 0px 0px 0px !important;
  margin-bottom: 7px !important;
  margin-left: 0px !important;
  flex-shrink: 0;
  max-width: 215px;
  color: var(--link) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color ease-in-out .4s;
}

.lastpost-link:hover {
  color: var(--link-hover) !important;
}

.lastpost {
  color: color-mix(in srgb, var(--link) 70%, transparent);
  text-transform: lowercase;
  font: 400 10px var(--font-family);
  margin-top: -3px;
  opacity: .7;
  letter-spacing: .1px;
}

.punbb table div.icon {
  font-size: 0em;
  width: 90px;
  display: flex;
  height: 70px;
  position: absolute;
  top: 5px;
  left: 550px;
  align-items: center;
  background-size: contain;
}

.punbb table div.inew {
  font-size: 0em;
  background: var(--inew-icon);
  width: 90px;
  display: flex;
  position: absolute;
  top: 5px;
  left: 550px;
  align-items: center;
  z-index: 5;
  background-size: contain;
  padding-right: 6px;
}

.punbb table div.inew::before {
  content: '';
  position: absolute;
  width: 53px;
  height: 48px;
  left: 0px;
  top: 50%;
  background: transparent;
  transform: translateY(-50%);
  border-radius: 10px;
  z-index: 0;
}

#pun-index .user-avatar {
  position: absolute;
}

.punbb .user-avatar {
  float: left;
  position: relative;
  margin: 6px 9px 2px -40px !important;
}

.punbb .user-avatar .avatar-image {
  height: 26px !important;
  width: 26px !important;
  border: 2px solid var(--add-acc);
  filter: grayscale(100%) brightness(155%) saturate(80%) contrast(130%) invert(20%);
  transition: ease-in-out .4s;
}

.punbb .user-avatar .avatar-image:hover {
  filter: grayscale(0%) brightness(100%) saturate(110%) contrast(120%) invert(20%);
  opacity: 1;
}

.hasicon>tr>td.tcr>br {
  display: none;
}

.isub {
  grid-template-columns: 50% 10% 10% 25% !important;
}

.subforums {
  font: 400 10px var(--font-family);
  padding: 3px 0 7px;
  color: var(--muted);
  text-transform: lowercase;
}

/* статистика */

#pun-stats>h2::before {
  content: "\441 \442 \430 \442 \438 \441 \442 \438 \43a \430 ";
  font: 800 26px var(--font-family);
  color: var(--add-acc);
  left: 41px;
  position: relative;
  top: 0px;
}

li.stats-crumbs {
  display: flex;
  gap: 10px;
  width: 1018px;
  position: relative;
  justify-content: flex-end;
  top: -3px;
}

#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4 {
  display: inline-flex;
  text-align: center;
  color: var(--link);
  margin-top: 0px;
  gap: 5px;
  height: 20px;
  padding: 3px 8px;
  box-sizing: border-box;
  text-transform: lowercase;
  font: 400 12px var(--font-family);
  z-index: 3;
  position: relative;
  background: color-mix(in srgb, var(--add-acc) 40%, transparent);
  border-radius: 100px;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

#pun-stats li.item1>span,
#pun-stats li.item2>span,
#pun-stats li.item3>span,
#pun-stats li.item4>span {
  font: 400 11px var(--font-family);
  color: var(--link);
}

#pun-stats>h2 {
  position: absolute;
  display: block;
  width: 1100px;
  margin: auto;
  font-size: 0px;
}

.statscon {
  position: relative;
  width: 1100px;
}

#pun-viewtopic #pun-main>h1 {
  display: none;
  width: 800px;
  margin: 0 auto 7px;
  text-align: center;
  background: var(--main-acc);
  border-radius: 50px;
  padding: 1px 10px 2px;
  font: 400 12px var(--font-family);
  text-transform: lowercase;
}

#pun-viewtopic #pun-main>h1>span {
  display: none;
}

/* просмотр тем в форуме */

#pun-searchtopics .user-avatar {
  margin-top: -24px !important;
}

.multipage>div>div>table:not(.table_GamePosts)>tbody>tr {
  display: flex;
  width: 970px;
  margin: 5px 15px;
  padding: 2px 0;
  align-items: center;
  position: relative;
  color: var(--link);
  font: 400 12px var(--font-family);
  text-transform: lowercase;
  justify-content: center;
  border: solid color-mix(in srgb, var(--link) 10%, transparent);
  border-width: 0px 0 1px 0;
}

.multipage>div>div>table:not(.table_GamePosts)>tbody>tr a {
  transition: color ease-in-out .4s;
}

.multipage>div>div>table:not(.table_GamePosts)>tbody>tr a:hover {
  color: var(--link-hover) !important;
}

#pun-userlist table>tbody>tr {
  margin: 5px 8px;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
  width: 1030px;
}

.multipage>div>div>table>tbody>tr>td.tcr {
  display: flex;
  flex-direction: row;
  gap: 15px;
  padding-left: 5px;
  align-items: center;
  justify-content: flex-start;
}

#pun-searchtopics table>tbody>tr {
  display: grid;
  grid-template-columns: 8fr 2fr 1fr 4fr;
  width: 1038px;
  margin: 5px 31px;
}

.forum>div>table>tbody>tr>td.tcr>em>a>span.avatar-image {
  height: 36px !important;
  width: 36px !important;
  position: absolute;
}

.forum>div>table>thead>tr {
  text-transform: lowercase;
  font: 400 10px var(--font-family);
  color: var(--link);
}

.forum>div>table>tbody>tr>td.tcr>em {
  position: absolute;
  margin: 4px 9px 2px -45px !important;
}

div.section.online-list>div>table>tbody>tr {
  display: block;
}

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

#pun-online tbody tr {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 10px;
  width: 1000px;
  margin: 5px 50px;
}

#pun-online tbody tr .username,
#pun-online tbody tr .action,
#pun-online tbody tr .tc3 {
  width: 100%;
}

.tr-divider {
  background: transparent !important;
  margin-top: 20px !important;
  margin-bottom: 15px !important;
  border-top: 1px solid color-mix(in srgb, var(--link) 10%, transparent) !important;
}

.td-divider {
  width: 1050px;
  border-radius: 4px;
  text-align: center;
  height: 14px;
  margin: 3px;
  color: var(--link);
  background: var(--bg-dark-rgba);
  padding: 1px 0 3px 0 !important;
  font: 700 12px var(--font-family);
  text-transform: lowercase;
  border-top: 1px solid color-mix(in srgb, var(--link) 10%, transparent);
}

.forum>div>table>tbody>tr>td.tcl>div>div.icon {
  font-size: 0em;
  margin: 4px 0 0 -20px;
  border-radius: 50%;
}

.forum>div>table>tbody>tr>td.tcl>div>div.icon-new {
  color: var(--link-hover);
}

.stickytext {
  display: none;
}

/* список участников */

div.usertable>div>table>tbody>tr {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
  width: 1030px;
  height: 40px;
  align-items: center;
  font: 400 12px var(--font-family);
  color: var(--link);
  text-transform: lowercase;
}

.registered {
  width: 100% !important;
}

div.usertable>div>table>thead>tr {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
  background: var(--main-acc);
  font: 400 10px var(--font-family);
  text-transform: lowercase;
  border-radius: 10px 10px 0 0;
}

div.usertable>div>table>tbody>tr>td.tcl.username {
  padding-left: 60px;
  display: flex;
  align-items: center;
  width: 75% !important;
}

div.usertable>div>table>tbody>tr>td.tcl.username>em {
  margin: 3px 8px 2px -46px !important;
  padding-right: 11px;
  height: 36px !important;
  width: 36px !important;
}

div.usertable>div>table>tbody>tr>td.tcl.username>em>a>span.avatar-image {
  height: 30px !important;
  width: 30px !important;
}

/* Личные сообщения */

#profilenav>h2>span {
  color: var(--link);
  text-align: center;
  z-index: 10;
  background: var(--main-acc);
  position: relative;
  display: block;
  width: 157px;
  height: 17px;
  box-sizing: border-box;
  margin-left: -14px;
  border-radius: 30px;
  font: 700 12px var(--font-family);
  text-transform: lowercase;
  padding: 0 11px 2px;
}

#profilenav>ul>li>a {
  color: var(--link);
  text-transform: lowercase;
  font: 400 12px var(--font-family);
}

#messages>fieldset>div>div>table>tbody>tr>td>div>div.icon {
  color: var(--pun-bg);
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  left: 7px;
  top: 7px;
  border-radius: 50%;
}

#messages>fieldset>div>div>table>tbody>tr>td>div>div.icon.inew {
  color: var(--link);
  width: 6px;
  height: 6px;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  left: 7px;
  top: 7px;
  border-radius: 50%;
}

#messages>fieldset>div>div>table>tbody>tr {
  position: relative;
  background: var(--main-acc);
  display: flex;
  align-items: center;
  width: 790px;
  font: 400 12px var(--font-family);
  text-transform: lowercase;
  height: 25px;
  margin: 0 0 5px 40px;
  border-radius: 10px;
}

#pun-messages #profile fieldset legend {
  display: flex;
  justify-content: space-between;
  width: 774px;
  align-items: center;
  padding: 5px 5px;
  margin: 5px 23px;
}

#messages fieldset legend {
  left: 18px;
  position: relative;
  width: 777px !important;
}

#messages>fieldset {
  border-width: 0px;
  padding: 0 !important;
}

#messages>fieldset>legend>span {
  font: 700 1em var(--font-family);
  background: var(--main-acc);
  padding: 0px 7px;
  text-transform: lowercase;
  border-radius: 30px;
  height: 17px;
  display: block;
  box-sizing: border-box;
}

#messages>div>div.pagelink>strong {
  background: var(--add-acc);
  padding: 2px 6px;
  margin-right: 2px;
  color: var(--link);
}

#messages tbody.hasicon td.tcl {
  padding: 2px 20px;
  width: 430px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: block;
  flex-shrink: 0;
}

#pun-messages .some-stuff,
#pun-messages .pa-posts {
  display: none;
}

#pun-messages .pa-avatar {
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
}

#pun-messages .post .post-author {
  margin: 0px 0px 70px 25px !important;
}

#pun-messages .post-author ul {
  border-radius: 0 0 10px 10px;
}

#pun-messages ul li.pa-online::before {
  content: '';
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--link-hover) 40%, transparent);
  position: absolute;
  border-radius: 50%;
  right: 6px;
  top: 23px;
  animation: blinkColor .9s linear infinite;
  z-index: 10;
}

li.pa-time-visit,
li.pa-reg,
#pun-messages ul>li.pa-reg {
  display: none;
}

#pun-messages .post h3 span {
  padding: 1px 20px;
  margin: 0 12px 5px 23px;
  display: block;
  background: var(--main-acc);
  border-radius: 10px;
  width: 786px;
  box-sizing: border-box;
  font: 400 10px var(--font-family);
  text-transform: lowercase;
}

#pun-messages .post-content {
  padding: 5px 0;
  margin: 15px;
  width: 512px;
  overflow: hidden;
  text-align: justify;
}

#pun-messages li.pa-title {
  display: none;
}

#pun-messages .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: 5.4em;
  background: transparent;
  width: 540px;
  box-sizing: border-box;
  text-align: right;
}

#profile-left #pa-edit>strong>a,
#pun-main>div.linkst>noindex>div>span>a,
#pun-main>div.linksb>noindex>div>span>a,
#profile>div>fieldset>legend>strong {
  font: 12px var(--font-family);
  border-radius: 20px;
  padding: 5px 15px 6px;
  text-transform: lowercase;
  color: var(--link);
  overflow: hidden;
  transition: background ease-in-out .4s !important;
  box-shadow: none !important;
  background: var(--main-acc);
}

#profile-left #pa-edit>strong>a:hover,
#pun-main>div.linkst>noindex>div>span>a:hover,
#pun-main>div.linksb>noindex>div>span>a:hover,
#profile>div>fieldset>legend>strong:hover {
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
  box-shadow: none !important;
}

#punbbsearch {
  text-transform: lowercase;
}

/* просмотр тем в форуме */

#pun-viewforum tbody>tr>td.tcl>div>div.icon {
  background: color-mix(in srgb, var(--link) 40%, transparent);
  position: absolute;
  top: 8px;
  left: 32px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 50%;
}

#pun-viewforum tbody>tr>td.tcl>div>div.icon-new {
  background: var(--link);
}

#pun-viewforum tbody>tr>td.tcl>div>div.icon::after {
  content: none;
}

#pun-viewforum table>tbody>tr {
  width: 1040px;
  margin: 2px auto;
}

#pun-viewforum table>tbody>tr:not(.tr-divider):not(#title-logo-tr) {
  height: 42px;
}

#pun-viewforum h1 span {
  display: none;
}

#pun-viewforum table>tbody>tr>td.tcr>em {
  position: absolute;
  margin: -24px 9px 2px -45px !important;
  display: none;
}

#pun-viewforum table>tbody>tr>td.tcr>span {
  margin: 0px 0px 0px -3px !important;
}

#pun-viewforum table>tbody>tr>td.tcl>div>div.tclcon {
  margin-left: -10px;
  font: 400 12px var(--font-family);
  text-transform: lowercase;
}

#pun-viewforum table>tbody>tr>td.tcl>div>div.tclcon>.byuser,
#pun-viewforum table>tbody>tr>td.tcl>div>div.tclcon>strong>.byuser {
  color: var(--muted);
}

#pun-viewforum tbody>tr>td.tcl>div>div.tclcon>a,
#pun-viewforum tbody>tr>td.tcl>div>div.tclcon>strong>a {
  display: block;
  width: fit-content;
  margin: 0px 0 3px 0px;
  padding: 0 3px !important;
}

#pun-viewforum table>thead>tr {
  width: 1000px;
  grid-template-columns: 6fr 2fr 2fr 3fr;
  margin: 5px 20px;
  box-sizing: border-box;
  font: 400 12px var(--font-family);
  text-transform: lowercase;
  display: none;
}

#pun-viewforum div.category {
  width: 1000px;
}

#pun-viewforum div.category tbody tr {
  height: auto !important;
}

#pun-viewforum tbody.hasicon td.tcl {
  padding-left: 3.2em;
}

#pun-viewforum div.category tbody tr>td.tcl>div>div.icon {
  top: 8px;
  left: 12px;
}

/* сообщения темы и профиль */

.permalink {
  color: color-mix(in srgb, var(--link) 60%, transparent) !important;
  font: 400 10px var(--font-family);
  text-transform: lowercase;
  margin-left: -14px !important;
  margin-bottom: 2px !important;
}

.permalink:hover {
  color: #000 !important;
}

.punbb .post h3 strong {
  float: right;
  text-align: right;
  position: relative;
  font: 400 10px var(--font-family);
  padding: 3px 2px;
  right: -9px;
  color: color-mix(in srgb, var(--link) 60%, transparent);
}

del {
  filter: blur(3px);
  transition: ease-in-out .4s;
  text-decoration: none;
}

del:hover {
  filter: blur(0px);
}

.spoiler-box {
  padding: 0px !important;
}

.post-content .spoiler-box>div {
  background: color-mix(in srgb, var(--add-acc) 20%, transparent) !important;
  position: relative;
  padding: 6px 12px 7px !important;
  border-radius: 5px;
  cursor: pointer;
  min-height: 15px;
}

.punbb textarea:focus,
.punbb .longinput input:focus {
  outline: none;
}

#tags .container {
  position: absolute;
  right: 6px;
  top: 47px !important;
  background: var(--pun-bg);
  border: 1px solid var(--link);
  border-radius: 5px;
  z-index: 30 !important;
  text-transform: lowercase;
}

#pun-edit #tags .container {
  top: 70px !important;
}

#pun-report .inner,
#pun-reputation .inner,
#pun-admin-award-form .inner {
  background: var(--pun-bg);
  border-radius: 10px;
  text-transform: lowercase;
  font: 400 10px var(--font-family);
}

/* Form Buttons
----------------------------------------------------------------------- */

#pun #form-buttons table,
#pun #form-buttons tbody {
  display: block;
  width: 100%;
}

#pun #form-buttons td img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#pun #form-buttons td {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  background: none;
}

/* профиль просмотр */

#pun-profile #form-buttons td {
  width: 2rem;
  height: 2rem;
}

#pun-profile #viewprofile ul,
#pun-profile #profilenav ul {
  background: var(--main-acc);
  padding: 1.5em 18px 0.8em 18px;
  box-sizing: border-box;
  margin: 14px 0 15px 0px;
  width: 100%;
  border-radius: 10px;
}

#pun-profile #profile-left {
  display: flex;
  padding-top: 0 !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#profile-left,
#profile-right {
  text-transform: lowercase;
  font: 400 12px var(--font-family);
  color: var(--link);
}

#profile-right li span {
  background: var(--pun-bg);
  border-radius: 5px;
  height: 25px;
  width: 200px;
  box-sizing: border-box;
  text-align: right;
  padding: 4px;
}

#pun-profile #profile-signature ul {
  border-radius: 0px;
  border-top: 1px dashed var(--link);
}

#pun #form-buttons td:hover {
  cursor: pointer;
}

/* панель кнопок форми відповіді: кнопки рівно на всю ширину,
   панель того самого розміру, що й поле під нею */
#form-buttons>table>tbody>tr {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: 4px;
  margin: 10px 0px 0px;
  height: 30px;
  padding: 0 14px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 10px 10px 0 0;
  align-items: center;
}

#form-buttons td::before {
  font: var(--fa-font-solid);
  font-size: 12px;
  top: 0;
  left: 0;
  display: flex;
  position: relative;
  color: var(--muted);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: ease-in-out .4s;
  z-index: 1;
  width: 23px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
}

#pun-profile #form-buttons td::before {
  font-size: 15px;
}

#form-buttons td:hover::before {
  font-size: 12px;
  color: var(--link-hover);
  background: var(--bg-accent-rgba);
}

#button-font::before {
  content: '\f031';
}

#button-transL::before {
  content: '\f891';
}

#button-Change\421 ase::before {
  content: '\f788';
}

#button-size::before {
  content: '\f034';
}

#button-bold::before {
  content: '\f032';
}

#button-italic::before {
  content: '\f033';
}

#button-underline::before {
  content: '\f0cd';
}

#button-strike::before {
  content: '\f0cc';
}

#button-indent::before {
  content: '\f1dd';
}

#button-left::before {
  content: '\f036';
}

#button-right::before {
  content: '\f038';
}

#button-center::before {
  content: '\f037';
}

#button-justify:before {
  content: '\f039';
}

#button-link::before {
  content: '\f0c1';
}

#button-spoiler::before {
  content: '\f518';
}

#button-image::before {
  content: '\f302';
}

td#button-image:first-child {
  display: none;
}

#button-video::before {
  content: '\f144';
}

#button-hide::before {
  content: '\f023';
}

#button-quote::before {
  content: '\f27a';
}

#button-code::before {
  content: '\f121';
}

#button-color::before {
  content: '\f53f';
}

#button-table::before {
  content: '\f009';
}

#button-smile::before {
  content: '\f118';
}

#button-sticker::before {
  content: '\f6be';
}

#button-keyboard::before {
  content: '\f11c';
}

#button-addition::before {
  content: '\f063';
}

#button-mask::before {
  content: '\f630';
}

#button-mask {
  background: transparent !important;
}

#button-files_rusff,
#button-graffiti_rusff {
  display: none !important;
}

#add_float {
  margin: 12px;
}

#main-reply {
  width: 100%;
  background: var(--main-acc);
  border-radius: 5px;
  font: 400 12px var(--font-family);
  color: var(--link);
  padding: 10px;
  border: none;
  box-sizing: border-box;
}

/* реакции */

.reactions-container {
  display: flex;
  margin-top: 18px;
  gap: 4px;
  flex-direction: row-reverse;
}

body div.post-rating,
body div.post-vote {
  float: right;
  position: relative;
  line-height: initial;
}

.reaction-counters-container {
  flex-direction: row-reverse !important;
}

.reaction-picker-panel {
  margin-left: -240px;
}

.reactions-root {
  display: none;
}

.reaction-picker-button {
  border-radius: 0% !important;
  background: url(https://forumstatic.ru/files/001c/17/c9/57110.png);
  background-size: 100%;
}

.reaction-chip {
  border: 0px solid #d0d7de !important;
  background-color: transparent !important;
}

.reaction-counters-container>div>button {
  border: 1px solid #b6e3ff;
  background-color: #ddf4ff;
}

.reaction-chip.reaction-chip--clicked {
  background-color: #fff !important;
  border: 1px solid var(--add-acc) !important;
}

.reaction-counters-container>div>button {
  background-color: #ffffff73 !important;
  border: 1px solid var(--add-acc) !important;
}

div.post-vote p {
  float: right !important;
  border: 0 !important;
  padding: 3px 5px !important;
  margin-right: -8px !important;
  margin-top: 18px !important;
}

#pun-respect table>tbody>tr {
  display: grid;
  grid-template-columns: .7fr .1fr 1fr 2fr 1fr;
  width: 1000px;
  margin: 0 50px;
}

#pun-respect table>tbody>tr>td.tcl,
#pun-respect table>tbody>tr>td.tcl,
#pun-respect table>tbody>tr>td.tc3,
#pun-respect table>tbody>tr>td.tcr {
  width: 85% !important;
  text-align: center;
}

/* верхнее меню */

#header-top {
  background: #fff;
  position: absolute;
  top: 40px;
  border: 1px solid #000;
  width: 999px;
  margin-left: -1px;
  height: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#header-top p {
  padding: 0 15px;
  font: 600 1.1em var(--font-family);
}

.bubble {
  z-index: 10;
}

.online-and-status {
  display: flex;
  position: absolute;
  margin-top: 4px;
  gap: 3px;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  width: 210px;
}

/* БыстроПлюсы для Топика */

.noNull:before {
  content: "+";
  font-size: 9px;
  display: inline-block;
  margin-left: -6px;
  margin-top: 0px;
  position: absolute;
}

div .post-rating p>a {
  outline: 1px solid transparent;
  font-weight: 700;
  background: color-mix(in srgb, var(--link) 5%, transparent);
  border-radius: 4px;
  position: relative;
  display: flex;
  z-index: 100;
  font: 400 12px var(--font-family);
  padding: 0px 6px 0 2px;
  text-align: center;
  font-size: 12px !important;
  line-height: 10px;
  align-items: center;
  color: var(--link-hover) !important;
  transition: ease-in-out .4s !important;
  box-shadow: none !important;
}

div .post-rating p>a:hover {
  box-shadow: none !important;
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
}

.user-voted {
  background: color-mix(in srgb, var(--accent2) 40%, transparent) !important;
}

div .post-rating p>a::before {
  content: '';
  background: url(https://forumstatic.ru/files/001c/74/d2/16164.svg) center no-repeat;
  position: relative;
  height: 18px;
  width: 16px;
  margin: 0px;
  padding: 2px 9px 2px 0px;
  filter: grayscale(1);
}

:root[data-forum-theme="dark"] div .post-rating p>a::before {
  background: url(https://forumstatic.ru/files/001c/74/d2/25912.svg) center no-repeat;
}

div.post-vote p>a {
  font-size: 0 !important;
  position: relative;
  cursor: pointer;
  z-index: 10;
  margin-top: -8px !important;
  width: 14px;
  height: 18px;
  background: url(https://forumstatic.ru/files/001c/74/d2/90664.svg) center no-repeat, color-mix(in srgb, var(--link) 5%, transparent);
  padding: 2px 6px !important;
  background-size: 14px;
  border-radius: 4px;
  display: block;
  transition: background ease-in-out .4s !important;
  box-shadow: none !important;
}

:root[data-forum-theme="dark"] div.post-vote p>a {
  background: url(https://forumstatic.ru/files/001c/74/d2/87047.svg) center no-repeat, color-mix(in srgb, var(--link) 5%, transparent);
}

div.post-vote p>a:hover {
  box-shadow: none !important;
  background: url(https://forumstatic.ru/files/001c/74/d2/90664.svg) center no-repeat, color-mix(in srgb, var(--link-hover) 20%, transparent);
}

:root[data-forum-theme="dark"] div.post-vote p>a:hover {
  background: url(https://forumstatic.ru/files/001c/74/d2/87047.svg) center no-repeat, color-mix(in srgb, var(--link-hover) 20%, transparent);
}

/* слайдер размера шрифта */

.FNTslider {
  border-radius: 0px;
  position: relative;
  z-index: 12;
  background: var(--bg-accent-rgba);
  width: 200px;
  height: 1px;
  margin: 7px 0px;
  border: solid 0px;
  float: right;
  margin-top: 8px;
  margin-right: 2%;
}

.FNTslider .before {
  height: 3px;
  border: solid 0px transparent;
  border-right: none 0;
  border-radius: 4px 0 0 4px;
  position: absolute;
  background: var(--link);
  margin-top: -1px;
  box-shadow: 0 0 2px 0 var(--accent2) inset;
}

.FNTslider .thumb {
  width: 10px;
  height: 3px;
  border-radius: 0px;
  position: relative;
  top: -1px;
  background: var(--link-hover);
  cursor: pointer;
}

/* дайсы */

#button-dice {
  background-image: url(https://i.imgur.com/RgacgB3.png);
  background-size: 20px;
  filter: grayscale(1) contrast(2.5);
  opacity: .8;
}

#dice-menu {
  background: #fff;
  border: 1px solid var(--add-acc);
  padding: 5px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: calc(infinity* 1);
}

#dice-menu button {
  display: inline-block;
  padding: 5px 10px 3px;
  background-color: var(--add-acc);
  color: #1c1c1c;
  border: none;
  font: 500 1em var(--font-family);
  position: relative;
  cursor: pointer;
  height: 25px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  transition: ease-in-out .4s;
}

#dice-menu button:hover {
  background-color: var(--link-hover);
}

.punbb .post.new-ajax>* {
  border-width: 0px !important;
}

.some-stuff {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 229px;
  height: 45px;
  margin: auto;
  position: relative;
  z-index: 5;
  background: var(--main-acc);
  border-radius: 0 0 10px 10px;
}

.some-stuff li span:first-child {
  font-size: 0px;
}

#pa-fld2 {
  position: relative;
}

#pa-fld2 plaque {
  left: 35%;
}

#pa-fld4 lz {
  width: 100%;
  position: relative;
  display: block;
}

#pa-fld4 lz a:first-of-type {
  display: block;
}

plaque {
  width: 218px;
  height: 39px;
  border-radius: 10px;
  display: flex !important;
  flex-direction: column;
  position: absolute;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #000;
  background: var(--plate-bg);
  bottom: 1px;
  left: 6px;
}

plaque p:first-of-type {
  padding: 0px !important;
  font: 700 10px var(--font-family);
  color: rgba(255, 255, 255, .9);
}

plaque p:last-of-type {
  padding: 0px !important;
  font: 400 10px var(--font-family);
  color: rgba(255, 255, 255, .9);
}

.accept-wrap {
  background-image: url(https://upforme.ru/uploads/001c/49/47/4/604016.jpg);
  width: 520px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accept {
  background-color: var(--sec-bg);
  display: block;
  width: 400px;
  border: 1px solid var(--add-acc);
  padding: 20px;
}

h.accept-header {
  display: flex;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}

h2.accept-header {
  text-align: center;
  margin-bottom: 8px;
  font-style: italic;
}

.modal-link {
  text-decoration: none !important;
}

/* баннеры */

banners {
  width: 925px;
  height: 50px;
  bottom: -85px;
  left: 85px;
  position: absolute;
}

banners div {
  width: 925px;
  height: 34px;
  display: flex;
  gap: 5px;
  position: absolute;
  margin: 22px 25px 30px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  padding-bottom: 6px;
}

banners div::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

banners div a img {
  border-radius: 3px;
  opacity: .6;
  transition: ease-in-out .4s;
}

banners div a img:hover {
  opacity: 1;
}

/* =========================================================
   ПЕРСОНАЛЬНА СТОРІНКА (модальне вікно #character)
   Розмітка і сітка — один в один як на квібблері:
   твінки · фони · плашки · нагороди · пранки · подарунки.
   Змінено тільки кольори: усе береться зі змінних теми,
   тому вікно саме перефарбовується у світлій / середній / темній.
     вікно ............ --pun-bg
     картки розділів .. --main-acc
     внутрішні блоки .. --sec-bg
     рядки твінків .... --add-acc
     підписи .......... --btn-bg / --btn-text
   ========================================================= */

/* ---------- затемнення фону ---------- */
.reveal-modal-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 100;
  display: none;
}

/* ---------- вікно ---------- */
.reveal-modal {
  --m-line: 1px solid color-mix(in srgb, var(--link-hover) 28%, transparent);
  visibility: hidden;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  width: 870px;
  height: 640px;
  padding: 0;
  margin: 0;
  display: block;
  box-sizing: border-box;
  background: var(--pun-bg);
  border: var(--m-line);
  border-radius: 12px;
  /* перший шар: затемнення всього екрана, другий: тінь вікна */
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ink-dark) 72%, transparent), 0 18px 50px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.reveal-modal::before { display: none; }

.reveal-modal.small { width: 200px; height: auto; }
.reveal-modal.medium { width: 400px; height: auto; }
.reveal-modal.large { width: 600px; height: auto; }

.reveal-modal .close-reveal-modal {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  font-size: 22px;
  line-height: .5;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  text-shadow: none;
  color: var(--link);
  opacity: .55;
  transition: opacity .2s ease;
}
.reveal-modal .close-reveal-modal:hover { opacity: 1; color: var(--link-hover); }

/* контейнери всередині: без старого фону */
.reveal-modal .character {
  width: 100%;
  height: 358px;
  max-height: none;
  padding: 0;
  display: block;
  background: none;
  border: 0;
  overflow: hidden;
}
.reveal-modal .charinner {
  display: grid;
  width: 870px;
  height: 640px;
  gap: 0;
  flex-wrap: nowrap;
}
.charinner * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--link-hover) 55%, transparent) transparent;
}

/* ===== ЗАГАЛЬНЕ ПОЛЕ ===== */
.charinner {
  width: 870px;
  height: 640px;
  box-sizing: border-box;
  padding: 10px;
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  grid-template-rows: 1fr 1fr;
  gap: 20px !important;
  /* фон-текстура як на квібблері, зверху напівпрозорий шар кольору теми */
  background:
    linear-gradient(color-mix(in srgb, var(--pun-bg) var(--char-veil), transparent) 0 0),
    var(--char-bg-img) center / cover no-repeat,
    var(--pun-bg);
  font-family: var(--font-family);
  color: var(--link);
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* ===== ВЕРХНІЙ РЯД ===== */
.ch_twins { grid-column: 1; grid-row: 1; }
.ch_bgs   { grid-column: 2; grid-row: 1; }
.ch_right { grid-column: 3; grid-row: 1; }

/* ===== НИЖНІЙ РЯД: 3 блоки ===== */
.ch_bottom {
  grid-column: 1 / span 3;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 10px;
}

/* ===== КАРТКИ РОЗДІЛІВ ===== */
.ch_bgs, .ch_right, .ch_awards1, .ch_prank, .ch_gifts {
  background: var(--main-acc);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: var(--m-line);
}

.ch_twins {
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.ch_bgs { margin: 10px -10px 10px -15px; }
.ch_right { margin: 10px 15px 10px 5px; }

/* ---------- підпис розділу ---------- */
.ch_title {
  position: relative;
  top: -16px;
  left: 3px;
  width: fit-content;
  z-index: 2;
  margin: 0;
  padding: 3px 12px 4px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font: 400 12px / 1 var(--second-font);
  letter-spacing: .6px;
  text-transform: lowercase;
  white-space: nowrap;
}

/* ===== ПЕРСОНАЖ ===== */
.me {
  display: flex;
  margin-bottom: 10px;
  gap: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--sec-bg);
  padding: 10px;
  border: var(--m-line);
  border-radius: 10px;
}

.me_avatar {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  object-fit: cover;
  border: var(--m-line);
  box-shadow: var(--card-shadow);
}

.me_text {
  min-width: 0;
  max-height: 80px;
  overflow: auto;
}

.me_text h4 {
  margin: 0 0 4px;
  letter-spacing: .5px;
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--link-hover);
  text-transform: uppercase;
}

.me_text p {
  margin: 0;
  font-family: var(--second-family);
  font-size: 9px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--link) 72%, transparent);
}

/* ===== ТВІНКИ ===== */
.twins_box {
  position: relative;
  flex: none;
  height: 202px;
  padding: 10px;
  box-sizing: border-box;
  background: var(--sec-bg);
  border: var(--m-line);
  border-radius: 10px;
  margin-top: 10px;
}

.twins_inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 173px;
  margin-top: -10px;
}

.twin_item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--main-acc);
  border-radius: 10px;
}

.twin_item img {
  width: 50px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
}

.twin_item a {
  text-decoration: none;
  font-family: var(--second-font);
  font-size: 14px;
  line-height: 1.1;
  color: var(--link);
}
.twin_item a:hover { color: var(--link-hover); }

/* ===== ФОНИ ===== */
.bgs_inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bgs_inner img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* ===== ПЛАШКИ ===== */
.plates_inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plates_inner > img,
.plates_inner .tooltip img {
  display: block;
  width: 220px;
  height: 41px;
  object-fit: cover;
  border-radius: 8px;
}

/* підказка: позицію рахує скрипт у низу форуму відносно вікна,
   тому вона не обрізається краями прокрутки */
.tooltip { position: relative; display: inline-block; }
.reveal-modal .tooltip { position: static; }
.tooltip .tooltiptext {
  visibility: hidden;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity .2s;
}
.reveal-modal .tooltip .tooltiptext {
  bottom: auto;
  transform: translate(-50%, -100%);
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

/* ===== НИЖНІ БЛОКИ ===== */
.awards_inner1, .prank_inner, .gifts_inner {
  display: grid;
  gap: 6px;
  align-content: start;
  grid-template-columns: repeat(4, 1fr);
}

.awards_inner1 img, .prank_inner img, .gifts_inner img {
  height: 50px;
  object-fit: contain;
  border-radius: 15px;
}

/* Theme switcher © max, the murderer! */

/* стрелки */

.go-down,
.go-up {
  height: 30px;
  margin-left: 1107px;
  opacity: .7;
  cursor: pointer;
  position: fixed;
  width: 30px;
  transition: transform 1s cubic-bezier(0.72, -0.01, 0, 1) 0s;
}

.go-down:hover,
.go-up:hover {
  opacity: 1;
  transform: rotate(180deg);
}

.go-up {
  background: url(https://forumstatic.ru/files/001c/74/d2/24911.svg);
  top: 385px;
  background-size: contain;
}

.go-down {
  background: url(https://forumstatic.ru/files/001c/74/d2/98040.svg) no-repeat;
  top: 434px;
  background-size: cover;
}

.go-down:hover:after,
.go-up:hover:after {
  height: 35px;
  width: 35px;
  margin-left: -5px;
}

#tooltip {
  position: absolute;
  text-transform: lowercase;
  z-index: 9999;
  max-width: 260px;
  border-radius: 10px;
  display: none;
  color: var(--pun-bg);
  background: var(--link-hover);
  font: 700 10px var(--font-family);
  text-align: center;
  padding: 3px 10px 4px;
}

#MyBookmarks {
  background: var(--pun-bg);
  color: var(--link);
}

.pun-modal .modal-inner {
  background: var(--pun-bg);
  color: var(--link);
}

/* Extra additions
-------------------------------------------------------------*/

#poll-special table.poll1 {
  width: auto;
}

#poll-special td {
  border: 0;
}

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

#poll-special td {
  text-align: left !important;
  cursor: default !important;
}

#poll-special td.tac {
  text-align: center !important;
}

#poll-special td.tar {
  text-align: right !important;
}

div.pa-respect span {
  font-size: 0.9em;
  vertical-align: top;
}

div.post-rating p {
  float: right !important;
  border: 0 !important;
  padding: 3px !important;
}

div.post-vote p {
  float: right !important;
  border: 0 !important;
  padding: 3px 0px !important;
  margin-right: 5px !important;
  right: -15px;
  position: relative;
}

div.post-vote p .negative {
  margin-left: 13px;
}

div.post-rating a {
  cursor: pointer !important;
}

div.post-rating a,
div.post-vote a {
  font-size: 130% !important;
  text-decoration: none !important;
}

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

.post-content table {
  border-collapse: collapse;
  margin: 0 0 0.8em;
}

.post-content td {
  border-width: 0px !important;
  border-style: solid !important;
  padding: 0.4em 0.5em !important;
  overflow: hidden;
}

.post-content td p:last-child {
  padding-bottom: 0;
}

.post-content .highlight-text {
  background-color: color-mix(in srgb, var(--accent2) 45%, transparent);
  color: inherit;
}

.post-content .spoiler-box>div {
  background: url('/img/plus.png') no-repeat left center;
  cursor: pointer;
  padding-left: 18px;
}

.post-content .spoiler-box>div.visible {
  background-image: url('/img/minus.png');
}

.post-content .spoiler-box>blockquote {
  padding-top: 1.4em;
  display: none;
}

.post-content .spoiler-box>blockquote.visible {
  display: block;
  overflow: auto;
}

.post-content abbr {
  cursor: help;
}

.post-content ul {
  padding: 0 0 1em 2.3em;
}

.post-content ul li {
  list-style: inherit;
  margin-bottom: 0.3em;
}

.post-content ul li ul {
  padding-bottom: 0;
}

.post-content ul li>p {
  padding-bottom: 0.3em;
}

.post-content ul li>p:last-of-type {
  padding-bottom: 0;
}

#form-buttons table,
.punbb .formal textarea {
  width: 99%;
}

#form-buttons td {
  padding: 0 !important;
  line-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  cursor: pointer;
}

#form-buttons td img {
  height: 26px;
  width: 100%;
}

#form-buttons tr {
  text-align: center;
}

td#button-font {
  background: url('/i/form_buttons.3.png') no-repeat 50% 5px;
}

td#button-size {
  background: url('/i/form_buttons.3.png') no-repeat 50% -21px;
}

td#button-bold {
  background: url('/i/form_buttons.3.png') no-repeat 50% -47px;
}

td#button-italic {
  background: url('/i/form_buttons.3.png') no-repeat 50% -73px;
}

td#button-underline {
  background: url('/i/form_buttons.3.png') no-repeat 50% -99px;
}

td#button-strike {
  background: url('/i/form_buttons.3.png') no-repeat 50% -125px;
}

td#button-left {
  background: url('/i/form_buttons.3.png') no-repeat 50% -151px;
}

td#button-center {
  background: url('/i/form_buttons.3.png') no-repeat 50% -177px;
}

td#button-right {
  background: url('/i/form_buttons.3.png') no-repeat 50% -203px;
}

td#button-link {
  background: url('/i/form_buttons.3.png') no-repeat 50% -229px;
}

td#button-spoiler {
  background: url('/i/form_buttons.3.png') no-repeat 50% -255px;
}

td#button-image {
  background: url('/i/form_buttons.3.png') no-repeat 50% -281px;
}

td#button-video {
  background: url('/i/form_buttons.3.png') no-repeat 50% -307px;
}

td#button-hide {
  background: url('/i/form_buttons.3.png') no-repeat 50% -333px;
}

td#button-quote {
  background: url('/i/form_buttons.3.png') no-repeat 50% -359px;
}

td#button-code {
  background: url('/i/form_buttons.3.png') no-repeat 50% -385px;
}

td#button-color {
  background: url('/i/form_buttons.3.png') no-repeat 50% -411px;
}

td#button-smile {
  background: url('/i/form_buttons.3.png') no-repeat 50% -437px;
}

td#button-keyboard {
  background: url('/i/form_buttons.3.png') no-repeat 50% -463px;
}

td#button-table {
  background: url('/i/form_buttons.3.png') no-repeat 50% -489px;
}

td#button-addition {
  background: url('/i/form_buttons.3.png') no-repeat 50% -515px;
}

.punbb .formal fieldset {
  min-width: 0;
}

.punbb .formal span.input {
  padding-right: 0 !important;
}

#formkey,
#formetc {
  display: none;
}

#color-area,
#table-area,
#keyboard-area {
  width: auto;
}

#keyboard-area {
  text-align: center;
  padding-bottom: 4px;
}

#imageup-area {
  width: 170px;
}

#imageattach-area {
  width: 770px;
  height: 200px;
  padding: 0px !important;
}

#smilies-area,
#video-area,
#spoiler-area {
  width: 450px;
}

#image-area {
  width: 550px;
}

#color-area * {
  border: 0;
}

#color-area table {
  width: 320px;
  height: 20px;
  padding: 0;
  margin: 0;
}

#table-area table {
  width: auto !important;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
}

#table-area div {
  margin-top: 1em;
  text-align: center;
}

#table-layout {
  margin-right: 0.5em;
}

#table-area td {
  background-color: var(--sec-bg);
  width: 20px;
  height: 20px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #dadada !important;
}

#table-area td.selected {
  background-color: #c8c8ff;
}

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

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

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

#font-area,
#size-area {
  right: unset !important;
}

#font-area div,
#size-area div,
#color-area div,
#table-area div,
#addition-area div,
#smilies-area div a,
#smilies-area img {
  cursor: pointer !important;
}

#font-area span,
#font-area img,
#size-area span,
#size-area img {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

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

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

#font-area span,
#size-area span {
  padding: 1px 0;
}

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

#addition-area {
  max-height: 200px;
  overflow: auto;
}

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

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

#keyboard-span {
  text-align: center;
  padding-bottom: 10px;
  width: auto;
}

#keyboard-span input {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--link);
  background-color: var(--sec-bg);
  margin: 1px 1px 0 0;
  border: 1px solid var(--add-acc);
  cursor: pointer;
  height: 25px;
  min-width: 30px;
}

#imageup-area input {
  font-size: 0.8em;
}

#imageup-area p {
  padding: 0;
  margin: 0;
}

#imageup-title {
  margin-bottom: 10px !important;
}

#imageup-submit {
  margin-top: 10px !important;
}

#main-reply {
  width: 100%;
}

#pun-messages #post-form div.container {
  padding-left: 2.3em;
}

#similar-topics {
  margin-top: 1em;
}

#similar-topics div.container {
  padding-top: 1.1em;
}

#similar-topics td {
  border: 0;
  padding: 0;
}

#similar-topics td.st-tcl {
  width: 60%;
}

#similar-topics td.st-tc2 {
  width: 25%;
  padding-right: 1em;
  text-align: right;
}

#similar-topics td.st-tcr {
  width: 15%;
  padding-right: 1em;
  text-align: right;
}

.postlink.long {
  width: 30em;
}

.postlink.long .new-topic {
  padding-right: 12px;
}

li.pa-ua {
  margin-top: 0.7em;
  display: flex;
  justify-content: center;
}

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

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

.punbb .post.new-ajax {
  display: none;
}

#pun-index .isub .tcl {
  padding-left: 3em !important;
}

#pun-main #subforums {
  padding: 1em 0 1em 1em;
  margin-bottom: 5px;
}

.notify-parent {
  position: relative;
}

.notify-bubble {
  background: lightblue;
  border-radius: 3px;
  color: black;
  font: bolder 12px/1.2 Tahoma;
  margin: 0;
  min-width: 14px;
  padding: 0 1px;
  position: absolute;
  text-align: center;
}

.notify-bubble:after {
  border-color: lightblue transparent;
  border-style: solid;
  border-width: 3px 3px 0;
  content: "";
  display: block;
  left: 5px;
  position: absolute;
  width: 0;
}

/* Statistic */

#pun-statistic .tc3 {
  width: 15%;
}

#pun-statistic .tc-username {
  width: unset;
  text-align: left;
}

#pun-statistic .tc-title {
  width: 25%;
  text-align: left;
}

#pun-statistic .tc-registered {
  width: 20%;
}

#pun-statistic .tc-topic {
  width: 50%;
}

/* New profile style
-------------------------------------------------------------*/

#viewprofile td {
  border: 0;
  padding: 0;
  overflow: hidden;
}

#profile-name strong {
  font-size: 1.2em;
}

#profile-left strong {
  font-weight: bold !important;
}

#profile-left {
  width: 30%;
  padding-top: 0 !important;
}

#profile-left li,
#profile-left li * {
  padding-left: 0;
  margin-left: 0;
}

#profile-right {
  width: 70%;
}

#profile-right li strong {
  padding-left: 2em;
}

#profile-signature {
  padding: 1.5em 1.5em 1em 1.5em;
}

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

/** Video-Button
---------------------------------------------------------------*/

#video-host-list {
  margin-top: .3em;
  line-height: 1.8em;
}

#video-area-tinp,
#image-area-tinp {
  margin: .5em 0;
  padding: .3em;
  border: #66a solid 1px;
  height: 70px;
}

#video-area-msg,
#image-source-list,
#image-area-actions,
#spoiler-sels {
  line-height: 2em;
}

p[class="checkfield"] img,
div[class="checkfield"] img,
fieldset[class="radiofield"] img {
  height: auto;
  max-height: 50px;
}

.pa-fld1 img,
.pa-fld2 img,
.pa-fld3 img,
.pa-fld4 img,
.pa-fld5 img,
.pa-fld6 img,
.pa-fld7 img,
.pa-fld8 img,
.pa-fld9 img,
.pa-fld10 img,
.pa-fld11 img,
.pa-fld12 img,
.pa-fld13 img,
.pa-fld14 img,
.pa-fld15 img,
.pa-fld16 img,
.pa-fld17 img,
.pa-fld18 img,
.pa-fld19 img,
.pa-fld20 img {
  vertical-align: text-top;
}

/** Image-Button
---------------------------------------------------------------*/

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

#image-area-tcon-computer td {
  border: none !important;
  padding: 0;
}

#imageupload-left {
  width: 140px;
}

#imageupload-right {
  padding-left: 9px !important;
  background: transparent !important;
  max-width: 380px;
}

#image-area-actions {
  text-align: right;
}

* html #imageQueue {
  height: expression(this.scrollHeight > 65 ? "66px" :"auto");
}

/* sets max-height for IE */

* html #uploaded-images {
  height: expression(this.scrollHeight > 143 ? "144px" :"auto");
}

#imageQueue {
  max-height: 72px;
  overflow-y: auto;
  margin-bottom: 10px;
}

#uploaded-images {
  max-height: 144px;
  overflow-y: auto;
}

#uploaded-images img {
  width: 88px;
  height: 66px;
  border: 1px solid;
  margin-right: 4px;
  cursor: pointer;
}

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

#image-source-list a,
#image-area-actions a,
#spoiler-sels a {
  margin-right: 15px;
  cursor: pointer;
}

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

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

#image_upload_input {
  position: absolute;
  z-index: -1;
  left: -9999px;
}

#selected-image-width,
#selected-thumb-width {
  width: 6em;
}

#imageupload-left input[type=button] {
  width: 11em;
  text-align: center;
}

#upload-button-container input[type=button] {
  font-weight: bold;
}

#image-width,
#image-thumb-width,
#image-insert-format strong {
  font-size: .9em;
}

.uploadQueueItem {
  padding: .8em 1em;
  border: solid 1px #ddd;
  border-radius: 5px;
  margin-bottom: .5em;
  background: rgba(238, 238, 238, 0.22);
}

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

.uploadQueueItem .cancel {
  font-size: 20px;
  font-weight: 700;
  font-family: Arial;
  float: right;
  margin: -.25em 0 0;
}

.uploadQueueItem .cancel a {
  text-decoration: none;
  color: #333 !important;
}

.uploadProgress {
  display: block;
  width: 98%;
  height: 3px;
  margin: 2px 0 0;
  background: #ddd;
  position: relative;
}

.uploadProgressBar {
  position: relative;
  background: #00adff;
  height: 3px;
  width: .1%;
  transition: width .1s linear;
}

/** jQuery plugins
---------------------------------------------------------------*/

.tipsy {
  padding: 5px;
  font-size: 11px;
  font-family: tahoma, helvetica, verdana, arial;
  position: absolute;
  z-index: 100000;
}

.tipsy-inner {
  padding: 5px 8px 4px;
  margin: -0.2px;
  background-color: black;
  color: white;
  max-width: 200px;
  text-align: center;
  border-radius: 3px;
}

.tipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: solid 5px;
  border-color: transparent transparent black transparent;
}

.tipsy-n .tipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-top: 0;
}

.tipsy-nw .tipsy-arrow {
  top: 0;
  left: 11px !important;
  border-top: 0;
}

.tipsy-ne .tipsy-arrow {
  top: 0;
  left: auto !important;
  right: 11px;
  border-top: 0;
}

.tipsy-s .tipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
  border-bottom: 0;
}

.tipsy-sw .tipsy-arrow {
  bottom: 0;
  left: 11px !important;
  border-color: black transparent transparent transparent;
  border-bottom: 0;
}

.tipsy-se .tipsy-arrow {
  bottom: 0;
  left: auto !important;
  right: 11px;
  border-color: black transparent transparent transparent;
  border-bottom: 0;
}

.tipsy-e .tipsy-arrow {
  top: 50%;
  margin-top: -5px;
  left: auto !important;
  right: 0;
  border-color: transparent transparent transparent black;
  border-right: 0;
}

.tipsy-w .tipsy-arrow {
  top: 50%;
  margin-top: -5px;
  left: 0 !important;
  border-color: transparent black transparent transparent;
  border-left: 0;
}

.jGrowl {
  z-index: 9999;
  color: #fff;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed;
}

.jGrowl.top-left {
  left: 0;
  top: 0;
}

.jGrowl.top-right {
  right: 0;
  top: 0;
}

.jGrowl.bottom-left {
  left: 0;
  bottom: 0;
}

.jGrowl.bottom-right {
  right: 0;
  bottom: 0;
}

.jGrowl.center {
  top: 0;
  width: 50%;
  left: 25%;
}

.jGrowl.center .jGrowl-closer,
.jGrowl.center .jGrowl-notification {
  margin-left: auto;
  margin-right: auto;
}

.jGrowl-notification {
  background-color: #000;
  opacity: .9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  text-align: left;
  display: none;
  border-radius: 5px;
  min-height: 40px;
}

.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

.jGrowl-notification .jGrowl-header {
  font-weight: 700;
  font-size: .85em;
}

.jGrowl-notification .jGrowl-close {
  background-color: transparent;
  color: inherit;
  border: none;
  z-index: 99;
  float: right;
  font-weight: 700;
  font-size: 1em;
  cursor: pointer;
}

.jGrowl-closer {
  background-color: #000;
  opacity: .9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  display: none;
  border-radius: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
  font-size: .9em;
  font-weight: 700;
  text-align: center;
}

.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

@media print {
  .jGrowl {
    display: none;
  }
}

.pun-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100000;
}

.pun-modal .modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
  z-index: 110000;
}

.pun-modal .modal-inner {
  width: 700px;
  max-width: 94%;
  height: auto;
  max-height: 62vh;
  margin: 12% auto 0;
  margin-top: 20vh;
  box-shadow: 0 0 14px rgba(0, 0, 0, .3);
  position: relative;
  z-index: 120000;
  overflow: hidden;
}

.pun-modal h2,
.pun-modal h1 {
  max-width: 700px;
  margin: 0 !important;
}

.pun-modal .container {
  padding: .6em 1em;
  max-height: 54vh;
  overflow: auto;
}

.pun-modal .container .container {
  max-height: unset;
}

.pun-modal .closer {
  position: absolute;
  font-size: 1.5em !important;
  line-height: .8em;
  right: .4em;
  padding: .3em !important;
  margin: -.3em !important;
  cursor: pointer;
  background: none 0 transparent !important;
}

.noscroll {
  overflow: hidden !important;
}

/** Social icons
---------------------------------------------------------------*/

.social {
  background-image: url('/i/social.1.png');
  background-repeat: no-repeat;
  float: left;
  display: block;
  margin: 3px 5px;
  width: 16px;
  height: 16px;
}

.social-facebook {
  background-position: 0 0;
}

.social-google {
  background-position: -26px 0;
}

.social-mailru {
  background-position: -52px 0;
}

.social-odnoklassniki {
  background-position: -78px 0;
}

.social-twitter {
  background-position: -104px 0;
}

.social-vkontakte {
  background-position: -130px 0;
}

.social-yandex {
  background-position: -156px 0;
}

.social-youtube {
  background-position: -182px 0;
}

.social-instagram {
  background-position: -312px 0;
}

.social-linkedin {
  background-position: -338px 0;
}

.social-reddit {
  background-position: -442px 0;
}

.social-share {
  background-position: -468px 0;
}

.social-tumblr {
  background-position: -546px 0;
}

.topic a.sharelink {
  float: right;
  margin-left: 1em;
}

.post-share-tip {
  width: 164px;
  height: 124px;
}

.post-share-legend {
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
}

.post-share-tip span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  font-size: 13px;
  line-height: 27px;
}

.post-share-icons {
  padding: 10px;
}

.post-share-tip a {
  margin: 5px 10px;
}

/** Avatars
---------------------------------------------------------------*/

.punbb .user-avatar {
  float: left;
  position: relative;
  height: 36px;
  width: 36px;
  margin: 1px 9px 2px 0px;
}

#pun-index .user-avatar {
  height: 40px;
  vertical-align: middle;
}

.punbb .user-avatar a {
  padding: 0 !important;
  background: none transparent !important;
}

.punbb .user-avatar a::after {
  content: none !important;
}

.punbb .user-avatar .avatar-image {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  opacity: 0.85;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  float: left;
}

.punbb .user-avatar .avatar-image:hover {
  opacity: 1;
}

.punbb .user-avatar .isonline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 2px;
  right: 0px;
  animation: blinkColor .9s linear infinite;
  background: var(--status) !important;
  z-index: 100;
}

@keyframes blinkColor {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: .3;
  }

  100% {
    opacity: 1.0;
  }
}

/** Flags
---------------------------------------------------------------*/

.punbb .flag-i {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
  margin-right: 1em;
}

.punbb .pa-author .flag-i {
  margin-right: 0.5em;
}

.punbb .flag-i:before {
  content: '\00a0';
}

.post-content abbr {
  border-bottom: 1px dotted var(--link);
  text-decoration: none;
}

/** Font icons
---------------------------------------------------------------*/

@font-face {
  font-family: 'mybb';
  src: url('./res/font/icons.woff2?3') format('woff2'), url('./res/font/icons.woff?3') format('woff'), url('./res/font/icons.ttf') format('truetype'), url('./res/font/icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

i[class^="icons-"]:before,
i[class*=" icons-"]:before,
.i[class*=" icons-"]:before,
.i[class^="icons-"] {
  font-family: "mybb";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.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';
}

.adminmain {
  margin-top: 1em;
}

/* ссылки главная */

.please-links {
  display: flex;
  gap: 5px;
  margin: 7px 0 13px;
  flex-wrap: wrap;
}

.please-links a {
  background: color-mix(in srgb, var(--link) 4%, transparent);
  padding: 1px 8px 2px !important;
  border-radius: 100px;
  transition: background ease-in-out .4s !important;
  margin-right: 5px !important;
}

.please-links a:hover {
  background: var(--bg-accent-rgba);
}

#profile8 #fld2,
#profile8 #fld3,
#profile8 #fld4 {
  display: block;
  width: 100%;
  height: 100px;
  resize: vertical;
  white-space: pre-wrap;
  overflow: auto;
}

/* ПРОФИЛЬ */

/* админка и мгновенные уведомления */

#pun-modviewforum tbody tr,
#pun-modviewforum thead tr {
  display: grid;
  position: relative;
  width: 1040px;
  grid-template-columns: 2fr .5fr .5fr 1fr .1fr;
  color: var(--link);
  border-radius: 10px;
  margin: 2px 30px;
  align-items: center;
}

#pun-modviewforum .modmenu .container {
  width: 60em;
  padding: 0.5em 1em;
  text-align: right;
  text-transform: lowercase;
  left: 15px;
  position: relative;
  font: 400 10px var(--font-family);
  color: var(--link);
}

#pun-modviewforum table div.icon {
  background: var(--bg-accent-rgba);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  left: 28px;
  top: 4px;
}

#pun-modviewforum table div.icon::after {
  content: none;
}

#pun-modviewforum table tr.iclosed div.icon {
  background: var(--link);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 10px;
}

#pun-multimove .modmenu .container {
  width: 963px;
  padding: 0.5em 1em;
  text-align: right;
  text-transform: lowercase;
  display: grid;
  grid-template-columns: 5fr .1fr 1fr .3fr;
  gap: 5px;
  left: 9px;
  position: relative;
  font: 400 10px var(--font-family);
  color: var(--link);
  align-items: center;
  justify-items: start;
}

.pun-modal .closer {
  position: relative !important;
}

.post-content hr {
  opacity: 0.5;
  margin-bottom: 0.8em;
}

div.pun-modal.unread-notifications>div.modal-inner.section>h2>span {
  height: 10px;
  width: 100%;
  text-align: center;
  color: var(--link);
  font: 700 12px var(--font-family);
  text-transform: lowercase;
}

div.pun-modal.unread-notifications>div.modal-inner.section>h2>span:nth-child(2) {
  position: absolute !important;
  top: 5px;
}

div.pun-modal.unread-notifications>div.modal-inner.section {
  padding: 10px;
  border-radius: 10px;
}

.notification-image {
  width: 35px !important;
  height: 35px !important;
  padding: 0 !important;
}

.notification-image:hover {
  box-shadow: none !important;
}

#notifications-wrap {
  text-transform: lowercase;
  font-size: 10px;
}

.notification-item {
  padding: 2px 10px !important;
}

.notification {
  min-height: 50px;
  cursor: pointer;
  text-transform: lowercase;
}

/* Flow Around */

#button-float {
  width: 20px;
  height: 20px;
}

#button-float::before {
  content: '\f03c';
  font: var(--fa-font-solid);
  font-size: 12px;
  top: 0;
  left: 0;
  display: flex;
  position: relative;
  color: var(--muted);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: ease-in-out .4s;
  z-index: 1;
  width: 23px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
}

#float {
  display: none;
  position: absolute;
  margin-top: 71px;
  left: 48%;
  text-align: center;
  background: var(--sec-bg);
  border-radius: 10px;
  padding: 3px 15px;
  z-index: 1;
}

#float strong {
  display: block;
  margin-bottom: 7px;
}

#float i {
  font-size: 16px;
  padding: 0 8px;
}

#float i:hover {
  opacity: .6;
}

/*кнопки копирования в форму ответа*/

.copy-to-reply-toform {
  padding: 5px 15px !important;
  background: color-mix(in srgb, var(--main-acc) 50%, transparent);
  color: var(--link-hover);
  border-radius: 20px;
  margin: 5px !important;
  transition: ease-in-out .4s !important;
  border: 0px;
  width: inherit;
}

.copy-to-reply-toform:hover {
  box-shadow: none !important;
  background: var(--bg-accent-rgba);
}

/*маска*/

/*------------ПРЕВЬЮ КОЛЛЕКЦИЙ------------*/

.coll_preview {
  width: fit-content;
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coll_preview_name {
  font-family: Cormorant Infant;
  font-size: 12px;
  line-height: 25px;
  font-weight: 900;
  width: 200px;
  margin-top: 96px;
  position: absolute;
  text-align: center;
  color: var(--link);
  background-color: var(--sec-bg);
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0px 7px 13px -9px #000000a6;
  padding-left: 10px;
  padding-right: 10px;
}

.coll_preview_icons {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  justify-content: center;
  gap: 25px;
  padding: 10px;
}

.coll_preview_icons img {
  width: 70px;
}

/* картинка в нужных */

img.wanted_img {
  width: 245px;
  height: 150px;
  object-fit: cover;
  border-radius: 1rem;
}

/*эмодзи*/

.hvStickerPackModal {
  padding: 16px 16px 8px !important;
  border-radius: 4px !important;
  background: var(--pun-bg) !important;
  box-shadow: 0px 30px 20px -12px rgba(0, 0, 0, 0.16), 0px 20px 20px -50px rgba(0, 0, 0, 0.23) !important;
  left: 28px !important;
}

.hvStickerPackModalTabs {
  text-transform: lowercase;
}

.hvStickerPackModalTab.active {
  background: var(--add-acc) !important;
}

.hvStickerPackModalTab {
  padding: 5px 9px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  margin-right: 8px !important;
  background: transparent !important;
  transition: background ease-in-out .4s;
}

.hvStickerPackModalTab:hover {
  background: var(--add-acc) !important;
}

/************************* 
Стиль для Быстрой смены аккаунтов 
Deff 
*************************/

/*Cкрытие формы входа без клика*/

#navlogout>span {
  background: var(--pun-bg);
  width: 495px;
  height: 271px;
  position: absolute !important;
  z-index: 100;
  left: 392px;
  border-radius: 10px;
  top: 30px !important;
}

#navlogin>span {
  background: var(--pun-bg);
  position: absolute !important;
  z-index: 100;
  left: 56%;
  border-radius: 10px;
  top: 30px !important;
}

#pun-navlinks li>a:not(.NextShow)+span.odd {
  display: none !important;
}

/*Стиль доп-иконки Выход!*/

#pun-navlinks a#New-exit {
  background: transparent !important;
  position: absolute;
  z-index: 100000 !important;
  margin-top: 1px !important;
  margin-left: 15px !important;
  display: inline-block !important;
}

#pun-navlinks #New-exit img {
  position: absolute;
  width: 20px;
  height: auto;
  transition: .63s;
  background-color: var(--accent2);
  border-radius: 100px;
  margin-top: -6px;
  margin-left: -23px;
  opacity: .5;
}

#pun-navlinks #New-exit:hover img {
  transition: .63s;
  opacity: .64;
}

.punbb #pun-navlinks a#New-exit:before {
  content: none;
}

.punbb #pun-navlinks #form-login input {
  text-rendering: auto;
  margin-top: 4px !important;
  margin-bottom: 3px !important;
  display: inline-block !important;
  font: var(--font-family) !important;
  height: 25px;
  border: 1px solid var(--bg-navlinks) !important;
  padding: 0 10px !important;
  background: transparent !important;
  width: 155px;
  transition: background ease-in-out .4s;
}

.punbb #pun-navlinks #form-login input:hover {
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
}

.punbb #form-login #fld1,
#form-login #fld2 {
  background-color: var(--main-acc);
}

.punbb #pun-navlinks #form-login input[type="submit"] {
  margin: 10px 0 2px !important;
  height: 26px;
  width: 133px;
  font-size: 12px !important;
  color: var(--link) !important;
  background: var(--link-hover) !important;
  text-align: center !important;
  transition: all .5s ease-in-out;
  cursor: pointer;
  text-transform: lowercase;
}

.punbb #pun-navlinks #form-login,
.punbb #pun-navlinks #form-login * {
  box-sizing: content-box !important;
}

/*Стиль формы входа*/

.punbb #pun-navlinks #form-login {
  background: var(--pun-bg);
  min-height: 183px;
  border: 1px solid var(--muted);
  border-radius: 0px 10px 10px 0px;
  color: #000000;
  display: block;
  font: var(--font-family);
  left: 0%;
  padding: 8px 12px;
  margin: 1px 0;
  position: absolute !important;
  text-align: center;
  word-spacing: normal;
  white-space: normal;
  letter-spacing: 0.2px !important;
  top: 8px;
  width: 236px !important;
  text-transform: lowercase;
  font-size: 11px;
  height: 237px;
}

#pun-navlinks #navlogin #form-login {
  margin-left: -40px;
}

#pun-navlinks #navlogout #form-login {
  margin-left: -40px;
}

.ismoderator #pun-navlinks #navlogout #form-login {
  margin-left: 235px !important;
}

/*Стиль ссылок в форме "Не зарегистрированы" и "Забыли пароль" */

#pun-navlinks #form-login input[value="\412 \43e \439 \442 \438 "]+p {
  margin: 5px 0 2px 0;
}

.punbb #pun-navlinks #form-login a.Rega,
.punbb #pun-navlinks #form-login a.Forgot {
  position: relative;
  text-transform: lowercase;
  z-index: 20;
  cursor: pointer;
  background: none !important;
  padding: 0 0 3px !important;
  color: #000 !important;
  font-size: 9px !important;
  font-weight: 400;
}

.punbb #pun-navlinks #form-login a.Rega:before,
.punbb #pun-navlinks #form-login a.Forgot:before {
  content: none;
}

/* Помечаем красным незаполненные поля!*/

#form-login input.none {
  outline: red dashed 2px !important;
}

input#Paste-And-Copy {
  width: 244px !important;
}

/*Форма слева(с Никами) */

#List-UserNames {
  position: absolute;
  margin-top: -11px;
  min-height: 235px;
  width: 270px;
  right: 97%;
  padding: 12px 19px 12px 17px;
  background: var(--main-acc);
  border-color: var(--sec-bg);
  border-style: solid;
  border-width: 0px;
  border-radius: 8px;
  text-align: center;
}

/*Стиль контейнера под список Ников*/

.punbb #List-UserNames ul {
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  min-height: 36px;
  max-height: 113px !important;
  height: 149px;
}

.punbb #List-UserNames li {
  display: flex;
  position: relative;
  text-align: left;
  padding-left: 5px !important;
  font: var(--font-family);
  margin: 1px auto !important;
  padding: 7px 5px;
  transition: .33s;
  border-radius: 8px;
  border: 1px solid var(--add-acc);
  gap: 3px;
  align-items: center;
}

.punbb #List-UserNames li:hover {
  opacity: .84;
}

/*Стиль Ников*/

.punbb #List-UserNames li>b {
  cursor: pointer;
  opacity: .8;
  color: #000;
}

.punbb #List-UserNames li>b:hover {
  opacity: .93;
  color: var(--link-hover) !important;
}

/*Скролл контейнера с никами*/

#List-UserNames ul::-webkit-scrollbar {
  width: 3px;
  height: 5px;
}

#List-UserNames ul::-webkit-scrollbar-track {
  background-color: var(--main-acc);
  border: 0px solid #d7d8d9;
  box-shadow: none;
}

#List-UserNames ul::-webkit-scrollbar-thumb {
  background-color: var(--link-hover);
  border: 0px solid #d7d8d9;
  box-shadow: none;
}

/*Кнопки Удалить (правее ников)*/

#List-UserNames ul li>span {
  display: flex;
  padding: 0 3px;
  position: absolute;
  opacity: .88;
  cursor: pointer;
  top: 0;
  bottom: 0;
  right: 6px;
  color: var(--muted);
  font: 400 12px var(--font-family);
  align-items: center;
  font-weight: 900;
}

/*Текст при отсутствии запомненных Ников!*/

#List-UserNames ul:empty:before {
  display: inline-block;
  content: "\423  \412 \430 \441  \43d \435 \442  \437 \430 \43f \43e \43c \43d \435 \43d \43d \44b \445  \43d \438 \43a \43e \432 , \432 \432 \435 \434 \435 \43d \43d \44b \445  \447 \435 \440 \435 \437  \444 \43e \440 \43c \443  \441 \43f \440 \430 \432 \430 , \438 \43b \438  \447 \435 \440 \435 \437  \43f \435 \440 \435 \43d \43e \441  \43d \438 \436 \435 !";
}

/*Кнопка выход-2*/

#navlogin #exit-2 {
  display: none;
}

#pun:not(.isguest) #navlogout .Rega,
#pun:not(.isguest) #navlogout .Forgot {
  display: none !important;
}

/*Стиль блока с инпутом для переноса и вставки запомненных Аккаунтов*/

#List-UserNames ul+span {
  display: inline-block;
  padding: 6px 0 8px 0;
  text-align: left;
  margin-top: 21px;
}

/*Сам инпут*/

.punbb #List-UserNames input {
  border: 1px solid var(--add-acc) !important;
  text-shadow: none !important;
  color: var(--link) !important;
  background-color: var(--main-acc);
  font: normal normal 400 11px/normal Verdana !important;
  margin-top: 9px;
  padding: 2px !important;
  vertical-align: middle;
}

/*Стрелочки к инпуту*/

#List-UserNames ul+span b {
  font: normal normal 400 13px/normal Verdana;
  padding: 0 3px;
  color: #000000;
}

/*Кликалка слева, чуть выше инпута*/

#List-UserNames .a1-copy {
  display: inline-block !important;
  cursor: pointer;
  float: left;
}

/*Кликалка справа*/

#List-UserNames .a1-paste {
  cursor: pointer;
  display: inline-block !important;
  float: right;
}

/*Подсказки на кликалках*/

.tipsy.a11 {
  font: normal normal 400 11px/normal Verdana !important;
  margin-top: -22px !important;
  margin-left: 148px !important;
  max-width: 170px;
}

#pun-navlinks #form-login div#List-UserNames::after {
  content: "\43e \431 \44f \437 \430 \442 \435 \43b \44c  \443 \43a \430 \436 \438 \442 \435  \43d \438 \43a  \432  \442 \43e \43c  \436 \435  \440 \435 \433 \438 \441 \442 \440 \435 , \447 \442 \43e  \438  \432  \43f \440 \43e \444 \438 \43b \435 , \447 \442 \43e \431 \44b  \441 \43a \440 \438 \43f \442  \441 \440 \430 \431 \43e \442 \430 \43b ";
  font-size: 9px;
  margin: 4px 0px 4px;
}

/************************* 
//Конец Стиля для Быстрой смены аккаунтов 
*************************/

/***************МАСКА*************/

#mask_dialog .hv-preview-block {
  flex: 0 0 120px;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 238px;
}

#mask_dialog .hv-preview-block {
  flex: 0 0 120px;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 253px;
  padding: 10px;
}

#mask_dialog .inner {
  cursor: default;
  margin: 0;
  width: 850px;
  max-width: 99%;
  max-height: 90%;
  overflow-x: auto;
  z-index: 100;
  box-shadow: 0 0 40px #222;
  background: var(--pun-bg);
  padding: 8px;
  text-transform: lowercase;
  border-radius: 10px;
}

/*****************
Стиль "Тихой Цитаты"
*****************/

.quiet-quote {
  position: relative;
  margin: 4px 15px 0px 19px !important;
  font-style: italic;
  font-size: 11px;
  color: color-mix(in srgb, var(--link) 70%, transparent);
}

.quiet-quote>p {
  line-height: normal !important;
}

.quiet-quote:before,
.quiet-quote:after {
  font-size: 17px;
  display: inline-block;
  position: absolute;
  z-index: 10;
  font-weight: 900;
  color: color-mix(in srgb, var(--link) 70%, transparent);
  font-family: System, Arial, sans-serif;
}

.quiet-quote:before {
  content: "\201C";
  left: -13px;
  top: -4px;
}

/*************************
/END//Стиль "Тихой Цитаты"
*************************/

/* мелочи под диз */

#notify-link .unreads,
#navpm .unreads,
span.num_msg,
span.num_msg:before {
  background: var(--accent2) !important;
}

#BookmCntToggle.default-style {
  background: var(--pun-bg) !important;
  border-left: solid 5px var(--link-hover) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, .42);
  color: var(--link-hover) !important;
  display: block;
  height: 26px;
  width: 21px;
}

.closedatafield {
  display: none;
}

.gallery-song {
  color: var(--link);
  width: auto;
  text-align: center;
  text-transform: uppercase;
  border-top: 1px solid var(--add-acc);
  margin-top: 5px;
  font-family: 'Cormorant Infant';
  font-size: 15px;
  font-weight: 600;
  padding-top: 5px;
  margin-bottom: -8px;
}

.hv-mask-field title {
  display: none;
}

/*фикс поиска в топике*/

#tuser {
  cursor: pointer;
  opacity: 0.5;
  padding: 2px;
  width: 20px;
  height: 20px;
  position: absolute !important;
  margin-top: -10px !important;
  margin-left: -250px !important;
}

.icons-search:before {
  content: '\f002' !important;
  font: var(--fa-font-solid) !important;
}

#isk {
  border: none !important;
  margin-top: 3px !important;
  cursor: pointer !important;
  height: 23px !important;
  width: 23px !important;
  display: flex !important;
  justify-content: center !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  align-items: stretch !important;
}

#sTheme {
  border-radius: 4px !important;
  height: 25px !important;
  width: 200px !important;
  opacity: .5;
  border: 1px solid var(--add-acc) !important;
}

#text-left,
#text-right {
  height: 20px;
  width: 20px;
}

#form-buttons td#button-smile {
  display: none;
}

/* описание форумов на главной и ссылки там же */

forumdesc {
  display: block;
  width: 525px;
  font-size: 10px;
  color: color-mix(in srgb, var(--link) 70%, transparent);
  text-transform: lowercase;
  letter-spacing: 0.2px;
  line-height: 140%;
}

forumlinks {
  display: flex;
  gap: 5px;
  margin-top: 11px !important;
}

forumlinks a {
  padding: 4px 8px 6px;
  background: color-mix(in srgb, var(--add-acc) 50%, transparent);
  border-radius: 100px;
  color: var(--link) !important;
  box-shadow: none;
  transition: box-shadow .3s cubic-bezier(0.62, -0.09, 0.23, 0.9), background .4s ease-in-out, color .4s ease-in-out;
}

forumlinks a:hover {
  box-shadow: var(--accent-glow);
  background: var(--link-hover);
  border-radius: 100px;
  color: var(--sec-bg) !important;
}

/* к шрифтам */

#font-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-height: 200px;
  overflow: auto;
}

.font-category-title:last-of-type::after {
  content: '\434 \435 \444 \43e \43b \442 \43d \44b \435 ';
  display: block;
  position: relative;
  bottom: -30px;
}

.font-category-title:last-of-type::after,
.font-category-title {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--add-acc);
}

#font-area span,
#font-area img {
  transition: background ease-in-out .4s;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

#font-area span:hover,
#font-area img:hover {
  background: color-mix(in srgb, var(--link-hover) 20%, transparent);
  border-radius: 100px;
}

.font-category {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px 0;
}

.font-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#font-area .container:not(.font-category-title):not(.font-category) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#font-area .font-category-title,
#font-area .font-category {
  grid-column: span 2;
}

.font-column {
  flex: 1;
  min-width: 150px;
}

.font-item {
  justify-content: space-between;
  padding: 2px 5px;
}

.font-item img {
  cursor: pointer;
  opacity: 0.7;
}

.font-item img:hover {
  opacity: 1;
}

#font-area .container {
  width: 400px;
  font-size: 16px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#pun-viewtopic .topic {
  width: 1020px;
  margin: auto;
  background: color-mix(in srgb, var(--sec-bg) 30%, transparent);
  border-radius: 16px;
  padding-top: 1px;
}

.punbb .toppost,
.punbb .topicpost {
  margin-top: 15px;
}

.post-content .spoiler-box > blockquote {
  display: block !important;
  max-height: 0;
  padding: 0px 10px !important;
  overflow: hidden !important;
  margin-top: 2px;
  transition: opacity 0.3s ease, padding 0.3s ease, max-height 0.5s ease;
  opacity: 0;
  width: 97%;
}

.post-content .spoiler-box > blockquote.visible {
  margin-top: 2px;
  opacity: 1;
  padding: 10px 10px !important;
  max-height: 3000px;
  overflow: auto !important;
  transition: opacity 0.3s ease, padding 0.3s ease, max-height 0.5s linear;
}

.post-content .spoiler-box > blockquote.visible p {
  overflow: hidden;
}

.post.mylike .post-rating a.noNull {
  background: var(--link-hover);
}

.edit-pp {
  position: absolute;
  left: 4px;
  margin-top: -1px;
}

.edit-pp a {
  display: block;
  position: relative;
  width: 28px;
  margin: 0 3px;
  height: 25px;
  box-sizing: border-box;
  border-radius: 5px;
  background: color-mix(in srgb, var(--add-acc) 20%, transparent) !important;
}

.edit-pp a::after {
  content: '\f4ff';
  font-family: 'FontAwesome';
  font-size: 10px;
  position: absolute;
  top: 2px;
  left: 8px;
  color: color-mix(in srgb, var(--link) 10%, transparent);
}

#tuser {
  cursor: pointer !important;
  opacity: 0.1 !important;
  padding: 2px !important;
  margin-top: -65px !important;
  margin-left: -185px !important;
}

#isk::before {
  margin-top: .2em;
  opacity: .3 !important;
}

#s-block {
  display: flex;
  justify-content: flex-end;
  margin-right: 29px;
}

.code-box .scrollbox {
  width: 100%;
  overflow: hidden auto;
  height: auto !important;
  max-height: 20vh;
}

/*отключение плашки в просмотре профиля*/

li#pa-fld2 {
  display: none;
}

/*скрыть email*/

li.pl-email.email {
  display: none;
}

li.pl-share {
  display: none !important;
}

/* =========================================================
   КАТЕГОРІЇ НА ГОЛОВНІЙ — вертикальні, як на квібблері
   Зліва картинка категорії на всю висоту (--cat1-img … --cat8-img
   у палітрі), праворуч форуми з пунктиром між ними,
   біля кожного форуму корона: стара / нова (--icon-old / --icon-new).
   ========================================================= */

#pun-index .category .container {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 140px;
  background: var(--sec-bg);
  border: 1px solid var(--add-acc);
  border-radius: 12px;
}

/* картинка зліва */
#pun-index .category .container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 100%;
  border-radius: 11px 0 0 11px;
  background: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat1-img) center / cover no-repeat;
}

#pun-index .category:nth-of-type(2) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat2-img); }
#pun-index .category:nth-of-type(3) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat3-img); }
#pun-index .category:nth-of-type(4) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat4-img); }
#pun-index .category:nth-of-type(5) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat5-img); }
#pun-index .category:nth-of-type(6) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat6-img); }
#pun-index .category:nth-of-type(7) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat7-img); }
#pun-index .category:nth-of-type(8) .container::before { background-image: linear-gradient(var(--cat-overlay), var(--cat-overlay)), var(--cat8-img); }

/* рядки форумів */
#pun-index .category table tr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 30px;
  width: auto;
  margin: 15px 20px 15px 150px;
  padding: 10px 0;
  overflow: visible;
  box-sizing: border-box;
  border-bottom: 1px dashed var(--add-acc);
}

#pun-index .category tbody:last-of-type tr:last-child {
  border-bottom: 0;
}

#pun-index .category tbody td {
  padding: 0;
}

#pun-index .category tbody td.tcl {
  flex: 1;
  width: auto;
  min-width: 0;
}

#pun-index .category tbody td.tcr {
  flex: none;
  width: 250px;
  border-left: 0;
}

#pun-index .category td.tc2,
#pun-index .category td.tc3,
#pun-index .category td.tcmod {
  display: none;
}

#pun-index .category td div.tclcon {
  margin: 0;
  display: flow-root;
}

/* корона */
#pun-index .category tr div.icon {
  position: static;
  float: left;
  display: block;
  width: 91px;
  height: 80px;
  margin: 0 10px 0 -35px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0;
  background: var(--icon-old) center / contain no-repeat;
}

#pun-index .category tr.inew div.icon,
#pun-index .category tr div.icon.inew {
  background: var(--icon-new) center / contain no-repeat;
}

#pun-index .category tr div.icon::before {
  content: none;
}

/* старі заголовки категорій (смуга з зірочкою й великою назвою) прибрано:
   категорію позначає картинка зліва */
#pun-index .category h2 {
  display: none;
}

/* ширше поле категорії */
#pun-index .category {
  width: 1020px;
  margin: 0 auto 22px;
}

/* остання тема: назву більше не обрізає зверху */
#pun-index .category tbody td.tcr {
  width: 320px;
  padding-left: 60px;
  box-sizing: border-box;
  overflow: visible;
}

#pun-index .category .lastpost-link {
  display: block;
  max-width: 230px;
  margin: 0 0 3px !important;
  line-height: 1.3;
}

/* назви форумів більше не обрізаються (був line-height 7px) */
#pun-index .category .tclcon h3 {
  line-height: 1.25 !important;
  padding: 0 0 4px;
  overflow: visible;
}

/* корона ціла: не виходить за край колонки, тож її не обрізає */
#pun-index .category tbody td.tcl,
#pun-index .category tbody td.tcl .intd {
  overflow: visible;
}

#pun-index .category tr div.icon {
  width: 80px;
  height: 80px;
  margin: 0 16px 0 0;
}

/* опис форуму не вилазить за свою колонку */
#pun-index .category forumdesc {
  width: auto;
  max-width: 100%;
}

/* аватар останнього автора: у своїй колонці, праворуч від тексту форуму */
#pun-index .category tbody td.tcr {
  position: relative;
}

#pun-index .category td.tcr .user-avatar {
  position: absolute;
  left: 8px;
  top: 50%;
  float: none;
  margin: 0 !important;
  transform: translateY(-50%);
}

/* =========================================================
   ДРІБНІ ПРАВКИ
   ========================================================= */

/* цитата без значка лапок — менший відступ зверху */
.punbb .post-content .quote-main:not(.hide-box):not(.spoiler-box) {
  margin-top: 12px;
}

/* форма відповіді: «написано символов» стоїть над панеллю кнопок, а не на ній */
#post fieldset legend,
#pun-viewtopic #post fieldset legend {
  position: static;
  margin: 0 0 8px;
  padding: 0;
}

/* значок швидкого редагування особистої сторінки біля «профиль» прибрано */
.edit-pp {
  display: none;
}

/* рядок «рейтинг форумов | создать форум бесплатно» прибрано */
#pun-about {
  display: none;
}

/* посилання-плашки під описом форуму (.desklink), як на квібблері */
#pun .desklink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

#pun .desklink a {
  display: inline-block;
  margin: 0;
  padding: 3px 10px 4px;
  font: 600 11px/1.2 var(--font-family);
  text-transform: lowercase;
  text-decoration: none;
  color: var(--link-hover-text);
  background: var(--main-acc);
  border: 1px solid var(--add-acc);
  border-radius: 10px;
  transition: background ease-in-out .3s, color ease-in-out .3s, border-color ease-in-out .3s;
}

#pun .desklink a:hover {
  color: var(--btn-text);
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}

/* ширший блок з описом і посиланнями, остання тема притиснута праворуч */
#pun-index .category table tr {
  gap: 0 16px;
  margin-left: 136px;
  margin-right: 10px;
}

#pun-index .category tbody td.tcr {
  width: 220px;
  margin-left: auto;
}

#pun-index .category .lastpost-link {
  max-width: 160px;
}
/* =========================================================
   ФОРМА ВІДПОВІДІ: лічильник символів, «кинуть кубик»,
   «лайкнуть всех» — кольори з теми форуму
   ========================================================= */

/* лічильник символів над полем */
#plng {
  display: inline-block;
  margin: 0 20px 0 5px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--link) 25%, transparent);
  border-radius: 10px;
  font: 400 10px/1.4 var(--font-family);
  text-transform: lowercase;
  color: var(--muted);
  background: none;
}

#plng b {
  font-weight: 700;
  color: var(--link);
}

/* «кинуть кубик» — пігулка в рядку кнопок, як «отправить» */
#pun .formsubmit .dice-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  text-decoration: none;
  transform: translateY(0);
  transition: background ease-in-out .4s, transform ease-in-out .4s;
}

#pun .formsubmit .dice-btn::before {
  content: '\f6cf';               /* кубик */
  margin-right: 7px;
  font: 900 12px/1 var(--fa);
  color: var(--link-hover);
}

#pun .formsubmit .dice-btn:hover {
  transform: translateY(-3px);
}

/* «лайкнуть всех» у рядку модерування теми */
.nota-like-all-btn {
  display: inline-block;
  vertical-align: middle;
  margin: 0 14px 0 0;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--link-hover) 40%, transparent);
  border-radius: 999px;
  font: 400 9px/1.4 var(--font-family);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--link);
  background: color-mix(in srgb, var(--link-hover) 8%, transparent);
  cursor: pointer;
  transition: background ease-in-out .4s, transform ease-in-out .4s, opacity .2s;
}

.nota-like-all-btn:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--link-hover) 18%, transparent);
}

.linksb .nota-like-all-btn {
  float: left;
  margin: 0 0 0 32px;
}

.nota-like-all-btn.is-running {
  pointer-events: none;
  opacity: .6;
}