/* ============================================================================
 * wiki.css
 * --------
 * Згенеровано з main.css автоматичним фільтром під сторінки:
 *   - index.php
 *   - view.php
 * Вилучено правила, чиї селектори не зустрічаються в HTML/JS цих сторінок.
 * УВАГА: main.css далі використовується іншими сторінками (category, page,
 *        changelog тощо) — не видаляти.
 * ============================================================================ */
@import "_nullstyle.css";
@import "_root.css";
@import "_icons.css";

[class*="-accent"] {
  color: var(--accent);
  font-weight: 400;
}

@media (any-hover: hover) {
  [class*="-accent__hover"]:hover {
    text-shadow: var(--shadowHoverAccentMain);
  }
}

[class*="-white"] {
  color: var(--colorMain);
}

[class*="-bold"] {
  font-weight: 600;
}

[class*="-grey"] {
  color: var(--colorGreyMain);
}

[class*="-red"] {
  color: var(--colorRed);
}

section#Comments {
  scroll-margin-top: 50rem;
}

section[id*="Section-"] {
  scroll-margin-top: 75rem;
  width: 100%;
}

body.index {
  overflow-x: hidden;
  height: 100vh;
  background-color: var(--bgColorMainBlack);
  cursor: url("../../templates/images/icons/cur.cur"), auto;
  font-size: var(--fontSize-middle-lite);
}

.no-scroll {
  height: 100vh;
  overflow: hidden;
}

.container {
  width: 100%;
  padding: 0 40rem;
  padding-left: 160rem;
  margin: 0 auto;
}

.flex {

  display: flex;
}

.flex-center {
  align-items: center;
}

.animate-toRight {
  transform: translateX(-10%);
  -webkit-filter: drop-shadow(-150rem 0 30rem var(--bgColorMainBlack));
  filter: drop-shadow(-150rem 0 30rem var(--bgColorMainBlack));
}

.transition1 {
  transition: var(--transition-default);
}

.animate-scale {
  transform: scale(0.8);
}

.navbar-animate {
  transform: translateX(-90%);
}

.transition-linear {
  transition: var(--transition-linear);
}

.transform-scale {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.7);
}

.modal--isActive .transform-scale {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.main-btn-radian {
  display: flex;
  gap: 12rem;
  width: fit-content;
  align-items: center;
  background-color: var(--colorFwoolf);
  height: 40rem;
  margin: 0 14rem;
  font-size: var(--fontSize-middle);
  color: var(--colorBlack);
  transition: opacity var(--transition-linear);
}

.main-btn-radian:hover {
  opacity: 0.8;
}

.main-btn-radian>span {
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: inherit;
}

.main-btn-radian::before,
.main-btn-radian::after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  width: 14rem;
  height: 100%;
  position: absolute;
  top: 0;
}

.main-btn-radian::after {
  background-image: url("../../templates/images/icons/btn-after-secondary.svg");
  right: -13rem;
}

.main-btn-radian::before {
  background-image: url("../../templates/images/icons/btn-before-secondary.svg");
  left: -12rem;
}

