html {
    scroll-behavior: smooth;
}

nav.breadcrumbs {

    max-width: 1280px;
    margin: auto;

}

.container {
  position: relative;
    max-width: 1280px;
    margin: auto;
    margin-top: 140px;
    z-index: 1004;
}

.container .title-img {
    max-width: 1280px;
    height: 350px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    /* pointer-events: none; */
}

.container .title-img .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, #15171D 100%);
    pointer-events: none; /* Чтобы элементы под градиентом оставались кликабельными */
}

.container .title-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, #15171d 100%);
    pointer-events: none; /* Чтобы градиент не блокировал взаимодействие с изображением */
  }









  .container .title-img .back_button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: #15171d;
    position: absolute;
    left: 50px;
    top: 30px;
    cursor: pointer;
    transition: .2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container .title-img .back_button:hover {
    transform: scale(0.9);
  }

  .container .title-img .back_button .fas {
    color: white;
    font-size: 13px;
  }

  .container header h1 {
    position: relative;
    font-family: 'Nunito', sans-serif;
    padding: 0 50px;
    z-index: 2;
    font-size: 42px;
    font-weight: 800;
    color: rgb(255, 255, 255);
    margin-top: 17px;
    margin-bottom: 18px;
    text-transform: uppercase;
  }







  .container header .breadcrumbs {
    position: relative;
    z-index: 2;
    margin-top: -175px;
    padding: 0 50px;
    display: flex;
    align-items: center;
  }

  .container header .breadcrumbs a {
    color: rgba(255, 255, 255, 0.603);
    font-size: 14px;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
  }

  .container header .breadcrumbs span {
    color: #7775D1;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
  }

  .container header .breadcrumbs i {
    color: rgba(255, 255, 255, 0.61);
    margin: 0 10px;
    font-size: 7px;
  }








  .container header .tags_time .tags {
    position: relative;
    padding: 0 50px;
    padding-right: 40px;
  }

  .container header .tags_time .tags a {
    color: #7775D1;
    border: 1px solid #7775D1;
    text-decoration: none;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 900;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 8px;
    margin-right: 4px;
    font-family: 'Nunito', sans-serif;
  }

  .container header .tags_time {
    display: flex;
    align-items: center;
    z-index: 2;
    position: relative;
    padding-bottom: 40px ;
    border-bottom: 1px solid rgba(255, 255, 255, 0.068);
  }

  .container header .tags_time time {
    color: #9090a382;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
  }







  .container .content-wrapper {
    display: flex;
    /* width: 86%; */
    position: relative;
    z-index: 2;
  }

  .container .content-wrapper.active {
    width: 78%;
    
  }






  .container .content-wrapper .main-content {
    width: 100%;
    max-width: 1000px;
  }










  .container .content-wrapper .sidebar {
    position: relative;
    /* border: 1px solid purple; */
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-top: 40px;
  }


  .container .content-wrapper .sidebar nav.toc {
    border-left: 1px solid rgba(255, 255, 255, 0.103);
    padding-left: 25px;
    /* position: fixed; */
    position: relative;
    
  }

  .container .content-wrapper .sidebar nav.toc.fixed {
    position: fixed;
  }


  
  .container .content-wrapper .sidebar nav.toc .scroll-indicator {
    position: absolute;
    left: 0;
    top: 0;
    height: 5px;
    width: 1px; /* Ширина полоски */
    background-color: #7775D1; /* Цвет полоски */
}



  .container .content-wrapper .sidebar nav.toc ul {
    padding: 0;
    list-style-type: none;
  }

  .container .content-wrapper .sidebar nav.toc ul li {
    padding: 5px;
  }

  .container .content-wrapper .sidebar nav.toc ul li.h3 {
    margin-left: 25px;
    font-size: 17px;
    font-weight: 500;
  }

  .container .content-wrapper .sidebar nav.toc ul li a {
    font-family: 'Nunito', sans-serif;
    text-decoration: none;
    color: #9C9CB0;
    font-size: 16px;
    font-weight: 600;
    transition: .2s;
  }

  .container .content-wrapper .sidebar nav.toc ul li a.active {
    color: #ffffff;
  }



  /* Read More (Почитать еще) premium block */
  .container .content-wrapper .sidebar .read-more {
    position: relative;
    width: 100%;
    margin-top: 50px;
    padding: 16px;
    border-radius: 16px;
    /* background: linear-gradient(180deg, rgba(119,117,209,0.08) 0%, rgba(26,29,36,0.6) 100%);
    border: 1px solid rgba(119,117,209,0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03); */
    overflow: hidden;
  }

  .container .content-wrapper .sidebar .read-more h3 {
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
  }

  .container .content-wrapper .sidebar .read-more__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .container .content-wrapper .sidebar .read-more__item {
    width: 100%;
  }

  .container .content-wrapper .sidebar .read-more__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    text-decoration: none;
    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.02);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .container .content-wrapper .sidebar .read-more__link:hover {
    transform: translateY(-2px);
    background: rgba(119,117,209,0.08);
    border-color: rgba(119,117,209,0.35);
    box-shadow: 0 6px 18px rgba(119,117,209,0.18);
  }

  .container .content-wrapper .sidebar .read-more__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: #252833;
    position: relative;
  }

  .container .content-wrapper .sidebar .read-more__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1);
    transition: transform .3s ease;
  }

  .container .content-wrapper .sidebar .read-more__link:hover .read-more__thumb img {
    transform: scale(1.05);
  }

  .container .content-wrapper .sidebar .read-more__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* for ellipsis */
  }

  .container .content-wrapper .sidebar .read-more__title {
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Light theme adjustments */
  body.light-theme .container .content-wrapper .sidebar .read-more {
    background: #E7E7E7;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.2);
  }

  body.light-theme .container .content-wrapper .sidebar .read-more h3 {
    color: #000000;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
  }

  body.light-theme .container .content-wrapper .sidebar .read-more__link {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
  }

  body.light-theme .container .content-wrapper .sidebar .read-more__link:hover {
    background: rgba(93,95,239,0.08);
    border-color: rgba(93,95,239,0.35);
    box-shadow: 0 6px 18px rgba(93,95,239,0.15);
  }

  body.light-theme .container .content-wrapper .sidebar .read-more__title {
    color: #000000;
  }








  article {
    padding: 0 50px;
    padding-top: 35px;
  }

  article p {
    color: white;
    font-size: 18px;
    line-height: 28px;
    font-family: 'Nunito', sans-serif;
  }

  article p strong {
    font-weight: 900;
    font-size: 19px;
  }

  article section {

  }

  article h2 {
    color: white;
    margin-top: 45px;
    font-family: 'Nunito', sans-serif;
  }

  article h3 {
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 26px;
    margin-top: 30px;
    margin-bottom: 2px;
  }

  article figure {
    margin: 60px 0px;
    margin-bottom: 20px;
  }

  article figure figcaption {
    color: rgba(255, 255, 255, 0.534);
    font-size: 13px;
    margin-top: 8px
  }

  article figure img {
    border-radius: 20px;
  }

  article ul {
    margin-top: 30px;
    list-style: none;
    padding-left: 40px; /* space for custom bullet (::after) */
  }

  article ol {
    list-style-type: decimal;
    color: white;
    font-size: 14px;
    padding-left: 10px;
  }

  article ul li {
    position: relative;
  }

  article ul li:after {
    content: "";
    position: absolute;
    left: -38px;
    top: 8px;
    width: 18px;
    height: 6px;
    background-color: #7775D1;
    border-radius: 5px;
  }

  article ul li p {
    color: white;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    white-space: normal; /* Позволяет переносить строки */
    word-wrap: break-word; /* Старое имя свойства */
    overflow-wrap: break-word; /* Новое имя свойства */
  }

  article section aside {
    position: relative;
    margin-top: 70px;
    padding: 5px 0px 25px 40px;
    background-color: #7775d115;
    border-left: 2px solid #7775D1;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
  }

  article section aside .overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100%;
    background: linear-gradient(to right, #1D1F2C, transparent);
}

  article section aside img {
    width: 600px;
    position: absolute;
    right: 0;
    top: -100px;
  }

  article section aside h3 {
    position: relative;
    z-index: 2;
  }

  article section aside a {
    position: relative;
    display: block;
    color: white;
    font-size: 22px;
    font-family: 'Nunito', sans-serif;
    margin: 10px 0;
    z-index: 2;
  }



  table {
    /* border-collapse: collapse; */
    
    border-spacing: 0 15px;
    margin: auto;
    margin-top: 80px;
  }

  table thead tr {
    

  }

  table thead tr th {
    color: rgba(255, 255, 255, 0.534);
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
  }

  table tbody tr {
    margin-bottom: 20px;
    background-color: #1a1d24;
    
  }

  table tbody tr {

  }

  table tbody tr td {
    padding: 22px 85px;
    color: white;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
  }


  table tbody tr td .x {
    opacity: .3;
  }

  table tbody tr td.border {
    border-radius: 14px 0 0 14px;
  }

  table tbody tr td.border_right {
    border-radius: 0 14px 14px 0;
  }


  section .figure_wrap {
    display: flex;
    justify-content: space-between;
  }


  section .figure_wrap figure {
    width: 48%;
    overflow: hidden;
  }

  section .figure_wrap figure img {
    width: 100%;
  }

  article footer {
    width: 100%;

    margin-top: 0px;
    border-top: none;
  }

  figure.single img {
    max-width: 900px;
  }

  article p a {
    color: #7e7de0;
    font-weight: 600;
    font-size: 21px;
    text-decoration: none;
  }

  article p a:hover {
    text-decoration: underline;
  }


  li strong {
    color: white;
    font-size: 16px;
    font-weight: 800;
  }


  section.brief {
    border: 3px solid #7775D1;
    border-radius: 15px;
    padding: 20px 40px;
    margin-top: 50px;
  }

  section.brief h2 {
    margin: 0;
  }
  section.brief ul {
    list-style-type: none;
  }

  section.brief ul li {
    color: white;
    font-size: 20px;
    margin-bottom: 8px;
  }

  #poll {
    background-color: #1A1D24;
    padding: 30px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 50px;
  }

  #poll button {
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: white;
    border: 2px solid #7775D1;
    text-transform: uppercase;
    border-radius: 30px;
    padding: 10px 35px;
    transition: .12s;
    display: block;
    background-color: transparent;
    cursor: pointer;
    margin-top: 40px;
  }

  #poll button:hover {
    background-color: #7775D1;
    color: white;
  }

  #poll h2 {
      margin-top: 0;
      font-size: 28px;
      margin-bottom: 25px;
  }

  #poll-form label {
      display: block;
      margin-bottom: 10px;
      font-size: 18px;
      color: white;
      cursor: pointer;
  }

  #poll-form input[type="radio"] {
      margin-right: 10px;
      appearance: none;
      width: 16px;
      height: 16px;
      border: 1px solid #7775D1;
      border-radius: 50%;
      outline: none;
      cursor: pointer;
      transition: background 0.2s ease;
  }

  #poll-form input[type="radio"]:checked {
      background-color: #7775D1;
  }

  #poll-form button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
  }

  #poll-results {
      margin-top: 20px;
  }

  .result-bar {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
  }

  .result-bar .label {
      width: 150px;
      font-size: 16px;
      color: white;
  }

  .result-bar .bar {
      flex: 1;
      height: 20px;
      background-color: #dddddd0d;
      margin: 0 10px;
      border-radius: 4px;
      overflow: hidden;
  }

  .result-bar .bar-inner {
      height: 100%;
      background-color: #7775D1;
      transition: width 0.3s ease;
  }

  .result-bar .percentage {
      width: 50px;
      text-align: right;
      font-size: 16px;
      color: white;
  }

  .total-votes {
      margin-top: 20px;
      font-size: 16px;
      text-align: right;
      color: rgba(255, 255, 255, 0.274);
  }




  #reaction-wrapper {
    position: relative;
}

