/* ОБЩЕЕ */
body {
  background: #1a1a1a url("/img/bg5-min.jpg") no-repeat 0 50% / cover fixed;
  color: #fff;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 14px;
  margin: 0;
}
footer {
  background-color: #252525;
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: #28a745;
}

h1 {
  color: #28a745;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
input {
  background-color: #fff !important;
}

.cont {
  width: 100%;
  max-width: 1400px /*calc(100% - 200px) - 1600px*/;
  margin: 0 auto;
}
#underHeader {
  height: 77px;
}
#selector {
  display: none; /*text-align:center; margin-top:15px;*/
}
.descrBlock {
  background: #1c1c1c;
  padding: 15px;
  margin-top: 10px;
  line-height: 1.4;
}

/* ШАПКА */

.header{
position:sticky;
top:0;
left:0;
right:0;
z-index:9999;
backdrop-filter:blur(0.8rem);
background-color:#252525;
}

.main-header{
width:100%;
max-width:1400px;
margin:0 auto;
display:flex;
align-items: center;
column-gap:3%;
padding:0.5rem 0.6rem;
}

.navigation{
display:flex;
align-items:center;
justify-content:space-between;
flex:1 0 0;
}

.menu{
margin:0;
padding:0;
list-style-type: none;
display:flex;
column-gap:10px;
font-size:13px;
font-weight:500;
text-transform:uppercase;
}

.menu li.active a{
background:rgba(96,128,255,0.19);
color:rgb(96,128,255);
}

.menu li.active a:hover{
color:#fff;
}

.menu li a{
display:flex;
gap:5px;
align-items:center;
justify-content:center;
padding:0.5rem 0.8rem 0.45rem;
border-radius:0.325rem;
-webkit-border-radius:0.325rem;
transition: all 120ms linear;
-webkit-transition: all 120ms linear;
background:#1a1a1a;
color:#fff;
}

.menu li a:hover{
color:#466fd5;
}

.menu li a img{
width:18px;
height:18px;
display:flex;
}

.sub-header{
padding:0.6rem;
background:#1a1a1a;
display:flex;
}

.sub-header .sub-header-container{
display:flex;
align-items: center;
width:100%;
max-width:1400px;
margin:0 auto;
}

.sub-header .sub-menu{
margin:0;
padding:0;
list-style-type: none;
display:flex;
column-gap:10px;
font-size:11px;
font-weight:400;
text-transform:uppercase;
}

.sub-header .sub-menu a{
display:flex;
align-items: self-end;
gap:5px;
padding:0.5rem 0.6rem 0.45rem;
border-radius:0.325rem;
-webkit-border-radius:0.325rem;
transition: all 120ms linear;
-webkit-transition: all 120ms linear;
background-color:#252525;
color:#fff;
}

.sub-header .sub-menu a:hover{
color:#466fd5;
}

.sub-header .sub-menu.hide{
display:none;
}

.search-wrapper{
margin-top:0px;
}

.search-wrapper form{
height:37px;
border-radius:5px;
}

header {
  background-color: #252525;
  width: 100%;
  height: 77px;
  overflow: hidden;
  position: fixed;
  z-index: 99;
  top: 0;
  box-shadow: 0px 0px 9px #000;
}
.logo {
  display: block;
  padding: 10px 0;
}

.logo img {
  margin-top: 4px;
  max-width: 100%;
}
.bigBtnCont {
  display: inline-block;
  margin: 0 10px 5px 0;
}
.bigBtnInner {
  border-top: 3px solid #252525;
  padding-top: 10px;
}
.bigBtn {
  padding: 15px;
  background: #1a1a1a;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 15px;
}
.bigBtn:hover {
  /*background:#28a745; color:#fff;*/
}
.bigBtnCont:hover .bigBtnInner {
  border-color: #28a745;
}
.bigBtnActive .bigBtnInner {
  /*border-color:#28a745;*/
}
.bigBtnActive .bigBtn {
  background: #28a745;
  color: #fff;
  text-decoration: underline;
}
.bigBtnActive:hover .bigBtn {
  /*color:#fff;*/
}
#socialBar {
  padding: 10px;
  text-align: right;
  line-height: 70px;
}
.socialIcon {
  display: inline-block;
  line-height: 40px;
  font-size: 26px;
  color: #c8c8c8;
  margin-left: 10px;
}
.socialIcon:hover {
  color: #28a745;
}

.headerSubmenu {
  background: #1a1a1a;
  padding-top: 10px;
  position: fixed;
  top: 77px;
  left: 0;
  width: 100%;
  z-index: 100;
}
.submenu a {
  display: inline-block;
  padding: 5px 15px;
  background: #252525;
  font-size: 14px;
  border-radius: 7px;
  margin: 0 10px 10px 0;
  z-index: 100;
}

.menuLine {
  background: #151515;
  padding: 10px 0;
  letter-spacing: 0px;
  font-size: 13px;
}
.menuLine-wrap {
  width: calc(100% - 200px);
  margin: 0 auto;
  display: flex;
}
.menuLine a {
  text-transform: uppercase;
}
.menuLine span {
  margin-left: auto;
}

/* ЦЕНТРАЛЬНАЯ ЧАСТЬ САЙТА */
.wrapper-row > div{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; /* расстояние между карточками */
}


@media (max-width: 992px) {
.wrapper-row > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
.wrapper-row > div {
    grid-template-columns: 1fr;
  }
}
.mainCont {
  background: #252525;
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.main1 {
  padding: 15px;
}
.topBlock1cont {
  width: 283px;
}
.centerCont {
  width: calc(100% - 283px);
}
#topBlock1 {
  width: 283px;
  height: 223px;
  background: url(/new/csfullpack.png) no-repeat; /*background:url(/new/main1bg.jpg) no-repeat;*/
  display: table-cell;
  vertical-align: middle;
  background-size: cover;
  text-align: center;
  line-height: 22px;
  font-size: 16px;
  text-decoration: underline;
}
#topBlock1 span {
  color: #28a745;
}
/*#topBlock1:hover span {color:#fff;}*/
#topBlock1 div {
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 0;
  margin-top: 172px;
}
.main1cont {
  background: #1a1a1a;
  padding: 10px;
}
h4 {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
h4 img {
  margin-right: 5px;
  margin-top: -5px;
}
.main1punct {
  display: block;
  text-decoration: none;
  line-height: 20px;
  font-size: 13px;
  padding-left: 15px;
  height: 20px;
  overflow: hidden;
}
.main1punct i {
  color: #28a745;
}
.main1punct div {
  float: right;
}
.noPaddingLeft {
  padding-left: 0;
}
.noPaddingRight {
  padding-right: 0;
}
#catBlock {
  background: #191919;
  padding: 15px;
  font-size: 14px;
}
#catBlock h2 {
  color: #28a745;
  font-size: 18px;
}
.catWindow {
  border-radius: 9px;
  background: #252525;
  overflow: hidden;
  padding: 0;
}
.catWindow1 {
  margin: 20px 20px 20px 40px;
  width: calc(50% - 60px);
}
.catWindow2 {
  margin: 20px 40px 20px 20px;
  width: calc(50% - 60px);
}
.catWindowTop {
  background: #28a745;
  font-size: 14px;
  padding: 20px;
  line-height: 22px;
}
.catWindowTop a {
  float: right;
  display: block;
  font-size: 30px;
  line-height: 22px;
}
.catWindowTop a:hover {
  color: #fff;
}
.tipBlock {
  display: none;
  position: absolute;
  z-index: 9;
  padding: 15px;
  font-size: 12px;
  background: #252525;
  border-radius: 9px;
  box-shadow: 0px 0px 9px #000;
}
.catContainer {
  width: 100%;
  overflow: hidden; /*border:1px solid #252525;*/
}

.catBlock {
  display: inline-block;
  float: left;
  width: calc(33.33% + 1px);
  height: 85px;
  padding: 15px;
  padding-left: 85px;
  /*background:url(/new/knife.png) no-repeat 15px 15px;*/
  border-top: 1px solid #323232;
  border-left: 1px solid #323232;
  margin-top: -1px;
  margin-left: -1px;
  background-repeat: no-repeat !important;
  background-position: 15px 15px !important;
}
.catBlock span {
  display: block;
  text-align: right;
  color: #28a745;
  font-size: 10px;
}
.catContainer {
  width: 100%;
  overflow: hidden; /*border:1px solid #252525;*/
}