.icon-radian-btn {
  background-image: url("../../templates/images/icons/radiation-black.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 20rem;
  height: 20rem;
}

.dark.main-btn-radian {
  background-color: var(--bgColorMainGreySub);
  color: var(--colorFwoolf);
}

.dark.main-btn-radian::after {
  background-image: url("../../templates/images/icons/btn-after-grey.svg");
}

.dark.main-btn-radian::before {
  background-image: url("../../templates/images/icons/btn-before-grey.svg");
}

.dark>.icon-radian-btn {
  background-image: url("../../templates/images/icons/radiation-white.svg");
}

.accent-btn.main-btn-radian {
  background-color: var(--accent);
}

.accent-btn.main-btn-radian::after {
  background-image: url("../../templates/images/icons/btn-after-accent.svg");
}

.accent-btn.main-btn-radian::before {
  background-image: url("../../templates/images/icons/btn-before-accent.svg");
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  background: var(--bgColorMainBlack) url(../images/main/render.png);
  transition: all 1s ease;
  overflow: hidden;
}

.preloader_hidden {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

.preloader-percent {

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 106px;
  right: 0;
  bottom: 0;
  margin: auto;
  color: var(--preloader);
  font-weight: 600;
  font-size: 16px;
}

.preloader-text {

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 180px;
  width: 290px;
  right: 0;
  bottom: 0;
  margin: auto;
  font-weight: 600;
  font-size: 16px;
  color: var(--preloader);
  text-shadow: var(--bgColorMainBlack) 0rem 2rem 4rem;
  text-align: center;
}

.preloader_arrow-wrapper {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%) rotateZ(298deg);
  height: 139%;
  transition: transform var(--transition-short);
}

.home {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.home__layer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.home__bg {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/main/header-bg.webp), url(../images/main/render.png),
    var(--bgColorMainBlack);
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: cover, auto, cover;
  background-position: bottom, bottom, bottom;
}

.home__objectLayer {
  transition: -webkit-transform 1s ease, -webkit-filter 1s ease;
  transition: transform 1s ease, filter 1s ease;
  transition: transform 1s ease, filter 1s ease, -webkit-transform 1s ease,
    -webkit-filter 1s ease;
}

.home__radiation {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 30rem;
  background: url("../../templates/images/main/headet-RadSun.webp");
  background-repeat: no-repeat;
  background-size: contain;
  height: 900rem;
  width: 900rem;
}

.home__hero {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 110rem;
  width: 689rem;
  height: 975rem;
  background: url("../../templates/images/main/header-hero.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  z-index: 1;
}

.home__hero-hov {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../templates/images/main/header-hero-hov.webp);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  animation: hero-animation 5s ease-in-out infinite;
}

.home__icons {
  position: absolute;
  background: -webkit-gradient(linear,
      left top,
      right top,
      from(#1d1d1d00),
      color-stop(50%, var(--background-main)),
      to(#1d1d1d00));
  background: -o-linear-gradient(left,
      #1d1d1d00 0%,
      var(--background-main) 50%,
      #1d1d1d00 100%);
  background: linear-gradient(90deg,
      #1d1d1d00 0%,
      var(--background-main) 50%,
      #1d1d1d00 100%);
  bottom: 95rem;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  column-gap: 25rem;
  padding: 8rem 35rem 8rem 35rem;
}

.home__icon:hover {
  transform: scale(1.1);
}

.home-content {
  padding-bottom: 80rem;
}

.home-container {
  max-width: 940rem;
  margin-top: 0;
  flex-direction: column;
  z-index: 888;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
}

.home__title {
  width: 100%;
  text-align: left;
  right: 0;
  font-weight: 500;
  font-size: var(--fontSize-XLarge);
  line-height: var(--lineHeight-default);
  color: var(--colorFwoolf);
  text-transform: uppercase;
  font-family: "Oswald";
}

.home__title>span {
  color: var(--accentlite);
  font-family: "Oswald";
  margin-left: 5rem;
}

.home__title::before {
  content: "";
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -8rem;
  width: 100%;
  height: 9rem;
  background-image: url("../../templates/images/icons/vectorpaint.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.home__logo {
  margin-top: 8rem;
}

.home__logo>img {
  display: block;
  width: 940rem;
  height: 266rem;
}

.home__btns {
  margin-right: 14rem;
  align-items: center;
  justify-content: end;
  flex-direction: row;
  gap: 25rem;
}

.about-game-play__btn {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 25rem;
}

.about-game-play__scope {

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rem;
}

.about-game-play__icon {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  background: url("../../templates/images/icons/play-trailer.svg");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

.about-game-play__icon:before {
  content: "";
  position: absolute;
  -webkit-animation-name: pulse_play;
  animation-name: pulse_play;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  width: 36rem;
  height: 36rem;
  background: url("../../templates/images/icons/Polygon-accent.svg");
  background-size: contain;
  animation: pulse_play 2s infinite;
  background-repeat: no-repeat;
  opacity: 0.2;
}

.about-game-play__eclipse {
  position: absolute;
  width: 87rem;
  height: 87rem;
  transform: translate(-43.5rem, -43.5rem) scale(0.435) translate(43.5rem, 43.5rem);
}

.about-game-play__eclipse>span {
  position: absolute;
  display: inline-block;
  animation: lds-eclipse 5.7s linear infinite;
  width: 160rem;
  height: 160rem;
  top: 20rem;
  left: 20rem;
  border-radius: 50%;
  box-shadow: 0 8rem 0 0 var(--colorGalk);
  -webkit-transform-origin: 80rem 84rem;
  transform-origin: 80rem 84rem;
}

.home-btn-group {
  display: flex;
  gap: 14rem;
  flex-wrap: wrap;
  justify-content: center;
}

.home-btn {

  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0px 3px 6px -6px var(--colorDark);
  z-index: 5;
}

.home-btn__box {
  background-color: var(--colorFwoolf);

  display: flex;
  align-items: center;
  height: 40rem;
  border-radius: 0 3rem 3rem 0;
}

.home-btn__box::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 12rem;
  background-image: url(../images/icons/btn-after-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 8rem;
  height: 6rem;
  filter: invert(1) brightness(0) contrast(10000%);
  transform: rotate(180deg);
  transition: all 0.2s ease;
  z-index: 2;
}

.home-btn-span {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  padding: 0 30rem 0 20rem;
  font-size: 16rem;
  color: var(--colorBlack);
  line-height: var(--lineHeight-default);
  text-transform: uppercase;
  z-index: 2;
}

.home-btn-icon-box {
  background-image: url(../images/icons/btn-before-home.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 40rem;
  height: 40rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -1rem;
}

.home-btn-animat-arrow {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--accent);
  border-radius: 0 3rem 3rem 0;
  height: 100%;
  width: 0;
  margin-left: 39rem;
  z-index: 1;
  transition: all 0.3s ease;
}

.home-btn-animat-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  position: absolute;
  border-bottom: 20rem solid transparent;
  border-left: 10rem solid var(--accent);
  border-top: 20rem solid transparent;
  z-index: 1;
  transition: var(--transition-default);
}

.home-btn-icon {
  width: 20rem;
  height: 20rem;
  transition: var(--transition-default);
}

.home-btn:hover>.home-btn-dropmenu {
  opacity: 1;
  visibility: visible;
}

.home-btn:hover>.home-btn-animat-arrow {
  width: calc(100% - 39rem);
}

.home-btn:hover>.home-btn-animat-arrow::after {
  border: none;
}

.home-btn:hover>.home-btn__box::after {
  transform: rotate(0deg);
}

.home-btn-dropmenu {
  position: absolute;
  background-color: var(--colorFwoolf);
  width: 90%;
  left: 11rem;
  top: 40rem;
  box-shadow: 0 0 #0000, 0 0 #0000, 0px 20rem 10rem -20rem #00000040 inset;
  border-bottom-right-radius: var(--radiusMain);
  border-bottom-left-radius: var(--radiusMain);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
  z-index: 4;
}

.home-btn-list {
  padding: 10rem 0 4px 12px;
  cursor: default;
}

.home-btn-link {
  display: flex;
  gap: 10rem;
  justify-content: start;
  align-items: center;
  margin-bottom: 8rem;
  text-transform: uppercase;
  color: var(--colorBlack);
  font-weight: 500;
  font-family: "Oswald", sans-serif;
  font-size: var(--fontSize-middle-lite);
  width: fit-content;
  cursor: pointer;
  opacity: 0.7;
  transition: var(--transition-default);
}

.home-btn-link:hover {
  opacity: 1;
}

.home-btn-list-icon {
  width: 16rem;
  height: 16rem;
  filter: invert(1) brightness(0) contrast(10000%);
}

.home__info-box {
  margin-left: 10rem;
  margin-top: 10rem;
}

.home__info {
  width: 100%;
  max-width: 940rem;
  text-align: left;
  font-weight: 400;
  font-size: var(--fontSize-middle-lite);
  line-height: 22rem;
  color: var(--colorGalk);
}

.home__info h4 {
  font-size: var(--fontSize-large);
  font-family: "Oswald";
  font-weight: 500;
  margin: 0 0 8rem 0;
  color: var(--colorFwoolf-black);
  text-transform: uppercase;
}

.home__info a:hover {
  color: var(--accent);
}

.home__info>p:not(:last-child) {
  margin-bottom: 8rem;
}

.home__statistic-wrapper {
  display: flex;
  gap: 40rem;
  margin-top: 24rem;
  margin-bottom: 24rem;
  line-height: normal;
}

.home__info-statistic {
  max-width: 540rem;
  width: 100%;
}

.home__info-title {
  margin-bottom: 10rem !important;
}

.home__info-cards {

  display: flex;
  align-items: center;
  column-gap: 5rem;
}

.home__info-card {

  display: flex;
  flex-direction: column;
  max-width: 220rem;
  width: 100%;
  max-height: 92rem;
  min-height: 92rem;
  background: -webkit-gradient(linear,
      left bottom,
      left top,
      from(var(--colorBlackrgba)),
      to(transparent));
  background: -o-linear-gradient(bottom,
      var(--colorBlackrgba) 0%,
      transparent 70%);
  background: linear-gradient(0deg, var(--colorBlackrgba) 0%, transparent 70%);
  border-bottom: 5rem solid var(--background-ads);
  box-shadow: 0px 3px 6px -6px var(--colorDark);
  padding: 10rem 10rem 4rem 10rem;
  overflow: hidden;
  transition: all 0.2s linear;
  cursor: pointer;
}

.home__info-card:first-child {
  border-bottom-left-radius: var(--radiusMain);
}

.home__info-card:last-child {
  border-bottom-right-radius: var(--radiusMain);
}

.home__info-card__top {

  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  column-gap: 10rem;
}

.home__info-card__img {
  flex: 0 0 30rem;
  width: 30rem;
  height: 30rem;
}

.home__info-card__value {

  display: flex;
  flex-direction: column;
  row-gap: 5rem;
}

.home__info-card__text {
  text-align: center;
  font-size: var(--fontSize-middle-lite);
  font-weight: 600;
  color: var(--accent);
}

.home__info-card__text-pages {
  min-width: 20rem;
  color: var(--colorBlack);
  background: var(--colorFwoolf);
  border-radius: var(--radiusMainLite);
  padding: 2rem;
}

.home__info-card__desc {
  flex: 1 1 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  color: var(--colorGalk);
  margin-top: 0;
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0, 1, 0, 1);
}

.home__info-card-comments {
  border-bottom-right-radius: 0;
}

.home__info-card__text-comments {
  min-width: 20rem;
  color: var(--colorBlack);
  background: var(--colorFwoolf);
  border-radius: var(--radiusMainLite);
  padding: 2rem;
}

.home__info-card-files {
  border-bottom-right-radius: 0;
}

.home__info-card__text-files {
  min-width: 20rem;
  color: var(--colorBlack);
  background: var(--colorFwoolf);
  border-radius: var(--radiusMainLite);
  padding: 2rem;
}

.home__info-card__value .home__info-card__text-comments:before {
  content: "";
  position: absolute;
  left: -8rem;
  top: 8rem;
  border-top: 8rem solid transparent;
  border-bottom: 0 solid transparent;
  border-right: 10rem solid #dedde0;
}

.home__info-card:hover {
  transform: scale(0.94);
  border-bottom: 5rem solid var(--accent);
}

.home__info-title.home__statistic-title {
  text-align: center;
}

.server {

  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 380rem;
  height: 90rem;
  background: linear-gradient(322deg,
      transparent,
      transparent 64%,
      #e74c3c 100%);
  border-radius: var(--radiusMain);
  box-shadow: 0px 3px 6px -6px var(--colorDark);
  padding: 0 10rem;
  transition: all 0.2s ease;
  border-bottom: 5rem solid var(--bgColorMainAside);
}

.index .server {
  border-bottom: 0;
}

.server-blic {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 3;
  right: 0;
  pointer-events: none;
}

.server-blic:before {
  content: "";
  background: linear-gradient(-90deg,
      transparent,
      rgb(255 255 255 / 5%),
      transparent);
  height: 94px;
  width: 100px;
  position: absolute;
  top: 0;
  right: -120px;
  transform: skewX(320deg);
  animation: serverBlic 2.5s 2s linear infinite;
}

.sidebar .server {
  max-width: 400rem;
  width: 100%;
}

.server-top {

  display: flex;
  align-items: center;
  column-gap: 10rem;
  margin-left: 25rem;
}

.server-top__logo {
  display: inline-block;
  width: 36rem;
  height: 36rem;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.server-top__title {

  display: flex;
  align-items: center;
  box-shadow: 0px 3px 6px -6px var(--colorDark);
  padding: 6rem 0 6rem 0;
  border-radius: var(--radiusMain);
  column-gap: 10rem;
}

.server-top__title>span {
  font-weight: 400;
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  color: var(--colorFwoolf);
  text-transform: uppercase;
}

.server-top__icon {
  flex: 0 0 20rem;
  width: 20rem;
  height: 20rem;
}

.main-spoiler .main-spoiler__child {
  display: none !important;
}

.main-spoiler__child::before {
  content: "";
  position: absolute;
  right: calc(100% - 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6rem solid transparent;
  border-bottom: 6rem solid transparent;
  border-right: 6rem solid var(--bgColorMainBlack);
}

.server__line {
  width: 100%;
  height: 3rem;
  background-color: var(--bgColorMainAsideLite);
  margin-top: 12rem;
}

.server__progress {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
  box-shadow: var(--bgColorServerLine) 0 0 6rem 0;
  background-color: var(--bgColorServerLine);
  overflow: hidden;
}

.offline.server__progress {
  width: 100%;
  box-shadow: var(--bgColorMain-red) 0 0 6rem 0;
  background-color: var(--bgColorMain-red);
}

.offline.server__progress::after {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgb(212 251 189 / 16%)),
      color-stop(var(--colorRed)),
      to(rgb(212 251 189 / 16%)));
  background: -o-linear-gradient(rgb(212 251 189 / 16%),
      var(--colorRed),
      rgb(212 251 189 / 16%));
  background: linear-gradient(rgb(212 251 189 / 16%),
      var(--colorRed),
      rgb(212 251 189 / 16%));
}

.server__progress::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  width: 10rem;
  height: 30rem;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgb(212 251 189 / 16%)),
      color-stop(var(--colorGreenLite)),
      to(rgb(212 251 189 / 16%)));
  background: -o-linear-gradient(rgb(212 251 189 / 16%),
      var(--colorGreenLite),
      rgb(212 251 189 / 16%));
  background: linear-gradient(rgb(212 251 189 / 16%),
      var(--colorGreenLite),
      rgb(212 251 189 / 16%));
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
  animation: serverProgressAnim 3s 2s linear infinite;
}

.server-body {
  margin-top: 4rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.server-body__cont {

  display: flex;
  align-items: center;
  column-gap: 5rem;
}

.server-body__link {
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--colorGalk);
  font-size: var(--fontSize-middle-lite);
  padding: 4rem 6rem;
  border-radius: var(--radiusMain);
  transition: all 0.2s ease;
  position: relative;
}

.server-top__online {
  font-size: var(--fontSize-middle-lite);
  margin-top: 2rem;
  color: var(--colorTelegray);
}

.offline.server-top__online {
  color: var(--colorRed);
}

.server-body__info {
  margin-top: 2rem;
}

.server-popular {
  position: absolute;
  left: -1rem;
  top: -4rem;
  z-index: 2;
  transform: rotate(270deg);
}

.server-popular__img {
  display: inline-block;
  width: 55rem;
  height: 55rem;
  background-image: url(../../templates/images/icons/popular.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.server-done-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3rem);
  border-radius: var(--radiusMain);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: var(--colorMain);
  font-size: var(--fontSize-XLarge);
  gap: 10rem;
  z-index: -1;
  opacity: 0;
  transition: all var(--transition-cubick);
}

.server-done-copy._active {
  opacity: 1;
  z-index: 3;
}

.server-done-copy>i {
  width: 24rem;
  height: 24rem;
}

.sidebar .home__statistic-wrapper {
  max-width: 400rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10rem;
  text-align: left;
  font-weight: 400;
  font-size: var(--fontSize-middle-lite);
  color: var(--colorFwoolf);
}

.sidebar .home__info-title {
  margin-bottom: 12rem !important;
  text-align: center;
  text-transform: uppercase;
  margin-top: 16rem;
}

.small-spoiler {
  left: 4rem;
  top: -2rem;
  color: var(--accent);
  font-size: var(--fontSize-small);
  text-shadow: var(--accent) 1rem 1rem 6rem;
  pointer-events: none;
}

.small-spoiler sup {
  margin: 0 3rem;
  color: var(--bgColorServerLine);
  text-shadow: none;
  font-size: 10rem;
}

.show-on1150 {
  display: none;
}

.home-right {
  position: absolute;
  top: -50rem;
  right: 68rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 888;
  height: calc(100% - 350rem);
}

.home__socials {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 25rem;
  z-index: 1;
}

.home__social {
  display: inline-block;
  height: 30rem;
  width: 30rem;
  background-repeat: no-repeat;
  background-size: contain;
  transition: var(--transition-default);
}

.home__social:hover {
  transform: scale(1.3) rotate(-17deg);
}

.rating-game {
  min-height: 320rem;
  border-radius: var(--radiusMain);
  padding: 0 15rem;

  display: flex;
  flex-direction: column;
  justify-content: end;
}

.rating-game__box {
  position: absolute;
  top: 36rem;
  left: 22rem;
  padding: 0;
  z-index: 0;
}

.rating-game__box.rating__index {
  z-index: 0;
  top: 0;
  left: unset;
  right: unset;
  bottom: -420rem;
  width: 126rem;
}

.rating-game__canvas {
  width: 116rem;
  height: 116rem;
  border-radius: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.rating-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.rating-ring__bg {
  fill: none;
  stroke: var(--colorFwoolf-border);
  stroke-width: 5;
  opacity: 0.3;
}

.rating-ring__fill {
  fill: none;
  stroke: var(--colorGreen);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.2s ease-out, stroke 0.5s ease;
}

.random-stars-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.rating-game-animation-isActive .random-stars-container {
  opacity: 1;
  visibility: visible;
}

.rating-bar__text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5rem;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.3s linear;
}

.rating__index .rating-game-animation-isActive .rating-bar__text {
  top: unset;
}

.rating-game-animation-isActive .rating-bar__text {
  animation: none !important;
  transform: translateY(-20%) scale(0.85);
}

.rating-bar__subtext {
  text-transform: uppercase;
  color: var(--colorGalk);
  font-weight: 500;
  font-size: var(--fontSize-XSmall);
  padding-top: 2rem;
}

.rating-bar__total {
  display: block;
  font-size: 10rem;
  color: var(--colorFwoolf-black);
  font-weight: 400;
  margin-top: 4rem;
  opacity: 0.7;
}

.rating-bar__subtext::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 15rem);
  height: 1rem;
  background-color: var(--bgColorMainGreySub);
}

.rating-bar__number {
  font-weight: 600;
  font-size: var(--fontSize-XLarge);
  color: var(--colorFwoolf);
}

.rating-game-animation-isActive .rating-bar__number {
  animation: none !important;
}

.rating-game__info {
  text-align: center;
  margin-bottom: 15rem;
  min-height: 13rem;
}

.rating-game__text {
  font-weight: 500;
  font-size: var(--fontSize-default);
  color: var(--colorGalk);
}

.rating-game__personalValue {
  font-weight: 500;
  font-size: var(--fontSize-default);
  color: var(--accent);
}

.rating-stars-body {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10rem;
  margin-left: auto;
  margin-right: auto;
  z-index: 5;
}

.rating-game-animation-isActive .rating-stars-body {
  pointer-events: none;
}

.rating-game-animation {
  position: absolute;
  width: 25rem;
  height: 25rem;
  top: 27.5%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
  -webkit-filter: drop-shadow(0 0 5rem var(--accent));
  filter: drop-shadow(0 0 5rem var(--accent));
  border-radius: 100%;
}

.rating-game-animation-isActive .rating-game-animation {
  visibility: visible;
  opacity: 1;
  animation: pulseStar 0.75s infinite;
}

.rating-game-animation__img {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("../../templates/images/icons/star.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.2s linear;
  animation: beat 2s infinite;
}

.mods-header__stars {
  display: inline-flex;
  align-items: center;
  column-gap: 3rem;
  flex-direction: row-reverse;
}

.mods-header__stars:not(:checked)>input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.mods-header__stars:not(:checked)>label {
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  width: 20rem;
  height: 20rem;
}

.mods-header__stars:not(:checked)>label:before {
  content: "";
  display: inline-block;
  width: 20rem;
  height: 20rem;
  background: url("../../templates/images/icons/star.svg") no-repeat center / contain;
  opacity: 0.3;
}

.mods-header__stars>input:checked~label:before {
  opacity: 1;
}

.mods-header__stars>input:checked~label {
  animation: beat 2s infinite;
}

.mods-header__stars:not(:checked)>label:hover:before,
.mods-header__stars:not(:checked)>label:hover~label:before {
  opacity: 0.8;
}

.mods-header__stars>input:checked+label:hover:before,
.mods-header__stars>input:checked+label:hover~label:before,
.mods-header__stars>input:checked~label:hover:before,
.mods-header__stars>input:checked~label:hover~label:before,
.mods-header__stars>label:hover~input:checked~label:before {
  opacity: 1;
}

.donate {
  position: absolute;
  bottom: -140rem;
  display: inline-block;
  width: 80rem;
  height: 80rem;
  background-image: url("../../templates/images/icons/help_ukraine.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transition: var(--transition-default);
}

.banka {
  position: absolute;
  bottom: -20rem;
  display: inline-block;
  width: 50rem;
  height: 67rem;
  background-image: url("../../templates/images/main/uah_33.png");
  background-repeat: no-repeat;
  background-size: contain;
  transition: var(--transition-default);
}

.donate-mobile {
  display: none;
}

.donate:hover {
  transform: scale(1.3) rotate(-8deg);
}

.banka:hover {
  transform: scale(1.3) rotate(-8deg);
}

.profile-panel i.icon {
  flex: 0 0 24rem;
  height: 24rem;
  width: 24rem;
  aspect-ratio: 1 / 1;
}

.nav-home {
  padding-top: 84rem;
  z-index: 999;
}

.nav-container {
  align-items: center;
  justify-content: end;
}

.language-main {
  padding: 6rem 8rem;
  border-radius: 50rem;
  margin-right: 30rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all var(--transition-default);
}

.language-main-dropmenu {
  display: none;
  visibility: hidden;
  opacity: 0;
  cursor: default;
  transition: all var(--transition-default);
}

.language-main-dropmenu::before {
  content: "";
  position: absolute;
  right: 48rem;
  top: -10rem;
  border-left: 11rem solid transparent;
  border-bottom: 11rem solid var(--bgColorMainAside);
  border-right: 11rem solid transparent;
}

.language-main-list {
  max-width: 400rem;
  width: 100%;
  display: flex;
  justify-content: center;
  column-gap: 26rem;
  row-gap: 16rem;
  flex-wrap: wrap;
  height: auto;
}

.languane-dropmenu-subtext {
  width: 100%;
  text-align: center;
  font-size: var(--fontSize-middle);
  color: var(--colorFwoolf);
  margin-bottom: 18rem;
}

.language-main-item {
  max-width: 100rem;
  width: 100%;
}

.language-opened>.language-main-dropmenu {
  display: block;
  visibility: visible;
  opacity: 1;
  background-color: var(--bgColorMainAside);
  border-radius: 4rem;
  box-shadow: 0px 0px 8px -4px var(--colorDark);
  padding: 18rem;
  position: absolute;
  top: 46rem;
  right: 0rem;
  width: max-content;
}

.burger {
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 36rem;
  height: 36rem;
  flex: 0 0 36rem;
  overflow: hidden;
  z-index: 999;
}

.burger-line {
  display: block;
  background-color: var(--colorMain);
  height: 2rem;
  margin: 1.4rem auto;
  width: 18rem;
}

.falling-items {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  transform: translate(0, 0);
  overflow: hidden;
}

.falling-items-scene {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.falling-items-scene div {
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 10rem;
  background-image: url("../../templates/images/main/fall-itemsvg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.main-profile__block {
  margin-top: 10rem;
  background: var(--bgColorMainAside);
  padding: 10rem 10rem;
  border-radius: var(--radiusMain);
  color: var(--background-main-page);
  text-decoration: none;
  transition: 0.1s all;
}

.sidebar .main-profile__block {
  max-width: 400rem;
  width: 100%;
  background: var(--colorBlackrgba);
  margin: 0 auto;
}

.main-profile-wrapper {

  display: flex;
  justify-content: space-between;
  flex-direction: column;
  -webkit-gap: 16rem;
  gap: 16rem;
}

.main-profile__left {

  display: flex;
  align-items: center;
  column-gap: 8rem;
}

.img__main-profile {
  background: url("../../uploads/avatars/no-avatar.gif") no-repeat;
  display: block;
  width: 72rem;
  height: 72rem;
  flex: 0 0 72rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
  border: 3rem solid var(--accent);
  box-shadow: 1rem 1rem 10rem 3px var(--accent);
  z-index: 99999;
  position: relative;
}

.img__main-profile .icon-profile-verf {
  position: absolute;
  bottom: -2rem;
  right: -12rem;
  height: 26rem;
  width: 26rem;
}

.profile-avatar .icon-profile-verf {
  position: absolute;
  bottom: -2rem;
  right: -8rem;
  height: 28rem;
  width: 28rem;
}

.main-profile__user {
  gap: 8rem 6rem;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.main-profile__name {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-direction: column;
}

.main-profile__user .icon {
  height: 24rem;
  width: 24rem;
}

.main-profile__text {
  color: var(--accentlite);
  font-size: var(--fontSize-large);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}

.main-profile__text:hover {
  color: var(--colorGreyMain);
  text-decoration: none;
}

.main-profile__right {

  display: flex;
  align-items: center;
  column-gap: 12rem;
}

.img__main-profile-admpan {
  background: url("../../templates/images/icons/adminpanel.svg") no-repeat;
  display: block;
  width: 24rem;
  height: 24rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999;
  cursor: pointer;
}

.img__main-profile-bookmark {
  background: url("../../templates/images/icons/bookmark.svg") no-repeat;
  display: block;
  width: 24rem;
  height: 24rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999;
  cursor: pointer;
}

.img__main-profile-notif {
  background: url("../../templates/images/icons/bell.svg") no-repeat;
  display: block;
  width: 24rem;
  height: 24rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999;
  cursor: pointer;
}

.sidebar .counter-notice {
  font-size: 10rem;
  padding: 1rem 2rem;
  top: -15rem;
  right: -13rem;
}

.sidebar .notification {
  top: -17rem;
}

.img__main-profile-set {
  background: url("../../templates/images/icons/sb-settings.svg") no-repeat;
  display: block;
  width: 24rem;
  height: 24rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999;
  cursor: pointer;
}

.main-profile__exit {
  background: url("../../templates/images/icons/logout.svg") no-repeat;
  display: block;
  width: 24rem;
  height: 24rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99999;
  cursor: pointer;
}

.sidebar-auth {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 40rem 10rem 1fr;
  grid-template-columns: 40rem 1fr;
  align-items: center;
  column-gap: 10rem;
  background: var(--bgColorMainAside);
  padding: 10rem 10rem;
  border-radius: var(--radiusMain);
  text-decoration: none;
  cursor: pointer;
}

.sidebar-auth:hover {
  background: var(--bgColorMainAside);
  animation: 0s;
}

.sidebar-auth:hover .sidebar-auth__text {
  color: var(--colorGreyMain);
  animation: 0s;
}

.sidebar-auth__text {
  color: var(--colorWhite);
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  transition: 0.2s all;
  animation: auth-text-animation 5s infinite;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.sidebar .sidebar-auth {
  max-width: 400rem;
  width: 100%;
  background: var(--colorBlackrgba);
  margin: 0 auto;
}

.img_login {
  background: url("../../uploads/avatars/profile.svg") no-repeat;
  display: block;
  width: 56rem;
  height: 56rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
  z-index: 99999;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--background-main) url(../images/main/render.png);
  padding: 16rem 0 0 0;
  height: 100vh;
  z-index: 9999;
  max-width: 80rem;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 15rem;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
}

.navbar__menu {
  flex-direction: column;
  align-items: center;
  row-gap: 6rem;
}

.navbar__menu:last-child {
  padding: 10rem;
  row-gap: 14rem;
}

.navbar__menu-top {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}

.navbar__item {
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 60rem;
}

.navbar__item:hover .navbar__dropmenu-wrapper {
  opacity: 1;
  margin-left: 0;
  visibility: visible;
  padding-left: 20rem;
  pointer-events: auto;
}

.navbar__trigger-sound {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}

.navbar__link {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 250ms ease all;
  row-gap: 2rem;
}

.icon-box {
  border-radius: 50%;
  height: 40rem;
  width: 40rem;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.navbar__item-profile .icon-box {
  width: 56rem;
  height: 56rem;
}

.icon-box-dot::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: var(--colorGreen);
  box-shadow: var(--colorGreen) 0 0 10rem 2rem;
  border-radius: 100%;
  animation: pulse 1s infinite;
}

.live-off-sidebar .icon-box-dot::after {
  transform: translate(-0.5rem, -0.5rem);
  background-color: var(--colorRed);
  box-shadow: var(--colorRed) 0 0 10rem 2rem;
}

.icon-box:before {
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--hoverGrey);
  border-radius: 50%;
  transition: all var(--transition-default);
  z-index: 1;
}

.navbar__item:hover .icon-box:before {
  opacity: 0.3;
  animation: gooeyEffect-1 0.2s ease 1;
}

.icon-box-search {
  background-color: transparent;
}

.navbar__item-text {
  display: inline-block;
  font-size: var(--fontSize-middle-lite);
  color: var(--colorMain);
  transition: all var(--transition-default);
  pointer-events: none;
}

.navbar__item-profile .navbar__item-text {
  color: var(--accent);
}

.navbar__item:hover .navbar__item-text {
  color: var(--accent);
}

.navbar__dropmenu-wrapper {
  position: absolute;
  left: 100%;
  top: -25rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  padding-left: 20rem;
  transition: 250ms ease all;
  cursor: initial;
  z-index: 999999;
}

.navbar-map .navbar__dropmenu-wrapper {
  position: absolute;
  left: 100%;
  top: auto;
  bottom: -25rem;
}

.navbar-map .navbar__dropmenu:before {
  top: auto;
  bottom: 52rem;
}

.image-map-subscribe-wrapper {
  margin: 10rem 0;
  display: flex;
  gap: 6rem;
  padding-left: 20rem;
}

.navbar-map-archianom {
  width: 40rem;
  height: 40rem;
}

.image-map-subscribe {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: var(--fontSize-large-medium);
  color: var(--colorFwoolf);
  font-weight: 500;
  line-height: 1;
}

.image-map-subscribe-second {
  font-family: "Oswald", sans-serif;
  font-size: var(--fontSize-small-medium);
  font-weight: 300;
  vertical-align: top;
  left: 34rem;
  top: 2px;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--transition-linear);
}

.image-map-subscribe-second::after {
  content: "особливо москалики";
  position: absolute;
  top: 18rem;
  left: 64rem;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-linear);
}

.image-map-subscribe:hover .image-map-subscribe-second::after {
  content: "особливо москалики";
  opacity: 1;
}

.navbar-wiki .navbar__dropmenu-wrapper {
  position: absolute;
  left: 100%;
  top: -180rem;
}

.navbar-wiki .navbar__dropmenu:before {
  top: auto;
  bottom: 50%;
}

.navbar-wiki .navbar__dropmenu {
  width: 666rem;
}

.navbar-wiki .navbar__dropmenu-img {
  float: left;
  max-width: 300rem;
  height: 100%;
}

.navbar-wiki .navbar__dropmenu-img img {
  max-height: 100%;
}

.navbar-wiki .navbar__item-text,
.navbar-map .navbar__item-text {
  color: var(--accent);
}

.navbar-wiki:hover .navbar__item-text,
.navbar-map:hover .navbar__item-text {
  color: var(--accent);
}

.navbar-bug .navbar__item-text {
  color: var(--colorGreen);
}

.navbar-bug:hover .navbar__item-text {
  color: var(--colorGreen);
}

.live-on-sidebar i::after {
  content: "online";
  color: var(--colorGreen);
  font-size: var(--fontSize-XSmall-medium);
  position: absolute;
  bottom: -8rem;
  left: 50%;
  transform: translateX(-50%);
}

.navbar__dropmenu-wrapper-community {
  top: 0;
}

.navbar__dropmenu-wrapper-community .navbar__dropmenu:before {
  top: 15rem;
}

.navbar__dropmenu {
  width: 328rem;
  height: 462rem;
  border-radius: var(--radiusMain);
  background: var(--background-main);
  box-shadow: 0 0 12rem rgba(0, 0, 0, 0.2);
  padding: 10rem;
}

.navbar__dropmenu-wrapper-bottom .navbar__dropmenu {
  height: auto;
  padding: 20rem;
}

.navbar__dropmenu-wrapper-small .navbar__dropmenu {
  height: auto;
  padding-bottom: 75rem;
}

.navbar__dropmenu-wrapper-map .navbar__dropmenu {
  padding-bottom: 40rem;
}

.streams-content {
  max-width: 1080rem;
  width: 100%;
  z-index: 99999;
  background: var(--background-main);
  padding: 15rem;
  display: flex;
  gap: 16rem;
  max-height: 540rem;
  height: 100%;
  border-radius: 12rem;
  position: relative;
}

.streams-close-btn {
  position: absolute;
  top: 6rem;
  right: 10rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 28rem;
  cursor: pointer;
  opacity: 0.4;
  z-index: 10;
  line-height: 1;
  padding: 4rem;
  transition: opacity 0.2s;
  display: none;
}

.streams-close-btn:hover {
  opacity: 1;
}

.streams-player {
  flex: 1;
  min-width: 0;
  background: #0a0a0a;
  border-radius: 8rem;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.streams-player-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rem;
  text-align: center;
}

.streams-player-empty-icon {
  margin-bottom: 20rem;
  color: rgba(255, 255, 255, 0.15);
}

.streams-player-empty-title {
  font-size: 18rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10rem;
}

.streams-player-empty-text {
  font-size: 13rem;
  color: rgba(255, 255, 255, 0.3);
  max-width: 320rem;
  line-height: 1.6;
}

.streams-player-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12rem 16rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  display: flex;
  align-items: center;
  gap: 10rem;
}

.streams-player-live-badge {
  display: flex;
  align-items: center;
  gap: 5rem;
  background: #ef4444;
  color: #fff;
  font-size: 11rem;
  font-weight: 700;
  padding: 3rem 8rem;
  border-radius: 4rem;
  flex-shrink: 0;
}

.streams-player-live-badge .dot {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #fff;
  animation: streamDot 1.5s ease-in-out infinite;
}

@keyframes streamDot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.streams-player-title {
  font-size: 13rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.streams-sidebar {
  width: 260rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.streams-channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8rem;
}

.streams-loading {
  display: flex;
  justify-content: center;
  padding: 40rem;
  gap: 8rem;
}

.stream-ch {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 10rem;
  border-radius: 10rem;
  cursor: pointer;
  transition: all 0.15s;
  border: 1rem solid transparent;
  margin-bottom: 4rem;
}

.stream-ch:hover {
  background: rgba(255, 255, 255, 0.04);
}

.stream-ch.active {
  background: rgba(224, 175, 76, 0.08);
  border-color: rgba(224, 175, 76, 0.2);
}

.stream-ch-avatar {
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  font-size: 14rem;
  flex-shrink: 0;
  overflow: hidden;
}

.stream-ch-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stream-ch-info {
  flex: 1;
  min-width: 0;
}

.stream-ch-name {
  font-size: 13rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stream-ch-status {
  font-size: 11rem;
  margin-top: 1rem;
}

.stream-ch-status.live {
  color: #f87171;
}

.stream-ch-status.offline {
  color: rgba(255, 255, 255, 0.2);
}

.navbar__dropmenu-player {
  width: 320rem;
  padding: 0 !important;
  overflow: hidden;
}

.s2w-player {
  padding: 16rem;
}

.s2w-player__top {
  display: flex;
  gap: 10rem;
  margin-bottom: 12rem;
  align-items: stretch;
}

.s2w-player__art {
  position: relative;
  width: 80rem;
  height: 80rem;
  flex-shrink: 0;
  background: var(--bgColorMainBlack);
  border-radius: 8rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2w-player__art-icon {
  opacity: 0.3;
  z-index: 1;
  transition: opacity 0.3s;
}

.s2w-player__art-icon-img {
  width: 28rem;
  height: 28rem;
}

.s2w-player__art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  z-index: 2;
}

.s2w-player__art-img.is-loaded {
  opacity: 1;
  visibility: visible;
}

.s2w-player__art.has-art .s2w-player__art-icon {
  display: none;
}

.s2w-player__viz-box {
  flex: 1;
  min-width: 0;
  height: 80rem;
  background: var(--bgColorMainBlack);
  border-radius: 8rem;
  overflow: hidden;
  position: relative;
}

.s2w-player__visualizer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  padding: 0 10rem 0 10rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.s2w-player.playing .s2w-player__visualizer {
  opacity: 1;
}

.s2w-player__viz-bar {
  width: 3rem;
  background: linear-gradient(to top, var(--accent), rgba(224, 175, 76, 0.3));
  border-radius: 2rem 2rem 0 0;
  opacity: 0.3;
  transition: height 0.08s ease-out, opacity 0.08s ease-out;
  box-shadow: 0 0 4rem rgba(224, 175, 76, 0.15);
}

.s2w-player__track-eq {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  height: 12rem;
}

.s2w-player__track-eq span {
  width: 2.5rem;
  background: var(--accent);
  border-radius: 1rem;
  animation: trackEq 0.8s ease-in-out infinite alternate;
}

.s2w-player__track-eq span:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}

.s2w-player__track-eq span:nth-child(2) {
  height: 70%;
  animation-delay: 0.2s;
}

.s2w-player__track-eq span:nth-child(3) {
  height: 50%;
  animation-delay: 0.4s;
}

@keyframes trackEq {
  0% {
    height: 20%;
  }

  100% {
    height: 90%;
  }
}

.s2w-player__track-item.playing {
  cursor: default;
  opacity: 1;
}

.s2w-player__track-item.playing .s2w-player__track-item__name {
  color: var(--accent);
}

.nav-player-eq {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  height: 18rem;
  width: 18rem;
}

.nav-player-eq.active {
  display: flex;
}

.nav-player-eq.active+.navbar__item-text,
.nav-player-eq.active~.navbar__item-text {
  color: var(--accent);
}

#navPlayerIconStatic.hidden {
  display: none;
}

.nav-player-eq span {
  width: 3rem;
  background: var(--accent);
  border-radius: 1.5rem;
  animation: navEq 0.7s ease-in-out infinite alternate;
}

.nav-player-eq span:nth-child(1) {
  height: 30%;
  animation-delay: 0s;
}

.nav-player-eq span:nth-child(2) {
  height: 60%;
  animation-delay: 0.15s;
}

.nav-player-eq span:nth-child(3) {
  height: 45%;
  animation-delay: 0.3s;
}

@keyframes navEq {
  0% {
    height: 15%;
  }

  100% {
    height: 85%;
  }
}

.s2w-player__title {
  font-size: 13rem;
  font-weight: 500;
  color: var(--colorMain);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8rem;
  text-align: center;
}

.s2w-player__track {
  height: 4rem;
  background: var(--colorFwoolf-border);
  border-radius: 2rem;
  cursor: pointer;
  margin-bottom: 4rem;
}

.s2w-player__progress {
  height: 100%;
  background: var(--accent);
  border-radius: 2rem;
  width: 0;
  transition: width 0.1s linear;
}

.s2w-player__time {
  display: flex;
  justify-content: space-between;
  font-size: 10rem;
  color: var(--colorFwoolf-black);
  margin-bottom: 10rem;
  font-variant-numeric: tabular-nums;
}

.s2w-player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  margin-bottom: 14rem;
  flex-wrap: nowrap;
}

.s2w-player__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colorFwoolf-black);
  padding: 4rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

.s2w-player__btn:hover {
  color: var(--accent);
}

.s2w-player__btn-icon {
  width: 18rem;
  height: 18rem;
  display: block;
  flex-shrink: 0;
}

.s2w-player__btn--play {
  width: 40rem;
  height: 40rem;
  background: var(--accent);
  border-radius: 50%;
  color: var(--bgColorMainBlack);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}

.s2w-player__btn--play:hover {
  background: var(--accentlite);
  color: var(--bgColorMainBlack);
}

.s2w-player__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.s2w-player__btn--play:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.s2w-player__btn--play .s2w-player__btn-icon {
  width: 16rem;
  height: 16rem;
  margin-left: 2rem;
  display: block;
  flex-shrink: 0;
}

.s2w-player.playing .s2w-player__btn--play .s2w-player__btn-icon {
  margin-left: 0;
}

.s2w-player__volume {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-left: auto;
  flex-shrink: 0;
}

.s2w-player__volume-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colorFwoolf-black);
  padding: 2rem;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.s2w-player__volume-btn:hover {
  color: var(--accent);
}

.s2w-player__vol-icon {
  width: 14rem;
  height: 14rem;
}

.s2w-player__volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60rem;
  height: 3rem;
  background: var(--colorFwoolf-border);
  border-radius: 2rem;
  outline: none;
  cursor: pointer;
}