#reaction-block {
    display: flex;
    gap: 10px;
    padding: 10px 25px;
    background-color: #1A1D24;
    border-radius: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.reaction {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #252833;
    border-radius: 50px;
    padding: 5px 10px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 18px;
    order: 1; /* Добавляем порядок по умолчанию */
    border: 1px solid transparent;
}

.reaction#add-reaction {
    order: 2; /* Гарантируем, что "плюсик" будет последним */
}

.reaction:hover {
    background-color: #555;
}

.count {
    margin-left: 5px;
    font-size: 14px;
    color: #ffffff8f;
}

#emoji-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background-color: #1A1D24;
    border-radius: 20px;
    position: absolute;
    bottom: 61px;
    left: 50%;
    z-index: 1000;
    width: 210px;
    transform: translateX(-50%);
}

.emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #252833;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 20px;
}

.emoji:hover {
    background-color: #555;
}

.reaction.active {
  border: 1px solid #7775D1;
}

/* .emoji.active {
  background-color: #555; 
} */

.confetti {
  position: fixed;
  width: 6px;
  height: 6px;
  background-color: red;
  opacity: 0.9;
  z-index: 9999;
  pointer-events: none;
}



@keyframes confetti-fall {
    0% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) rotate(720deg);
        opacity: 0;
    }
}