/* Лефтер */
.lefter {
  width: 283px;
}
.main2 {
  padding: 15px;
  margin-top: 5px;
}
.leftMenu {
  border: 1px solid #383839;
  font-size: 14px;
  margin-bottom: 15px;
  -webkit-box-shadow: 0 0 3px 0 #000;
}
.leftMenuHead {
  background: #191919;
  padding: 15px 20px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.leftMenuHead .icon {
  margin-left: auto;
  width: 14px;
  height: 14px;
}
.leftMenuBlock {
  display: block;
  border-top: 1px solid #383839;
  padding: 10px;
  position: relative;
}
.leftMenuBlock img {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  transition-duration: 0.7s;
  transition-property: transform;
}
.leftMenuBlock:hover img {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.leftMenuBlock:hover {
  color: #fff;
  background-color: #333;
}
.leftMenuBlock .of-downloads {
  position: absolute;
  font-size: 10px;
  bottom: 5px;
  right: 8px;
  font-weight: 500;
  color: #ccc;
}

.leftMenuBlock i {
  font-style: normal;
  float: right;
}
.leftMenuBlock i img {
  transition-property: none !important;
  width: auto !important;
  height: auto !important;
  margin-right: 0 !important;
}

.banner1 {
  display: block;
  margin-bottom: 15px;
}
.banner1 img {
  width: 100%;
}

/*Списки*/
.textBlock ul,
.textBlock ol {
  margin-bottom: 1rem;
}
.textBlock ul li {
  padding-left: 26px;
  position: relative;
  list-style: none;
  line-height:1.8;
}
.textBlock ul li:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 3px solid #fac40c;
  position: absolute;
  top: 7px;
  left: 8px;
}

.textBlock ol li {
  padding-left: 38px;
  padding-bottom: 5px;
  position: relative;
  list-style: none;
  line-height:1.8;
}
.textBlock ol {
  counter-reset: num;
  padding-left: 0;
}
.textBlock ol li:before {
  content: counter(num);
  counter-increment: num;
  background-color: #fac40c;
  color: #000;
  position: absolute;
  top: -2px;
  left: 0;
  width: 24px;
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 6px;
  box-sizing: border-box;
}
.textBlock ol li:after {
  content: "";
  border: 10px solid transparent;
  border-left-color: #fac40c;
  position: absolute;
  left: 24px;
  top: -2px;
  transform: scale(0.66, 1.5);
  transform-origin: 0 0;
}
.textBlock ul li + li,
.textBlock ol li + li {
  margin-top: 10px;
}
/* Спйолер */
/* Спйолер */
.spoiler {
  border-radius: 5px;
  margin: 20px 0;
  width: 100%;
  background-color: #212121;
  padding: 0;
  overflow: hidden;
}
.spoiler-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: #2a2a2a;
  color: #fff;
  font-weight: 500;
  padding: 10px;
  user-select: none;
}
.spoiler .icon {
  margin-right: 5px;
  transform: rotate(180deg);
  transition: transform 0.1s cubic-bezier(0.77, 0, 0.18, 1);
  background: url("/assets/img/dropdown.webp") no-repeat center center / 16px;
  width: 16px;
  height: 16px;
}
.spoiler-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  align-items: start;
  justify-content: start;
  color: #fff;
}
.spoiler-content.flex {
  display: flex;
  flex-direction: column;
}
.spoiler__item {
  height: 100%;
}
.spoiler__item div:not(.spoiler-title) {
  padding: 4px 16px;
  line-height: 1.4;
  border: 1px solid #1c1c1c;
  font-size: 15px;
}
.spoiler-title {
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 400;
  background-color: #1c1c1c;
}
.spoiler-content-title {
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 500;
  width: 100%;
}
.spoiler-content-list {
  list-style: none;
  padding: 0;
  margin: calc(1vw * 0.5) 0 calc(1vw * 0.5) calc(1vw * 2);
}
.spoiler-content-list li {
  position: relative;
  margin-bottom: 0.256rem;
  padding-left: 26px;
  list-style: none;
}

.spoiler-content-list li:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 3px solid #fac40c;
  position: absolute;
  top: 7px;
  left: 8px;
}

.spoiler-content-list li:last-child {
  margin-bottom: 0;
}
.spoiler-content-list li b {
  color: #6da94e;
}

.spoiler-content-text {
  padding: 10px 16px;
}
/* Галерея в тексте */
.gallery-in-text {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0.5rem;
}

.gallery-in-text a {
  flex: 1 0 auto;
  width: 30%;
  display: flex;
}

.gallery-in-text a img {
  position: relative;
  width: 100%;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  border: 3px solid #242424 !important;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}
/* Галерея */
.file-notification {
  color: #2fce54;
  font-weight: 400;
  display: flex;
  position: absolute;
  z-index: 15;
  align-items: center;
  gap: 6px;
  top: 10px;
  padding: 10px;
  right: 10px;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.4);
}
.main-image:hover .file-notification {
  display: none;
}
.gallery {
  display: flex;
}
.gallery .main-image {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  box-shadow: 0 1px 4px 3px rgba(0, 0, 0, 0.47);
  -webkit-box-shadow: 0 1px 4px 3px rgba(0, 0, 0, 0.47);
  position: relative;
}
.gallery .main-image .image-counter {
  position: absolute;
  z-index: 15;
  top: 20px;
  left: 20px;
  padding: 8px;
  font-weight: bold;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  cursor: default;
  user-select: none;
}
.gallery .main-image .prev,
.gallery .main-image .next {
  position: absolute;
  z-index: 10;
  bottom: 0;
  top: 0;
  width: 25%;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.gallery .main-image .prev {
  left: 0;
}
.gallery .main-image .next {
  right: 0;
  justify-content: end;
}
.gallery .main-image .prev span,
.gallery .main-image .next span {
  font-size: 65px;
  padding: 1rem;
  opacity: 0.3;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}
.gallery .main-image .prev:hover span,
.gallery .main-image .next:hover span {
  font-size: 65px;
  opacity: 1;
}
.gallery .main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}
.gallery .main-image img.loading {
  opacity: 0.1;
}
.gallery .thumbnails {
  width: 25%;
  padding: 0 15px;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 115, 217, 0.5) rgba(0, 0, 0, 0);
}
.gallery .thumbnails::-webkit-scrollbar {
  width: 10px;
}
.gallery .thumbnails::-webkit-scrollbar-track {
  background: rgba(33, 115, 217, 0.5);
}
.gallery .thumbnails::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0);
  border-radius: 10px;
}
.gallery .thumbnails img {
  width: 100%;
  height: auto;
  cursor: pointer;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  box-shadow: 0 0 0 1px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 0 1px rgb(0, 0, 0);
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}
.gallery .thumbnails img.active {
  opacity: 0.2;
}

.item-publ {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.125rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  background-color: #212121;
  color: #f5f5f5;

  /* ---- header ---- */
  .item-publ__header {
    display: flex;
  }

  .item-publ__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
    line-height: 1.3;
  }

  .item-publ__link {
    text-decoration: none;
    color: inherit;
  }

  .item-publ__link:hover,
  .item-publ__link:focus-visible {
    text-decoration: underline;
  }

  /* ---- body ---- */
  .item-publ__body {
    display: flex;
    gap: 1rem;
  }

  .item-publ__poster {
    display: flex;
    flex: 0 0 250px;
    height: 140px;
    border-radius: 1rem;
    overflow: hidden;
  }

  .item-publ__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .item-publ__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #cbcbcb;
  }

  .item-publ__content p {
    margin: 0;
  }

  /* ---- footer ---- */
  .item-publ__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .item-publ__meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: #b0b0b0;
  }

  .item-publ__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }

  .item-publ__meta-item i {
    font-size: 0.875rem;
  }

  /* ---- more button ---- */
  .item-publ__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;

    font-size: 0.875rem;
    padding: 0.385rem 1rem;
    border-radius: 0.5rem;
    margin-left: auto;

    color: #fff;
    text-decoration: none;

    background-image: linear-gradient(to right, #1a237e, #0d47a1, #0d47a1, #1a237e);
    background-size: 200% 100%;
    transition: background-position 0.5s ease, transform 0.15s ease;
  }

  .item-publ__more:hover {
    background-position: 100% 0%;
    transform: translateY(-1px);
  }

  .item-publ__more:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* ---- mobile ---- */
  @media (max-width: 640px) {
    .item-publ__body {
      flex-direction: column;
    }

    .item-publ__poster {
      width: 100%;
      flex: 0 0 auto;
      height: 180px;
    }

    .item-publ__footer {
      flex-direction: column;
      align-items: flex-start;
    }

    .item-publ__more {
      margin-left: 0;
    }
  }
}
/* Уведомление */
.attention-wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.89);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.attention-wrapper.off {
  display: none;
}