.s2w-player__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10rem;
  height: 10rem;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.s2w-player__volume-slider::-moz-range-thumb {
  width: 10rem;
  height: 10rem;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.s2w-player__playlist {
  max-height: 186rem;
  overflow-y: auto;
  padding-right: 12rem;
}

.s2w-player__playlist::-webkit-scrollbar {
  width: 4rem;
}

.s2w-player__playlist::-webkit-scrollbar-thumb {
  background: var(--colorFwoolf-border);
  border-radius: 2rem;
}

.s2w-player__track-item {
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 6rem 8rem;
  border-radius: 6rem;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 12rem;
  color: var(--colorFwoolf-black);
  margin-bottom: 2rem;
}

.s2w-player__track-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.s2w-player__track-item.active {
  color: var(--accent);
  background: rgba(224, 175, 76, 0.08);
}

.s2w-player__track-item__num {
  width: 16rem;
  text-align: center;
  flex-shrink: 0;
  font-size: 10rem;
}

.s2w-player__track-item__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2w-player__track-item__dur {
  flex-shrink: 0;
  font-size: 10rem;
  opacity: 0.6;
}

.navbar__dropmenu:before {
  content: "";
  position: absolute;
  left: -10rem;
  top: 36rem;
  border-top: 11rem solid transparent;
  border-bottom: 11rem solid transparent;
  border-right: 11rem solid var(--background-main);
}

.navbar__menu.middle-navbar {
  row-gap: 4rem;
}

.middle-navbar .icon-box::before {
  content: none;
}

.navbar__dropmenu-wrapper-bottom .navbar__dropmenu:before {
  top: auto;
  bottom: 30rem;
}

.navbar__dropmenu-wrapper-bottom .navbar__dropmenu-profile {
  padding: 8rem;
  width: 100%;
}

.navbar__dropmenu-wrapper .navbar__dropmenu-desc {
  padding-bottom: 12rem;
  display: flex;
  flex-direction: column;
}

.navbar__dropmenu-desc-box {
  margin-top: 15rem;
  text-align: left;
}

.navbar__dropmenu-desc-box>p {
  font-size: var(--fontSize-small);
  color: var(--colorFwoolf-black);
}

.navbar__dropmenu-desc-box_icon {
  margin-top: 0;
  margin-bottom: 10rem;

  display: flex;
  align-items: center;
  column-gap: 16rem;
  padding-left: 5rem;
}

.navbar__dropmenu-desc-box_icon>i {
  flex: 0 0 50rem;
  width: 50rem;
  height: 50rem;
}

.navbar__dropmenu-desc-box_icon>p {
  text-align: left;
}

.navbar__dropmenu-content {

  display: flex;
  flex-direction: column;
  justify-content: left;
  max-height: 378rem;
  height: 100%;
  overflow-y: auto;
  direction: ltr;
}

.navbar__dropmenu-content::-webkit-scrollbar {
  width: 6rem;
}

.navbar__dropmenu-map {
  display: flex;
  gap: 10rem;
  width: auto;
}

.map-wrapper-left {
  width: 310rem;
  flex-shrink: 0;
}

.map-wrapper-left>.navbar__dropmenu-content {
  overflow: hidden;
}

.dropmenu-item {

  display: flex;
  justify-content: left;
  align-items: center;
}

.contentSpoiler .toggleSpoiler {
  padding: 2rem;
}

.contentSpoiler .toggleSpoiler::after {
  left: 21rem !important;
  top: 11rem !important;
}

.contentSpoiler .toggleSpoiler>.dropmenu-icon {
  width: 13rem;
  height: 13rem;
}

.toggleSpoiler_wrapper>.toggleSpoiler::before {
  content: "";
  width: 1rem;
  height: 14rem;
  position: absolute;
  top: 26rem;
  left: 12rem;
  background-color: var(--colorFwoolf-border);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggleSpoiler_wrapper>.toggleSpoiler--isActive::before {
  opacity: 1;
}

.toggleSpoiler_wrapper.no-content>.toggleSpoiler::before,
.toggleSpoiler_wrapper.no-content>.toggleSpoiler--isActive::before {
  display: none;
}

.contentSpoiler li a::after {
  content: "";
  position: absolute;
  left: -10rem;
  bottom: 3rem;
  border-top: 6rem solid transparent;
  border-left: 6rem solid var(--accent);
  border-bottom: 6rem solid transparent;
  opacity: 0;
  transition: all var(--transition-linear);
  pointer-events: none;
}

.sub-dropmenu-spoilerSection:first-child::after {
  content: "";
  position: absolute;
  top: 12rem;
  left: -7rem;
  width: 6rem;
  height: 1rem;
  background-color: var(--colorFwoolf-border);
  border: none;
}

.sub-dropmenu-spoilerSection .toggleSpoiler>button {
  color: var(--colorFwoolf-black);
}

.sub-dropmenu-spoilerSection::after {
  border: none !important;
}

.dropmenu-spoiler-title {
  margin: 0 4rem 6rem 8rem;
}

.dropmenu-spoiler-title:not(.dropmenu-spoiler-title:first-child) {
  margin-top: 8rem;
}

.dropmenu-spoiler-title>span {
  color: var(--accent);
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: var(--fontSize-middle);
  padding-left: 18rem;
}

.dropmenu-empty {
  padding: 12rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12rem;
  list-style: none;
}

.dropmenu-spoiler-title::before {
  content: "";
  height: 4rem;
  width: 10rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--colorGalk);
}

.dropmenu-spoiler-title::after {
  content: "";
  height: 4rem;
  width: -webkit-fill-available;
  position: absolute;
  top: 50%;
  margin-left: 8rem;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--colorGalk) 0%, transparent 100%);
}

.dropmenu-item-list {
  flex-direction: column;
  align-items: start;
  margin-left: 4rem;
}

.dropmenu-item ul {
  margin-top: 10rem;
  padding-left: 17rem;
  list-style-type: none;
}

.toggleSpoiler {

  display: flex;
  justify-content: left;
  align-items: center;
  column-gap: 20rem;
  padding: 5rem;
  cursor: pointer;
}

.toggleSpoiler:not(.toggleSpoiler-box)::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 1rem;
  left: 26rem;
  top: 14rem;
  background-color: var(--colorFwoolf-border);
  pointer-events: none;
}

.dropmenu-item-list .toggleSpoiler {
  column-gap: 5rem;
}

.dropmenu-icon {
  display: inline-block;
  background-image: url("../../templates/images/icons/plus.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 15rem;
  height: 15rem;
  transition: var(--transition-default);
  pointer-events: none;
}

.dropmenu-item-list .dropmenu-icon {
  width: 12rem;
  height: 12rem;
  background-image: url("../../templates/images/icons/arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-90deg);
  pointer-events: none;
}

.toggleSpoiler--isActive .dropmenu-icon {
  background-image: url("../../templates/images/icons/minus.svg");
  width: 15rem;
  height: 15rem;
}

.nav_socials {
  display: none;
}

.main_s-socials {

  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 15rem;
  margin-top: 20rem;
}

.main_s-social__link {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rem;
  height: 30rem;
  transition: all 0.2s ease;
}

.main_s-social__join {
  text-align: center;
  margin-top: 5rem;
  color: var(--colorGreyMain);
  font-size: var(--fontSize-middle-lite);
}

.dropmenu-item button,
.dropmenu-item a {
  text-align: left;
  color: var(--colorGalk);
  text-decoration: none;
  font-size: var(--fontSize-middle-lite);
  transition: color var(--transition-default);
}

.dropmenu-item button:hover,
.dropmenu-item a:hover {
  color: var(--accent);
  text-decoration: none;
}

.dropmenu-item .toggleSpoiler--isActive button,
.dropmenu-item .toggleSpoiler--isActive a {
  color: var(--accent);
}

.sub-dropmenu-spoilerSection {
  padding-left: 1rem !important;
}

.contentSpoiler {
  padding-left: 20rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-cubick);
}

.contentSpoiler li>a,
.contentSpoiler .toggleSpoiler>button {
  word-break: break-word;
  overflow-wrap: break-word;
}

.contentSpoiler>div::before {
  content: "";
  position: absolute;
  left: -8rem;
  width: 1rem;
  height: calc(100% - 10rem);
  background-color: var(--colorFwoolf-border);
}

.layerSpoiler::before {
  display: none;
}

.contentSpoiler li {
  text-align: left;
  padding: 1rem 0 1rem 20rem;
  color: var(--colorFwoolf);
}

.contentSpoiler li::before {
  content: "";
  position: absolute;
  top: 10rem;
  left: -7rem;
  width: 14rem;
  height: 1rem;
  background-color: var(--colorFwoolf-border);
}

.sub-dropmenu-spoilerSection>.contentSpoiler {
  padding-left: 16rem;
}

.contentSpoiler .layerSpoiler>ul>li::before {
  display: none;
}

.contentSpoiler li>a {
  color: var(--colorFwoolf-black);
  opacity: 0.7;
  font-size: var(--fontSize-default);
  cursor: pointer;
}

.contentSpoiler li>a:hover::after {
  opacity: 1;
}

.toggleSpoiler_wrapper {

  display: flex;
  align-items: center;
}

.spoiler-new {
  left: 2rem;
  top: -3rem;
  color: var(--colorBlue);
  font-size: var(--fontSize-small);
  text-shadow: var(--colorBlue) 1rem 1rem 6rem;
  padding: 3rem;
}

.toggleSpoiler>.spoiler-new {
  left: -10rem;
}

.icon-mouse-cont {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.swiper-trailler__cont .icon-mouse-cont {
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
}

.navbar__item-text-live::after {
  content: "";
  position: absolute;
  right: -10rem;
  width: 4rem;
  height: 4rem;
  background-color: var(--colorGreen);
  box-shadow: var(--colorGreen) 0 0 10rem 2rem;
  border-radius: 100%;
  animation: pulse 1s infinite;
}

.live-off-sidebar .navbar__item-text-live::after {
  background-color: var(--colorRed);
  box-shadow: var(--colorRed) 0 0 10rem 2rem;
}

.live-off-sidebar i::after {
  content: "offline";
  color: var(--colorRed);
  font-size: var(--fontSize-XSmall-medium);
  position: absolute;
  bottom: -8rem;
  left: 50%;
  transform: translateX(-50%);
}

.navbar__item-sub-text {
  position: absolute;
  top: 31rem;
  rotate: 356deg;
  width: 60rem;
  height: 12rem;
  background-color: var(--accent);
  border-radius: var(--radiusMain);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-default);
  z-index: 1;
}

.navbar-map .navbar__item-sub-text {
  background-color: transparent;
}

.navbar__item-sub-text span {
  font-size: var(--fontSize-XSmall-medium);
  font-weight: 600;
  color: var(--colorBlack);
}

.navbar-map .navbar__item-sub-text span {
  color: var(--colorTelegray);
}

.navbar__dropmenu-img {
  margin: 0 auto;
}

.navbar__dropmenu-btn {
  margin: 0 auto;
  margin-top: 12rem
}

.navbar__item-search::before {
  display: none;
}

.navbar__item-profile-quant {
  position: absolute;
  bottom: 16rem;
  right: -2rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-default);
}

.navbar__item-profile-quant .icon-profile-verf {
  width: 24rem;
  height: 24rem;
}

.verification .icon-profile {
  border: 3rem solid var(--accent);
  box-shadow: 1rem 1rem 10rem 3px var(--accent);
}

.navbar__item-profile-quant span {
  font-size: var(--fontSize-XSmall-medium);
  color: var(--colorWhite);
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
}

.navbar__dropmenu-wrapper-bottom {
  top: auto;
  bottom: 0;
}

.small-box {
  padding: 6rem;
  border-radius: var(--radiusMain);
}

.profile-panel {
  align-items: center;
  column-gap: 18rem;
}

.profile-avatar {
  width: 64rem;
  height: 64rem;
  flex: 0 0 64rem;
  aspect-ratio: 1 / 1;
  background-image: url("../../uploads/avatars/no-avatar.gif");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 100%;
  border: 3rem solid var(--accent);
  box-shadow: 1rem 1rem 10rem 3px var(--accent);
}

.profile-user {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 6rem;
}

.profile-id-text {
  font-size: var(--fontSize-small-medium);
  color: var(--colorGalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-id {
  color: var(--accent);
}

.profile-name-wrapper {
  display: flex;
  align-items: center;
  gap: 6rem;
}

.main-profile-name-wrapper {
  display: flex;
  align-items: center;
  gap: 10rem;
}

.sidebar-role-badge {
  font-size: var(--fontSize-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  border-radius: 4rem;
  padding: 1rem 6rem;
  white-space: nowrap;
  line-height: 1.4;
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border: 1rem solid rgba(107, 114, 128, 0.15);
}

.sidebar-role-badge[data-role="admin"] {
  color: #E0AF4C;
  background: rgba(224, 175, 76, 0.1);
  border-color: rgba(224, 175, 76, 0.15);
}

.sidebar-role-badge[data-role="moderator"] {
  color: #F16145;
  background: rgba(241, 97, 69, 0.1);
  border-color: rgba(241, 97, 69, 0.15);
}

.sidebar-role-badge[data-role="editor"] {
  color: #F16145;
  background: rgba(241, 97, 69, 0.1);
  border-color: rgba(241, 97, 69, 0.15);
}

.sidebar-role-badge[data-role="gsc"] {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.15);
}

.sidebar-role-badge[data-rank="novice"] {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.15);
}

.sidebar-role-badge[data-rank="stalker"] {
  color: #4a9eff;
  background: rgba(74, 158, 255, 0.1);
  border-color: rgba(74, 158, 255, 0.15);
}

.sidebar-role-badge[data-rank="explorer"] {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.15);
}

.sidebar-role-badge[data-rank="veteran"] {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.15);
}

.sidebar-role-badge[data-rank="master"] {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.15);
}

.sidebar-role-badge[data-rank="legend"] {
  color: #E0AF4C;
  background: rgba(224, 175, 76, 0.1);
  border-color: rgba(224, 175, 76, 0.15);
}

.sidebar-role-badge[data-tooltip] {
  cursor: pointer;
}

.sidebar-role-badge[data-tooltip]::before,
.sidebar-role-badge[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}

.sidebar-role-badge[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8rem);
  left: 50%;
  transform: translateX(-50%) translateY(4rem);
  padding: 6rem 10rem;
  background: var(--bgColorMainAsideLite);
  border: 1rem solid var(--colorFwoolf-border);
  border-radius: 8rem;
  font-size: var(--fontSize-small);
  font-weight: 500;
  color: var(--colorWhite);
  white-space: nowrap;
  box-shadow: 0 8rem 24rem rgba(0, 0, 0, 0.6);
  text-transform: none;
  letter-spacing: 0;
}

.sidebar-role-badge[data-tooltip]::after {
  content: "";
  bottom: calc(100% + 2rem);
  left: 50%;
  transform: translateX(-50%) translateY(4rem);
  border: 5rem solid transparent;
  border-top-color: var(--bgColorMainAsideLite);
}