.info-bar {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #15171D;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  font-family: Arial, sans-serif;
}
.info-bar .left, .info-bar .right {
  display: flex;
  align-items: center;
}
.info-bar .icon {
  margin-right: 9px;
  font-size: 16px;
  color: #ffffff85;
}
.info-bar .comments {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-bar .comments:hover {
  text-decoration: underline;
}

.info-bar .comments span {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.603);
}

.info-bar .right span {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.603);
}

.info-bar .right svg {
  opacity: .4;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.info-bar .comments svg {
  opacity: .4;
  height: 21px;
  width: 26px;
  margin-right: 8px;
}











.suggestion-block {
  display: flex;
  align-items: center;
  background-color: #1A1D24;
  padding: 15px;
  border-radius: 12px;
  margin-top: 20px;
  padding: 60px 40px;
}

.arrow-icon {
  color: #ffffff;
  font-size: 18px;
  margin-right: 30px;
}

.suggestion-title {
  font-weight: bold;
  margin-right: 5px;
  font-size: 18px;
  color: white;
  margin-right: 10px;
}

.suggestion-link {
  color: #dbdbdb;
  text-decoration: none;
  font-size: 17px;
  font-weight: normal;
}

.suggestion-link:hover {
  text-decoration: underline;
}















.theme-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

span#theme-icon svg {
  margin-top: 5px;
}