.attention-wrapper .attention-body {
  min-width: 700px;
  display: flex;
  flex-direction: column;
  background-color: #282828;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 15px 0;
}

.attention-title {
  font-size: 18px;
  text-align: center;
}

.attention-message {
  background-color: #191919;
  padding: 15px 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 25px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.attention-message strong {
  color: #f16e06;
}

.attention-image {
  display: flex;
  gap: 10px;
  max-width: 670px;
  margin: 0 auto;
  overflow: hidden;
}

.attention-image img {
  width: 50%;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.attention-button {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.attention-button a {
  display: flex;
  background-color: #00c381;
  color: #1a1a1a;
  font-weight: 600;
  padding: 14px 20px 12px;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}
/* Путь */
.path_to {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 20px 20px;
  padding: 10px;
  list-style: none;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  border: 1px solid #303030;
  background: #191919;
  text-transform: uppercase;
}
.path_to li:after {
  content: "»";
  margin: 0 3px;
  color: #999;
}
.path_to li:last-child:after {
  content: "";
}
.path_to li a {
  color: #eee;
}
.path_to li a:hover {
  color: green;
}

/* Страница конфигов */
.config-main-page {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 20px 20px;
}

.config-main-page .config-main-page-info {
  display: flex;
  flex-flow: column nowrap;
  width: 50%;
  gap: 20px;
}
.config-main-page .config-main-page-title {
  display: flex;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
.config-main-page .config-main-page-descr {
  font-size: 14px;
  font-weight: 300;
  color: #ccc;
}

.config-main-page .config-main-page-stat {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
}

.config-main-page .config-main-page-stat > div {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  line-height: 1;
}

.config-main-page .config-main-page-stat i {
  display: flex;
  width: 30px;
  height: 30px;
  background-color: #2b7aaa;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #1a1a1a;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
}

.config-main-page .config-main-page-stat span {
  font-weight: 400;
}

.config-main-page .config-main-page-btn {
  display: flex;
  gap: 10px;
}

.config-main-page .config-main-page-btn a {
  display: flex;
  background-color: #2b7aaa;
  color: #1a1a1a;
  font-weight: 400;
  padding: 14px 20px 12px;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}

.config-main-page .config-main-page-btn a:hover {
  background-color: #000;
  color: #2b7aaa;
}

.main-page-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 50%;
  gap: 15px;
}

.main-page-top .main-page-top-item {
  position: relative;
}

.main-page-top .main-page-top-item {
  position: relative;
  background-color: #313131;
  padding: 10px;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
}

.main-page-top .main-page-top-item .image {
  display: flex;
  background-color: #2b7aaa;
  width: 100%;
  height: 100%;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
}

.main-page-top .main-page-top-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
}

.main-page-top .main-page-top-item .title {
  display: flex;
  font-size: 15px;
  font-weight: 400;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 7px 0;
  border-radius: 0 0 0.325rem 0.325rem;
  -webkit-border-radius: 0 0 0.325rem 0.325rem;
  backdrop-filter: blur(5px);
}

.config-page-title {
  display: flex;
  margin: 0 20px 20px;
  align-items: center;
}
.config-page-title h1 {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}
.config-page-title .filter-menu {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
/* Вид материалов конфигов */
.config-items #allEntries {
  display: flex;
  flex-flow: row wrap;
}
.config-items #allEntries > div {
  width: 20%;
  padding: 0 10px;
  margin-bottom: 20px;
}
.config-items .config-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #2a2a2a;
  padding: 10px;
  background-color: #212121;
  gap: 10px;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
}
.config-items .config-item .config-item-images {
  background-color: #313131;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
}
.config-items .config-item .config-item-images img {
  display: flex;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.config-item-title {
  font-size: 18px;
  font-weight: 400;
  width: 100%;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
/* Табы на странице конфига */
.config-tabs {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
}
.config-tabs li {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 0.325rem 0.325rem 0 0;
  -webkit-border-radius: 0.325rem 0.325rem 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  user-select: none;
  -webkit-user-select: none;
}
.config-tabs li.active {
  background-color: #212121;
  color: #fff;
  border-color: #2a2a2a;
}
.config-tabs i {
  font-size: 22px;
}
/* Страница с материалом конфига */
.config-content-bio {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 0 20px;
  border: 1px solid #2a2a2a;
  background-color: #212121;
  font-size: 15px;
  font-weight: 400;
}

.config-content-bio p {
  margin: 0 0 10px;
}

.config-content-bio p:last-child {
  margin: 0;
}

.config-content-bio-title {
  display: flex;
  margin: 0 20px 20px;
  font-size: 26px;
  font-weight: 400;
}

.config-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: calc(100% - 400px);
}

.config-content .config-content-title {
  display: flex;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  margin: 15px 0 10px;
  align-items: center;
  column-gap: 8px;
  width: 100%;
}

.config-content .config-content-title > i {
  font-size: 18px;
}

.config-content .config-content-title span {
  margin-left: auto;
  font-size: 14px;
  cursor: pointer;
}

.get-parameters {
  display: flex;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 20px;
  border: 1px solid #2a2a2a;
  background-color: #212121;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  user-select: all;
  -webkit-user-select: all;
}

.get-parameters p {
  margin: 0;
}

.download-button {
  display: flex;
  margin-top: 15px;
  font-weight: 400;
  font-size: 16px;
}

.download-button a {
  display: flex;
  background-color: #00c381;
  color: #fff;
  padding: 18px 30px 16px;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}

.download-button a:hover {
  background-color: #000;
  color: #00c381;
}

.config-tabs-content {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 281px;
  padding: 20px;
  border: 1px solid #2a2a2a;
  background-color: #212121;
  border-radius: 0.325rem 0.325rem 0.325rem 0.325rem;
  -webkit-border-radius: 0.325rem 0.325rem 0.325rem 0.325rem;
}

.config-tabs-content.active {
  display: flex;
}

.config-tabs-content-video {
  display: flex;
  width: 100%;
  aspect-ratio: 16/9;
}

.config-tabs-content-video iframe {
}

.config-params-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.config-params-wrapper .config-params-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  z-index: 5;
}

.config-params-item::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  border-top: 1px dotted #4a4a4a;
  z-index: -1;
}

.config-params-wrapper .config-params-item span {
  background-color: #212121;
}

.config-params-wrapper .config-params-item .params-label {
  padding-right: 10px;
}

.config-params-wrapper .config-params-item .params-val {
  padding-left: 10px;
  font-weight: 600;
}

.config-body {
  display: flex;
  flex-flow: row nowrap;
  margin: 20px 0;
  gap: 30px;
}

.config-body .config-player {
  display: flex;
  flex-flow: column nowrap;
  width: 400px;
  border: 1px solid #2a2a2a;
  padding: 20px;
  background-color: #212121;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  row-gap: 25px;
}

.config-body .config-player .config-player-image {
  background-color: #313131;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
}

.config-body .config-player .config-player-image img {
  display: flex;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.config-body .config-player .config-player-name {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.config-body .config-player .config-player-location {
  font-size: 15px;
  line-height: 1;
}

.config-body .config-player .config-player-location strong {
  font-weight: 400;
}

.config-body .config-player .config-player-social {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.config-body .config-player .config-player-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #444;
  color: #fff;
  border-radius: 0.325rem;
  -webkit-border-radius: 0.325rem;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}
.config-body .config-player .config-player-social a:hover {
  background-color: #00c381;
}
.config-body .config-player .config-player-social i {
  font-size: 18px;
}

.config-body .config-player .config-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 400;
  margin-top: auto;
}

.config-body .config-player .config-info div {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.config-body .config-player .config-info i {
  font-size: 18px;
}

.config-wrapper {
  display: flex;
  flex-flow: column nowrap;
  margin: 20px 20px 0;
}

.config-wrapper .config-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  gap: 10px;
}

.config-wrapper .config-header .config-flag {
  display: flex;
  line-height: 1;
  font-size: 22px;
  cursor: default;
}

.config-wrapper .config-header .config-title {
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  color: #fff;
  cursor: default;
}

/* Основной контейнер */
#breadcrumbs {
  border: 1px solid #303030;
  background: #191919;
  line-height: 20px;
  font-size: 12px;
  padding: 10px;
  text-transform: uppercase;
}
#breadrighter {
  float: right;
}
.pager {
  text-align: center;
  font-size: 14px;
  padding: 15px 0;
}
.swchItem {
  padding: 6px 12px;
  background: #2c2b2b;
  border: 1px solid #2c2b2b;
  margin: 0 5px;
}
.swchItemA {
  padding: 6px 12px;
  background: #2c2b2b;
  border: 1px solid #fff;
  margin: 0 5px;
}