.sidebar-role-badge[data-tooltip]:hover::before,
.sidebar-role-badge[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sidebar-role-icon.icon-editor {
  width: 22rem;
  height: 22rem;
  flex-shrink: 0;
  cursor: help;
  filter: brightness(1.2);
  transition: transform 0.18s, filter 0.18s;
}

.sidebar-role-icon.icon-editor:hover {
  transform: scale(1.1);
  filter: brightness(1.5);
}

.sidebar-progress-bars {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.sidebar-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-progress-label {
  font-size: var(--fontSize-small-medium);
  color: var(--colorFwoolf-black);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.sidebar-progress-value {
  font-size: 10rem;
  color: var(--colorFwoolf-black);
  font-weight: 600;
}

.sidebar-progress-track {
  height: 4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: 4rem;
  position: relative;
}

.sidebar-progress-fill {
  height: 100%;
  border-radius: 2rem;
  width: 0;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(90deg, var(--colorSrvdl), var(--accent), var(--accentlite), var(--accent));
  background-size: 200% 100%;
  animation: sidebarShimmer 2s ease-in-out infinite;
  box-shadow: 0 0 8rem var(--accent-glow);
}

@keyframes sidebarShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.profile-name {
  color: var(--colorFwoolf);
  font-size: var(--fontSize-large);
  font-family: "Oswald", sans-serif;
  line-height: var(--lineHeight-default);
  font-weight: 500;
  text-transform: uppercase;
}

.small-box-btns {
  margin-top: 12rem;
  left: 10rem;
}

.small-box-btn {
  margin-top: 2rem;
}

.small-box-btn>button {

  display: flex;
  align-items: center;
  column-gap: 14rem;
  background-color: transparent;
  cursor: pointer;
}

.small-box-btn span {
  color: var(--colorFwoolf);
  font-size: var(--fontSize-middle-lite);
  line-height: var(--lineHeight-default);
  transition: all 0.2s ease;
  text-wrap: nowrap;
}

.small-box-btn i {
  flex: 0 0 24rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-edit-link {
  font-size: var(--fontSize-middle-lite);
  color: var(--accent);
  text-decoration: none;
  padding: 4rem 8rem;
  white-space: nowrap;
}

.small-box-btn i::before {
  content: "";
  display: inline-block;
  width: 24rem;
  height: 24rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.counter-notice {
  box-sizing: content-box;
  padding: 2rem 8rem;
  top: 0;
  right: 4rem;
  border-radius: 15rem;
  color: var(--colorWhite);
  font-size: var(--fontSize-small-medium);
}

.counter-notice.notification {
  background-color: #53bee8;
  color: var(--colorBlack);
}

.counter-notice.bookmarks {
  background-color: #f44336;
}

.sidebar {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-backdrop-filter: blur(3rem);
  backdrop-filter: blur(3rem);
  overflow-y: auto;
}

.app__sidebar {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s all;
  opacity: 0;
  pointer-events: none;
  background: rgb(26 24 24 / 70%);
}

.app__sidebar--active {
  opacity: 1;
  pointer-events: all;
}

.sidebar__button {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  margin: 8rem;
  background: var(--background-main) url("../../templates/images/icons/close.svg");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  width: 24rem;
  height: 24rem;
  z-index: 1;
  cursor: pointer;
}

.sidebar__content {
  height: calc(100% - 10rem);
  overflow: auto;
  padding: 10rem;
}

.sidebar__main {
  max-width: 400rem;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 35rem;
  background-repeat: no-repeat;
  background-position: top center;
}

.sidebar .mobile-spoiler:not(.mobile-spoiler:last-child) {
  margin-bottom: 0;
}

.panel-heading a::after {
  content: "";
  position: absolute;
  background-image: url("../../templates/images/icons/plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 15rem;
  height: 15rem;
  top: 18rem;
  right: 20rem;
  transition: 0.2s;
}

.panel-heading-isActive a::after {
  content: "";
  background-image: url("../../templates/images/icons/minus.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 15rem;
  height: 15rem;
}

.panel-heading-isActive a {
  color: var(--accent);
}

.panel-heading::before {
  content: "";
  position: absolute;
  display: none;
  left: 20rem;
  bottom: -8rem;
  border-left: 8rem solid transparent;
  border-top: 8rem solid var(--colorBlackrgba);
  border-right: 8rem solid transparent;
}

.panel-heading-isActive::before {
  display: block;
}

.sidebar-menu-hint {
  display: block;
  font-size: var(--fontSize-small);
  color: var(--colorFwoolf-black);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-default),
    padding var(--transition-default);
  padding: 0 6rem;
}

.panel-heading-isActive .sidebar-menu-hint {
  max-height: 150rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.sidebar-menu {
  margin-top: 0;
  text-align: left;
  font-weight: 400;
  font-size: var(--fontSize-middle-lite);
  color: var(--colorFwoolf);
}

.sidebar-item {

  display: flex;
  align-items: center;
  padding: 8rem 10rem;
  border-radius: var(--radiusMain);
  color: var(--colorGalk);
  text-decoration: none;
  margin-bottom: 4rem;
  transition: 0.1s all;
  background: var(--colorBlackrgba);
  flex-wrap: wrap;
}

.sidebar-item small {
  top: -5rem;
  left: 6rem;
  color: var(--accent);
  font-size: var(--fontSize-XSmall-medium);
  text-shadow: var(--accent) 1rem 1rem 12rem;
  border: 1rem solid var(--border-main-page);
  border-radius: 2rem;
  padding: 3rem;
}

.sidebar-item:hover {
  color: var(--accent);
}

.sidebar-item:active {
  transform: scale(0.97);
}

.sidebar-item__icon {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 35rem;
  height: 35rem;
  margin-right: 10rem;
}

.panel-collapse {
  margin-left: 15rem;
  max-height: 0;
  overflow: hidden;
  transition: var(--transition-cubick);
}

.sidebar-item__text {
  color: var(--colorGalk);
}

.live-on {
  top: -5rem;
  left: 5rem;
  color: var(--colorGreen);
  font-size: var(--fontSize-XSmall-medium);
  text-shadow: var(--colorGreen) 1rem 1rem 10rem;
  padding: 3rem;
}

.live-off {
  top: -5rem;
  left: 15rem;
  color: var(--colorRed);
  font-size: var(--fontSize-XSmall-medium);
  padding: 3rem;
}

.live-on::after {
  content: "";
  position: absolute;
  right: -10rem;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  background-color: var(--colorGreen);
  box-shadow: var(--colorGreen) 0 0 10rem 2rem;
  animation: pulse 1s infinite;
}

.bottom-cookie__inner {
  width: min(900rem, 100% - 10rem);
  padding-bottom: 0;
  margin-inline: auto;
  color: var(--colorFwoolf);
}

.buttons {
  display: flex;
  justify-content: flex-end;
  padding-right: 20rem;
  gap: 40rem;
  flex: 1 1 100%;
}

.modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 50%);
  -webkit-backdrop-filter: blur(6rem);
  backdrop-filter: blur(6rem);
}

.modal--isActive {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.modal__overlay {

  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 10rem;
  justify-content: center;
  align-items: center;
}

.search {
  background-color: var(--background-main);
  border-radius: var(--radiusMain);
  max-height: 100vh;
  height: 100%;
  padding: 50rem;
  width: 100vw;
  z-index: 1;
  opacity: 0;
}

.modal--isActive .search {
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 6rem;
  background: var(--background-main) url("../../templates/images/icons/close.svg");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  width: 36rem;
  height: 36rem;
  z-index: 1;
  cursor: pointer;
}

.modal-search-title {
  font-size: var(--fontSize-big);
  font-family: "Oswald", sans-serif;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 12rem;
  color: var(--accent);
}

.search-line {
  margin: 0 auto;
  width: 50%;
  display: flex;
  justify-content: center;
  margin-bottom: 20rem;
}

.modal-search-icon {
  background: url("../../templates/images/icons/radiation-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 24rem;
  height: 24rem;
  animation: lds-eclipse 6s linear infinite;
}

.search-line::after,
.search-line::before {
  content: "";
  position: absolute;
  display: block;
  height: 3rem;
  width: calc((100% - 50rem) / 2);
  background: linear-gradient(270deg, var(--colorFwoolf) 0%, transparent 100%);
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  border-radius: var(--radiusMain);
}

.search-line::after {
  left: calc(50% + 22rem);
  background: linear-gradient(90deg, var(--colorFwoolf) 0%, transparent 100%);
}

.modal-search-wrapper {
  max-width: 700rem;
  width: 100%;
  height: 54rem;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  border-radius: var(--radiusMain);
  height: 100%;
  background-color: var(--bgColorMainBlack);
  padding-left: 16rem;
  padding-right: 124rem;
  font-size: var(--fontSize-large);
  color: var(--accentlite);
}

.search-input::placeholder {
  font-weight: 700;
  color: var(--colorFwoolf);
}

.modal-search-btn {
  padding: 0 24rem;
  height: 100%;
  position: absolute;
  z-index: 4;
  background-color: var(--accentlite);
  right: 0;
  top: 0;
  border-top-right-radius: var(--radiusMain);
  border-bottom-right-radius: var(--radiusMain);
  font-size: var(--fontSize-large);
  color: var(--colorBlack);
  font-weight: 500;
  opacity: 1;
  transition: opacity var(--transition-linear);
}

.modal-search-btn:hover {
  opacity: 0.7;
}

.modal-search-content {
  height: 100%;
  max-width: 700rem;
  max-height: 550rem;
  width: 100%;
  margin: 12rem auto;
  overflow: auto;
}

.modal-search__title {
  margin-top: 40rem;
  font-weight: 600;
  color: var(--colorFwoolf);
  font-size: var(--fontSize-large);
  text-align: center;
}

#search .modal__overlay {
  padding: 0;
}

.search-res {
  margin: 12rem;
}

.search-res__name {
  border-radius: var(--radiusMain);
  width: 100%;
  font-weight: 500;
  color: var(--accent);
  font-size: var(--fontSize-middle-lite);
  transition: all 0.2s linear;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  padding-right: 2rem;
}

.search-res__name::before {
  content: "";
  display: inline-block;
  margin-top: 6rem;
  width: 8rem;
  height: 8rem;
  margin-right: 6rem;
  border-radius: 50%;
  background-color: var(--accent);
  transform: scale(0);
  transition: all 0.2s linear;
}

.search-res__name:hover::before {
  transform: scale(1);
}

.search-res__name:hover {
  opacity: 0.7;
}

.s2w-modal {
  background-color: var(--background-main);
  border-radius: var(--radiusMain);
  box-shadow: 0 0 10rem 0 rgba(26, 26, 26, 0.25);
  max-height: 534rem;
  height: 100%;
  width: min(820rem, 100%);
  padding: 50rem 20rem;
}

.modal__container {
  max-height: calc(100vh - 300rem);
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding-bottom: 20rem;
  margin-right: -10rem;
}

.modal__content.modal_server {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.modal__content {
  display: flex;
  gap: 16rem;
  flex: 1 1 auto;
  overflow: hidden;
  overflow-y: scroll;
  height: 100%;
  padding: 10rem 30rem 10rem 10rem;
  margin: 16rem 21rem 16rem 16px;
  color: var(--colorWhite);
}

.main-title {
  font-weight: 500;
  font-size: var(--fontSize-XLarge);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 12rem 0 12rem;
  overflow-wrap: break-word;
  font-family: "Oswald", sans-serif;
}

.main-title>span {
  font-family: "Oswald", sans-serif;
}

.modal .main-title {
  color: var(--colorWhite);
  padding: 15rem 30rem;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--background-main);
  box-shadow: 0 0 10rem 0 rgba(26, 26, 26, 0.25);
}

.unit-modal .main-title {
  font-size: var(--fontSize-medium);
  margin: 0 0 16rem;
}

.unit-modal .main-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1rem;
  background-color: currentColor;
}

.unit-modal .main-title span {
  z-index: 1;
  background-color: var(--background-main);
  padding-right: 12rem;
}

.unit-modal .main__paragraph {
  line-height: 1.5;
  font-size: var(--fontSize-default);
}

.main__paragraph-small {
  margin: 0.5em 0;
  color: var(--colorGalk);
  line-height: 1.75;
}

.main__spoiler-hide {
  background: transparent;
  filter: none;
  transition: all var(--transition-linear);
  width: fit-content;
}

.main__spoiler-text {
  background: #ffffff21;
  filter: blur(3rem);
  width: fit-content;
  line-height: 1.75;
  cursor: pointer;
  margin-left: 0;
  display: inline;
}

.spoiler-body {
  max-height: 0;
  overflow: hidden;
  transition: var(--transition-cubick);
}

.account {
  width: 520rem;
  max-height: calc(100vh - 100rem);
  height: auto;
  overflow-y: auto;
}

.account__top {

  display: flex;
  justify-content: center;
  min-height: 173rem;
  max-height: 173rem;
  background: url(../images/main/bg_auth.png), url(../images/main/render.png),
    var(--background-main);
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: cover, auto, cover;
  background-position: bottom, bottom, bottom;
  position: relative;
  border-radius: var(--radiusMain) var(--radiusMain) 0 0;
}

.account__top::after {
  content: "";
  position: absolute;
  background-color: var(--colorFwoolf-lite);
  background-image: url("../../templates/images/icons/auth-logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  bottom: -24rem;
  width: 60rem;
  height: 60rem;
  border-radius: 100%;
  border: 3rem solid var(--colorFwoolf-lite);
  z-index: 999;
}

.account__text {
  padding: 20rem 20rem 50rem 20rem;
}

.server__information .modal__title {
  text-align: left;
  color: var(--colorMain);
  font-size: var(--fontSize-XLarge);
  font-weight: 500;
  flex: 1 0 100%;
}

.modal__title {
  text-transform: uppercase;
  font-size: var(--fontSize-XLarge);
  font-family: "Oswald", sans-serif;
  line-height: 35rem;
  text-align: left;
  color: var(--accent);
}

.unit-modal .modal__title {
  text-align: left;
  padding: 6rem 50rem 6rem 15rem;
  background: var(--bgColorMainAsideTitle);
  color: var(--colorMain);
  font-size: var(--fontSize-middle);
  font-weight: 500;
}

.modal__subtitle {
  font-size: var(--fontSize-middle);
  line-height: var(--lineHeight-default);
  text-align: left;
  color: var(--colorFwoolf);
}

.modal__subtitle span {
  color: var(--accent);
  font-weight: 500;
}

.modal__subtitle a {
  color: var(--accent);
  font-weight: 500;
}

.modal__subtitle a:hover {
  color: var(--accentlite);
  text-decoration: underline;
}

.modal__subtitle .registration-disabled {
  color: var(--colorRed);
  font-weight: 400;
}

.mobile__wrap {
  display: none;
}

.account__icon {
  position: relative;
}

.account__bottom {
  background: var(--colorFwoolf-lite);
  border-radius: 0 0 var(--radiusMain) var(--radiusMain);
}

.account__wrap {

  display: flex;
  justify-content: center;
  column-gap: 50rem;
  margin: 0 auto;
  padding: 46rem 20rem;
}

.account__sign {
  width: 86%;
}

.account__title {
  font-weight: 700;
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  line-height: var(--lineHeight-default);
  text-align: center;
  text-transform: uppercase;
  color: var(--colorFwoolf-border);
  margin-bottom: 20rem;
}

.input__box:not(:last-child) {
  position: relative;
  margin-bottom: 10rem;
}

.input__box .label {
  position: absolute;
  top: 0;
  left: 8rem;
  transition: all var(--transition-default);
  color: var(--colorFwoolf-border);
  font-size: var(--fontSize-middle-lite);
  pointer-events: none;
  transition: all var(--transition-default);
  background: var(--colorFwoolf-lite);
  padding: 0 6rem;
}

.input__box input {
  box-sizing: border-box;
  font-weight: 500;
  font-size: var(--fontSize-middle-lite);
  line-height: var(--lineHeight-default);
  color: var(--colorFwoolf-border);
  box-shadow: none;
  background-color: transparent;
  position: relative;
  padding: 12rem;
  padding-right: 30rem;
  width: 100%;
  transition: all var(--transition-default);
  border-image: url("../../templates/images/icons/input-borown.svg") 5 5 stretch;
  border-style: solid;
  border-width: 3rem;
}

.input__box a:hover {
  color: #bdab90;
}

.input__box label:focus-within>.label,
.input__box label:focus>.label {
  transform: translateY(-20rem);
  font-size: var(--fontSize-default);
}

.input__box input:not(:placeholder-shown)+.label {
  transform: translateY(-20rem);
  font-size: var(--fontSize-default);
}

.mobile__form {
  margin-bottom: 4rem !important;
}

.eye {
  position: absolute;
  right: 10rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline;
  z-index: 999;
  cursor: pointer;
}

.show-pass {
  position: relative;
  width: 24rem;
  height: 24rem;
  background-image: url("../../templates/images/icons/show-pass.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.account__btn {
  margin: 0 auto;
  margin-top: 50rem;
  width: 50%;
  display: flex;
  justify-content: center;
}

.account__btn .main-btn-radian {
  justify-content: center;
}

.account__btn .icon-radian-btn {
  margin-right: 10rem;
}

.register__sign .account__btn {
  margin-top: 14rem;
}

.auth-links-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rem;
}

.auth-links-row__register,
.auth-links-row__forgot {
  font-weight: 500;
  font-size: var(--fontSize-default);
  line-height: var(--lineHeight-default);
  color: var(--colorFwoolf-border);
  transition: color 0.2s linear;
  text-decoration: none;
  cursor: pointer;
}

.auth-links-row__register:hover {
  color: var(--accent);
}

.auth-links-row__forgot:hover {
  color: var(--accent);
}

.acc-reg {
  right: 13rem;
}

.register__sign {
  width: 86%;
}

.form__reg {

  display: flex;
  align-items: baseline;
  column-gap: 10rem;
}

.form__reg .label {
  position: absolute;
  top: 0;
  left: 8rem;
  transition: all var(--transition-default);
  color: var(--colorFwoolf-border);
  font-size: var(--fontSize-middle-lite);
  pointer-events: none;
  transition: all var(--transition-default);
  background: var(--colorFwoolf-lite);
  padding: 0 6rem;
}

.form__reg input:not(.custom_checkbox) {
  box-sizing: border-box;
  width: 100%;
  font-weight: 500;
  font-size: var(--fontSize-middle-lite);
  line-height: var(--lineHeight-default);
  color: var(--colorBlacklite);
  border-bottom: 1rem solid var(--colorFwoolf);
  padding: 8rem 12rem;
  box-shadow: none;
  border-radius: var(--radiusMain);
  background-color: transparent;
  position: relative;
  transition: all var(--transition-default);
  border-image: url("../../templates/images/icons/input-borown.svg") 5 5 stretch;
  border-style: solid;
  border-width: 3rem;
}

.form__reg label:focus-within>.label,
.form__reg label:focus>.label {
  transform: translateY(-18rem);
  font-size: var(--fontSize-default);
}

.form__reg input:not(:placeholder-shown)+.label {
  transform: translateY(-18rem);
  font-size: var(--fontSize-default);
}

.form__reg-inp {
  width: 100%;
  margin-bottom: 10rem;
}

.reg__progress {
  height: 20rem;
  margin-bottom: 20rem;
  overflow: hidden;
  background-color: var(--colorFwoolf);
  border-radius: var(--radiusMain);
  box-shadow: inset 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

.form__reg-email-info {
  color: var(--colorFwoolf-border);
  font-weight: 400;
  font-size: var(--fontSize-small);
  margin-top: 8rem;
  margin-left: 4rem;
}

.checkbox__policy-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 10rem;
  align-items: center;
  width: fit-content;
}

.checkbox__policy-wrapper>input {
  box-sizing: border-box;
  width: 36rem;
  height: 36rem;
  appearance: none;
  background-color: transparent;
  border-image: url("../../templates/images/icons/input-borown.svg") 5 5 stretch;
  border-style: solid;
  border-width: 3rem;
  padding: 8rem 15rem;
  cursor: pointer;
}

.checkbox__policy-wrapper>input::after {
  content: "";
  position: absolute;
  display: block;
  width: 36rem;
  height: 36rem;
  top: 50%;
  left: 50%;
  background: var(--colorBlacklite);
  transform: translateX(-50%) translateY(-50%) scale(0);
  transition: transform var(--transition-linear);
}

.checkbox__policy-wrapper>input:checked::after {
  transform: translateX(-50%) translateY(-50%) scale(0.6);
}

.checkbox__policy-wrapper>span {
  font-size: var(--fontSize-middle);
  font-weight: 400;
  color: var(--colorFwoolf-border);
}

.congr__text {
  padding: 50rem;
}

.forgotPassword-title {
  text-transform: uppercase;
  font-size: var(--fontSize-XLarge-small);
  font-family: "Oswald", sans-serif;
  line-height: 35rem;
  text-align: center;
  color: var(--accent);
}

.forgotPassword-subtitle {
  font-size: var(--fontSize-middle);
  line-height: var(--lineHeight-default);
  text-align: center;
  color: var(--colorFwoolf);
}

.forgotPassword-caption {
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

.showMessage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999999;
  background: rgb(0 0 0 / 50%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.showMessage-isActive {
  opacity: 1;
  visibility: visible;
}

.showMessage-container {
  min-height: 50rem;
  width: 400rem;
  max-width: calc(100% - 40rem);
  transform: scale(0.9) translateY(10px);
  transition: transform 0.3s ease;
}

.showMessage-isActive .showMessage-container {
  transform: scale(1) translateY(0);
}

.modal-info {
  border-radius: 5rem;
  padding: 20rem 24rem 20rem 80rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-info__title {
  font-weight: 600;
  font-size: var(--fontSize-middle);
  line-height: var(--lineHeight-default);
}

.modal-info__title::before {
  content: "";
  position: absolute;
  left: -60rem;
  top: 0;
  width: 42rem;
  height: 42rem;
  background-size: contain;
  background-repeat: no-repeat;
}

.modal-info__subtitle {
  font-weight: 400;
  font-size: var(--fontSize-middle-lite);
  line-height: var(--lineHeight-default);
}

.modal-wrong {
  background: var(--bgColorMainAside);
}

.modal-wrong__title {
  color: var(--colorRed);
}

.modal-wrong__title::before {
  background-image: url("../../templates/images/icons/error.svg");
}

.modal-wrong__subtitle {
  color: var(--colorFwoolf-black);
}

.modal-success {
  background: var(--background-main);
}

.modal-success__title {
  color: var(--colorGreen);
}

.modal-success__title::before {
  background-image: url("../../templates/images/icons/ok.svg");
}

.modal-success__subtitle {
  color: var(--colorMain);
}

.modal-warning {
  background: var(--bgColorMainAside);
}

.modal-warning__title {
  color: var(--accent);
}

.modal-warning__title::before {
  background-image: url("../../templates/images/icons/warning.svg");
}

.modal-warning__subtitle {
  color: var(--accent);
}

.congr {
  width: 750rem;
}

.congr__top {

  display: flex;
  justify-content: center;
  background: var(--background-main) url(../../templates/images/main/bg_enter.png);
  background-size: cover;
  position: relative;
  border-radius: var(--radiusMain) var(--radiusMain) 0 0;
  position: relative;
}

.congr__title {
  text-transform: uppercase;
  font-size: var(--fontSize-XLarge-medium);
  font-family: "Oswald", sans-serif;
  line-height: 35rem;
  text-align: left;
  color: var(--accent);
}

.congr__subtitle {
  font-size: var(--fontSize-middle);
  line-height: var(--lineHeight-default);
  text-align: left;
  color: var(--colorFwoolf);
}

.congr__subtitle>span {
  color: var(--accent);
  font-weight: 600;
}

.congr__icon {
  position: absolute;
  background: var(--colorFwoolf-lite);
  background-image: url("../../templates/images/icons/auth-logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  bottom: -30rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 60rem;
  height: 60rem;
  border-radius: 100%;
  border: 3rem solid var(--colorFwoolf-lite);
  z-index: 999;
}

.congr__bottom {
  background: var(--colorFwoolf-lite);
  border-radius: 0 0 var(--radiusMain) var(--radiusMain);
}

.congr__wrap {

  display: flex;
  justify-content: center;
  column-gap: 50rem;
  margin: 0 auto;
  padding: 44rem 14rem;
}

.congr-bottom__content {
  width: 90%;
}

.congr-bottom__text {
  font-weight: 400;
  font-size: var(--fontSize-middle);
  line-height: var(--lineHeight-default);
  text-align: left;
  color: var(--colorBlack);
  margin-bottom: 35rem;
}

.congr__btn {
  float: right;
  margin-right: 0;
}

.trailer-content {
  max-width: 1080rem;
  width: 100%;
  z-index: 99999;
  background-color: var(--background-main);
  padding: 15rem;

  display: flex;
  column-gap: 20rem;
  max-height: 540rem;
  height: 100%;
}

#videoblock {
  width: 100%;
  height: 100%;
  display: flex;
}

.iframeTrailer {
  width: 100%;
  height: 100%;
}

.iframeScreen {
  width: 100%;
  height: auto;
}

.swiper-trailler__cont {
  padding: 0 0 45rem 0;
}

.swiper-trailler {

  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 10rem;
  height: 100%;
}

.swiper-trailler::-webkit-scrollbar {
  width: 8rem;
  height: 8rem;
}

.swiper-wrapper {
  height: 100%;
}

.slide {
  padding: 5rem;
}

.swiper__trailer-img {
  width: 198rem;
  height: 108rem;
  cursor: pointer;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.swiper__trailer-img img {
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.swiper__trailer-img::before,
.swiper__trailer-img::after {
  content: "";
  position: absolute;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: var(--transition-default);
}

.swiper__trailer-img::before {
  width: 100%;
  height: 100%;
}

.swiper__trailer-img::after {
  width: 100%;
  height: 100%;
  background-image: url("../../templates/images/main/mask.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.swiper__trailer-img.trailer-screen:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 46rem;
  height: 46rem;
  background-image: url("../../templates/images/icons/view-img.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.swiper__trailer-img:hover::before,
.swiper__trailer-img:hover::after {
  opacity: 1;
  visibility: visible;
}

.swiper__trailer-img:hover::after {
  transform: scale(1);
}

.slide.active .swiper__trailer-img {
  border: none;
}

.slide.active .swiper__trailer-img::before,
.slide.active .swiper__trailer-img::after {
  opacity: 1;
  visibility: visible;
}

.unit-modal {

  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-main);
  border-radius: var(--radiusMain);
  box-shadow: 0 0 10rem 0 rgba(26, 26, 26, 0.25);
  max-height: clamp(300rem, 80vh, 620rem);
  height: 100%;
  max-width: 580rem;
  width: 100%;
  z-index: 1;
  transition: all 0.2s linear;
}

.unit-modal__content {
  width: 100%;
  height: calc(100% - 52rem);
}

#share .unit-modal {
  height: auto;
}

.modal-report__forms {

  display: flex;
  flex-direction: column;
  row-gap: 10rem;
  width: 100%;
  height: 100%;
}

.modal-report__form-input {
  font-size: var(--fontSize-small-medium);
  color: var(--colorMain);
  line-height: 20rem;
}

.select-modal-report .select__button,
.modal-report__form-input {

  display: flex;
  align-items: center;
  height: 40rem;
  padding: 0 10rem;
  font-size: 14rem;
}

.modal-report__form-input:focus,
.modal-report__form-textarea:focus {
  outline: 1rem solid var(--accent);
}

.modal-report__form-input,
.modal-report__form-textarea {
  box-sizing: border-box;
  border-radius: var(--radiusMain);
  width: 100%;
  background: var(--bgColorInput);
}

.modal-report__form-input::-webkit-input-placeholder,
.modal-report__form-textarea::-webkit-input-placeholder {
  font-size: var(--fontSize-default);
  color: var(--colorGreyMain);
}

.modal-report__form-input::-moz-placeholder,
.modal-report__form-textarea::-moz-placeholder {
  font-size: var(--fontSize-default);
  color: var(--colorGreyMain);
}

.modal-report__form-input:-ms-input-placeholder,
.modal-report__form-textarea:-ms-input-placeholder {
  font-size: var(--fontSize-default);
  color: var(--colorGreyMain);
}

.modal-report__form-input::-ms-input-placeholder,
.modal-report__form-textarea::-ms-input-placeholder {
  font-size: var(--fontSize-default);
  color: var(--colorGreyMain);
}

.modal-report__form-input::placeholder,
.modal-report__form-textarea::placeholder {
  font-size: var(--fontSize-default);
  color: var(--colorFwoolf);
}

.select {
  font-size: var(--fontSize-small-medium);
  color: var(--colorMain);
  line-height: 20rem;
  position: relative;
  height: fit-content;
}

.select__button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 5rem;
  width: 100%;
  border-radius: var(--radiusMain);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10rem 15rem;
  background: var(--bgColorMainAsideTitle);
  border-image: url("../../templates/images/icons/input.svg") 5 5 stretch;
  border-style: solid;
  border-width: 5rem;
}

.select__button::after {
  content: "";
  display: inline-block;
  width: 15rem;
  height: 8rem;
  background: url("../../templates/images/icons/select-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: 0.2s ease;
}

.select__button_active::after {
  transform: rotate(-180deg);
}

.select__button_placeholder {
  font-size: var(--fontSize-default);
  color: var(--colorGreyMain);
}

.select__button_active {
  border-radius: var(--radiusMain) var(--radiusMain) 0 0;
}

.select__list {
  position: absolute;
  left: 0;
  top: 100%;
  max-height: 0;
  overflow-y: auto;
  border-radius: 0 0 var(--radiusMain) var(--radiusMain);
  width: 100%;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
  background: var(--bgColorMainAsideTitle);
  border-top: 1rem solid var(--bgColorMainGrey);
  color: var(--colorMain);
  font-size: var(--fontSize-default);
  border-image: url("../../templates/images/icons/input.svg") 2 2 stretch;
  border-style: solid;
  border-width: 1rem;
}

.select__list-title {
  cursor: pointer;
  padding: 8rem 15rem;
  line-height: 20rem;
  color: var(--accent);
  font-size: var(--fontSize-default);
  cursor: none;
  pointer-events: none;
}

.select__list-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 8rem 15rem;
  line-height: 20rem;
  color: var(--colorMain);
  font-size: var(--fontSize-default);
  transition: 0.2s ease;
}

.modal-report__form-textarea {
  color: var(--colorMain);
  padding: 10rem;
  max-height: 80rem;
  height: 100% !important;
  line-height: 20rem;
  font-weight: 400;
  font-size: var(--fontSize-small-medium);
  overflow-y: auto;
}

.modal-report__form-textarea::-webkit-scrollbar {
  width: 0;
}

.form-modal-report__submit {
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.unit-modal__cont {
  height: calc(100% - 60rem);
  overflow-y: scroll;
  padding: 4rem 16rem 0 8rem;
  margin: 5rem 21rem 5rem 5rem;
}

#server-comment .unit-modal__cont {
  padding: 0 16rem 0 0;
}

.share-modal .unit-modal__cont {
  height: auto;
  overflow: hidden;
}

.select__list_visible {
  opacity: 1;
  visibility: visible;
  max-height: 230rem;
}

.unit-modal__cont>section {
  padding: 16rem 0 24rem;
}

.server__description {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16rem;
}

.server__icon {
  width: 180rem;
  height: 180rem;
  flex: 0 0 180rem;
  border-radius: 16rem;
}

.server__information {
  display: flex;
  gap: 10rem;
  flex: 1 0 30%;
  flex-wrap: wrap;
  justify-content: space-between;
}

.server__information .flex {
  gap: 16rem;
}

.server__information-text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.server__information-text li {
  display: flex;
  align-items: center;
  gap: 16rem;
  height: 20rem;
  color: var(--colorMain);
  font-size: var(--fontSize-middle-lite);
}

.server__information-text .s2w-icon {
  width: 22rem;
  height: 22rem;
  flex: 0 0 22rem;
}

.accent-text {
  color: var(--accent);
  font-size: var(--fontSize-middle-lite);
}

.server__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12rem;
  flex-grow: 0;
}

.server__rating p {
  font-size: var(--fontSize-default);
  color: var(--colorGreyLite);
}

.rating__likes {
  display: flex;
  gap: 12rem;
  justify-content: space-evenly;
}

.rating__likes button {
  flex: 1 1 45%;
  transition: all 0.3s ease;
  padding: 14rem 20rem;
  background-color: var(--bgColorMainAside);
  border-radius: 6rem;
  font-size: var(--fontSize-middle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.rating__likes .s2w-icon {
  width: 28rem;
  height: 28rem;
}

.rating__likes button:hover {
  background-color: var(--colorBlack);
}

.rating__likes button span {
  font-size: var(--fontSize-small);
}

button#server__like {
  color: var(--colorSrvlk);
  font-weight: 600;
}

button#server__dislike {
  color: var(--colorSrvdl);
  font-weight: 600;
}

.server__popularity {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  height: 20rem;
  border-radius: 20rem;
  background-color: var(--bgColorMain-red);
  font-size: var(--fontSize-small-medium);
  color: var(--colorGreenLite);
  text-transform: uppercase;
}

.server__popularity:before {
  content: "";
  position: absolute;
  width: 90%;
  height: 100%;
  border-radius: 20rem;
  background-color: var(--bgColorbtnserv);
  top: 0;
  left: 0;
}

.server__text {
  font-size: var(--fontSize-middle-lite);
  color: var(--colorTelegray);
  line-height: 150%;
}

.server__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rem;
  margin-top: auto;
}

.server__links p {
  display: flex;
  align-items: center;
  gap: 12rem;
  font-size: var(--fontSize-medium);
}

.server-copy {
  cursor: pointer;
}

.share-modal__wrap {
  padding: 25rem 0;
}

.share-modal__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}

.share-modal__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem;
  border-radius: var(--radiusMain);
  transition: all 0.2s ease;
}

.share-modal__link>.s2w-icon {
  width: 40rem;
  height: 40rem;
  transition: all 0.2s ease;
}

.share-modal__subtitle {
  margin-top: 10rem;
  text-align: center;
  color: var(--colorMain);
  font-size: var(--fontSize-small);
}

.share-modal__copy {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  border: 1rem dashed var(--accent);
  padding: 4rem;
  border-radius: var(--radiusMain);
  margin-bottom: 10rem;
}

.share-modal__copy input {
  padding: 4rem;
  color: var(--colorFwoolf-black);
}

.share-modal__copy button {
  margin-right: 12rem;
}

#cookie .s2w-modal {
  width: 565rem;
  max-height: none;
  height: auto;
  max-height: calc(100vh - 200rem);
  overflow-y: auto;
  padding: 20rem 25rem;
  overflow: auto;
}

#cookie .main-title {
  color: var(--colorFwoolf);
  text-transform: uppercase;
  font-size: var(--fontSize-middle);
  font-weight: 400;
  margin-bottom: 18rem;
  position: relative;
  padding: 0;
}

.cookie-list {
  margin-bottom: 16rem;
}

.cookie-item {
  display: flex;
  align-items: center;
  gap: 16rem;
  margin-bottom: 16rem;
}

.cookie-item:last-child {
  margin-bottom: 0;
}

.cookie-wrapper-icon {
  width: 36rem;
  height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 100%;
  background-color: var(--bgColorMainGreySub);
}

.icon-cookie {
  width: 24rem;
  height: 24rem;
}

.cookie-list-text {
  font-size: var(--fontSize-middle);
}

.cookie-btm {
  padding-top: 0;
  margin-bottom: 16rem;
}

#donate .modal__overlay {
  background: url("../../templates/images/main/sp-s.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.donate-overlay {

  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.shtp-modal {
  background-color: var(--background-main);
  border-radius: var(--radiusMain);
  box-shadow: 0 0 10rem 0 rgba(26, 26, 26, 0.25);
  max-width: 880rem;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 200rem);
  background-color: #00000096;
  color: var(--colorMain);
}

.shtp-modal-header {
  padding: 0rem 30rem;
  margin: 20rem 0rem 10rem 0rem;
}

.shtp-modal-header>h3 {
  font-family: "oswald", sans-serif;
  color: var(--accent);
  font-size: var(--fontSize-XLarge);
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
}

.shtp-modal-close {
  position: absolute;
  top: -11rem;
  right: 10rem;
  margin: 6rem;
  background: transparent url("../../templates/images/icons/close.svg");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  width: 36rem;
  height: 36rem;
  z-index: 1;
  cursor: pointer;
}

.shtp-modal-container {
  padding-left: 30rem;
  padding-right: 21rem;
  margin-right: 30rem;
  height: 100%;
  max-height: calc(100vh - 340rem);
  overflow-y: auto;
}

.shtp-modal-container p {
  margin-bottom: 10rem;
  line-height: 1.4;
  font-size: var(--fontSize-default);
}

.shtp-modal-container h4 {
  margin-top: 32rem;
  margin-bottom: 4rem;
  font-family: "Oswald", sans-serif;
  font-size: var(--fontSize-middle);
  text-transform: uppercase;
}

.shtp-modal-container a {
  display: block;
  margin-top: -6rem;
  margin-bottom: 18rem;
}

.shtp-modal-footer {
  color: var(--colorSrvdl);
  font-size: var(--fontSize-default);
  padding: 15rem 30rem;
  background-color: #00000099;
}

body.mainwiki {
  background-color: var(--bgColorMainBlack);
  cursor: url("../../templates/images/icons/cur.cur"), auto;
  font-size: var(--fontSize-middle-lite);
}

.main {
  color: var(--colorMain);
  font-size: var(--fontSize-middle);
  font-family: var(--fontFamilyMain);
  line-height: 1;

  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.main__container {

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 100%;
  width: 100%;
  padding: 20rem 40rem 30rem 120rem;
  margin: 0 auto;
  transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
}

.main__container._small {
  max-width: 1436rem;
}

.small_server {

  display: flex;
  align-items: center;
  column-gap: 15rem;
  background-color: var(--background-main);
  border-radius: var(--radiusMain);
  padding: 3rem 6rem;
}

.small_server .server-top__logo {
  flex: 0 0 25rem;
  height: 25rem;
}

.small_server .server-body__link {
  padding: 3rem 5rem;
}

.small_server .server__line {
  margin-top: 0;
}

.small_server .server-top__online {
  white-space: nowrap;
  margin-top: 0;
}

.main__content {
  flex: 1 1 auto;
  background-color: var(--background-main);

  display: flex;
  border-radius: var(--radiusMain);
  position: relative;
}

.left-main {
  flex: 1 1 auto;
  padding: 15rem 32rem 15rem 28rem;
  display: flex;
  flex-direction: column;
}

.left-main>div {
  padding-top: 35rem;
}

.bg_gradient_wrapper_main__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: var(--radiusMain);
  border-top-right-radius: var(--radiusMain);
}

.is-loaded>.main__background-image {
  transform: scale(1, 1);
}

.main__background-image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 475rem;
  transform: scale(1.1, 1.1);
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.17, 0.67, 0.54, 1),
    transform 3.2s cubic-bezier(0.17, 0.67, 0.54, 1);
}

.is-loaded>.main__background-image {
  opacity: 1;
}

.bg_gradient_main__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(24, 21, 18, 0) 76%,
      var(--background-main)),
    linear-gradient(90deg, rgba(24, 21, 18, 0) 70%, var(--background-main)),
    linear-gradient(270deg, rgba(24, 21, 18, 0) 80%, var(--background-main));
}

.left-main__top {
  position: sticky;
  top: 0;
  padding: 16rem 28rem;
  background: var(--background-main);
  z-index: 100;

  display: flex;
  align-items: center;
  column-gap: 6rem;
  row-gap: 5rem;
  margin: -15rem -32rem -7rem -28rem;
  border-top-left-radius: var(--radiusMain);
  border-top-right-radius: var(--radiusMain);
}

.tools-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6rem;
}