.theme-switcher button.menu-item svg {
  height: 22px;
}

.theme-switcher button.menu-item svg.moon {
  height: 17px;
}



#theme-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  background-color: #1A1D24;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

#theme-toggle i.fa-sun {
  font-size: 16px;
}

#theme-toggle i.fa-moon {
  font-size: 18px;
}

.menu {
  backdrop-filter: blur(7px);
    display: none;
    position: absolute;
    top: 90px;
    width: 195px;
    right: -80px;
    /* background-color: #12182954; */
    background-color: #14151ad4;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1000;
}

.menu-item svg {
  position: absolute;
  margin-right: 15px;
  left: 20px;
}



.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 15px 20px 15px 55px;
  font-size: 16px;
  width: 100%;
  text-align: left;
  color: rgba(255, 255, 255, 0.384);
  cursor: pointer;
}

.menu-item:hover {
  background-color: #66666617;
}

.menu-item.active {
  background-color: #66666621;
  color: white;
}

body.light-theme .menu button.menu-item svg {
  filter: invert(0%) sepia(90%) saturate(7460%) hue-rotate(346deg) brightness(5%) contrast(111%);
  opacity: .6;
}

.show {
  display: block;
}


.dark-theme {
  /* Темная тема как дефолтная, поэтому без изменения фона */
}

body.light-theme {
  /* background-color: #ffffff;
  color: #000000; */
  background-color: #ffffff;
}

body.light-theme .container .title-img .overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, #a1a6b500 100%);
}


body.light-theme .container .title-img::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, #ffffff 100%);
}

body.light-theme .container header h1 {
  color: rgb(45 45 45);
}

body.light-theme .container header .breadcrumbs a {
  color: rgb(45 45 45);
  font-weight: 800;
}

body.light-theme .container header .breadcrumbs i {
  color: rgb(45 45 45);
}

body.light-theme article p {
  color: rgb(45 45 45);
}

body.light-theme article h2 {
  color: rgb(45 45 45);
}

body.light-theme .container .content-wrapper .sidebar nav.toc {
  border-left: 1px solid rgb(0 0 0 / 14%);
}

body.light-theme .container .content-wrapper .sidebar nav.toc ul li a {
  color: #26262b;
}

body.light-theme .container .content-wrapper .sidebar nav.toc ul li a.active {
  color: #5D5FEF;
}

body.light-theme article figure figcaption {
  color: rgb(45 45 45);
}

body.light-theme article h3 {
  color: rgb(45 45 45);
}

body.light-theme article p strong {
  color: rgb(45 45 45);
}

body.light-theme article ul {
  list-style-type: none;
}

body.light-theme article section aside .overlay {
  background: linear-gradient(to right, #e9e9e9, transparent);
}

body.light-theme article section aside a {
  color: black;
}

body.light-theme table thead tr th {
  color: rgb(0 0 0 / 53%);
}

body.light-theme table tbody tr {
  background-color: #e7e7e7;
}

body.light-theme table tbody tr td.border {
  color: black;
}

body.light-theme section.brief ul li {
  color: black;
}

body.light-theme .suggestion-block {
  background-color: #e7e7e7;
}

body.light-theme .arrow-icon {
  color: black;
}

body.light-theme .suggestion-title {
  color: black;
}

body.light-theme .suggestion-link {
  color: black;
}

body.light-theme > header .wrapper .header__reg a.login {
  color: black;
  border: 2px solid #222221;
}

body.light-theme > header .wrapper .header__reg a.login:hover {
  background-color: #222221;
  color: white;
}

body.light-theme > header .wrapper .header__reg a.subscription {
  color: black;
  opacity: 1;
}

body.light-theme > header .wrapper .header__left .header__nav li > a {
  color: black;
  opacity: 1;
}


body.light-theme #theme-toggle {
  background-color: transparent;
  border: 0px solid #22222177;
}

body.light-theme .container .title-img .back_button {
  background-color: rgba(255, 255, 255, 0.473);
  text-decoration: none;
  /* border: 1px solid #222221; */
  backdrop-filter: blur(5px);
}