/* Материал */
.materialBlockCont {
  transition: all 0.3s ease;
  will-change: transform;
}
.materialBlockCont:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(35, 35, 35, 0.6);
}
.materialBlockCont:hover .materialBlock2 {
  background-color: #161616;
}

.materialBlock {
  background: #191919;
  margin: 10px 0;
}
.materialTop {
  background: #2c2b2b;
  padding: 10px;
  font-size: 15px;
}
.materialTop div {
  float: right;
  font-size: 13px;
}
.materialTop div img {
  margin-left: 5px;
}
.materialTop > *{
	display: flex;
	align-items: center;
}
.materialMiddle {
  padding: 20px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1.5rem;
}
.materialMiddle img {
  width: 100%;
}
.materialText {
  padding-bottom: 60px;
  line-height: 1.5;
}
.publText img {
  max-width: 100%;
}
.matBtnsCont {
  text-align: right;
  padding: 25px 15px 25px 0;
  margin-top: -80px;
}
.matBtnGreen {
  padding: 10px;
  background: #28a745;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 10px;
}
.matBtnGreen:hover {
  background: #1a1a1a;
  color: #fff;
}
.matBtnBlack {
  display: inline-block;
  padding: 8px;
  background: #252525;
  font-size: 14px;
  text-transform: none;
  border-radius: 10px;
  margin: 3px;
}
.matBtnBlack:hover {
  background: #28a745;
  color: #fff;
}
.materialBottom {
  color: #504f4f;
  font-size: 13px;
  background: #2c2b2b;
  padding: 10px;
}
.showMoreBtn {
  display: inline-block;
  margin: 25px auto;
  padding: 10px 25px;
  background: #1a1a1a;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 5px;
}
.showMoreBtn:hover {
  background: #28a745;
  color: #fff;
}
/* Материал по 3 в ряд */
.teaser__img{width:100%;height:100%;object-fit:cover;object-position:center;max-height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.block-image{position:relative;width:100%;background:none;/*linear-gradient(#e2e2e2, #d2d2d2);*/ padding-bottom:48%;/*56%*/}
.block-image a{position:absolute;height:100%;width:100%;display:flex;justify-content:center;align-items:center}
.teaser-lazy{display:none;position:absolute;max-height:100%;left:50%;top:50%;transform:translate(-50%,-50%);width: 100% !important;
	height: auto !important;
	object-fit: cover;}
.file-info a {
	text-transform: none !important;
	text-decoration: none !important;
    }
.teaser-lazy_active{display:flex !important}
.lazy-div{width:100%;height:100%;display:none;background:#000;align-items:center;justify-content:center;flex-direction:column;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0.8}
.lazy-div_text{margin-top:16px}
.teaser-slider-wrapper{display:flex;width:100%;height:100%;position:absolute;left:0;top:0}
.teaser-slider{flex:1;position:relative;opacity:0.8;transition:all 0.2s ease-in-out}
.teaser-slider.teaser-slider__empty{opacity:0}
.teaser-slider-wrapper:hover .teaser-slider{opacity:1}
.teaser-slider:after{position:absolute;bottom:5px;left:0;right:0;margin:0 auto;height:4px;background:rgba(255,255,255,0.3);width:90%;content:""}
.teaser-slider:hover:after{background:#28a745;}
.teaser{width:100%;height:100%;overflow:hidden;background:#fff;border-radius:8px;font-size:14px;line-height:130%;transition:box-shadow 0.15s linear 0s}
.teaser:hover{box-shadow:0 5px 15px rgba(0,0,0,0.2)}
.teaser__img{max-height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.teaser__title{font-size:14px;font-weight:700;margin:10px 12px 6px}
.teaser__title a{text-decoration:none;color:inherit}
.teaser__title a:hover{text-decoration:underline}
.teaser__title a:visited{color:inherit}
.teaser__desc{margin:6px 12px 12px}
.teaser__media{position:relative;width:100%;background:linear-gradient(#e2e2e2, #d2d2d2);padding-bottom:80%}
.teaser__media a{position:absolute;height:100%;width:100%;display:flex;justify-content:center;align-items:center}
.teaser__tag-list{display:flex;flex-flow:row wrap;margin:12px 12px 14px}
.teaser__tag-item{margin:0 4px 4px 0}

.materialBlock2 {
  background: #1a1a1a;
  margin-top: 10px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  overflow: hidden;
  transition: all 0.3s ease;
  will-change: background;
}
.matImg img {
  width: 100%;
  height: auto;
}
.materialMiddle2 {
  padding: 10px;
}
.materialTitle2 {
  display: block;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 20px;
  padding: 5px 0 10px 0;
  border-bottom: 1px solid #454443;
}
.materialText2 {
  padding: 10px 5px;
  line-height: 21px;
  height: 52px;
  overflow: hidden;
}
.matBtnsCont2 {
  margin: 20px 0 10px 0;
}
.matBtnsCont2 i {
  margin-left: 9px;
  font-size: 12px;
}
.matBtnsCont2 .fa {
  font-size: 16px;
}

/* Страница материала */
#matPageCont .h1cont {
  margin-top: 5px;
  padding: 0 10px;
  background: url(/new/h1cont_background.png);
}
#matPageCont h1,
#matPageCont h2 {
  font-size: 18px;
  line-height: 45px;
  margin-bottom: 0;
}
#matPageCont .pageCont {
  padding: 25px;
  background: #191919;
  margin: 0;
}
#matPageCont .pageCont15 {
  padding: 15px;
  background: #191919;
  margin: 0;
}
.arrowL {
  position: absolute;
  z-index: 9;
  margin-top: 100px;
  margin-left: 20px;
}
.arrowR {
  position: absolute;
  z-index: 9;
  margin-top: 100px;
}
.bigImgCont {
  padding: 0; /*display:table-cell; vertical-align:middle;*/
}
#bigImg {
  width: 100%;
}
.smallImgsCont {
  overflow: auto;
}
.smallImgsCont img {
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
}
.smallImgsCont img:first-child {
  margin: 0;
}
/*.smallImgsCont2 .col-md-4 {padding:0; padding-left:10px;}
 .smallImgsCont2 .col-md-4:first-child {padding:0;}*/
.smallImgsCont2 .col-md-4 img {
  width: 100%;
  cursor: pointer;
}

.star {
  display: inline-block;
  width: 21px;
  height: 21px;
  background: url(/new/stars.png);
  margin: 1px;
}
.star:hover {
  background-position: 0 42px;
}
.starAct {
  background-position: 0 21px;
}
.starAct:hover {
  background-position: 0 42px;
}

.link-to-download {
  display: flex;
  margin: 40px auto;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  row-gap: 20px;
}

.link-to-download .link-button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 64px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  overflow: hidden;
  margin: 0 15px;
}

.link-to-download .link-button:hover {
  color: #fff;
}

.link-to-download .link-button::before {
  content: "";
  background: rgba(0, 0, 0, 0.15) 13px 50% no-repeat;
  background-size: 30px;
  height: 100%;
  width: 55px;
  position: absolute;
  left: 0;
  top: 0;
}

.link-to-download .link-button::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 550ms linear;
  -webkit-transition: all 550ms linear;
}

.link-to-download .link-button:hover::after {
  width: 100%;
}

.link-to-download .link-button .link-text {
  display: flex;
  flex-direction: column;
  margin-left: 70px;
  line-height: 1.1;
}

.link-to-download .link-button .link-text .link-text-title {
  font-weight: 600;
  font-size: 23px;
}