.tools-main {

  display: flex;
  align-items: center;
  gap: 6rem;
}

.tools-main_left-top .tools-main__btn {
  box-shadow: none;
}

.tools-main__btn {
  background: var(--colorFwoolf);
  border-radius: 100%;
  box-shadow: 0 3rem 12rem 0 rgba(0, 0, 0, 0.3333333333);
  width: 36rem;
  height: 36rem;
  flex: 0 0 36rem;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tools-main__btn:not(.tools-bookmark-des)::before,
.tools-main__btn:not(.tools-bookmark-des)::after {
  border-radius: 100%;
  left: 0;
  top: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2rem solid transparent;
}

.tools-main__btn:not(.tools-bookmark-des)::after {
  border: 0 solid transparent;
}

.left-main__top .tools-main__btn {
  box-shadow: 0px 3px 6px -6px var(--colorDark);
}

.tools-bookmark-des {
  flex: none;
  width: 40rem;
  text-align: center;
  height: 70rem;
  position: absolute;
  top: -4rem;
  right: 120rem;
  cursor: pointer;
  border-radius: 0;
  border-top-right-radius: var(--radiusMainLite);
  background: #d9d6c9;
  color: #fff;
  background: linear-gradient(to bottom,
      #b4af9a 0%,
      #d9d6c9 calc(100% - 14rem),
      transparent calc(100% - 13rem),
      transparent 100%);
  box-shadow: none !important;
  transition: all var(--transition-linear);
  align-items: flex-start;
  padding-top: 28rem;
}

.tools-bookmark-des>i {
  width: 24rem;
  height: 24rem;
  top: -2rem;
}

.tools-bookmark-des::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  border-top: 4rem solid transparent;
  border-right: 4rem solid #615e53;
}

.tools-bookmark-des::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% - 14rem);
  height: 14rem;
  width: 100%;
  color: #d9d6c9;
  border-radius: 0;
  border-bottom-right-radius: var(--radiusMain);
  border-bottom-left-radius: var(--radiusMain);
  border-left: calc(40rem / 2) solid;
  border-right: calc(40rem / 2) solid;
  border-bottom: 14rem solid transparent;
  border-left-color: inherit;
  border-right-color: inherit;
  z-index: -1;
}

.tools-bookmark-des:hover {
  background: linear-gradient(to bottom,
      #e74c3c 0%,
      #d9d6c9 calc(100% - 14rem),
      transparent calc(100% - 13rem),
      transparent 100%);
}

.tools-bookmark-des.save_bookmark {
  background: var(--accent);
  background: linear-gradient(to bottom,
      var(--accent) 0%,
      #d9d6c9 calc(100% - 14rem),
      transparent calc(100% - 13rem),
      transparent 100%);
}

.tools-bookmark-des.save_bookmark::after {
  color: #d9d6c9;
}

.tools-main__icon._active {
  display: block;
}

.tools-main__icon-normal,
.tools-main__icon-small {
  display: none;
}

.main-spoiler .main-spoiler__child_close {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(0) !important;
}

.main .tools-cat {
  position: relative;
}

.main .tools-cat .material-main {
  position: absolute;
  background-color: var(--bgColorMainAside);
  left: -130%;
  top: -15rem;
  text-align: left;
  border-radius: var(--radiusMain);
  box-shadow: 0px 0px 8px -4px var(--colorDark);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-default);
  pointer-events: none;
  cursor: default;
}

.main .tools-cat .material-main_open {
  top: 30rem;
  left: -130%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border: none;
  overflow: visible;
}

.material-main.mobile {
  display: none;
}

.material-main {
  position: relative;
  margin: 12rem auto 20rem 12rem;
  background-color: var(--background-ads);
  border-radius: var(--radiusMain);
  display: table;
  border-collapse: collapse;
  box-shadow: 4px 4px 12px -8px var(--colorDark), 4px 4px 12px -8px var(--colorDark);
  transition: all var(--transition-default);
}

.material-main.good {
  position: relative;
}

.main .tools-cat .material-main__top {
  min-width: 280rem !important;
}

.material-main__top {
  padding: 12rem 14rem;

  display: flex;
  align-items: center;
  min-width: 400rem;
}

.material-main__title {
  flex: 1 1 auto;

  display: flex;
  column-gap: 10rem;
  align-items: center;
}

.material-main__icon {
  flex: 0 0 18rem;
  height: 18rem;
}

.material-main__title_text {
  font-weight: 600;
  font-size: var(--fontSize-large);
  font-family: "Oswald", sans-serif;
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
  text-transform: uppercase;
}

.material-main__list {
  width: 100%;
  padding: 0 12rem 12rem 0;
}

.material-main__list_sub {
  margin-left: 12rem;
}

.material-main__item {
  margin-left: 12rem;
}

.material-main__link {
  display: block;
  line-height: 1.75;
  padding: 2rem 6rem;
  border-radius: var(--radiusMain);
  transition: all var(--transition-default);
  font-size: var(--fontSize-middle);
}

.material-main__number {
  font-weight: 500;
  padding-right: 0.5em;
}

.material-main__link_text {
  color: var(--colorMain);
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
}

.tools-sub {
  display: block;
  position: sticky;
  bottom: 60rem;
  right: 90rem;
  float: right;
  z-index: 55;
}

.tools-sub .tools-main__btn {
  width: 60rem;
  height: 60rem;
}

.tools-sub .tools-main__btn>i {
  width: 36rem;
  height: 36rem;
}

.main-toTopBtn {
  opacity: 0;
  cursor: default;
  transition: all 0.35s linear;
  pointer-events: none;
}

.main-toTopBtn i {
  background-image: url("../../templates/images/icons/up.svg");
}

.main-toTopBtn__active {
  opacity: 1;
}

.left-main__mobile {
  display: none;
}

.left-main__link-home .s2w-icon__home {
  width: 20rem;
  height: 20rem;
}

.left-main__list {
  flex: 1 1 auto;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 5rem;
  overflow: hidden;
}

.left-main__list>li:first-child>a {
  border-radius: 50%;
  height: 36rem;
  width: 36rem;
  margin: 0 22rem 0 0;
}

.left-main__link {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8rem;
  font-size: var(--fontSize-small-medium);
  font-family: "Oswald", sans-serif;
  color: var(--accent);
  line-height: var(--lineHeight-default);
  background-color: var(--bgColorMainAside);
  box-shadow: 0px 3px 6px -6px var(--colorDark);
  text-shadow: 1rem 1rem 3rem var(--bgColorMainBlack);
  text-transform: uppercase;
  padding: 8rem 8rem;
  height: 28rem;
  margin: 0 13rem 0 0;
  position: relative;
}

.left-main__link>i {
  width: 18rem;
  height: 18rem;
}

.left-main__link::before,
.left-main__link::after {
  content: "";
  position: absolute;
  top: 0;
  height: 28rem;
  color: var(--bgColorMainAside);
  transition: inherit;
}

.left-main__link::before {
  right: 100%;
  border-top: 14rem solid;
  border-bottom: 14rem solid;
  border-left: 10rem solid transparent;
  border-top-color: inherit;
  border-bottom-color: inherit;
}

.left-main__link::after {
  left: 100%;
  border-top: 14rem solid transparent;
  border-bottom: 14rem solid transparent;
  border-left: 10rem solid;
  border-left-color: inherit;
}

.left-main__link-home {
  background-color: var(--colorFwoolf);
  pointer-events: auto;
}

.main__list-mod span {
  display: flex;
  align-items: center;
  gap: 3rem;
  color: var(--colorMain) !important;
}

.main__list-mod .s2w-icon__share {
  position: absolute;
  display: block;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  left: 6rem;
  width: 16rem;
  height: 16rem;
  pointer-events: none;
}

.left-main__link-active {
  background-color: var(--bgColorMainAsideLite);
  color: var(--colorMain);
  padding-left: 48rem;
  cursor: pointer;
}

.left-main__link-active::before,
.left-main__link-active::after {
  color: var(--bgColorMainAsideLite);
}

.left-main__item-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  left: 20rem;
  width: 8rem;
  height: 4rem;
  animation: arrowRight 2s linear infinite;
}

.left-main__item-icon-2 {
  opacity: 0;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.actios-left-main__menu:hover .more-dropmenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.more-dropmenu {
  position: absolute;
  top: 100%;
  right: -14rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  min-width: 70%;
  transition: all var(--transition-default);
  padding-top: 10rem;
}

.more-dropmenu_open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.more-dropmenu__content {
  position: relative;
  background-color: var(--colorFwoolf);
  border-radius: var(--radiusMain);
  padding: 0;
}

.more-dropmenu__content::after {
  bottom: 100%;
  content: "";
  height: 0;
  right: 24rem;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: 2;
  border: 8rem solid transparent;
  border-bottom: 8rem solid var(--colorFwoolf);
  margin-left: -8rem;
}

.more-dropmenu__item {
  margin: 0 0;
  white-space: nowrap;
}

.more-dropmenu__item.mobile-btn {
  display: none;
}

.more-dropmenu__link {
  position: relative;
  display: -ms-grid;
  display: grid;
  color: var(--colorBlack);
  font-size: var(--fontSize-middle-lite);
  padding: 12rem 12rem 12rem 40rem;
  transition: all var(--transition-default);
}

.more-dropmenu__link .s2w-icon {
  position: absolute;
  left: 10rem;
  top: 50%;
  transform: translateY(-50%);
}

.left-main__title {
  flex: 1 1 auto;
  font-size: var(--fontSize-large);
  font-family: "Oswald", sans-serif;
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 20rem;
  letter-spacing: 0.25rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aside-main .left-main__title {
  margin-top: 6rem;
  padding: 0 8rem;
}

.aside-main {
  width: 100%;
  margin: 12rem 0 0 18rem;
  clear: right;
  border-radius: var(--radiusMain);
  float: right;
  z-index: 5;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.aside-main__body {
  padding: 10rem;
  width: 400rem;
  background-color: var(--background-ads);
  box-shadow: 0px 5px 8px -8px var(--colorDark);
  border-radius: var(--radiusMain);
}

.aside-main__image {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.aside-main__image {
  text-align: center;
}

.main-spoiler.left-spoiler .main-spoiler__child {
  left: auto;
  right: 100%;
  transform: translateX(-10rem) !important;
}

.aside-main .main-spoiler .main-spoiler__child {
  left: auto;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) !important;
  background-color: var(--background-main);
  color: var(--accent);
  font-size: var(--fontSize-default);
  z-index: 9;
}

.main-spoiler.left-spoiler .main-spoiler__child::before {
  border: none;
  border-top: 6rem solid transparent;
  border-bottom: 6rem solid transparent;
  border-left: 6rem solid var(--bgColorMainBlack);
  left: calc(100% - 1rem);
}

.aside-main .main-spoiler .main-spoiler__child::before {
  border: none;
  border-top: 6rem solid transparent;
  border-bottom: 6rem solid transparent;
  border-left: 6rem solid var(--background-main);
  left: calc(100% - 0rem);
}

.top-title .aside-main__subtitle {
  position: relative;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 6rem 2rem 0 2rem;
  order: 1;
}

.top-title .aside-main__image.desktop {
  margin-top: 0;
  order: 2;
  padding: 0px 6rem;
}

.top-title .aside-main__info {
  order: 3;
}

.aside-main__subtitle-mobile {
  display: none;
}

.subtitle-aside-main__text {
  color: var(--colorMain);
  font-size: var(--fontSize-middle);
  line-height: 1.25;
  font-weight: 600;
  padding: 12rem 0 0 8rem;
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
}

.aside-main.question {
  position: sticky;
  top: 60rem;
}

.aside-main.interesting_facts {
  position: sticky;
  top: 425rem;
}

.aside-main.interesting_facts {
  margin-top: 80rem;
  margin-bottom: 24rem;
}

.interesting_facts-wrapper {
  width: 160rem;
  height: auto;
  position: absolute;
  z-index: 5;
  top: -80rem;
  left: 200rem;
}

.subtitle-aside-main__text-sub {
  font-size: var(--fontSize-XLarge-medium);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  text-align: left;
  top: -16rem;
  left: 0;
  text-shadow: 2rem 2rem 4rem var(--colorBlack);
}

.aside-main__text {
  font-size: var(--fontSize-middle-lite);
  line-height: 1.5;
  font-weight: 400;
  color: var(--colorFwoolf);
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
  padding: 12rem 10rem 6rem 10rem;
  overflow: hidden;
  -webkit-line-clamp: 6;
}

.aside-main__text a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(201, 150, 62, 0.3);
  transition: all 0.2s;
}

.aside-main__text a:hover {
  text-decoration-color: var(--accent);
  color: var(--colorWhite);
}

.aside-main__info {
  margin-top: -30rem;
}

.top-title .aside-main__info {
  margin-top: 0;
}

.interesting_facts .subtitle-aside-main__text-sub {
  top: 0;
  left: 0;
  text-align: left;
  font-size: var(--fontSize-XLarge);
  color: var(--colorFwoolf);
  -webkit-line-clamp: 999;
}

.interesting_facts .aside-main__text {
  padding-top: 12rem;
}

.interesting_facts .aside-main__info {
  margin-top: 0;
}

.aside-main__description {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  padding: 0 12rem;
  margin-bottom: 24rem;
}

.aside-main__weapon-stats {
  display: flex;
  border-top: 1rem solid rgba(255, 255, 255, 0.08);
  margin: 0 12rem 12rem;
}

.weapon-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem 6rem;
  gap: 4rem;
}

.weapon-stat:not(:last-child) {
  border-right: 1rem solid rgba(255, 255, 255, 0.08);
}

.weapon-stat__label {
  font-size: 10rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1rem;
}

.weapon-stat__value {
  font-size: 16rem;
  font-weight: 700;
  color: var(--colorFwoolf);
}

.icon-description {
  width: 20rem;
  height: 20rem;
}

.icon-description.icon-koupon {
  padding-bottom: 18rem;
}

.icon-description.icon-weight {
  margin-right: 4rem;
}

.description-text {
  color: var(--colorFwoolf);
  font-size: var(--fontSize-XLarge);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
}

.description-right>span {
  font-size: var(--fontSize-XLarge);
}

.description-weight>.price-subtitle {
  left: 0;
  transform: translateX(0);
}

.price-subtitle {
  font-size: var(--fontSize-XSmall-medium);
  font-weight: 300;
  text-wrap: nowrap;
  position: absolute;
  bottom: -8rem;
  left: 50%;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.aside-main__property {
  padding: 10rem 12rem;
}

.icon-property {
  width: 20rem;
  height: 20rem;
}

.prop-bars {
  list-style: none;
  margin: 0;
  padding: 8rem 12rem;
}

.prop-bar-item {
  display: flex;
  flex-direction: column;
  padding: 6rem 0;
  gap: 6rem;
}

.prop-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8rem;
}

.prop-bar-left {
  display: flex;
  align-items: center;
  gap: 8rem;
  flex-shrink: 0;
}

.prop-bar-icon-img {
  width: 20rem;
  height: 20rem;
  object-fit: contain;
  flex-shrink: 0;
}

.prop-bar-name {
  color: var(--colorFwoolf);
  font-size: var(--fontSize-middle-lite);
  font-weight: 500;
  white-space: nowrap;
}

.prop-bar-scale {
  display: flex;
  gap: 3rem;
  width: 100%;
}

.prop-bar-cell {
  flex: 1;
  width: auto;
  height: 8rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}

.prop-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2rem;
  background: #22c55e;
}