body.light-theme .container .title-img .back_button svg {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme article ol {
  color: black;
}

body.light-theme article footer {
  background-color: transparent;
}

body.light-theme #reaction-block {
  background-color: #E7E7E7;
}

body.light-theme #poll {
  background-color: #E7E7E7;
}

body.light-theme .result-bar .label {
  color: black;
}

body.light-theme .result-bar .bar {
  background-color: #dbdbdb;
}

body.light-theme .result-bar .percentage {
  color: black;
}

body.light-theme .total-votes {
  color: rgba(0, 0, 0, 0.274);
}

body.light-theme #poll-form label {
  color: black;
}


body.light-theme #poll button {
  color: black;
}

body.light-theme .info-bar {
  background-color: #E7E7E7;
}

body.light-theme .info-bar .right span {
  color: black;
}

body.light-theme .info-bar .icon {
  color: #51515185;
}

body.light-theme .info-bar .comments span {
  color: black;
}


body.light-theme article section aside {
  background-color: #e7e7e7;
}

body.light-theme section.brief {
  border: 3px solid black;
}

body.light-theme .reaction {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.24);
}

body.light-theme .reaction span {
  color: black;
}

body.light-theme .reaction.active {
  border: 1px solid #5D5FEF
}

body.light-theme #emoji-menu {
  backdrop-filter: blur(2px);
  background-color: #e7e7e78f;
}

body.light-theme .emoji {
  background-color: transparent;
}

body.light-theme > header .wrapper .header__reg a.name {
  color: black;
  opacity: 1;
}

body.light-theme > header .wrapper .header__reg a.logout {
  border: 2px solid black;
  color: black;
}

body.light-theme > header .wrapper .header__reg a.logout:hover {
  background-color: black;
  color: white;
}

body.light-theme .menu {
  background-color: #ababab00;
}

body.light-theme .menu-item {
  color: rgb(44, 44, 44);
}

body.light-theme .container header .breadcrumbs span {
  color: rgb(45 45 45);
}