.link-to-download .link-button.direct-link {
  background: #2173d9;
  background: -webkit-gradient(linear, left top, right top, color-stop(56px, #1a5dae), color-stop(56px, #2173d9));
  background: -webkit-linear-gradient(left, #1a5dae 56px, #2173d9 56px);
  background: -o-linear-gradient(left, #1a5dae 56px, #2173d9 56px);
  background: linear-gradient(to right, #1a5dae 56px, #2173d9 56px);
  -webkit-box-shadow: 0 0 5px 1px #1a5dae;
  box-shadow: 0 0 5px 1px #1a5dae;
}

.link-to-download .link-button.direct-link::before {
  background-image: url("/img/direct.svg");
}

.link-to-download .link-button.torrent-link {
  background: #02994b;
  background: -webkit-gradient(linear, left top, right top, color-stop(56px, #02843f), color-stop(56px, #02994b));
  background: -webkit-linear-gradient(left, #02843f 56px, #02994b 56px);
  background: -o-linear-gradient(left, #02843f 56px, #02994b 56px);
  background: linear-gradient(to right, #02843f 56px, #02994b 56px);
  -webkit-box-shadow: 0 0 5px 1px #02843f;
  box-shadow: 0 0 5px 1px #02843f;
}

.link-to-download .link-button.torrent-link::before {
  background-image: url("/img/torrent.svg");
}

.link-to-download .link-button.yadisk {
  background: #ffdb4d;
  background: -webkit-gradient(linear, left top, right top, color-stop(56px, #ffcc00), color-stop(56px, #ffdb4d));
  background: -webkit-linear-gradient(left, #fc0 56px, #ffdb4d 56px);
  background: -o-linear-gradient(left, #fc0 56px, #ffdb4d 56px);
  background: linear-gradient(to right, #fc0 56px, #ffdb4d 56px);
  -webkit-box-shadow: 0 0 5px 1px #fc0;
  box-shadow: 0 0 5px 1px #fc0;
  color: #444;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

.link-to-download .link-button.yadisk::before {
  background-image: url("/img/yandex.svg");
}

.downloadBtns {
  text-align: center;
  margin: 37px 0 7px 0;
}
.downloadBtns img {
  margin: 8px 8px;
}
.downloadBtnsSmall {
  text-align: center;
  margin: 37px 0 7px 0;
}
.downloadBtnsSmall img {
  width: 220px;
  margin: 8px 8px;
}

.downloadGreenBtn {
  background-color: #02994b;
  box-shadow: 0 0 3px 1px rgba(2, 153, 75, 0.6);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}
.downloadGreenBtn:hover {
  color: #fff;
  box-shadow: 0 0 6px 1px rgba(2, 153, 75, 0.6);
}

#matPageCont .textBlock {
  background: #1c1c1c;
  padding: 15px;
  text-align: justify;
}
#matPageCont .textBlock h2 {
  font-size: 20px;
}
#matPageCont .textBlock p{
    line-height:1.4;
}
.bottomImgsBlock {
  margin-top: 20px;
}
.bottomImgsBlock img {
  width: 100%;
  margin-top: 22px;
}
.moreImgsBlock {
  margin-top: 0px;
}
.moreImgsBlock a {
  display: block;
  padding: 0 20px;
  line-height: 36px;
  font-size: 14px;
  text-align: center;
}
.moreImgsBlock img {
  width: 100%;
  margin-top: 10px;
}

.tagBlock {
  display: inline-block;
  padding: 7px 10px;
  margin-right: 8px;
  margin-bottom: 8px;
  background: #393939;
}

.spoilerBlock {
  border-left: 8px solid #545454;
  background: #3b3b3b;
  margin-top: 10px;
}
.spoilerTitle {
  color: #ababab;
  line-height: 35px;
}
.spoilerSign {
  color: #fff;
  display: inline-block;
  width: 30px;
  text-align: center;
}
.spoilerText {
  display: none;
  padding: 15px;
  padding-left: 45px;
}

body {
  /*list-style-type:none;*/
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: #252525;
  border-radius: 0;
}
body::-webkit-scrollbar-thumb {
  background-color: #9f9f9f;
  border-radius: 0;
}
.smallImgsCont::-webkit-scrollbar {
  width: 10px;
}
.smallImgsCont::-webkit-scrollbar-track {
  background-color: #252525;
  border-radius: 0;
}
.smallImgsCont::-webkit-scrollbar-thumb {
  background-color: #9f9f9f;
  border-radius: 0;
}

.main-p {
  float: left;
  margin-right: 10px;
  width: 63px;
}

.scroll-wrapper {
  overflow-y: scroll;
  height: 335px;
  scrollbar-color: #3c80d3 #272730;
  scrollbar-width: thin;
}

.scroll-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #272730;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #3c80d3;
  border-radius: 9em;
}

.load-small-info {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-flow: column;
  list-style: none;
  gap: 7px; /*отступ между пунктами*/
  top: 20px; /*размещение в блоке - отсутп сверху*/
  left: -10px; /*размещение в блоке - отсутп слева*/
  font-size: 12px;
}

.load-small-info li {
  background-color: rgba(0, 0, 0, 0.3); /*цвет фона пунктов в rgba (крассный, зеленый, синий, альфа-канал (прозрачность от 0 до 1 с шагом 0.1)*/
  padding: 3px 8px;
}

.load-small-info li b {
  font-weight: bold;
}

.load-small-info-full {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-flow: column;
  list-style: none;
  gap: 7px; /*отступ между пунктами*/
  top: 324px; /*размещение в блоке - отсутп сверху*/
  left: 393px; /*размещение в блоке - отсутп слева*/
  font-size: 12px;
}

.load-small-info-full li {
  background-color: rgba(0, 0, 0, 0.3); /*цвет фона пунктов в rgba (крассный, зеленый, синий, альфа-канал (прозрачность от 0 до 1 с шагом 0.1)*/
  padding: 3px 8px;
}

.load-small-info-full li b {
  font-weight: bold;
}

.cat-tags-wrap{
display: flex;
flex-flow: column wrap;
margin-top: 18px;
}

.cat-tags {
  display: flex;
  flex-flow: row wrap;
  margin: 20px 0;
  width: 100%;
  gap: 10px;
}

.cat-tags a {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 100;
  position: relative;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
}

.cat-tags a:hover {
  border-color: #28a745;
  background-color: rgba(40, 167, 69, 0.3);
}

.cat-tags a.hidden {
  display: none;
}

.cat-tags a.hidden.open {
  display: flex;
}

.cat-tags a .cat-tags-pic {
  width: 22px;
  height: 22px;
  background: #111821 no-repeat 50% / cover;
  border-radius: 50%;
  overflow: hidden;
}

.cat-tags a .count {
  font-size: 13px;
  padding: 2px 4px;
  background-color: #28a745;
  background-color: rgba(40, 167, 69, 0.3);
  border-radius: 5px;
  overflow: hidden;
}

.cat-tags a span {
  font-weight: 400;
}

.caption {
  color: #ffbf00;
  font-size: 14px;
}

.cat-tags .cat-tags__list {
  display: flex;
  flex-wrap: wrap;
}

.cat-tags .cat-tags__link {
  display: flex;
  align-items: center;
  border-bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  padding: 5px 10px;
  color: #fff;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  transition: all 0.5s;
  border: 1px solid #eee;
}
.cat-tags img {
  margin-right: 7px;
  width: 22px;
  height: 22px;
  overflow: hidden;
}

.cat-strk-wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1rem;
}

.cat-strk {
  display: flex;
  flex-flow: column;
  background-color: #252525;
  border-radius: 15px;
  overflow: hidden;
  padding: 0;
}

.cat-strk .cat-strk-content {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat-strk .cat-strk-content li {
  display: flex;
  width: 33.3%;
}

.cat-strk .cat-strk-content li a {
  padding: 15px 10px;
  flex: 1 0 auto;
  width: 33.3%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #323232;
  border-left: 1px solid #323232;
  color: #fff;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}

.cat-strk .cat-strk-content li a:hover {
  color: #28a745;
}

.cat-strk .cat-strk-content li a:hover > .cat-pstr {
  box-shadow: 0 0 0 3px #28a745;
}

.cat-strk .cat-strk-content li a span {
  position: absolute;
  top: 15px;
  right: 15px;
}

.cat-strk .cat-strk-content li a span.cat-num-bg {
  background-color: #28a745;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12px;
  min-width: 32px;
  text-align: center;
  top: 15px;
  right: 5px;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.67);
}

.cat-strk .cat-strk-content li a .cat-pstr {
  width: 55px;
  height: 55px;
  background: no-repeat 50% / cover;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}

.cat-strk .cat-strk-header {
  background-color: #28a745;
  padding: 0 20px;
  color: #fff;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
}

.avatars-wrap {
  display: flex;
  flex-flow: column;
  background-color: #191e20;
  border-radius: 5px;
  padding: 30px;
  margin-bottom: 30px;
}

.avatars-wrap .avatars-title {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #fff;
  letter-spacing: 0.1px;
}

.avatars-wrap .avatars-inf {
  display: flex;
  flex-flow: row;
  gap: 25px;
}

.avatars-wrap .avatars-preview {
  display: flex;
  flex-flow: row;
  column-gap: 25px;
  align-items: flex-end;
}

.avatars-wrap .avatars-preview-item {
}

.avatars-wrap .avatars-preview-item .avatars-preview-item-box {
  width: 184px;
  height: 184px;
  background: #008000 no-repeat 50% / cover;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px -2px #000;
  position: relative;
}

.avatars-wrap .avatars-preview-item:nth-child(2) .avatars-preview-item-box {
  width: 64px;
  height: 64px;
}

.avatars-wrap .avatars-preview-item:nth-child(3) .avatars-preview-item-box {
  width: 32px;
  height: 32px;
}

.avatars-wrap span {
  display: flex;
  margin-top: 7px;
  padding: 0 3px;
}

.avatars-wrap .avatars-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(25, 32, 32, 0.47);
  height: 100%;
  transform: scale(0);
  transition: all 120ms linear;
  -webkit-transition: all 120 linear;
  display: flex;
  flex-flow: column;

  font-size: 15px;
  user-select: none;
}

.avatars-wrap .avatars-preview-item-box:hover .avatars-buttons {
  transform: scale(1);
}

.avatars-wrap .avatars-buttons a {
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms linear;
  -webkit-transition: all 120 linear;
  color: #fff;
}

.avatars-wrap .avatars-buttons a:hover {
  background-color: rgba(25, 32, 32, 0.47);
}

.avatars-wrap .avatars-buttons a.preview-link {
  display: none;
}

.avatars-cats {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
  justify-content: space-between;
}

.avatars-cats .descr {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
  cursor: default;
  user-select: none;
}

.avatars-cats .descr b {
  font-weight: bold;
}

.avatars-cats .sorting-avatars {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

.avatars-cats .sorting-avatars li {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.27);
  border-radius: 20px;
  padding: 5px 20px;
  display: inline-flex;
  align-items: center;
  transition: all 120ms linear;
  -webkit-transition: all 120 linear;
}

.avatars-cats .sorting-avatars li:hover {
  background-color: rgba(0, 0, 0, 0.67);
}

.avatars-cats .sorting-avatars li.active {
  background-color: #008000;
  color: #fff;
}

.avatars-pool {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin-bottom: 30px;
  list-style: none;
  gap: min(16px, calc(5.09091px + 0.909091vw));
  justify-content: start;
}

.avatars-pool li {
  display: flex;
  width: 15%;
  list-style: none;
  position: relative;
  cursor: pointer;
}

.avatars-pool li img {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.avatars-pool li img {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.avatars-pool .avatars-pool-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.67);
  border-radius: 5px;
  transform: scale(0);
  transition: all 120ms linear;
  -webkit-transition: all 120 linear;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  user-select: none;
}

.avatars-pool li:hover .avatars-pool-overlay {
  transform: scale(1);
}

.related-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #111;
}

.related-title {
  font-size: 18px;
  margin-bottom: 0;
  display: flex;
  height: 40px;
  align-items: center;
  padding: 0 10px;
  margin-top: 10px;
  gap: 10px;
}

.uRelatedEntries {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0;
  margin: 15px;
}

.related-items {
  margin-bottom: 8px;
  list-style: none;
}

.related-items:before,
.related-items:after {
  display: none;
}

.related-items a {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
  color: #ccc;
  transition: all 180ms linear;
  -webkit-transition: all 180ms linear;
}

.related-items img {
  width: 100%;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.42);
  object-fit: cover;
  border-radius: 5px;
  transition: all 180ms linear;
  -webkit-transition: all 180ms linear;
  height: 165px;
}

.related-items a:hover {
  color: green;
}

.related-items a:hover img {
  box-shadow: 0 0 0 4px green;
  opacity: 1;
}

.related-items .related-item-title {
  font-size: 15px;
  font-weight: 500;
}

.search-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  line-height: 1;
  height: 100%;
  margin-top: 4px;
}

.search-wrapper svg {
  fill: #fff;
  height: 22px;
  width: 22px;
}

.search-wrapper .button-submit {
  background-color: transparent;
  border: 0 none;
}

.search-wrapper .search-input {
  width: 100%;
  min-width: 170px;
  height: 26px;
  font-size: 15px;
  color: #fff;
  background-color: transparent !important;
  border: 0 none;
  font-weight: 300;
}

.search-wrapper .search-input:focus {
  outline: none;
}

.search-wrapper form {
  display: flex;
  align-items: center;
  background-color: #1a1a1a;
  height: 51px;
  padding: 0 10px 0 15px;
  border-radius: 15px;
  position: relative;
  justify-content: end;
  transition: all 320ms linear;
  -webkit-transition: all 320ms linear;
}

.search-wrapper form .activated {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.logo-link {
  display: inline-flex;
  height: 50px;
  line-height: 1;
  margin-top: 15px;
  gap: 10px;
  font-display: swap;
}

.logo-link .logo-icon {
  background: transparent url("/img/logo-icon.png") no-repeat 50%;
  width: 45px;
  height: 45px;
  transition-duration: 0.7s;
  transition-property: transform;
}

.logo-link .logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 23px;
  font-weight: 400;
  text-transform: uppercase;
  gap: 5px;
  font-display: swap;
}

.logo-link .logo-text .logo-subtext {
  color: #4e81ff;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  font-display: swap;
}
.logo-link:hover .logo-icon {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* ФУТЕР */
.beforeFooterLine {
  background: #252525;
  height: 20px;
  margin-top: 20px;
}
footer {
}
.footerMenu {
  padding: 20px 0;
}
.footerMenu a {
  display: inline-block;
  font-size: 14px;
  padding: 0 20px;
  text-transform: uppercase;
}
#extendedLine {
  margin-left: 0;
  width: calc(100% + 0px);
  border-bottom: 1px solid #53514f;
  margin-bottom: 40px;
}
.footer-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 992px) {
  .footer-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .footer-wrap {
    grid-template-columns: 1fr;
  }
}
.footerTitle {
  text-transform: uppercase;
  font-size: 16px;
  color: #28a745;
  padding-left: 30px;
}
.footerTitle img {
  position: absolute;
  margin-left: -30px;
}
.footerTitle span {
  letter-spacing: 1px;
}
.footerPuncts {
  margin-bottom: 20px;
  padding-left: 30px;
}
.footerPuncts a {
  line-height: 36px;
  display: block;
  font-size: 14px;
}
.copyright {
  background: #fff7f2;
  color: #000;
  line-height: 20px;
  padding: 10px 0;
  font-size: 13px;
}

/*Вид комментариев*/
.comments {
  margin-top: 55px;
  display: flex;
  flex-flow: column;
}

.comment-item {
  display: flex;
  flex-flow: row nowrap;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.comment-avatar {
  background: #191e20 none no-repeat 50% 0 / cover;
  width: 80px;
  height: 80px;
  flex: 1 0 auto;
  box-shadow: 0 0px 0px 2px rgba(0, 0, 0, 0.36);
  border-radius: 5px 30px 5px 30px;
  -webki-border-radius: 5px 30px 5px 30px;
}

.comment-avatar.own {
  box-shadow: 0 0px 0px 2px rgba(0, 128, 0, 0.36);
}

.comment-item-body {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  gap: 8px;
}

.comment-info {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.comment-user {
  display: flex;
  gap: 8px;
  align-items: center;
}

.comment-user .add-user {
  font-weight: 600;
  font-size: 16px;
}

.comment-user .add-user a {
  color: #fff;
}

.comment-user .add-date {
  color: #777;
  font-size: 14px;
}

.comment-message {
  color: rgb(171, 176, 179);
  font-size: 16px;
  font-weight: 325;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.2;
}

.comment-message.administration {
  color: #28a745;
}

.comment-message .comment-answer {
  background-color: #1e711357;
  color: #bcc8bc;
  padding: 8px 15px;
  border-radius: 5px;
  margin-top: 8px;
}

.comment-message a {
  text-decoration: underline;
  color: rgb(171, 176, 179);
}

.comment-message a:hover {
  color: green;
}

.comment-message img {
  vertical-align: middle;
}

.answer-link {
  display: flex;
  font-weight: bolder;
  margin-top: 8px;
  font-size: 14px;
}

.answer-link a {
  background-color: #888e90;
  color: #4d4d4d;
  padding: 2px 5px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 180ms linear;
  -webkit-transition: all 180ms linear;
}

.answer-link a:hover {
  background-color: green;
  color: #fff;
}

/*Форма добавления комментариев*/
.add-comment-form {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  background-color: #141515;
  padding: 18px;
  border-radius: 7px;
  border: 1px solid #000000a1;
}

.add-comment {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 10px;
}

.add-comment .add-name {
  width: 20%;
}

.add-comment .add-name input {
  padding: 0 15px;
  background-color: rgba(0, 0, 0, 0.13) !important;
  border: 0 none;
  color: #fdfeff;
  display: inline-block;
  width: 100%;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #111;
  height: 45px;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
}

.add-comment .add-form {
  width: 80%;
  background-color: rgba(0, 0, 0, 0.13);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #111;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 45px;
  position: relative;
}

.add-comment .add-form.full-page {
  width: 100%;
}

.add-comment .add-form textarea {
  width: 100%;
  padding: 10px 15px;
  background-color: transparent;
  border: 0 none;
  color: #fdfeff;
  display: inline-block;
  resize: none;
  height: 45px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
}

.add-comment .add-form textarea:focus,
.add-comment .add-name input:focus {
  outline: 0 none;
  box-shadow: 0 0 0 3px #22bf2c78;
  -webkit-box-shadow: 0 0 0 3px #22bf2c78;
}

.add-comment .add-form .add-emoji {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
}

.add-comment .add-form .add-emoji:hover {
  background-color: #22bf2c78;
}

.add-comment .add-form .add-emoji img {
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
}

.add-comment .add-form .add-emoji:hover img {
  transform: scale(1.5);
}

.add-comment .add-form .all-smiles {
  position: absolute;
  right: 0;
  top: 50px;
  display: flex;
  flex-flow: row wrap;
  background-color: #161a1c;
  border: 1px solid #111;
  width: 100%;
  max-width: 300px;
  padding: 10px;
  gap: 8px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

.add-comment .add-form .all-smiles figure {
  min-width: 0 !important;
  transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
}

.add-comment .add-form .all-smiles figure:hover {
  transform: scale(1.5);
}

.add-comment .add-form .all-smiles figcaption {
  display: none;
}

.add-comment .add-form .all-smiles.hide {
  display: none;
}

.commError span {
  padding-bottom: 14px;
  display: block;
}

.submit-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  padding: 15px 0;
}

.submit-wrapper.space {
  justify-content: space-between;
}

.submit-wrapper .submit-button {
  border: 0 none;
  padding: 10px;
  background-color: #276ee2 !important;
  border-radius: 3px;
  color: #fff;
  box-shadow: 0 0 3px 1px #276ee2c4;
  cursor: pointer;
  font-weight: 500;
}

/* АДАПТИВНЫЕ СТИЛИ */

/* 4К - 2560 */
@media (max-width: 2560px) {
}

/* Laptop L - 1440 */
@media (min-width: 1440px) and (max-width: 2559px) {
  .cont {
    width: calc(100% - 200px); /*1400px;*/
  }
}

/* Laptop - 1024 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .cont {
    width: calc(100% - 200px); /*1000px;*/
  }
  .catBlock {
    width: calc(50% + 1px);
  }
}

/* Tablet - 768 */
@media (min-width: 768px) and (max-width: 1023px) {
  .cont {
    width: 100%;
  }
  .footerMenu a {
    display: block;
    margin-bottom: 10px;
  }
  .mainCont {
    flex-direction: column-reverse;
  }
  .centerCont {
    width: 100%;
  }
}

/* Mobile L - 425 */
@media (min-width: 425px) and (max-width: 767px) {
  .mainCont {
    flex-direction: column-reverse;
  }
  .centerCont {
    width: 100%;
  }
  .cont {
    width: 100%;
  }
  .footerMenu a {
    display: block;
    margin-bottom: 10px;
  }
  .topBlock1cont {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
  .main1cont {
    margin-right: calc(var(--bs-gutter-x) * 0.5);
    margin-top: 15px;
  }
}

/* Mobile M - 375*/
@media (min-width: 375px) and (max-width: 424px) {
  .mainCont {
    flex-direction: column-reverse;
  }
  .centerCont {
    width: 100%;
  }
  .cont {
    width: 100%;
  }
  .footerMenu a {
    display: block;
    margin-bottom: 10px;
  }

  .centerCont {
    width: 100%;
  }
  .topBlock1cont {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
  .main1cont {
    margin-right: calc(var(--bs-gutter-x) * 0.5);
    margin-top: 15px;
  }
}

/* Mobile S - 320 */
@media (max-width: 374px) {
  .mainCont {
    flex-direction: column-reverse;
  }
  .centerCont {
    width: 100%;
  }
  .cont {
    width: 100%;
  }
  .footerMenu a {
    display: block;
    margin-bottom: 10px;
  }

  .centerCont {
    width: 100%;
  }
  .topBlock1cont {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
  .main1cont {
    margin-right: calc(var(--bs-gutter-x) * 0.5);
    margin-top: 15px;
  }
}

.tabs-switches {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 15px 0 0;
  padding: 0;
}

.tabs-switches li {
  width: 100%;
  display: flex;
}

.tabs-switches li a {
  width: 100%;
  height: 38px;
  display: flex;
  color: #fff;
  background-color: #252429;
  align-items: center;
  justify-content: center;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 45px 0 15px;
}

.tabs-switches li a:hover {
  background-color: #0a0a0c;
}

.tabs-switches li a.active {
  background-color: green;
}

.tabs-switches li a span {
  width: 14px;
  height: 14px;
  display: flex;
  color: #fff;
  background-color: #008000;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJmlDQ1BBZG9iZSBSR0IgKDE5OTgpAAAoFWNgYDJwdHFyZRJgYMjNKykKcndSiIiMUmA/z8DGwMwABonJxQWOAQE+IHZefl4qAwb4do2BEURf1gWZxUAa4EouKCoB0n+A2CgltTiZgYHRAMjOLi8pAIozzgGyRZKywewNIHZRSJAzkH0EyOZLh7CvgNhJEPYTELsI6Akg+wtIfTqYzcQBNgfClgGxS1IrQPYyOOcXVBZlpmeUKBhaWloqOKbkJ6UqBFcWl6TmFit45iXnFxXkFyWWpKYA1ULcBwaCEIWgENMAarTQZKAyAMUDhPU5EBy+jGJnEGIIkFxaVAZlMjIZE+YjzJgjwcDgv5SBgeUPQsykl4FhgQ4DA/9UhJiaIQODgD4Dw745AMDGT/0QRiF8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGjmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDYwLCAyMDIwLzA1LzEyLTE2OjA0OjE3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTAzLTEwVDEyOjEwOjUwKzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTAzLTEwVDEyOjEwOjUwKzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wMy0xMFQxMjoxMDo1MCswMzowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxZDgxNmE3YS04MGJmLTljNDYtODg4OS01MDI5YmUwZTc0YTgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1YjY0ZDRlNC0xODEzLTdlNDMtOWIzZC1kNTA3ZjNiMDE4YmMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMGJmYTFiZC0yOTFlLTMzNGQtOGM2Ny0xMDgxYWFjYWM3ZGIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJBZG9iZSBSR0IgKDE5OTgpIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZjBiZmExYmQtMjkxZS0zMzRkLThjNjctMTA4MWFhY2FjN2RiIiBzdEV2dDp3aGVuPSIyMDI0LTAzLTEwVDEyOjEwOjUwKzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjFkODE2YTdhLTgwYmYtOWM0Ni04ODg5LTUwMjliZTBlNzRhOCIgc3RFdnQ6d2hlbj0iMjAyNC0wMy0xMFQxMjoxMDo1MCswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8cGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPiA8cmRmOkJhZz4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6YzNlMDU0NTItNTNiMS1mMzRmLWFiNWYtZTJlYzNiMTYxNzNmPC9yZGY6bGk+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6RG9jdW1lbnRBbmNlc3RvcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Ip4nPAAAAIFJREFUOBFj+P//PwMlmGHUAIQBQPACiH8AsTQDfrAaiD9jM8AUiPcC8X0glsWheTYQgxR3YjMABFiAeA8Q3wNiOTTNM6CaLUEcXAaAABvUJQ+AmAcqNhmIfwGxLUwRPgNgLtkOxEeBeAJUswWyAkIGgAAjEF+COlsXXXI0JVLRAADjqjnnaM7Q0AAAAABJRU5ErkJggg==");
  background-position: 50% 4px;
  background-size: 8px;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  transition: all 120ms linear;
  -webkit-transition: all 120ms linear;
}

.tabs-switches li a.active span {
  transform: rotate(180deg);
}

.tabs-content {
  display: none;
  padding: 20px;
  background-color: #1d1d1f;
}

.tabs-content.active {
  display: block;
}

.cs-versions table {
  width: 100%;
  margin-top: 10px;
  color: #333;
  font-size: 14px;
  border: 1px solid #eee;
}

.cs-versions th:first-child,
.cs-versions td:first-child {
  padding-left: 15px;
  text-align: left;
}

.cs-versions th,
.cs-versions td {
  text-align: center;
  padding: 5px 10px;
  white-space: nowrap;
  vertical-align: middle;
}

.cs-versions {
  /* border-radius:3px; */
  /* overflow:scroll; */
  /* margin-bottom:10px; */
}

.cs-versions a {
  color: #fff;
  text-decoration: underline;
  border: none;
  transition: none;
}

.cs-versions a:hover {
  text-decoration: none;
}

.cs-versions table {
  width: 100%;
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  border: 1px solid #252429;
}

.cs-versions thead,
.cs-versions tbody tr:nth-child(even) {
  background: #252429;
}

.cs-versions th:last-child,
.cs-versions td:last-child {
  padding-right: 7.5px;
}

.cs-versions th,
.cs-versions td {
  text-align: center;
  padding: 5px 10px;
  white-space: nowrap;
  vertical-align: middle;
}

.cs-versions th:first-child,
.cs-versions td:first-child {
  padding-left: 15px;
  text-align: left;
}

.cs-versions .title {
  width: 270px;
}

.cs-versions .title .icon {
  float: left;
  margin-right: 7px;
}

.cs-versions .download {
  width: 14%;
}

.cs-versions .btn {
  border: none;
  text-decoration: none;
  color: #fff;
  background-color: #0961d3;
  padding: 4px 7px;
  transition: background-color 0.2s;
  line-height: 1;
}

.cs-versions .btn:hover {
  color: #fff;
  background-color: #074391;
}

.standars-versions {
  border-radius: 3px;
  margin-bottom: 10px;
}

.standars-versions table {
  width: 100%;
  margin-top: 10px;
  background: #074391;
  color: #fff;
}

.standars-versions table a {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  transition: none;
}

.standars-versions table a:hover {
  border: none;
}

.standars-versions .btn-primary {
  color: #042e65 !important;
  background-color: #f2f5f9 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  transition: background-color 0.2s;
}

.standars-versions .btn-primary:hover {
  background-color: #d2e2f7 !important;
}

.standars-versions thead,
.standars-versions tbody tr:nth-child(even) {
  background: #053574;
}

.standars-versions th:last-child,
.standars-versions td:last-child {
  padding-right: 7.5px;
}

.standars-versions tbody {
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px;
}

.standars-versions th,
.standars-versions td {
  text-align: center;
}

.standars-versions th:first-child,
.standars-versions td:first-child {
  padding-left: 15px;
  text-align: left;
}

.standars-versions .name .popular {
  font-size: 17px;
}

.standars-versions .title .icon {
  float: left;
  margin-right: 7px;
  padding-top: 3.5px;
}

.standars-versions .btn-primary {
  border: none;
}

.standars-versions .btn-primary:hover {
  background: #02803f;
}

.standars-versions thead {
  text-align: left;
}

.standars-versions th {
  padding-top: 8px;
  padding-bottom: 8px;
}

.standars-versions td {
  white-space: nowrap;
  padding: 5px 10px;
}

.standars-versions td.title {
  min-width: 250px;
  width: 37%;
}

.standars-versions td.download {
  width: 14%;
}

.standars-versions td.download a {
  color: #fff;
}

.btn-text__download:after {
  content: " Скачать";
}

.standars-versions__hint {
  margin-top: 4px;
  color: #444;
}

.standars-versions__hint a {
  color: #444;
  border-color: rgba(68, 68, 68, 0.5);
}

.standars-versions__hint a:visited {
  color: #444;
}

.standars-versions__hint a:hover {
  color: #444;
  border: none;
}

.tab-profile .profile-left {
  flex: 1;
}
.tab-profile .profile-right {
  width: 42.06%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
tab-profile .flex {
  display: flex;
  gap: 40px;
}
.tab-profile .win {
  width: 55%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px 0;
}

.cs-download {
  max-width: 1200px;
  margin: 32px auto;
}

/* ВЕРХНИЙ БЛОК */
.cs-download__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 16px;
  background: #202020 url("/assets/img/de_dust.png") no-repeat 100% 50%;
  border-radius: 8px;
}
.cs-download__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 20px;
}

.cs-download__title {
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}

.cs-download__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #d2d2d2;
}

.cs-download__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.cs-download__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.cs-download__btn svg {
  width: 24px;
  height: 24px;
}

.cs-download__btn-label {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.cs-download__btn-text {
  display: block;
  white-space: nowrap;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.cs-download__btn-text--default {
  transform: translateY(0%);
  opacity: 1;
}

.cs-download__btn-text--hover {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  opacity: 0;
}
.cs-download__btn:hover .cs-download__btn-text--default {
  transform: translateY(-100%);
  opacity: 0;
}

.cs-download__btn:hover .cs-download__btn-text--hover {
  transform: translateY(0%);
  opacity: 1;
}

.cs-download__btn--primary {
  background: #4984fc;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.cs-download__btn--primary:hover {
  background: #ffa53e;
  color: #fff;
}

.cs-download__btn--ghost {
  background: transparent;
  color: #ffffff;
  box-shadow: 0 0 0 1px #333333;
}

.cs-download__btn--ghost:hover {
  background: #222222;
  color: #fff;
}

.cs-download__hero {
  position: relative;
  min-height: 250px;
  overflow: hidden;
}

.cs-download__hero-image {
  position: absolute;
  inset: 0;
  background: url("/assets/img/csplayer.png") no-repeat 100% 50% / contain;
  transition: transform 0.5s ease;
  transform: scale(1);
  will-change: transform;
}

.fade-in-slide {
  animation: 1s fadeSlideIn 0.1s linear forwards;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.cs-download__top:hover .cs-download__hero-image {
  transform: scale(1.06) rotate(1deg);
}

/* НИЖНИЙ БЛОК */
.cs-download__bottom {
}

/* Табы-пилюли сверху */
.cs-download__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cs-tag {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #111111;
  color: #f5f5f5;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Ховер */
.cs-tag:hover {
  background: #ff8b1a;
  border-color: #ff8b1a;
  color: #ffffff;
}

/* Активный таб */
.cs-tag--active {
  background: #ff8b1a;
  border-color: #ff8b1a;
  color: #ffffff;
}

/* Контент снизу: картинка + аккордеоны */
.cs-download__content {
  display: grid;
  grid-template-columns: minmax(0, 225px) minmax(0, 1.4fr);
  gap: 20px;
  align-items: stretch;
  background: #202020;
  border-radius: 8px;
  padding: 16px 16px 20px;
}

.cs-download__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.cs-download__image {
  display: block;
}

/* Аккордеоны */
.cs-download__accordions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-accordion {
  border-radius: 12px;
  background: #111111;
  overflow: hidden;
}

.cs-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #f5f5f5;
}

.cs-accordion__title {
  font-size: 14px;
  margin: 0;
  font-weight: 400;
}

.cs-accordion__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
}

.cs-accordion__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-accordion__chevron {
  width: 18px;
  height: 18px;
  transform: rotate(0deg);
  transition: transform 0.25s ease;
}

/* Когда аккордеон открыт — SVG разворачивается вверх */
.cs-accordion--open .cs-accordion__chevron {
  transform: rotate(180deg);
}

/* Тело спойлера */
.cs-accordion__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  font-size: 13px;
  color: #c5c5c5;
  line-height: 1.5;
  transition: max-height 0.25s ease, padding-bottom 0.2s ease;
}

.cs-accordion__body p {
  margin: 8px 0 12px;
}

/* когда открыт */
.cs-accordion--open .cs-accordion__body {
  padding-bottom: 12px;
  max-height: 240px; /* если контент больше — можно увеличить */
}

/* РЕСПОНСИВ */
@media (max-width: 960px) {
  .cs-download {
    padding: 24px 12px 32px;
  }

  .cs-download__top {
    grid-template-columns: minmax(0, 1fr);
    background-size: cover;
  }

  .cs-download__hero {
    order: -1;
    min-height: 200px;
  }

  .cs-download__content {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-download__image-wrap {
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  .cs-download__tags {
    gap: 6px;
  }

  .cs-tag {
    font-size: 12px;
    padding: 7px 10px;
  }

  .cs-accordion__title {
    font-size: 13px;
  }
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}