.prop-bar-fill--neutral {
  background: #f59e0b;
}

.prop-numeric {
  list-style: none;
  margin: 0;
  padding: 8rem 12rem;
}

.prop-numeric .prop-bar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 0;
  gap: 10rem;
}

.prop-numeric .prop-bar-left {
  display: flex;
  align-items: center;
  gap: 8rem;
  flex-shrink: 0;
}

.prop-numeric__value {
  color: var(--colorFwoolf);
  font-size: var(--fontSize-middle-lite);
  font-weight: 600;
  white-space: nowrap;
}

.prop-numeric__value--positive {
  color: #22c55e;
}

.aside-main__suitable {
  padding: 6rem 12rem;
  font-size: var(--fontSize-medium);
  color: var(--colorFwoolf);
}

.aside-main__suitable-label {
  opacity: 0.6;
}

.weapon-stat__fire-mode-icon {
  height: 20rem;
  filter: brightness(0) invert(0.9);
}

.weapon-stat__fire-mode-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
  min-width: 20rem;
  padding: 0 4rem;
  font-weight: 700;
  font-size: 14rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  vertical-align: middle;
}

.aside-main__meta {
  margin-top: 0;
  padding: 10rem 12rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.aside-meta-item {
  display: flex;
  align-items: center;
  gap: 6rem;
  font-size: var(--fontSize-default);
  color: var(--colorGalk);
}

.aside-meta-icon {
  width: 18rem;
  height: 18rem;
  filter: brightness(0) invert(0.7);
  flex-shrink: 0;
}

.aside-meta-link {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.aside-meta-link:hover {
  opacity: 0.8;
}

.article-status-warning {
  padding: 12rem 20rem;
  border-radius: 8rem;
  margin-bottom: 16rem;
  font-size: 14rem;
  display: flex;
  align-items: center;
  gap: 8rem;
}

.question-voted {
  color: var(--accent);
  font-size: 14px;
}

.write-comments__icon--avatar {
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  object-fit: cover;
}

.comments__write--login-prompt {
  padding: 16rem;
  text-align: center;
  color: var(--colorFwoolf);
  opacity: 0.7;
}

.comments__write-login-link {
  color: var(--accent);
}

.material-main__btn {
  color: var(--accent);
  font-size: var(--fontSize-default);
  padding: 6rem;
  background: var(--background-ads);
  border-radius: var(--radiusMain);
}

.material-main__btn::before {
  content: " [";
  color: var(--colorMain);
  margin-right: 4rem;
}

.material-main__btn::after {
  content: "]";
  color: var(--colorMain);
  margin-left: 4rem;
}

.material-main__btn_show {
  display: none;
}

.left-main__hint.mobile {
  display: none;
}

.left-main__hint {
  display: flex;
  background-color: var(--background-ads);
  border-left: 5rem solid var(--accent);
  padding: 0.25em 1em;
  margin: 12rem 0 22rem 0;
  border-top-right-radius: var(--radiusMain);
  border-bottom-right-radius: var(--radiusMain);
}

.left-main__hint_wrapper {
  margin: 0.5em 0;
  line-height: 1.75;

  display: flex;
  align-items: center;
  column-gap: 10rem;
}

.left-main__hint_info {
  font-size: var(--fontSize-XLarge);
  font-weight: 500;
  color: var(--accent);
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
  padding-left: 70rem;
}

.left-main__hint_info:first-child {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}

.left-main__hint_info-small {
  font-size: var(--fontSize-default);
  font-weight: 400;
  text-shadow: 1rem 1rem 3rem var(--colorBlack);
  padding-left: 10rem;
}

.spoiler-down {
  position: relative;
  margin-top: 40rem;
  width: calc(100% - 418rem);
}

.left-main__hint__icon-box {
  margin: 5rem 5rem 0rem 0;
  position: absolute;
  top: -38rem;
  left: 10rem;
}

.left-main__hint__icon {
  width: 60rem;
  height: 60rem;
}

.main-title-noborder {
  border: none;
}

.write-comments {
  border-radius: var(--radiusMain);
  border: 1rem solid hsla(36, 49%, 90%, 0.2);
  background-color: var(--background-ads);
  padding: 18rem 12rem;
}

.write-comments__top {

  display: flex;
  align-items: start;
  column-gap: 12rem;
  cursor: pointer;
}

.write-comments-active .write-comments__top {
  cursor: inherit;
}

.write-comments__icon {
  flex: 0 0 36rem;
  height: 36rem;
  border-radius: 50%;
}

.write-comments__textarea {
  font-size: var(--fontSize-middle);
  background-color: transparent;
  width: 100%;
  height: 21rem;
  color: var(--colorFwoolf);
  pointer-events: none;
  margin-top: 5rem;
}

.write-comments__textarea-active {
  pointer-events: auto;
  color: var(--colorFwoolf);
}

.write-comments__textarea::placeholder {
  color: var(--colorFwoolf);
}

.write-comments__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.write-comments-footer {
  margin-top: 18rem;
  padding-top: 18rem;
  border-top: 1rem solid hsla(36, 49%, 90%, 0.2);

  display: flex;
  align-items: center;
  column-gap: 10rem;
  justify-content: space-between;
}

.write-comments-footer__rules {

  display: flex;
  align-items: center;
  column-gap: 5rem;
  color: var(--colorFwoolf-black);
}

.write-comments-footer__rules-link {

  display: inline-flex;
  align-items: center;
  column-gap: 5rem;
}

.write-comments-footer__btns {

  display: flex;
  align-items: center;
  column-gap: 20rem;
  margin-right: 14rem;
}

.write-comments-footer__rules-link::after {
  content: "";
  display: inline-block;
  flex: 0 0 18rem;
  height: 18rem;
  background-image: url(../../templates/images/icons/clipboard.svg);
}

.comments__container {
  border-radius: 0 0 var(--radiusMain) var(--radiusMain);
  margin-top: 15rem;
}

.no-comments {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 10rem;
  border-radius: var(--radiusMain);
  margin-bottom: 15rem;
  height: 300rem;
  padding: 18rem;
}

.no-comments__text {
  text-align: center;
  text-transform: uppercase;
  color: var(--colorFwoolf);
  font-size: var(--fontSize-XLarge-small);
  font-weight: 600;
  font-family: "Oswald", sans-serif;
}

.no-comments__subtext {
  text-align: center;
  font-size: var(--fontSize-middle);
  color: var(--colorGalk);
}

.comments-list {
  padding: 0;
  margin-bottom: 10rem;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.comments-list.comment-highlight {
  box-shadow: 0 0 0 2rem var(--accent), 0 0 20rem rgba(224, 175, 76, 0.15);
  border-radius: var(--radiusMain);
}

.comments-list.comment-highlight .comments-list_block {
  background-color: transparent;
}

.comments-list_block {
  padding: 14rem 16rem 12rem 14rem;
  background-color: #1f1c1a;
  border-radius: var(--radiusMain);
}

.comments-list__top {

  display: flex;
  align-items: center;
  column-gap: 18rem;
}

.comments-list__user {
  flex: 1 1 auto;

  display: flex;
  column-gap: 12rem;
  align-items: center;
}

.comments-list__icon {
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  object-fit: cover;
}

.comments-list__block {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}

.comments-list__name {
  font-size: var(--fontSize-middle-lite);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}

.comments-list__date {
  color: var(--colorFwoolf-black);
  font-size: var(--fontSize-XSmall-medium);
}

.comments-list__cont {
  display: flex;
  align-items: center;
  column-gap: 18rem;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 16rem;
  padding-top: 26rem;
}

.comments-list__box {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
}

.comments-list__btn {

  display: flex;
  column-gap: 5rem;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-default);
  cursor: pointer;
}

.comments-list__box .comments-list__btn {
  z-index: 2;
}

.comments-list__box .comments-list__btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  background-color: var(--bgColorMainGreySub);
  width: 150%;
  border-radius: 100%;
  height: 150%;
  transition: all 0.2s ease;
  z-index: 2;
}

.comments-list__icon-like {
  width: 24rem;
  height: 24rem;
  animation: beat 2s infinite;
  z-index: 10;
}

.comments-list__wrapper {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.2s ease;
  padding: 4rem 8rem 4rem 10rem;
  border-radius: 50rem 0 0 50rem;
  background-color: var(--background-main);
  z-index: 1;
}

.comments-list__box:hover .comments-list__wrapper {
  padding-right: 28rem;
  opacity: 1;
  visibility: visible;
}

.comments-list__actions {
  display: flex;
  align-items: center;
  column-gap: 5rem;
}

.comments-list__action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30rem;
}

.comments-list__action>button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColorMainGreySub);
  min-width: 26rem;
  padding: 0 4rem;
  height: 100%;
  border-radius: var(--radiusMain) 0 0 var(--radiusMain);
  transition: all 0.1s ease;
}

.comments-list__box .comments-list__action>button {
  background-color: transparent;
}

.comments-list__action>button>i {
  width: 24rem;
  height: 24rem;
  flex: 0 0 24rem;
}

.comments-list__action>span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fontSize-small);
  color: var(--colorFwoolf);
  background-color: var(--background-main);
  text-align: center;
  min-width: 25rem;
  height: 100%;
  padding: 0 4rem;
  border-radius: 0 var(--radiusMain) var(--radiusMain) 0;
}

.comments-list__body {
  margin: 12rem 0 0 46rem;
}

.comments-list__text {
  line-height: 142.857143%;
  color: var(--colorGalk);
}

.comments-list__text:not(:last-child) {
  margin-bottom: 10rem;
}

.question-wrapper {
  background-color: var(--background-ads);
  border-radius: var(--radiusMain);
  overflow: hidden;
  width: 400rem;
  margin: 20rem 0 10rem 0;
  box-shadow: 0px 5rem 8rem -8rem var(--colorDark);
}

.question-container {
  padding: 18rem 0 14rem 0;
  margin: 0 auto;
  width: fit-content;
}

.question-wrapper.mobile {
  display: none;
}

.comments-list__cont::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 94%;
  height: 9rem;
  background-image: url(../../templates/images/icons/vectorpaint.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
}

.question-title {
  font-size: var(--fontSize-XLarge);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30rem;
}

.question-btns {
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 30rem;
  display: flex;
  gap: 20rem;
}

.question-btn {
  padding: 10rem 30rem;
  border-radius: 50rem;
  border: 1rem solid hsla(36, 49%, 90%, 0.2);
  font-size: var(--fontSize-middle);
  color: var(--accent);
  transition: all var(--transition-default);
}

.question-btn:hover {
  background-color: var(--accent);
  color: var(--colorBlack);
}

.question-count-answer {
  text-align: center;
}

.question-auth-hint {
  color: var(--colorFwoolf-black);
  font-size: 13rem;
  text-align: center;
}

.question-auth-hint a {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}

.question-auth-hint a:hover {
  text-decoration: underline;
}

.question-like {
  color: var(--accent);
}

.content-feadback {
  width: 100%;
  height: auto;
  margin-bottom: 16rem;
  margin-top: 40rem;
  z-index: 1;
}

.feadback-container {
  margin: 0 auto;
  top: 0 !important;
  padding: 0 40rem;
  display: flex;
  background-color: var(--background-ads);
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  border-radius: var(--radiusMain);
  height: 300rem;
}

.feadback-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.content-feadback-title {
  margin-bottom: 12rem;
  font-size: 30rem;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}

.content-feadback-text {
  font-size: var(--fontSize-medium);
  color: var(--colorFwoolf);
  margin-bottom: 20rem;
}

.content-feadback-btn {
  padding-right: 23rem;
  background-color: var(--colorFwoolf);
  font-size: var(--fontSize-middle);
  line-height: 1;
  border-radius: 4rem;
  display: flex;
  align-items: center;
  gap: 20rem;
  overflow: hidden;
  color: var(--colorBlack);
}

.feadback-wrapper-icon {
  width: 40rem;
  height: 40rem;
  background-color: var(--accent);
  z-index: 3;
}

.feadback-btn-icon {
  width: 40rem;
  height: 40rem;
  background-image: url("../../templates/images/icons/radiation-black.svg");
  background-repeat: no-repeat;
  background-size: 20rem 20rem;
  background-position: center;
  object-fit: cover;
  z-index: 3;
  animation: lds-eclipse 6s linear infinite;
}

.content-feadback-btn>span {
  color: inherit;
  font-size: var(--fontSize-middle);
  line-height: 1;
  font-weight: 500;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.feadback-btn-animat {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--accent);
  border-radius: 0 3rem 3rem 0;
  height: 100%;
  width: 0;
  margin-left: 39rem;
  z-index: 1;
  transition: all 0.3s ease;
}

.feadback-btn-animat::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
  transition: var(--transition-default);
}

.content-feadback-btn:hover {
  color: var(--colorBlack);
}

.content-feadback-btn:hover>.feadback-btn-animat {
  width: calc(100% - 39rem);
}

.content-feadback-btn:hover>.feadback-btn-animat::after {
  border: none;
}

.feadback-right {
  text-align: right;
  width: 50%;
  right: 0;
  left: 60rem;
  flex: 1;
  height: 120%;
  background-color: transparent;
}

.content-feadback-image {
  height: 100%;
  max-width: none;
}

.content-next-articles {
  width: 100%;
  padding-bottom: 40rem;
  padding-top: 10rem;
}

.left-main__comments {
  width: 100%;
  border-top: 1rem solid hsla(36, 49%, 90%, 0.2);
  padding-top: 16rem;
}

.content-next-articles-list {
  display: grid;
  grid-template-columns: 1fr 0.6fr 0.6fr;
}

.next-articles {
  padding: 10rem;
  display: flex;
  gap: 20rem;
  color: var(--colorMain);
  background-color: var(--background-ads);
  border-radius: var(--radiusMain);
  height: 200rem;
  flex-direction: column;
}

.next-articles-image {
  transform: scale(1);
  transition: transform var(--transition-cubick);
  object-fit: cover;
  height: -webkit-fill-available;
  width: 100%;
}

.next-articles-info {
  position: absolute;
  bottom: 12rem;
  left: 18rem;
  width: -webkit-fill-available;
  padding: 6rem 0;
}

.next-articles-date {
  display: block;
  font-weight: 300;
  font-family: "Oswald", sans-serif;
  font-size: var(--fontSize-small-medium);
  color: var(--colorFwoolf-black);
  line-height: 1;
}

.next-articles-title {
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  margin-bottom: 6rem;
  line-height: var(--lineHeight-default);
}

.next-articles-more {
  position: absolute;
  bottom: 6rem;
  right: 20rem;
  font-size: var(--fontSize-middle-lite);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: var(--colorFwoolf-black);
  transition: color var(--transition-cubick);
}

.next-articles-wrapper-image {
  transition: transform var(--transition-cubick);
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: var(--radiusMain);
  border-top-right-radius: var(--radiusMain);
}

._small .feadback-right {
  display: none;
}

.next-articles-gradient {
  width: 100%;
  height: 100%;
  transform: translateY(1rem);
  position: absolute;
  top: 0;
  background: linear-gradient(360deg,
      var(--bgColorMainAsideTitle) 10%,
      transparent);
  transition: transform var(--transition-cubick);
}

.next-articles:hover .next-articles-more {
  color: var(--accent);
}

._small .content-next-articles-list {
  grid-template-columns: 1fr 0.6fr;
}

._small .next-articles:first-child {
  display: none;
}

.random-qoute-game {
  padding: 16rem;
  margin-right: 30rem;
  background-color: var(--background-ads);
  border-radius: var(--radiusMain);
  order: -1;
}

.random-qoute-title {
  text-align: left;
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  margin-bottom: 21rem;
  padding-left: 60rem;
  text-transform: uppercase;
  color: var(--accent);
}

.random-qoute-text {
  font-size: var(--fontSize-middle-lite);
  line-height: var(--lineHeight-default);
  padding-left: 6rem;
  color: var(--colorFwoolf);
  margin: 0;
}