body.light-theme .header__miniLogo img {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme table tbody tr td .x {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme .info-bar .right svg {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme  .info-bar .comments svg {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme .container header .tags_time time {
  color: #9090a3;
}

body.light-theme .suggestions-title {
  color: black;
}

body.light-theme .suggestion-item {
  background-color: #E7E7E7;
}

body.light-theme .suggestion-meta span svg {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme .comment-area textarea, body.light-theme .reply-area textarea {
  background-color: #E7E7E7;
}

body.light-theme .comment-area button, body.light-theme .reply-area button {
  border: 2px solid rgba(0, 0, 0, 0.678);
  color: black;
}

body.light-theme .comment-area button:hover, body.light-theme .reply-area button:hover {
  background-color: black;
  color: white;
}

body.light-theme  .username {
  color: rgba(0, 0, 0, 0.678);
}

body.light-theme .comment-header .date {
  color: rgb(0 0 0 / 73%);
}

body.light-theme .comment-text {
  color: rgba(0, 0, 0, 0.678);
}

body.light-theme .comment-header .delete-comment {
  color: rgb(0 0 0 / 64%);
}

body.light-theme .avatar {
  background-color: #ededed;
}

body.light-theme .avatar svg {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme footer {
  background-color: #FFFFFF; 
}

body.light-theme  footer .wrapper .footer__first img {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(358deg) brightness(24%) contrast(102%);
}

body.light-theme  .footer__third p {
  background-color: #FFFFFF; 
}

body.light-theme .rating-info {
  color: rgba(0, 0, 0, 0.418);
}











.rating-block {
  font-family: Arial, sans-serif;
}
.rating-block h2 {
  font-size: 18px;
}
.stars {
  display: inline-block;
  direction: rtl;
  font-size: 2em;
  unicode-bidi: bidi-override;
}
.stars > label {
  color: #ccc;
  font-size: 2em;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: transform 0.2s;
}
.stars > label:hover,
.stars > label:hover ~ label,
.stars > input:checked ~ label {
  color: gold;
}
.stars > input {
  display: none;
}
.rating-info {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.336);
}
.stars.readonly > label {
  cursor: default;
}
.bounce {
  animation: bounce 0.8s;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-7px);
  }
  60% {
      transform: translateY(-3px);
  }
}























.comments-container {
  width: 100%;
  background-color: transparent;
  border-radius: 10px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
  margin-top: 25px;
}
.comment-area, .reply-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.comment-area textarea, .reply-area textarea {
  width: 100%;
  height: 125px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #5555554f;
  background-color: #1A1D24;
  color: #fff;
  resize: none;
  font-size: 16px;
  transition: .2s;
  padding-right: 120px;
}

.comment-area textarea:focus, .reply-area textarea:focus {
  border: 1px solid #7775D1; /* Замените #007BFF на нужный вам цвет */
  outline: none; /* Убирает стандартное обведение */
}

.comment-area button, .reply-area button {
  position: absolute;
  margin-left: 10px;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  border: 2px solid #7775D1;
  /* background-color: #5D5FEF; */
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  transition: .2s;
  right: 20px;
  bottom: 20px;
}
.comment-area button:hover, .reply-area button:hover {
  background-color: #7775D1;
}
.comment {
  margin-bottom: 20px;
  padding: 13px 0px;
  border-radius: 8px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.048);
}
.comment-content {
  display: flex;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1A1D24;
  margin-right: 15px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar svg { 
  opacity: .3;
}

.comment-body {
  flex-grow: 1;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.username {
  font-weight: 700;
  color: #fffffff1;
  font-size: 15px;
}
.comment-text {
  margin-top: 16px;
  color: #dcdcdcc9;
  font-size: 17px;
}
.comment-text span {
  font-size: 13px;
  color: #7775D1;
}
.comment-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  color: #999;
}
.comment-header .date {
  margin-top: 3px;
  font-size: 12px;
  color: rgb(255 255 255 / 28%);
}
.reply {
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #7775D1;
}

.reply-area {
  display: none;
  margin-top: 10px;
}
.reply-area.active {
  display: flex;
  
}
.reply-to {
  color: #007BFF;
  font-weight: bold;
  margin-right: 5px;
}

.comment-thread {
  margin-bottom: 20px;
}

.replies {
  margin-left: 50px;
}

.replies .comment {
  margin-bottom: 10px;
}

.char-counter {
  position: absolute;
  color: rgba(255, 255, 255, 0.322);
  font-size: 12px;
  top: 10px;
  right: 20px;
}

.delete-comment {
  color: white;
}

/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.2s ease-in-out;
}

/* Анимация плавного исчезания */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.fade-out {
  animation: fadeOut 0.2s ease-in-out forwards;
}

.comment-header .delete-comment {
  color: rgba(255, 255, 255, 0.158);
  font-size: 11px;
  cursor: pointer;
}

.comment-header .delete-comment:hover {
  color: rgba(255, 255, 255, 0.26);
}


















.article-suggestions {
  padding: 40px 0px;
}

.suggestions-title {
  color: white;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.suggestions-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.suggestion-item {
  display: flex;
  flex-direction: column;
  /* border: 1px solid #e0e0e0; */
  border-radius: 8px;
  overflow: hidden;
  background-color: #1A1D24;
  width: calc(50% - 165px); /* Adjust based on gap */
  box-sizing: border-box;
  transition: .2s;
}

.suggestion-item:hover {
  transform: translateY(-2%);
}

.suggestion-item a {
  text-decoration: none;
}

.suggestion-item img {
  width: 100%;
  height: auto;
}

.suggestion-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.suggestion-title {
  font-size: 16px;
  font-weight: bold;
  /* margin: 0 0 10px 0; */
}

.suggestion-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
  margin-top: 10px;
}

.suggestion-meta span {
  display: flex;
  align-items: center;
  font-weight: 800;
}

.suggestion-meta span svg {
  opacity: .4;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.suggestion-meta img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}






.article-rating {
  display: flex;
}

/* визул рейтинг статьи  */
.rating-widget {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
}

.rating-widget__stars {
  display: inline-block;
  color: #FFD700; /* Цвет заполненных звезд */
}

.rating-widget__star {
  font-size: 1.5em;
}

.rating-widget__star--filled {
  color: #FFD700; /* Цвет заполненных звезд */
}

.rating-widget__avg-rating {
  margin-left: 8px;
  font-size: 1.2em;
  font-weight: bold;
}

.rating-widget__vote-count {
  margin-left: 4px;
  font-size: 0.9em;
  color: #666;
}

.article-rating__stars {
  display: flex;
}

.article-rating__stars span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-rating__stars span svg {
  width: 15px;
}

.article-rating__stars span svg.full {
  margin-right: 3px;
}

.article-rating__stars span svg.half {
  width: 18px;
}

.article-rating__stars span svg.empty {
  width: 18px;
}

span.article-rating__average-value {
  color: white;
  font-size: 15px;
  margin-left: 8px;
}

.article-rating__votes {
  display: flex;
  align-items: center;
}

.article-rating__votes span {
  color: #9090a382;
  font-size: 13px;
  margin-left: 8px;
}







































  @media screen and (max-width: 1310px) {
    .container .content-wrapper .main-content {
      max-width: 900px;
    }

    .suggestion-item {
      width: 31.5%;
    }

    figure.single img {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 1100px) {
    .container .content-wrapper .main-content {
      max-width: 750px;
    }

    .suggestion-item {
      width: 31%;
    }

    .suggestion-item .suggestion-title {
      font-size: 13px;
    }

    .suggestion-block {
      padding: 25px 40px;
    }

    .suggestion-link {
      font-size: 14px;
    }

    .suggestion-title {
      font-size: 15px;
    }

    .arrow-icon {
      margin-right: 20px;
    }

    section.brief h2 {
      font-size: 3rem;
    }

    article h3 {
      font-size: 22px;
      margin-top: 20px;
    }

    section.brief ul li {
      font-size: 17px;
    }

    section.brief {
      border: 2px solid #7775D1;
    }

    table tbody tr td {
      padding: 22px 35px;
    }

    .suggestion-block {
      margin-top: 30px;
    }

  }


  @media screen and (max-width: 1280px) {
    .container .title-img img {
      width: 100%;
    }

    .container .content-wrapper .main-content {
      width: auto;
    }
  }

  @media screen and (max-width: 1050px) {
    .container header .breadcrumbs {
      margin-top: -235px;
    }

    .container header h1 {
      font-size: 36px;
    }

    .suggestion-item {
      width: 31.5%;
    }

    .container .content-wrapper {
      position: relative;
      z-index: 2;
      margin-top: -40px;
    }

    article p {
      color: white;
      font-size: 16px;
      line-height: 24px;
      font-family: 'Nunito', sans-serif;
    }

    article h2 {
      margin-top: 22px;
    }

    article section aside {
      margin-top: 42px;
    }

    .container .content-wrapper .sidebar {
      display: none;
    }

    .container .content-wrapper.active {
      width: 100%;
    }

    figure.single img {
      width: 100%;
    }

    .container .content-wrapper .main-content {
      max-width: 1000px;
    }
    
  }
  
  @media screen and (max-width: 840px) {
    .suggestion-item {
      width: 31%;
    }
  }

  @media screen and (max-width: 830px) {
    table tbody tr td {
      padding: 22px 60px;
    }

    .container .title-img .overlay {
      height: 75%;
    }

    article p {
      font-size: 15px;
    }

    .container header h1 {
      font-size: 30px;
    }

    .container header .breadcrumbs {
      margin-top: -255px;
    }

    article {
      padding-top: 20px;
    }

    article h2 {
      font-size: 23px;
    }

    article p strong {
      font-size: 16px;
    }

    .container .title-img {
      height: 260px;
    }

    .container header .breadcrumbs {
      margin-top: -170px;
    }

    .container .title-img .overlay {
      height: 100%;
    }


    article section aside img {
      width: 400px;
      position: absolute;
      right: 0;
      top: -35px;
    }

    article section aside .overlay {
      width: 400px;
    }

    article h3 {
      font-size: 22px;
    }

    article p a {
      font-size: 16px;
    }

    section.brief ul li {
      font-size: 17px;
    }

    #poll h2 {
      font-size: 21px;
    }

    #poll-form label {
      font-size: 16px;
    }

    #poll button {
      font-size: 14px;
      margin-top: 30px;
    }

    article {
      margin-top: 30px;
    }

  }



  @media screen and (max-width: 770px) {
    table tbody tr td {
      padding: 22px 25px;
    }

    .comment-text {
      font-size: 15px;
    }

    .comment-text {
      margin-top: 10px;
    }

    .comment  {
      margin-bottom: 8px;
    }
  }

  @media screen and (max-width: 740px) {
    .suggestion-block {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .suggestion-block .arrow-icon {
      display: none;
    }
  }

  
  @media screen and (max-width: 680px) {

    .suggestion-item {
      width: 48%;
    }

    article ul {
      max-width: 440px;
    }

    section.brief ul li {
      font-size: 15px;
    }

    .brief ul {
      margin-top: 10px;
    }

    .brief h3 {
      font-size: 19px;
      margin-top: 15px;
    }

    body.light-theme .container .title-img img {
      opacity: .3;
    }

  }


  @media screen and (max-width: 650px) {
    section.brief h2 {
      font-size: 2.4rem;
    }

    .brief h3 {
      font-size: 17px;
      margin-top: 13px;
    }

    section.brief {
      padding: 20px 20px;
    }

    section.brief {
      border: 1px solid #7775D1;
    }

    article section aside img {
      width: 310px;
    }
    article section aside .overlay {
      width: 310px;
    }

    article h3 {
      font-size: 20px;
    }

    article section aside a {
      font-size: 20px;
    }


  }

  @media screen and (max-width: 615px) {

    .suggestion-item {
      width: 98%;
    }

    .suggestion-item img {
      opacity: .3;
    }



    .suggestion-item {
      position: relative;
    }

    .suggestion-content {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .suggestion-meta span {
      margin-right: 20px;
    }

    .suggestion-item .suggestion-title {
      text-align: center;
    }

  }

  @media screen and (max-width: 560px) {
    .container header h1 {
      font-size: 23px;
    }

    .container header .breadcrumbs {
      padding: 0 20px;
    }

    .container header h1 {
      padding: 0 20px;
    }

    article {
      padding: 0 20px;
      margin-top: 40px;
    }

    article p {
      font-size: 15px;
    }

    article h2 {
      font-size: 19px;
    }

    article figure {
      margin: 25px 0;
    }

    article h3 {
      margin-top: 10px;
      font-size: 20px;
    }

    article p strong {
      font-size: 15px;
    }

    article section aside a {
      font-size: 16px;
    }

    article section aside img {
      width: 280px;
    }

    article section aside .overlay {
      width: 280px;
    }

    article section aside {
      padding: 5px 0px 5px 40px;
    }

    article p a {
      font-size: 15px;
    }

    article {
      padding: 0 30px;
    }

    .container header .tags_time .tags {
      padding: 0 30px;
    }

    .container header h1 {
      padding: 0 30px;
    }
    .container header .breadcrumbs {
      padding: 0 30px;
    }

    .container .title-img::after {
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) -125%, #15171d 100%);
    }

    article {
      margin-top: 60px;
    }

    .container .title-img .back_button {
      width: 60px;
      height: 24px;
      left: 30px;
      top: 20px;
    }

    .container header .breadcrumbs {
      margin-top: -195px;
    }
  }


  @media screen and (max-width: 500px) {
    article ul {
      max-width: 340px;
    }
  }


  @media screen and (max-width: 455px) {
    .container header .breadcrumbs {
      display: flex;
      flex-wrap: wrap;
    }

    .container .title-img .back_button {
      left: 20px;
      top: 15px;
      
    }
    .container header .breadcrumbs {
      margin-top: -210px;
      padding: 0 20px;
    }

    .container header h1 {
      padding: 0 20px;
      margin: 10px 0;
      font-size: 20px;
    }

    .container header .tags_time .tags a {
      font-size: 10px;
    }

    .container header .tags_time .tags {
      padding: 0 20px;
    }

    .container header .breadcrumbs a {
      font-size: 12px;
    }
    .container header .breadcrumbs span {
      font-size: 12px;
    }

    .container header .tags_time time {
      font-size: 13px;
    }

    .container header .tags_time {
      padding-bottom: 12px;
    }

    article {
      margin-top: 53px;
      padding: 0 20px;
    }

    article p {
      line-height: 20px;
      margin: 6px 0px;
    }

    article h2 {
      font-size: 17px;
      margin: 8px 0px;
    }

    article h3 {
      font-size: 16px;
      margin: 7px 0px;
    }

    article ul li p {
      font-size: 14px;
    }

    article p strong {
      font-size: 14px;
    }

    article section aside {
      margin-bottom: 30px;
    }

    table {
      margin-top: 20px;
    }

    table thead tr th {
      font-size: 14px;
    }

    table tbody tr td {
      font-size: 14px;
    }

    section.brief {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    section.brief ul li {
      font-size: 14px;
    }

    article ul li:after {
      content: "";
      position: absolute;
      left: -26px;
      top: 8px;
      width: 14px;
      height: 3px;
      background-color: #7775D1;
      border-radius: 5px;
    }

    article ul {
      padding-left: 25px;
    }

    section.brief ul {
      padding-left: 25px;
    }

    #reaction-wrapper {
      margin-top: 30px;
    }

    #poll {
      margin-top: 30px;
      padding: 20px;
    }

    .result-bar .percentage {
      font-size: 14px;
    }

    .result-bar .percentage {
      width: 30px;
    }
    
    .info-bar {
      margin-top: 10px;
    }

    .article-suggestions {
      padding: 20px 0px;
    }

    .avatar {
      width: 35px;
      height: 35px;
      min-width: 35px;
      margin-right: 8px;
    }
    .comment-text {
      font-size: 14px;
    }
    .comment {
      margin-bottom: 0px;
    }
    .comment-text {
      margin-top: 6px;
    }
    .replies {
      margin-left: 20px;
    }





  }


  @media screen and (max-width: 420px) {
    article ul {
      max-width: 320px;
    }
  }
  
  
  @media screen and (max-width: 400px) {
    section .figure_wrap {
      flex-direction: column;
    }

    table tbody tr td {
      padding: 22px 12px;
    }

    section .figure_wrap figure {
      width: 100%;
    }
  }

  @media screen and (max-width: 380px) {
    .container header .tags_time {
      flex-direction: column;
    }

    .container header .tags_time time {
      margin-top: 8px;
    }

    .container header h1 {
      font-size: 18px;
    }
  }