.random-qoute-game::before {
  content: "";
  position: absolute;
  background-image: url(../../templates/images/icons/mark.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 40rem;
  width: 40rem;
  top: 14%;
  left: 20rem;
  transform: translateY(-50%);
}

.write-comments-footer__rules-link.mobile {
  display: none;
}

.modal-put-burger {
  z-index: 99;
  transform: scale(1);
}

.modal-put-burger>.modal__overlay {
  display: block;
}

.modal-put-container {
  padding-top: 90rem;
}

.put-arrow {
  width: 80rem;
  height: 80rem;
  background-image: url("../../templates/images/icons/arrow_mobile.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50rem;
  right: 8rem;
  transform: rotate(312deg) rotateX(180deg);
}

.put-text {
  font-family: "Oswald", sans-serif;
  font-size: var(--fontSize-XLarge-medium);
  color: var(--accent);
  background-color: transparent;
  text-align: right;
  padding-right: 108rem;
  text-transform: uppercase;
  font-weight: 500;
}

.put-subText {
  color: var(--colorFwoolf);
  text-align: center;
  padding: 20rem 10rem;
  font-size: var(--fontSize-medium);
  display: block;
  max-width: 400rem;
  width: 100%;
  margin: 0 auto;
}

.modal-put-container .main-btn-radian {
  margin: 0 auto;
}

.burger::after {
  border-radius: 100%;
  left: 0;
  top: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2rem solid transparent;
}

@media (max-width: 1520rem) {
  .home__radiation {
    right: 40rem;
  }

  .home__hero {
    right: 128rem;
  }
}

@media (min-width: 1151px) {
  .shtp-modal {
    max-width: 1168rem;
  }

  .shtp-modal-header {
    padding: 0rem 40rem;
    margin: 40rem 0rem 20rem 0rem;
  }

  .shtp-modal-container {
    padding: 0rem 40rem;
    max-height: calc(100vh - 440rem);
  }

  .shtp-modal-footer {
    padding: 25rem 40rem;
    font-size: var(--fontSize-large);
  }

  .shtp-modal-header>h3 {
    font-size: var(--fontSize-XLarge);
  }

  .shtp-modal-container p {
    font-size: var(--fontSize-middle);
  }

  .shtp-modal-container h4 {
    font-size: var(--fontSize-XLarge-small);
  }
}

@media (max-width: 1150px) {
  .container {
    padding: 0 6rem;
  }

  .tools-sub {
    bottom: 30rem;
    right: 30rem;
  }

  .home {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .home__objectLayer {

    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .home__radiation {
    top: 35%;
    left: 50%;
    height: 900rem;
    width: 900rem;
    margin-bottom: 250rem;
    transform: translate(-50%, -50%) !important;
  }

  .home__hero {
    top: 42%;
    left: 50%;
    width: 580rem;
    height: 821rem;
    transform: translate(-50%, -50%) !important;
  }

  .home__hero .home__icons {
    display: none;
  }

  .home-content {
    margin: auto;
  }

  .home-container {
    margin: auto;
    margin-top: 380rem;
  }

  .home__title::before {
    display: block;
    max-width: 531rem;
    width: 100%;
  }

  .home__title {
    text-align: center;
    padding-bottom: 24rem;
  }

  .home__logo {
    margin: 0 auto;
    margin-top: 22rem;
    padding: 0 8rem;
  }

  .home__logo>img {
    max-width: 600rem;
    width: 100%;
    height: auto;
  }

  .home__btns {
    flex-direction: row;
    margin: 24rem auto;
  }

  .nav-home {
    padding-top: 10rem;
    width: 100%;
    position: fixed;
    background: linear-gradient(180deg,
        var(--background-main),
        var(--background-main) 25.27%,
        rgba(33, 30, 28, 0.8) 67.5%,
        rgba(33, 30, 28, 0.7) 76.4%,
        rgba(33, 30, 28, 0.6) 81.85%,
        rgba(33, 30, 28, 0.5) 85.08%,
        rgba(33, 30, 28, 0.4) 88.53%,
        rgba(33, 30, 28, 0.3) 91.55%,
        rgba(33, 30, 28, 0.2) 94.14%,
        rgba(33, 30, 28, 0.1) 97.37%,
        rgba(33, 30, 28, 0));
  }

  .nav-container {
    justify-content: flex-end;
  }

  .burger {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 36rem;
    height: 36rem;
    cursor: pointer;
    margin: 10rem;
  }

  .home__info {
    padding: 0;
  }

  .socials-list {
    margin: 16rem auto;
    gap: 24rem;
    justify-content: center;
    align-items: center;
    padding: 8rem 35rem 8rem 35rem;
  }

  .show-on1150 {
    display: flex;
  }

  .home-right {
    display: none;
  }

  .mobile-donate {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .donate-mobile {
    display: inline-block;
    width: 30rem;
    height: 30rem;
    background-image: url("../../templates/images/icons/help_ukraine.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--transition-default);
  }

  .navbar {
    display: none;
  }

  .navbar__dropmenu-content {
    max-height: 100%;
    overflow-y: hidden;
  }

  .nav_socials {
    display: flex;
    justify-content: space-around;
    margin-top: 16rem;
    margin-bottom: 16rem;
  }

  .nav-socials-mobile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .main_s-socials {
    margin-top: 0;
  }

  .main_s-social__join {
    margin-top: 0;
  }

  .swiper-trailler__cont .icon-mouse-cont {
    display: none;
  }

  .trailer-content {
    display: block;
    max-height: initial;
    height: auto;
  }

  #videoblock {
    height: 530rem;
    align-items: center;
  }

  .swiper-trailler__cont {
    padding: 0;
    width: 100%;
    margin-top: 15rem;
  }

  .swiper-trailler {
    width: 100%;
    overflow-x: auto;
  }

  .swiper-trailler::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .swiper-wrapper {

    display: flex;
    align-items: center;
  }

  .main__container {
    padding: 0;
    max-width: 100%;
    width: 100%;
  }

  .main__content {
    display: block;
  }

  .main__background-image {
    height: 460rem;
  }

  button#mainContainerBtn {
    display: none;
  }

  .left-main__title {
    margin: 0;
  }

  .left-main__top {
    width: 100svw;
    padding: 10rem 15rem;
    background: linear-gradient(180deg,
        var(--background-main) 6.27%,
        rgba(33, 30, 28, 0.8) 63.5%,
        rgba(33, 30, 28, 0.7) 76.4%,
        rgba(33, 30, 28, 0.6) 81.85%,
        rgba(33, 30, 28, 0.5) 85.08%,
        rgba(33, 30, 28, 0.4) 88.53%,
        rgba(33, 30, 28, 0.3) 91.55%,
        rgba(33, 30, 28, 0.2) 94.14%,
        rgba(33, 30, 28, 0.1) 96.37%,
        rgba(33, 30, 28, 0));
    box-shadow: none;
    z-index: 999;
    justify-content: end;
  }

  .next-articles {
    height: 184rem;
  }

  .content-next-articles-list {
    grid-template-columns: 1fr 1fr;
    row-gap: 18rem;
  }

  .spoiler-down {
    margin-top: 285rem;
  }

  .feadback-container {
    height: 240rem;
  }

  .random-qoute-game::before {
    top: 14%;
  }

  .nav-container {
    margin-right: 9rem;
  }

  .home__statistic-wrapper {
    display: none;
    margin-bottom: 10rem;
    margin-top: 0;
  }

  .left-main>div {
    padding-top: 0;
  }

  .hideAside .aside-main__text {
    color: var(--colorGalk);
  }

  .content-feadback {
    float: left;
    margin-top: 20rem;
  }

  .content-next-articles {
    float: left;
  }

  .random-qoute-game {
    order: 1;
    width: 100%;
    margin-right: 0;
    grid-column: 1 / 3;
  }

  .random-qoute-game::before {
    top: 24rem;
  }

  .feadback-right {
    display: none;
  }

  .tools-bookmark-des {
    border-radius: 0;
    top: 0;
    right: 170rem;
    padding-top: 26rem;
  }

  .tools-bookmark-des::before {
    content: none;
  }
}

@media (min-width: 1151px) {
  .app__sidebar {
    transform: translateX(-100%);
  }
}

@media (max-width: 1024px) {
  .home-content {
    padding-bottom: 20rem;
  }
}

@media (max-width: 993px) {
  .left-main__top {
    margin: -24rem -15rem 10rem -15rem;
    box-shadow: none;
  }

  .aside-main__image.desktop {
    display: block;
  }

  .feadback-container {
    padding: 0 20rem;
    padding-right: 18rem;
    justify-content: flex-end;
  }
}

@media (max-width: 992px) {
  .left-main__hint {
    margin: 36rem 0 12rem 0;
  }

  .left-main {
    padding: 15rem;
  }

  .question-wrapper {
    width: 100%;
  }

  .bg_gradient_wrapper_main__left {
    padding: 0;
  }

  .aside-main {
    float: none;
    margin: 18rem 0;
    min-width: 100%;
  }

  .aside-main__body {
    display: flex;
    gap: 16rem;
    width: 100%;
    margin-inline: auto;
  }

  .interesting_facts .aside-main__body {
    background-color: var(--background-ads);
    padding: 10rem 0;
  }

  .hideAside .aside-main__body {
    background-color: var(--background-ads);
    padding: 10rem 0;
  }

  .aside-main__image {
    flex: 0 0 auto;
    margin: 0;
    width: clamp(200rem, 60%, 376rem);
    background-position: left top;
  }

  .aside-main__info {
    flex: 1 1 auto;
  }

  .top-title .aside-main__subtitle {
    display: none;
  }

  .top-title .aside-main__image.desktop {
    margin-top: 0;
  }

  .aside-main__subtitle-mobile {
    display: block;
    margin-bottom: 0;
  }

  .material-main {
    position: relative;
    display: block;
    margin: 12rem 0;
  }

  .spoiler-down {
    margin-top: 0;
    width: 100%;
  }

  .feadback-right {
    display: block;
  }

  .random-qoute-game::before {
    top: 24rem;
  }

  .content-next-articles {
    float: none;
    width: 100%;
  }

  .content-next-articles-list {
    grid-template-columns: 1fr 1fr;
    row-gap: 18rem;
  }

  .interesting_facts-wrapper {
    display: none;
  }

  .aside-main.interesting_facts {
    position: relative;
    top: auto;
    margin-top: 0;
  }

  .hideAside .aside-main__text {
    color: var(--colorGalk);
  }

  .aside-main.question {
    display: none;
  }

  .question-wrapper.mobile {
    display: block;
  }

  .content-feadback {
    float: none;
    margin-top: 40rem;
    width: 100%;
  }

  section[id*="Section-"] {
    width: 100%;
  }

  .article-content {
    width: 100%;
  }

  .left-main__comments {
    width: 100%;
  }
}

@media (max-width: 991px) {

  .comments-main-title,
  .write-comments,
  .comments__container {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 950px) {
  .left-main__mobile .tools-main__btn {
    box-shadow: none;
  }

  .left-main__mobile {
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    column-gap: 6rem;
  }

  .left-main__list {
    display: none;
  }

  .content-feadback-title {
    font-size: var(--fontSize-XLarge);
  }

  .content-feadback-text {
    font-size: var(--fontSize-middle-lite);
    line-height: 1.2;
  }

  .feadback-right {
    width: auto;
  }
}

@media (max-width: 800px) {
  .feadback-container {
    height: 200rem;
  }
}

@media (max-width: 768px) {
  .sidebar-role-badge[data-tooltip] {
    cursor: default;
  }

  .sidebar-role-badge[data-tooltip]::before,
  .sidebar-role-badge[data-tooltip]::after,
  .sidebar-role-badge[data-tooltip]:hover::before,
  .sidebar-role-badge[data-tooltip]:hover::after {
    display: none !important;
  }

  .modal__content {
    padding: 0 20rem;
    flex-direction: column;
  }

  .main-title {
    margin: 12rem 0;
  }

  .modal .main-title {
    font-size: 16rem;
    padding: 15rem;
  }

  .left-main__hint_wrapper {
    display: block;
  }

  .modal__title {
    font-size: var(--fontSize-XLarge);
    text-align: center;
  }

  .shtp-modal {
    max-width: 500rem;
    background-color: transparent;
  }

  .donate-overlay {
    background-color: #000000bf;
  }

  .shtp-modal-container {
    max-height: calc(100vh - 280rem);
  }

  .material-main__top {
    min-width: auto;
    width: 100%;
  }

  .left-main__hint__icon-box {
    float: left;
  }

  .content-feadback-title {
    margin-bottom: 12rem;
    font-size: var(--fontSize-large);
  }

  .content-feadback-text {
    font-size: var(--fontSize-middle);
    margin-bottom: 10rem;
    line-height: 1.75;
  }

  .content-feadback-btn,
  .content-feadback-btn>span {
    font-size: var(--fontSize-default);
  }

  .random-qoute-game {
    margin-left: 0;
  }

  .random-qoute-game::before {
    top: 26rem;
  }

  .search-line {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .write-comments-footer__rules-text {
    display: none;
  }

  .no-comments {
    height: 200rem;
  }

  .no-comments__text {
    font-size: var(--fontSize-large);
  }

  .no-comments__subtext {
    font-size: var(--fontSize-default);
  }

  .comments-list {
    padding: 18rem 0;
  }

  .comments-list__user {
    column-gap: 5rem;
  }

  .comments-list__date {
    font-size: var(--fontSize-small);
  }

  .comments-list__body {
    margin-left: 0;
  }

  .write-comments-footer__rules-link.mobile {
    display: flex;
  }
}

@media (max-width: 678px) {
  .feadback-right {
    height: 75%;
  }
}

@media (max-width: 650px) {
  .streams-content {
    flex-direction: column;
    max-height: 90vh;
    padding: 10rem;
    gap: 10rem;
    border-radius: 8rem;
  }

  .streams-player {
    min-height: 200rem;
    max-height: 35vh;
    flex: none;
  }

  .streams-player iframe {
    width: 100% !important;
    height: 100% !important;
  }

  .streams-player-empty {
    padding: 20rem;
  }

  .streams-player-empty-icon svg {
    width: 40rem;
    height: 40rem;
  }

  .streams-player-empty-title {
    font-size: 15rem;
  }

  .streams-player-empty-text {
    font-size: 12rem;
  }

  .streams-close-btn {
    display: block;
  }

  .streams-sidebar {
    width: 100%;
    flex: 1;
    max-height: none;
    overflow-y: auto;
  }

  .streams-player-info {
    display: none !important;
  }

  .stream-ch {
    padding: 8rem;
  }

  .hideAside .aside-main__image {
    width: 100%;
    height: 100%;
  }

  .top-title .aside-main__subtitle {
    position: relative;
    left: 0;
    top: 0;
  }

  .aside-main__body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hideAside .aside-main__text {
    color: var(--colorFwoolf);
  }

  .material-main.mobile {
    display: block;
  }

  .material-main:not(.mobile) {
    display: none;
  }

  .main .tools-cat .material-main {
    display: block;
  }

  .left-main__hint.mobile {
    display: flex;
  }

  .left-main__hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .search {
    padding: 50rem 20rem 50rem 20rem;
  }

  .account {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }

  .account__top {
    background: none;
    min-height: 130rem;
  }

  .account__top::after {
    display: none;
  }

  .account__text {
    padding: 50rem 0;
  }

  .modal__subtitle {
    display: none;
  }

  .mobile__wrap {

    display: flex;
    justify-content: center;
    margin-top: 40rem;
    column-gap: 5rem;
  }

  .mobile__sign-in {
    font-weight: 700;
    font-size: var(--fontSize-middle);
    line-height: var(--lineHeight-default);
    color: var(--accent);
    padding: 0 25rem;
    position: relative;
  }

  .mobile__sign-in::before {
    content: "";
    position: absolute;
    bottom: -2rem;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: var(--accent);
  }

  .account__icon {
    display: none;
  }

  .account__bottom {
    background: none;
  }

  .account__wrap {
    display: block;
    margin: 0 auto;
    padding-top: 0;
    padding: 0 10rem;
  }

  .register__sign,
  .account__sign {
    width: 75%;
    margin: 0 auto;
  }

  .mobiles-none {
    display: none;
  }

  .form__reg .label,
  .input__box .label {
    background: transparent;
    color: var(--colorFwoolf);
    left: 5rem;
    top: 0;
  }

  .form__reg input:not(.custom_checkbox),
  .input__box input {
    border-image: none;
    border-width: 0;
    border-radius: var(--radiusMain);
    color: var(--colorFwoolf);
    border-bottom: 1rem solid var(--colorFwoolf);
  }

  .input__box input::-webkit-input-placeholder,
  .form__reg input::-webkit-input-placeholder {
    color: var(--colorGreyMain);
  }

  .input__box input::-moz-placeholder,
  .form__reg input::-moz-placeholder {
    color: var(--colorGreyMain);
  }

  .input__box input:-ms-input-placeholder,
  .form__reg input:-ms-input-placeholder {
    color: var(--colorGreyMain);
  }

  .input__box input::-ms-input-placeholder,
  .form__reg input::-ms-input-placeholder {
    color: var(--colorGreyMain);
  }

  .input__box input::placeholder,
  .form__reg input::placeholder {
    color: var(--colorGreyMain);
  }

  .mobile__register {
    font-weight: 600;
    font-size: var(--fontSize-middle);
    padding: 0 20rem;
    line-height: var(--lineHeight-default);
    color: var(--colorTelegray);
    position: relative;
  }

  .mobile__register::before {
    content: "";
    position: absolute;
    bottom: -2rem;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: var(--colorTelegray);
  }

  .congr__btn .main-btn-radian.dark,
  .account__btn .main-btn-radian.dark {
    background-color: var(--colorFwoolf);
    color: var(--colorBlack);
  }

  .congr__btn .dark.main-btn-radian::after,
  .account__btn .dark.main-btn-radian::after {
    background-image: url("../../templates/images/icons/btn-after-secondary.svg");
  }

  .congr__btn .dark.main-btn-radian::before,
  .account__btn .dark.main-btn-radian::before {
    background-image: url("../../templates/images/icons/btn-before-secondary.svg");
  }

  .congr__btn .dark>.icon-radian-btn,
  .account__btn .dark>.icon-radian-btn {
    background-image: url("../../templates/images/icons/radiation-black.svg");
  }

  .show-pass {
    filter: invert(0.8);
  }

  .active {
    color: var(--accent);
  }

  .active::before {
    background-color: var(--accent);
  }

  .no-active {
    color: var(--colorTelegray);
  }

  .no-active::before {
    background-color: var(--colorFwoolf);
  }

  .form__reg-email-info {
    color: var(--colorFwoolf);
  }

  .reg__progress {
    border-image: none;
    border-width: 0;
  }

  .checkbox__policy-wrapper>input {
    border-image: url("../../templates/images/icons/input.svg") 2 2 stretch;
  }

  .checkbox__policy-wrapper>input::after {
    background: var(--colorFwoolf);
  }

  .congr__text {
    padding: 10rem;
  }

  .forgotPassword-subtitle {
    margin-top: 10rem;
  }

  .forgotPassword-wrap {
    padding-top: 0;
  }

  .showMessage {
    width: auto;
  }

  .congr {
    max-width: 100%;
    width: 100%;
  }

  .congr__top {
    background: none;
  }

  .congr__subtitle {
    display: none;
  }

  .congr__icon {
    display: none;
  }

  .congr__bottom {
    background: none;
  }

  .congr-bottom__text {
    color: var(--colorGalk);
  }

  #videoblock {
    height: 300rem;
  }

  .swiper__trailer-img {
    width: 130rem;
    height: 75rem;
  }

  .content-next-articles-list {
    grid-template-columns: 1fr;
  }

  .next-articles:nth-child(2) {
    display: none;
  }
}

@media (max-width: 600px) {
  .tools-main__btn.left-spoiler {
    display: none;
  }

  .more-dropmenu__item.mobile-btn {
    display: block;
  }
}

@media (max-width: 565px) {
  .home__radiation {
    height: 700rem;
    width: 700rem;
    top: 29%;
  }

  .home__hero {
    width: 454rem;
    height: 642rem;
    top: 33%;
  }

  .home__info {
    font-size: var(--fontSize-middle-lite);
    line-height: 154.545455%;
  }

  .socials-list {
    gap: 8rem;
    padding: 0;
    margin: 16rem -16rem;
  }

  .bottom-cookie__inner {
    gap: 0;
  }
}

@media (max-width: 530px) {
  .shtp-modal {
    max-height: 100%;
  }

  .shtp-modal-header {
    padding: 0rem 15rem;
  }

  .shtp-modal-container {
    padding: 0rem 15rem;
  }

  .shtp-modal-footer {
    padding: 25rem 15rem;
  }

  .feadback-right {
    display: none;
  }

  .feadback-container {
    padding: 20rem 10rem;
    text-align: center;
    justify-content: center;
    height: auto;
  }

  .feadback-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 500px) {
  .server__description {
    justify-content: center;
  }

  .server__rating {
    flex: 0 0 auto;
    width: 100%;
  }

  .server__links {
    justify-content: center;
  }

  .home-container {
    margin-top: calc(200rem - 25vw + 160rem);
  }

  .home_btns-trailer {
    position: absolute;
    top: 13rem;
    transform: translateX(-56%) scale(1.7);
    left: 50%;
  }

  .home__btns {
    padding-top: clamp(170rem, 100%, 170rem);
  }

  .actios-left-main__menu {
    margin-left: 0;
  }

  .tools-main__btn {
    width: 32rem;
    height: 32rem;
    flex: 0 0 32rem;
  }

  .content-feadback-image {
    width: 55%;
  }

  .content-feadback-btn,
  .content-feadback-btn>span {
    font-size: var(--fontSize-small-medium);
  }
}

@media (max-width: 480px) {
  .left-main {
    padding: 24rem 15rem;
  }

  .aside-main__image {
    display: none;
  }
}

@media (max-width: 475px) {
  .comments__container {
    padding: 0;
  }
}

@media (max-width: 450px) {
  .showMessage-container {
    width: 280rem;
  }
}

@media (max-width: 430px) {
  .home-container {
    margin-top: calc(200rem - 25vw + 270px);
  }

  .home-btn-group {
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 430px) {

  button#server__like>.s2w-icon,
  button#server__dislike>.s2w-icon {
    transition: all 0.2s linear;
  }

  button#server__like:hover>.s2w-icon,
  button#server__dislike:hover>.s2w-icon {
    transform: scale(1.45);
  }
}

@media (max-width: 430px) {
  .unit-modal .modal__title {
    padding: 6rem 50rem 6rem 15rem;
    font-size: var(--fontSize-middle-lite);
  }

  .mobile__sign-in,
  .mobile__register {
    padding: 0 4rem;
  }

  .rating__likes {
    width: 100%;
  }

  .rating__likes button {
    flex: 1 1 auto;
    flex-direction: row;
    padding: 12rem;
  }

  .home-btn-dropmenu {
    top: auto;
    bottom: 40rem;
    border-top-right-radius: var(--radiusMain);
    border-top-left-radius: var(--radiusMain);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 0 #0000, 0 0 #0000, inset 0px -20rem 20rem 0rem #00000040;
  }

  .sidebar .home__info-title {
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: var(--fontSize-middle);
  }

  .sidebar .home__info-card__desc {
    font-size: var(--fontSize-small-medium);
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .next-articles {
    height: 184rem;
    flex-direction: column;
    justify-content: normal;
  }

  .next-articles-image {
    height: -webkit-fill-available;
    width: 100%;
  }

  .next-articles-wrapper-image {
    transition: transform var(--transition-cubick);
    height: 100%;
    width: 100%;
  }

  .next-articles-gradient {
    width: 100%;
    height: 100%;
    transform: translateY(1rem);
    position: absolute;
    top: 0;
    background: linear-gradient(360deg, black 10%, transparent);
  }

  .next-articles-info {
    position: absolute;
    bottom: 12rem;
    left: 18rem;
  }

  .next-articles:hover .next-articles-gradient,
  .next-articles:hover .next-articles-wrapper-image {
    transform: scale(1.04);
  }

  .buttons {
    display: flex;
    flex-direction: column;
    gap: 12rem;
    align-items: center;
  }

  .tools-sub .tools-main__btn {
    width: 48rem;
    height: 48rem;
  }

  .tools-sub .tools-main__btn>i {
    width: 24rem;
    height: 24rem;
  }

  .write-comments-footer__btns {
    display: flex;
    flex-direction: column;
    gap: 12rem;
    align-items: center;
    margin-right: 0;
    margin-top: 12rem;
  }

  .write-comments-footer {
    flex-direction: column;
  }

  .home__hero {
    top: 37%;
  }

  .home__radiation {
    top: 36%;
  }

  .home__logo {
    margin-top: 14rem;
    margin-bottom: calc(360rem - 25vw + 40rem);
    width: 100%;
  }

  .home-container {
    margin-top: calc(80rem - 25vw + 100rem);
  }

  .home__title {
    padding-bottom: 14rem;
  }

  .home__title::before {
    width: 87%;
  }

  .modal-search-title {
    font-size: var(--fontSize-XLarge-medium);
  }

  .modal-search-btn {
    display: none;
  }

  .modal-search-wrapper::after {
    content: "";
    position: absolute;
    top: 2rem;
    right: 0;
    margin: 15rem;
    background-image: url("../../templates/images/icons/search.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 20rem;
    height: 20rem;
    z-index: 1;
    cursor: pointer;
  }

  .search-input {
    padding-right: 48rem;
  }

  .register__sign,
  .account__sign {
    width: 100%;
  }

  .profile-id-wrapper {
    display: none;
  }

  .img__main-profile {
    width: 56rem;
    height: 56rem;
    flex: 0 0 56rem;
  }

  #videoblock {
    height: 230rem;
  }

  .main .tools-cat .material-main_open {
    left: 0;
  }

  .main .tools-cat .material-main {
    left: 0;
  }

  .left-main__top i {
    width: 18rem;
    height: 18rem;
  }

  .language-main {
    padding: 4rem 6rem;
  }

  .language-opened>.language-main-dropmenu {
    padding: 12rem;
    right: -86rem;
  }

  .language-main-dropmenu::before {
    right: 110rem;
  }

  .mainwiki .language-main-dropmenu::before {
    right: 140rem;
  }

  .comments-list__cont {
    display: none;
  }
}

@media (max-width: 420px) {
  .burger {
    margin: 0;
  }

  .put-arrow {
    right: -2rem;
    top: 40rem;
  }

  .modal-put-container {
    padding-top: 88rem;
  }
}

@media (max-width: 400px) {
  .socials-list li {
    transform: scale(0.7);
  }

  .app__sidebar {
    width: 100%;
    padding: 0 0;
  }

  .sidebar .server-top__title>span {
    max-width: calc(220px + 100vw - 406px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .main-profile__right {
    bottom: auto;
    position: relative;
    right: auto;
  }

  .put-text {
    font-size: var(--fontSize-large);
    padding-top: 0;
    padding-right: 96rem;
  }
}

@media (max-width: 375px) {
  .main-profile__right {
    column-gap: 14rem;
    margin-inline: auto;
  }

  .img__main-profile-set,
  .main-profile__exit {
    height: 24rem;
    width: 24rem;
  }

  .img__main-profile-bookmark {
    margin-left: 0;
  }

  .modal__content {
    padding: 10rem;
  }

  .mainwiki .language-opened>.language-main-dropmenu {
    padding: 14rem;
    right: -114rem;
  }

  .sidebar .home__info-card {
    padding-left: 2rem;
    padding-right: 2rem;
    min-height: 50rem;
  }

  .sidebar .notification {
    top: -15rem;
  }

  .home__radiation {
    top: 33%;
  }

  .home__hero {
    top: 34%;
  }

  .home-container {
    margin-top: calc(52rem - 25vw + 100rem);
  }

  .home__logo {
    margin-bottom: calc(360rem - 25vw + 20rem);
  }

  #videoblock {
    height: 200rem;
  }

  .put-text {
    font-size: var(--fontSize-middle);
  }

  .put-subText {
    color: var(--colorFwoolf);
    text-align: center;
    padding: 10rem 10rem 20rem 10rem;
    font-size: var(--fontSize-middle);
  }
}

@media (max-width: 345px) {
  .account__text {
    padding-bottom: 10rem;
  }

  .account__wrap {
    padding-top: 20rem;
  }
}

@media (max-width: 320px) {
  .main-profile__right {
    column-gap: 10rem;
    margin-inline: auto;
  }

  .question-title {
    font-size: var(--fontSize-large);
  }

  .home__radiation {
    top: 33%;
  }

  .home__hero {
    top: 34%;
  }

  .home__logo {
    margin-bottom: calc(360rem - 25vw + 140px);
  }

  .swiper-trailler__cont {
    display: none;
  }

  .random-qoute-title {
    font-size: var(--fontSize-middle-lite);
  }
}

@media (any-hover: hover) {
  .main_s-social__link:hover {
    transform: scale(1.1);
  }

  .small-box-btn>button:hover span {
    color: var(--accent);
  }

  .share-modal__link:hover {
    background-color: var(--colorFwoolf-border);
  }

  .share-modal__link:hover>.s2w-icon {
    transform: scale(0.8);
  }

  .main-spoiler .main-spoiler__child {
    display: inline-block !important;
    position: absolute;
    left: 100%;
    background-color: var(--bgColorMainBlack);
    color: var(--colorFwoolf);
    font-weight: 500;
    padding: 5rem 10rem;
    line-height: 1;
    font-size: var(--fontSize-small-medium);
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 5;
    border-radius: var(--radiusMainLite);
  }

  .main-spoiler:hover .main-spoiler__child {
    transform: translateX(10rem);
    opacity: 1;
    visibility: visible;
  }

  .tools-main__btn:not(.tools-bookmark-des):hover::before {
    border-top-color: var(--colorFwoolf);
    border-right-color: var(--colorFwoolf);
    border-bottom-color: var(--colorFwoolf);
      border-right-color 0.15s linear 0.1s,
      border-bottom-color 0.15s linear 0.2s;
      border-right-color 0.15s linear 0.1s,
      border-bottom-color 0.15s linear 0.2s;
    transition: border-top-color 0.15s linear,
      border-right-color 0.15s linear 0.1s,
      border-bottom-color 0.15s linear 0.2s;
  }

  .tools-main__btn:not(.tools-bookmark-des):hover::after {
    border-top: 3rem solid var(--colorFwoolf-black);
    border-left-width: 3rem;
    border-right-width: 3rem;
    transform: rotate(270deg);
      -webkit-transform 0.4s linear 0s;
    transition: border-left-width 0s linear 0.35s,
      -webkit-transform 0.4s linear 0s;
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s,
      -webkit-transform 0.4s linear 0s;
  }

  .tools-main__btn:not(.tools-bookmark-des):hover .tools-main__icon {
    color: var(--accent);
  }

  .material-main__link:hover {
    color: var(--accent);
    background-color: var(--background-ads);
    transition: all var(--transition-default);
  }

  .material-main__link:hover span {
    color: var(--accent);
    text-shadow: var(--shadowHoverAccentMain);
  }

  .comments-list-actions:hover .more-dropmenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .more-dropmenu__link:hover {
    background-color: var(--colorFwoolf);
    color: var(--colorFwoolf-black);
    border-radius: var(--radiusMain);
  }

  .left-main__link:hover:not(.active) {
    background-color: var(--bgColorMainAsideLite);
    color: var(--accent);
  }

  .left-main__link:hover::before,
  .left-main__link:hover::after {
    color: var(--bgColorMainAsideLite);
  }

  .write-comments-footer__rules-link:hover {
    text-shadow: var(--shadowHoverAccentMain);
  }

  .comments-list__name:hover {
    text-shadow: var(--shadowHoverAccentMain);
  }

  .comments-list__box:hover .comments-list__btn {
    transform: scale(1.2);
  }

  .comments-list__box .comments-list__action>button:hover {
    transform: scale(1.45);
  }
}

.eye--active .show-pass {
  opacity: 1;
}

.nickname-check {
  position: absolute;
  right: 10rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28rem;
  height: 28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.nickname-check:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nickname-check .check-icon {
  width: 16rem;
  height: 16rem;
  border: 2rem solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  position: relative;
}

.nickname-check .check-icon::after {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6);
}

.nickname-check.checking .check-icon {
  border-color: #ffaa00;
  animation: nicknameCheckSpin 0.8s linear infinite;
}

.nickname-check.checking .check-icon::after {
  content: "";
}

.nickname-check.available .check-icon {
  border-color: #00cc44;
  background: rgba(0, 204, 68, 0.2);
}

.nickname-check.available .check-icon::after {
  content: "✓";
  color: #00cc44;
}

.nickname-check.unavailable .check-icon {
  border-color: #ff4444;
  background: rgba(255, 68, 68, 0.2);
}

.nickname-check.unavailable .check-icon::after {
  content: "✕";
  color: #ff4444;
}

@keyframes nicknameCheckSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.preloader-text {
  transition: opacity 0.2s ease;
}

.preloader-status {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.rating-voted .mods-header__stars input {
  pointer-events: none;
}

.rating-voted .mods-header__stars label {
  cursor: default;
}

.small-box-btn-notifications i {
  background: url("../images/icons/bell.svg") no-repeat center;
  background-size: contain;
}

.small-box-btn-roulette i::before {
  content: "";
  display: block;
  width: 24rem;
  height: 24rem;
  background: url("../images/icons/roulette.svg") no-repeat center;
  background-size: contain;
  font-size: 0;
}

.small-box-btn-cards-roulette i::before {
  content: "";
  display: block;
  width: 24rem;
  height: 24rem;
  background: url("../../uploads/cards/card-p-img.webp") no-repeat center;
  background-size: contain;
  font-size: 0;
}

.notifications-count:not(:empty):not([data-count="0"]) {
  display: inline-flex;
}

.notifications-empty {
  text-align: center;
  padding: 50rem 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.notifications-empty-text {
  color: #666;
}

.notifications-empty-icon {
  width: 48rem;
  height: 48rem;
  display: block;
  margin: 0 auto 15rem;
  opacity: 0.5;
}

.notifications-empty-text p {
  font-size: 14rem;
  margin: 0;
}

.notification-item {
  position: relative;
  border-left: 3rem solid transparent;
  transition: all 0.2s;
  padding: 15rem;
  cursor: pointer;

  display: flex;
  align-items: flex-start;
  gap: 12rem;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.notification-item.notifications-empty {
  cursor: default;
}

.notification-item.notifications-empty:hover {
  background: transparent;
}

.notification-item.unread {
  border-left-color: var(--accentlite);
  background: var(--bgColorMainAside);
  margin-bottom: 4rem;
}

.notification-item a {

  display: flex;
  gap: 12rem;
  text-decoration: none;
  color: inherit;
  flex: 1;
  align-items: flex-start;
}

.notification-icon {
  width: 64rem;
  height: 64rem;
  border-radius: 10rem;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rem;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: var(--fontSize-middle-lite);
  font-weight: 500;
  color: var(--colorGreen);
  margin: 0 0 4rem 0;
  line-height: 1.3;
}

.notification-message {
  font-size: var(--fontSize-small);
  color: var(--colorFwoolf);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notification-time {
  font-size: 11rem;
  color: var(--colorFwoolf-black);
}

.notification-delete {
  position: absolute;
  right: 12rem;
  top: 8rem;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  padding: 8rem;
  font-size: 16rem;
  color: var(--colorRed);
}

.notification-delete:hover {
  color: #ef4444;
}

.notification-item:hover .notification-delete {
  opacity: 1;
}

.notif-page-btn {
  background: var(--background-main);
  border: none;
  color: var(--colorFwoolf);
  width: 36rem;
  height: 36rem;
  border-radius: 8rem;
  cursor: pointer;
  font-size: 16rem;
  transition: all 0.2s;
}

.notif-page-btn:hover:not(:disabled) {
  background: var(--accentlite);
  color: var(--colorBlack) !important;
}

.notif-page-btn:disabled {
  cursor: not-allowed;
}

.notif-page-info {
  color: var(--colorFwoolf);
  font-size: var(--fontSize-default);
  min-width: 60rem;
  text-align: center;
}

.modal__title {

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.counter-notice {
  transition: transform 0.15s ease;
}

.notification-item {
  transition: all 0.3s ease;
}

.search-res__item {
  display: flex;
  align-items: center;
  gap: 12rem;
  padding: 12rem;
  text-decoration: none;
  color: #fff;
  border-radius: 8rem;
  transition: background 0.2s;
  position: relative;
}

.search-res__item:hover {
  background: var(--background-main-light-page);
}

.search-res__icon {
  font-size: 20rem;
  width: 36rem;
  height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8rem;
  flex-shrink: 0;
}

.search-res__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.search-res__name mark {
  background: rgba(249, 115, 22, 0.4);
  color: #fff;
  padding: 0 2rem;
  border-radius: 2rem;
}

.search-res__desc {
  font-size: 12rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-res__type {
  font-size: 11rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  flex-shrink: 0;
}

.search-res__badge {
  font-size: 10rem;
  padding: 2rem 6rem;
  border-radius: 4rem;
  margin-right: 8rem;
  flex-shrink: 0;
}

.search-res__badge.verified {
  background: #10b981;
  color: #fff;
}

.search-res__badge.category {
  background: rgba(255, 255, 255, 0.15);
  color: #aaa;
}

.search-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rem;
}

.search-loading-spinner {
  width: 24rem;
  height: 24rem;
  border: 2rem solid rgba(255, 255, 255, 0.2);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.search-empty {
  text-align: center;
  padding: 40rem 20rem;
  color: #888;
}

.search-empty-icon {
  font-size: 48rem;
  display: block;
  margin-bottom: 16rem;
  opacity: 0.5;
}

.search-empty p {
  margin: 0 0 8rem 0;
}

.search-empty-hint {
  font-size: var(--fontSize-small);
  color: #666;
}

.modal-search__title {
  font-size: var(--fontSize-small);
  color: var(--colorFwoolf);
  text-transform: uppercase;
  letter-spacing: 1rem;
  padding: 12rem 16rem 8rem;
  margin: 0;
}

.modal-search-content::-webkit-scrollbar {
  width: 6rem;
}

.modal-search-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.modal-search-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3rem;
}

.search-input::placeholder {
  color: var(--accentlite);
}

.stats-empty {
  padding: 40rem 20rem;
  text-align: center;
}

.stats-empty-text {
  color: #888;
}

.stats-empty-icon {
  width: 48rem;
  height: 48rem;
  display: block;
  margin: 0 auto 16rem;
  opacity: 0.5;
}

.disc-item {
  border-bottom: 1rem solid rgba(255, 255, 255, 0.08);
}

.disc-item:last-child {
  border-bottom: none;
}

.disc-link {

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12rem;
  padding: 12rem;
  text-decoration: none;
  color: var(--colorMain, #d9d6c9);
  transition: background 0.15s;
}

.disc-link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.disc-icon {
  width: 36rem;
  min-width: 36rem;
  height: 36rem;

  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-main-light-page);
  border-radius: 8rem;
  flex-shrink: 0;
}

.disc-icon img {
  width: 24rem;
  height: 24rem;
}

.disc-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.disc-top {

  display: flex;
  align-items: baseline;
  gap: 6rem;
  margin-bottom: 2rem;
}

.disc-nick {
  font-weight: 600;
  font-size: 13rem;
  color: var(--colorMain, #d9d6c9);
  white-space: nowrap;
  flex-shrink: 0;
}

.disc-text {
  font-size: 12rem;
  color: var(--colorFwoolf-black, #898575);
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disc-meta {
  font-size: 11rem;
  color: var(--accentlite);
}

.disc-time {
  color: var(--colorFwoolf-black);
}

.disc-dot {
  color: #555;
  margin: 0 2rem;
}

.wiki-item {
  border-bottom: 1rem solid rgba(255, 255, 255, 0.08);
}

.wiki-item:last-child {
  border-bottom: none;
}

.wiki-link {

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12rem;
  padding: 12rem;
  text-decoration: none;
  color: var(--colorMain, #d9d6c9);
  transition: background 0.15s;
}

.wiki-link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.wiki-icon {
  width: 50rem;
  min-width: 50rem;
  height: 50rem;

  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-main-light-page);
  border-radius: 8rem;
  flex-shrink: 0;
}

.wiki-icon img {
  width: 24rem;
  height: 24rem;
}

.wiki-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.wiki-top {

  display: flex;
  align-items: center;
  gap: 6rem;
  margin-bottom: 2rem;
}

.wiki-title {
  font-weight: 600;
  font-size: 13rem;
  color: var(--colorMain, #d9d6c9);
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiki-new {
  font-size: 9rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #f97316);
  padding: 1rem 5rem;
  border-radius: 4rem;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  flex-shrink: 0;
}

.wiki-excerpt {
  font-size: 12rem;
  color: var(--colorFwoolf-black, #898575);
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2rem;
}

.wiki-meta {
  font-size: 11rem;
  color: var(--colorFwoolf-black);

  display: flex;
  align-items: center;
  gap: 0;
}

.wiki-category {
  background: var(--background-main-light-page);
  padding: 2rem 6rem;
  border-radius: 4rem;
  font-size: 10rem;
  color: var(--accentlite);
}

.wiki-views {
  color: var(--colorFwoolf-black);
}

.wiki-time {
  color: var(--colorFwoolf-black);
}

.wiki-dot {
  color: #555;
  margin: 0 4rem;
}

@media (max-width: 640px) {

  .wiki-views,
  .wiki-views+.wiki-dot {
    display: none;
  }
}

.feedback-file-upload {
  display: block;
  cursor: pointer;
}

.feedback-file-btn {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 10rem;
  border: 1rem dashed var(--accentlite);
  border-radius: 8rem;
  transition: all 0.2s;
}

.feedback-file-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.feedback-file-text {
  color: var(--colorMain);
  font-size: var(--fontSize-default);
}

.feedback-file-hint {
  font-size: 12rem;
  color: var(--colorGalk);
  margin-top: 8rem;
  text-align: center;
}

.feedback-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin-top: 10rem;
}

.feedback-file-item {
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 6rem 10rem;
  background: var(--bgColorInput);
  border: 1rem dashed var(--accentlite);
  border-radius: 6rem;
  font-size: var(--fontSize-default);
  color: var(--accentlite);
}

.feedback-file-item-remove {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.feedback-file-item-remove:hover {
  opacity: 1;
}

.small-box-btn-notifications.has-notifications .counter-notice {
  animation: notif-pulse 2s infinite;
  background: var(--colorGalk);
  color: var(--colorBlack);
}

@keyframes notif-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

.faction-field {
  position: relative;
  margin-bottom: 10rem !important;
}

.faction-field .label--static {
  position: absolute;
  top: -6px;
  left: 12rem;
  font-size: var(--fontSize-default, 11px);
  color: var(--colorFwoolf-border);
  padding: 0 6rem;
  pointer-events: none;
  z-index: 5;
}

.faction-dropdown {
  position: relative;
  width: 100%;
}

.faction-dropdown__selected {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 8rem 12rem;
  background-color: transparent;
  border-image: url("../images/icons/input-borown.svg") 5 5 stretch;
  border-style: solid;
  border-width: 3rem;
  border-radius: var(--radiusMain, 4px);
  cursor: pointer;
  transition: all var(--transition-default, 0.2s);
}

.faction-dropdown__selected:hover {
  border-color: var(--accent, #E0AF4C);
}

.faction-dropdown.open .faction-dropdown__selected {
  border-color: var(--accent, #E0AF4C);
}

.faction-dropdown__selected img {
  width: 24rem;
  height: 24rem;
  object-fit: contain;
  flex-shrink: 0;
}

.faction-dropdown__selected span {
  flex: 1;
  color: var(--colorBlacklite, #656565);
  font-size: var(--fontSize-middle-lite, 13px);
  font-weight: 500;
}

.faction-dropdown__arrow {
  color: var(--colorBlacklite, #656565);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.faction-dropdown.open .faction-dropdown__arrow {
  transform: rotate(180deg);
}

.faction-dropdown__list {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bgColorMainBlack, #181512);
  border: 2rem solid var(--colorFwoolf-border, #555249);
  border-bottom: none;
  border-radius: var(--radiusMain, 4px) var(--radiusMain, 4px) 0 0;
  max-height: 160px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
}

.faction-dropdown.open .faction-dropdown__list {
  display: block;
}

.faction-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 8rem 12rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--colorFwoolf-border, #555249);
}

.faction-dropdown__item:last-child {
  border-bottom: none;
}

.faction-dropdown__item:hover {
  background: rgba(224, 175, 76, 0.1);
}

.faction-dropdown__item.active {
  background: rgba(224, 175, 76, 0.15);
}

.faction-dropdown__item img {
  width: 22rem;
  height: 22rem;
  object-fit: contain;
  flex-shrink: 0;
}

.faction-dropdown__item span {
  color: var(--colorFwoolf, #d9d6c9);
  font-size: var(--fontSize-default, 12px);
}

.faction-dropdown__item:hover span,
.faction-dropdown__item.active span {
  color: var(--accent, #E0AF4C);
}

.faction-dropdown__list::-webkit-scrollbar {
  width: 4px;
}

.faction-dropdown__list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.faction-dropdown__list::-webkit-scrollbar-thumb {
  background: var(--colorFwoolf-border, #555249);
  border-radius: 2px;
}

.notification-icon-img {
  width: 64rem;
  height: 64rem;
  object-fit: contain;
  border-radius: 4rem;
}

.image-lightbox {
  cursor: zoom-in;
  display: block;
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox-overlay.active {
  opacity: 1;
}

.lightbox-overlay img {
  max-width: 95vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6rem;
  box-shadow: 0 8rem 40rem rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.25s ease;
}

.lightbox-overlay.active img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 16rem;
  right: 24rem;
  width: 40rem;
  height: 40rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.home-ce-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90rem;
  border-radius: var(--radiusMain);
  box-shadow: 0px 3px 6px -6px var(--colorDark);
  padding: 14rem 16rem;
  text-decoration: none;
  color: var(--colorMain);
  border-bottom: 5rem solid var(--background-ads);
  overflow: hidden;
  transition: all 0.2s ease;
}

.home-ce-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(322deg, transparent, transparent 64%, rgb(221 118 28 / 60%) 100%);
  pointer-events: none;
}

.home-ce-promo__content {
  position: relative;
  z-index: 2;
}

.home-ce-promo__top {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin-bottom: 4rem;
}

.home-ce-promo__icon {
  display: block;
  width: 36rem;
  height: 36rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8rem rgba(224, 175, 76, 0.4));
  animation: ceSignPulseHome 3s ease-in-out infinite;
}

@keyframes ceSignPulseHome {

  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.home-ce-promo__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-ce-promo__name {
  font-size: var(--fontSize-middle);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--colorGalk);
  line-height: 1.2;
}

.home-ce-promo__label {
  color: var(--accentlite);
  letter-spacing: 0.5rem;
}

.home-ce-promo__desc {
  font-size: var(--fontSize-default);
  line-height: 1.4;
  color: var(--colorGalk);
}

.cf-turnstile-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cf-turnstile-wrap:empty {
  display: none;
}

.cf-turnstile-wrap .cf-turnstile {
  max-width: 100%;
  line-height: 0;
}

.home__icons-wrap {
  position: absolute;
  bottom: 95rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: linear-gradient(90deg,
      rgba(29, 29, 29, 0) 0%,
      var(--background-main) 50%,
      rgba(29, 29, 29, 0) 100%);
  padding: 8rem 35rem 10rem 35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 6rem;
}

.home__icons-wrap .home__icons {
  position: static;
  background: none;
  padding: 0;
  transform: none;
  bottom: auto;
  left: auto;
}

.home__hero-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  margin-top: 4rem;
  white-space: nowrap;
  font-family: "Rubik", sans-serif;
  font-size: 10rem;
  letter-spacing: 0.03em;
  text-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.8);
}

.rcb-version {
  color: var(--accent);
  font-weight: 500;
}

.home__hero-credit__sep {
  color: var(--colorFwoolf-black);
}

.home__hero-credit__copy {
  color: var(--colorFwoolf-black);
}

@media (max-width: 1150px) {
  .home__hero-credit {
    display: none;
  }
}
/* ─────────────────────────────────────────────────────────────
 * Selection Tooltip — floating меню при виділенні тексту в статтях
 * (templates/js/modules/selection-tooltip.js)
 * ───────────────────────────────────────────────────────────── */
.selection-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 4rem 6rem;
  background-color: var(--bgColorMainBlack);
  border: 1rem solid var(--colorFwoolf-border);
  border-radius: var(--radiusMain);
  box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.9) translateY(4rem);
  transform-origin: center bottom;
  pointer-events: none;
  transition: opacity var(--transition-default), transform var(--transition-default);
  font-family: "Rubik", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.selection-tooltip.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.selection-tooltip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28rem;
  height: 28rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radiusMainLite);
  color: var(--colorFwoolf);
  cursor: pointer;
  transition: background-color var(--transition-default), color var(--transition-default), transform var(--transition-short);
}

.selection-tooltip__btn:hover {
  background-color: rgba(224, 175, 76, 0.12);
  color: var(--accent);
}

.selection-tooltip__btn:active {
  transform: scale(0.92);
}

.selection-tooltip__btn:focus-visible {
  outline: 1rem solid var(--accent);
  outline-offset: 1rem;
}

.selection-tooltip__btn svg {
  width: 16rem;
  height: 16rem;
  display: block;
}

.selection-tooltip__btn--text {
  width: auto;
  padding: 0 8rem;
  gap: 5rem;
  font-family: "Oswald", sans-serif;
  font-size: 12rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.selection-tooltip__label {
  display: inline-block;
  line-height: 1;
}

.selection-tooltip__btn--social .s2w-icon {
  width: 16rem;
  height: 16rem;
  display: inline-block;
}

.selection-tooltip__bug-icon {
  display: inline-block;
  width: 16rem;
  height: 16rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.selection-tooltip__sep {
  display: block;
  width: 1rem;
  height: 18rem;
  background-color: var(--colorFwoolf-border);
  margin: 0 2rem;
}

/* На мобільних — повне приховування (JS теж не запускається, але про всяк випадок) */
@media (max-width: 768px), (pointer: coarse) {
  .selection-tooltip {
    display: none !important;
  }
}