body {
  font-family: Arial, sans-serif !important;
  margin: 0;
  padding: 0;
}

/* 2. Робимо блок з основним контентом (.main-content) прокручуваним */
.main-content {
  /* Встановлюємо висоту блоку рівною висоті екрану мінус висота вашої шапки (header).
     Можливо, вам доведеться підібрати точне значення замість 72px, 
     щоб прокрутка не "з'їдала" нижню частину контенту. */
  height: calc(100vh - 72px); 

  /* Додаємо вертикальну прокрутку, яка з'являється тільки за потреби */
  overflow-y: auto; 
  /* overflow-x: hidden; */
}
.header-index {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1002;
  background-color: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
    padding: 0;
    max-width: 100%;
  
}









/* Кастомне меню мов */
.language-switcher {
  position: relative;
  z-index: 1000;
}

.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-selected {
  background: none;
  border: none;
  padding: 0 18px 0 0;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  color: #333;
  transition: color 0.3s ease;
  position: relative;
}

.lang-options {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  list-style: none;
  display: none;
  flex-direction: column;
  z-index: 1001;
}

.lang-options li {
  margin: 0;
  padding: 0;
}

.lang-options li button {
  background: none;
  border: none;
  width: 100%;
  padding: 0 18px 0 0;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

.lang-options li button:hover {
  background-color: #ffffff;
  color: rgb(43, 184, 254);
}

.lang-dropdown:hover .lang-options {
  display: flex;
}

.lang-selected::after {
  content: "\25BE"; /* <--- ИСПРАВЛЕНО */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 10px;
  color: #555;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.lang-dropdown:hover .lang-selected::after {
  transform: translateY(-50%) rotate(-180deg);
}








/* Бокове меню */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
}



.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li {
  margin-bottom: 15px;
}

.sidebar-list li a {
  color: #343a40;
  font-weight: 500;
  text-decoration: none;
  font-size: 1em;
  display: block;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-list li a:hover {
  background-color: #007bff;
  color: #ffffff;
}

.sidebar-list li a.active {
  background-color: #007bff;
  color: #ffffff;
  font-weight: 600;
}

/* Макет сторінки */
.page-container {
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - 80px);
  margin-top: 80px;
}

.page-container.authenticated {
  margin-left: 350px;
}

.main-content {
  flex: 1;


  margin: 0 auto;
}


/* Стилі для основного контенту */
.main-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.main-title {
  font-size: 1.7em;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  letter-spacing: 0.05em;
}

.main-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  max-width: 1100px;
  gap: 40px;
  flex-wrap: wrap;
}

.character-img {
  flex: 1;
  text-align: center;
  min-width: 300px;
}

.character {
  max-width: 100%;
  height: auto;
}

.text-content {
  flex: 2;
  min-width: 300px;
  text-align: left;
}

.description {
  font-size: 1em;
  margin: 10px 0;
}

.subtitle {
  font-size: 1.3em;
  margin: 20px 0 10px;
  font-weight: 600;
}

.features-list {
  list-style-type: none;
  padding: 0;
}

.feature-item {
  font-size: 1em;
  margin: 10px 0;
  position: relative;
  padding-left: 20px;
}

.feature-item::before {
  content: "•";
  color: #87CEEB;
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.description-p2 {
  margin-top: 20px;
}

.description-p3 {
  width: 500px;
}

.auth-buttons {
  display: flex;
  gap: 10px;
  margin-left: auto;
  margin-right: 20px;
}

.btn-auth {
  background-color: #ffffff;
  color: #000000;
  padding: 6px 14px;
  text-decoration: none;
  font-size: 14px;
  border: 1px solid rgb(213, 213, 213);
  border-radius: 9px;
  letter-spacing: 0.3px; /* 🔹 улучшено межбуквенное расстояние */
  font-weight: 500; /* чуть плотнее и читабельнее */

}

.btn-auth:hover {
  background-color: #009aff;
  color: #ffffff;
  border-color: #009aff;
}

.btn-register {
  background-color: #2b91de;
  color: #ffffff;
  font-size: 14px;
  border-radius: 9px;
  border: 1px solid #2b91de;
  letter-spacing: 0.4px; /* чуть больше для контрастного фона */
  font-weight: 500;
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-register:hover {
  background-color: #309bed;
  border-color: #309bed;
  color: #ffffff;
}


.main-nav .nav-list {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* Авторизованный */
.main-nav .nav-list.nav-auth {
  justify-content: flex-start;
  margin-left: 15px;
}

/* Не авторизованный */
.main-nav .nav-list.nav-guest {
  justify-content: center;
  margin-right: 10px;
}

.main-nav .nav-list li a {
  color: #343a40;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.main-nav .nav-list li a:hover {
  color: #001ec8;
  text-decoration: none;
}

.main-nav .nav-list li a.active {
  color: #001ec8;
 
}

.header-flex .main-nav {
  flex: 1;
  text-align: center;
}

.main-title-freelancer {
  margin: 0;
  margin-top: 60px;
  width: 100%;
}

.freelancers-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.freelancers-block .text-content {
  flex: 2;
  min-width: 300px;
  text-align: left;
}

.freelancers-block .character-img {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.auth-buttons-advertisers {
  gap: 10px;
  text-align: center;
}

.auth-buttons-advertisers a:hover {
  padding: 10px 60px;
  background: #0e6bcf;
  color: #fff;
}

.auth-buttons-advertisers a {
  padding: 10px 60px;
  background: #1079ea;
  color: #fff;
}

.auth-buttons-freelancer {
  gap: 10px;
  text-align: center;
}

.auth-buttons-freelancer a {
  padding: 10px 60px;
  background: #1dbc42;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.auth-buttons-freelancer a:hover {
  background: #16a536 !important;
  color: white !important;
}

.stats-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 60px 20px 20px 20px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.stats-block .character-img {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.stats-block .character {
  max-width: 100%;
  height: auto;
}

.stats-block .text-content {
  flex: 2;
  min-width: 300px;
  text-align: left;
}

.stats-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.stat-item {
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: 500;
}

.stat-number {
  color: #41b8d5;
  font-weight: bold;
  font-size: 1.1em;
  margin-left: 10px;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stat-item-inline {
  font-size: 1em;
  font-weight: 500;
  white-space: nowrap;
}

.stat-item-inline .stat-number {
  color: #41b8d5;
  font-weight: bold;
  margin: 0 50px 0 0;
}

.stats-block {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  background-color: #ffffff;
  transition: box-shadow 0.3s ease;
  margin-top: 60px;
  margin-bottom: 50px;
}

.main-title-stats {
  text-align: left;
}

.stats-list .stat-item {
  position: relative;
  padding-left: 24px;
}

.stats-list .stat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #87CEEB;
  border-radius: 50%;
}

.stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  text-align: left;
}

.stats-inner .character-img {
  flex: 1 1 300px;
  text-align: center;
}

.stats-inner .character {
  max-width: 100%;
  height: auto;
}

.stats-inner .text-content {
  flex: 2 1 470px;
}

.btn-logout-base:hover {
  background: red !important;
  border: 1px solid rgba(0, 0, 0, 0);
}

/* Бокове меню */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  flex-direction: column;
}



/* Верхній блок */
.sidebar-top {
  background-color: #ffffff;
  border-radius: 6px;

  padding: 10px;
}

.sidebar-top .sidebar-link {
  color: #343a40;
  font-weight: 500;
  text-decoration: none;
  font-size: 1em;
  display: block;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Нижній блок з двома елементами в ряд */
.sidebar-bottom {
  display: flex;

  flex-wrap: wrap;
}

.sidebar-bottom .sidebar-link {
  flex: 1;
  background-color: #ffffff;
  border-radius: 6px;
  color: #343a40;
  font-weight: 500;
  text-decoration: none;
  font-size: 1em;
  padding: 10px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ховер-ефекти */
.sidebar-link:hover {
  background-color: #007bff;
  color: #ffffff;
}

.sidebar-link.active {
  background-color: #007bff;
  color: #ffffff;
  font-weight: 600;
}

/* Бокове меню */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  margin-top: 55px;
  display: flex;
  flex-direction: column;
  flex: 1; /* Дозволяє контейнеру заповнити доступний простір */

  min-height: 0;
  gap: 15px;
}

/* Верхній блок */
.sidebar-top {
  background-color: #ffffff;
  border-radius: 6px;
  
  padding: 10px;
}

.sidebar-top .sidebar-link {
  color: #343a40;
  font-weight: 500;
  text-decoration: none;
  font-size: 1em;
  display: block;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Нижній блок з двома незалежними блоками в ряд */
.sidebar-bottom {
  display: flex;
  flex-direction: row;

  margin-top: 15px;
  height: calc(100% - 60px); /* Висота залежить від доступного простору в .sidebar-nav */
  
  background: white;
}

.sidebar-block {
  background-color: #ffffff;
  height: 100%; /* Заповнює висоту .sidebar-bottom */
}

.sidebar-block-1 {
  width: 90px;
  -webkit-box-shadow: -6px 0px 10px -5px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: -6px 0px 10px -5px rgba(34, 60, 80, 0.2);
  box-shadow: -6px 0px 10px -5px rgba(34, 60, 80, 0.2);
}

.sidebar-block-2 {
  width: 210px;
  border-radius: 12px !important; 

  border-radius: 0;
  padding: 5px 10px;
}

.sidebar-link {
  color: #343a40;
  font-weight: 500;
  text-decoration: none;
  font-size: 1em;
  display: block;
  padding: 10px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; /* Запобігає перенесенню тексту */
  overflow: hidden; /* Ховає текст, якщо він не вміщається */
  text-overflow: ellipsis; /* Додає многоточие, якщо текст обрізається */
}

.sidebar-link:hover {
  background-color: #f0f0f0;
  color: #ffffff;
  border-radius: none;
}

.sidebar-link.active {
  background-color: #f0f0f0;
  color: #ffffff;
  font-weight: 600;
  border-radius: none;
}








.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.user-info-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info-block img.rounded-circle {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 210px;
}

.user-info .user-name,
.user-info .user-id {
  display: block;           /* важливо для ellipsis */
  width: 100%;              /* щоб враховувалася ширина контейнера */
  white-space: nowrap;      /* один рядок */
  overflow: hidden;         /* обрізаємо зайве */
  text-overflow: ellipsis;  /* додаємо "..." */
}



.user-info strong {
  font-size: 12px;
  color: #000000;
}

.user-info small {
  font-size: 12px;
  color: #666;
}









/* --- Общие стили для контейнера --- */
.sidebar-top {
  display: flex; /* Используем flex для выравнивания дочерних элементов */
  flex-direction: column; /* Располагаем элементы друг под другом */
  gap: 15px; /* Задаем одинаковый отступ между блоками (вместо margin-bottom) */
  

  background-color: #ffffff; /* Более мягкий фон */
  border: 1px solid #efefef; /* Тонкая, светлая рамка */
  border-radius: 12px; /* Более скругленные углы */
  

}

/* --- Блок информации о пользователе --- */
.user-info-block {
  display: flex;
  align-items: center;
  gap: 12px; /* Отступ между аватаром и текстом */
  display: flex;            /* в ряд */
  align-items: flex-start;
}

.user-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
	border: 4px solid #ffffff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.08);
	background-color: #fff;

}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #212529; /* Чуть менее резкий черный */
}

.user-id {
  font-size: 12px;
  align-items: center;
  color: #6c757d; /* Приглушенный серый для второстепенной информации */
}

/* --- Блок баланса --- */
.user-balance {
  /* Убираем лишние стили, так как контейнер теперь sidebar-top */
  display: flex;
  flex-direction: column;
  gap: 5px; /* Отступ между заголовком и строками баланса */
}

.balance-title {
  display: flex; /* 1. Вмикаємо Flexbox */
  align-items: center; /* 2. Вирівнюємо лінію та текст по центру по вертикалі */
  text-align: center;
  margin-bottom: 5px;
  color: #000000;
}
.amount {
  letter-spacing: 0.5px; /* або 1px, якщо хочеш більш виражено */
}
/* 3. Створюємо лінію ДО тексту */
.balance-title::before,
/* 4. Створюємо лінію ПІСЛЯ тексту */
.balance-title::after {
  content: ''; /* Обов'язкова властивість для псевдо-елементів */
  flex-grow: 1; /* 5. МАГІЯ: змушуємо лінії розтягуватися і займати весь вільний простір */
  height: 1px; /* Товщина лінії */
  background: #dee2e6; /* Колір лінії */
}

/* 6. Додаємо відступи між лініями та текстом */
.balance-title::before {
  margin-right: 15px;
}

.balance-title::after {
  margin-left: 15px;
}

/* Стилі для самого тексту (необов'язково) */
.balance-title span {
  font-size: 14px;
  font-weight: 600;

  letter-spacing: 0.5px;
}

.balance-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Убираем лишние рамки, используем отступы для разделения */
}



.balance-line strong {
  font-weight: 400; /* Название делаем обычным */
  color: #495057; /* А его цвет чуть светлее */

}

/* --- Обновленные стили кнопок --- */
.btn-full {
  padding: 4px 8px;
  font-size: 12px;
 
  border: none;
  border-radius: 6px; /* Более мягкое скругление */
  cursor: pointer;
  color: #fff;
  white-space: nowrap;

}



.btn-full.blue {
  background-color: #5c9ce6;
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}

.btn-full.blue:hover {
  background-color: #4a8ad4; /* Трохи насиченіший синій */
}

.btn-full.green {
  background-color: #5bbd76;
  color: white;
  border: none;
  transition: background-color 0.3s ease; /* Плавний перехід */
}

.btn-full.green:hover {
  background-color: #4cae68; /* Трохи темніший зелений */
}









.sidebar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  color: #343a40;
  padding-top: 10px;

}
.sidebar-icon:hover, .sidebar-icon.active {
  background-color: #eff6ff;
  color: #343a40;
}
.sidebar-icon svg {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}
.sidebar-content {

  background-color: #ffffff;
  
  height: 100%;
  overflow-y: auto;
}

.sidebar-content:hover {

 
}


.sidebar-content h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
}
.sidebar-content ul {
  list-style: none;
  padding: 0;
}
.sidebar-content ul li {
 
  align-items: start;
  gap: 10px;
}
.sidebar-content ul li a {
  color: #343a40;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 13px;
  padding: 6px 8px;
}
.sidebar-content ul li a:hover {
  color: #007bff;
}
.sidebar-content ul li svg {
  width: 20px;
  height: 20px;
}
.sidebar-block-1 {
  width: 90px;
  display: flex;
  flex-direction: column;
  font-size: 12px;

}
.sidebar-content-section {
  display: none;
}
.sidebar-content-section.active {
  display: block;
}


.form-check-input:focus {
  box-shadow: none;
  outline: none;
}




.menu-divider {
  border: none;
  border-top: 1px solid #ccc; /* Колір лінії */
  margin: 0;              /* Відступи зверху і знизу */
}

.menu-divider-balance {
  border: none;
  border-top: 1px solid #ccc; /* Колір лінії */
  margin: 6px 0;              /* Відступи зверху і знизу */
}


.balance-section {
  display: flex;
  flex-direction: column;
 
}

.balance-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
}

.balance-info {
  display: flex;
  gap: 6px;
  font-size: 14px;
  align-items: baseline;
}

.label {
  color: #555;
  font-weight: 500;
}

.amount {
  letter-spacing: 0.5px;
 
  color: #222;
  font-variant-numeric: tabular-nums;
}

.btn-full {
  padding: 4px 8px;
  font-size: 12px;
  
  border: none;
  border-radius: 8px;

  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-full.blue {

    color: white;
    font-weight: 500;
}

.btn-full.green {

  font-weight: 500;
}



.menu-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  
}



a.btn-full {
  text-decoration: none;
}




.sidebar-content ul li .active {

  color: #007bff !important;

}


.amount.bordered {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 3px 6px;
  display: inline-block;
 
}

.balance-btn{
  border-radius: 4px !important;
}







.icon-hover {
  fill: #ccc;
  transition: fill 0.2s ease;
  cursor: pointer;
}

.icon-hover:hover {
  fill: #000;
}

.eye-icon {
  stroke: #ccc;
  fill: none;
}
#strengthText{
  color: #ffffff00 !important;
}




.eye-icon-1:hover {
  filter: brightness(0) invert(0);
}














/* --- Стили для Варианта 2 --- */

/* Основной контейнер */
.balance-section {
  padding: 0 15px;
  margin-top: 5px;
  border-radius: 12px;
  
}

/* Линия с балансом */
.balance-line {
  display: flex;
  align-items: center;
  justify-content: center; /* Для выравнивания, если справа будет элемент */
}

.balance-info {
  display: flex;
  align-items: center; /* Выравниваем текст и иконку по центру */
}



.balance-info .amount {
  font-size: 14px;
  
  color: #222;
  margin-left: 8px;
  letter-spacing: 1px; /* відстань між цифрами */
}

/* --- Стили для всплывающей подсказки (Tooltip) --- */

/* Контейнер для иконки и подсказки */
.tooltip-container {
  position: relative; /* Обязательно для позиционирования подсказки */
  display: inline-block;
  margin-left: 10px;
}

/* Сама иконка */
.info-icon {
  display: inline-block;
  width: 20px;
  height: 20px;

  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  cursor: pointer; /* Показываем, что на иконку можно нажать/навести */
  font-family: sans-serif; /* Для красивого символа 'i' */
}



/* --- Блок с кнопками --- */

.balance-actions {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 10px; /* Расстояние между кнопками */
}

.balance-btn {
  flex-grow: 1; /* Кнопки занимают равное пространство */
  padding: 5px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  color: white;
}

.btn-full.green {
  background-color: #5bbd76;
  color: white;
  border: none;
  transition: background-color 0.3s ease; /* Плавний перехід */
}

.btn-full.blue {
  background-color: #5c9ce6;
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}



.balance-list {
  list-style: none;        /* убираем стандартные маркеры */
  padding: 0;
  margin: 0;
}

.balance-list li {
  padding: 8px 0;
  font-size: 14px;
}

.balance-list li + li {
  border-top: 1px solid #ddd; /* линия только между элементами */
}














/* --- КОРЕКТНІ, ІЗОЛЬОВАНІ СТИЛІ ДЛЯ ПІДКАЗКИ РЕЙТИНГУ --- */

/* 1. Головний контейнер-обгортка */
.rating-tooltip-wrapper {
  position: relative; /* Обов'язково для позиціонування підказки */
  display: inline-block; /* Щоб блок не розтягувався на всю ширину */
}

/* 
   Блок стилів для .rating-level-text, який додавав знак питання 
   та підкреслення, ПОВНІСТЮ ВИДАЛЕНО.
*/

/* 2. Сама спливаюча підказка (за замовчуванням прихована) */
.rating-tooltip-box {
  /* Початковий стан: невидимий */
  visibility: hidden;
  opacity: 0;

  /* Зовнішній вигляд */
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px 12px;
  white-space: nowrap;
  
  /* Позиціонування */
  position: absolute;
  z-index: 1001;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);

  /* Плавна анімація появи */
  transition: opacity 0.3s ease;
}

/* 3. Стрілочка під підказкою */
.rating-tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* 4. Правило, яке показує підказку при наведенні */
.rating-tooltip-wrapper:hover .rating-tooltip-box {
  visibility: visible;
  opacity: 1;
}






.js-tooltip-content {
  display: none; /* Обов'язково ховаємо контент */
}

/* Стиль для самого спливаючого вікна, яке створить JS */
#page-tooltip {
  /* --- Позиціонування та видимість (не змінюємо) --- */
  position: fixed;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  transform: translateX(5px); /* Початкове зміщення для анімації "виїзду" */
  
  /* --- Новий зовнішній вигляд --- */
  background-color: #fcfcfc; /* Світло-сірий фон */
  color: #212529;             /* Темний, майже чорний текст для контрасту */
  border-radius: 8px;         /* Більш м'які кути */
  padding: 12px 18px;         /* Трохи більше "повітря" всередині */
  border: 1px solid #dee2e6;  /* Тонка, світла рамка */
  white-space: nowrap;
  font-size: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* М'яка тінь для об'єму */
}

/* --- Стрілочка, що вказує на елемент --- */
#page-tooltip::before {
  content: '';
  position: absolute;
  
  /* Позиціонуємо її зліва, по центру по вертикалі */
  top: 50%;
  right: 100%; /* Розміщуємо зліва від підказки */
  transform: translateY(-50%);
  
  /* Створюємо трикутник за допомогою рамок */
  border-width: 6px;
  border-style: solid;
  border-color: transparent #dee2e6 transparent transparent; /* Зовнішня рамка стрілки */
}

#page-tooltip::after {
  content: '';
  position: absolute;

  /* Позиціонуємо її зліва, по центру по вертикалі */
  top: 50%;
  right: 100%; /* Розміщуємо зліва від підказки */
  transform: translateY(-50%);
  margin-right: -1px; /* Накладаємо поверх рамки */
  
  /* Створюємо трикутник за допомогою рамок */
  border-width: 5px;
  border-style: solid;
  border-color: transparent #f8f9fa transparent transparent; /* Внутрішня частина стрілки (колір фону) */
}


/* --- Коли підказка видима, прибираємо зсув --- */
#page-tooltip[style*="visible"] {
    transform: translateX(0);
}


/* --- Оновлюємо стиль розділювача в списку під нову тему --- */
#page-tooltip .balance-list li + li {
    border-top: 1px solid #e9ecef; /* Світліший розділювач */
}









.tooltip-container {
  /* Залишаємо як є, це основа для позиціонування */
  position: relative; 
  display: inline-block;
  /* Вирівнюємо іконку по вертикалі з текстом балансу */
  vertical-align: middle; 
}

/* --- 2. Іконка (i) --- */
.info-icon {
  display: flex; /* Для кращого центрування SVG всередині */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Плавна зміна кольору іконки при наведенні */
.info-icon svg circle,
.info-icon svg path,
.info-icon svg rect {
    transition: stroke 0.2s ease;
}
/* Затемнення іконки при наведенні на контейнер */
.tooltip-container:hover .info-icon svg circle,
.tooltip-container:hover .info-icon svg path,
.tooltip-container:hover .info-icon svg rect {
    stroke: #555;
}


/* --- 3. Сама спливаюча підказка --- */
.tooltip-content {
  /* Початковий стан: невидимий та трохи зсунутий */
  visibility: hidden;
  opacity: 0;
  transform: translateX(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  
  /* Позиціонування: праворуч від іконки */
  position: absolute;
  z-index: 9999;
  top: 50%;            /* Спочатку ставимо верхній край на середину іконки */
  left: 100%;          /* Ліву сторону підказки ставимо на правий край іконки */
  margin-left: 10px;   /* Додаємо відступ між іконкою та підказкою */
  transform: translateY(-50%) translateX(5px); /* Потім зсуваємо вгору на половину своєї висоти і трохи вправо для анімації */

  /* Новий зовнішній вигляд */
  background-color: #fcfcfc;
  color: #222425;
  border-radius: 8px;
  padding: 12px 18px;
  border: 1px solid #dee2e6;
  white-space: nowrap;
  font-size: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- 4. Стрілочка, що вказує на іконку --- */
.tooltip-content::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%; /* Зліва від підказки */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #dee2e6 transparent transparent; /* Зовнішня рамка стрілки */
}
.tooltip-content::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%; /* Зліва від підказки */
  transform: translateY(-50%);
  margin-right: -1px; /* Накладаємо поверх рамки */
  border-width: 5px;
  border-style: solid;
  border-color: transparent #f8f9fa transparent transparent; /* Внутрішня частина стрілки (колір фону) */
}


/* --- 5. Показуємо підказку при наведенні на контейнер --- */
.tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  /* Повертаємо підказку в нормальне положення для анімації "виїзду" */
  transform: translateY(-50%) translateX(0);
}

/* --- 6. Стилі для списку всередині підказки --- */
.tooltip-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tooltip-content li {
  padding: 8px 0;
  font-size: 14px;
}
.tooltip-content li + li {
  border-top: 1px solid #e9ecef; /* Світлий розділювач */
}


.label-b{
  font-weight: 600 !important;
}




/* Додайте цей код до вашого CSS-файлу */

/* Стиль для рядка з рівнем у спливаючій підказці */
.balance-list .rating-line {
  display: flex;              /* Вмикаємо Flexbox */
  justify-content: space-between; /* Розносимо текст і картинку по краях */
  align-items: center;        /* Вирівнюємо їх по центру по вертикалі */
}

.rating-tooltip-icon {
  /* 1. Розміри та рамка */
  width: 36px;  /* Трохи збільшимо, щоб вмістити padding */
  height: 36px; /* Робимо елемент квадратним для ідеального кола */
  border: 1px solid #e0e0e0; /* Світло-сіра обводка */
  
  /* 2. Фон та форма */
  background-color: #ffffff; /* Білий фон */
  border-radius: 50%;      /* Робить елемент ідеально круглим */
  
  /* 3. Внутрішній відступ */
  padding: 1px; /* Створює простір між іконкою та обводкою */
  box-sizing: border-box; /* Гарантує, що padding та border не збільшать загальний розмір */
  object-fit: contain; /* Зберігає пропорції зображення, вписуючи його в контейнер */
  /* 4. Тінь */
  
}



/* Контейнер для іконок */
.user-actions {
  display: flex;
  align-items: center;
  gap: 12px; /* Оптимальна відстань */
  margin-left: 5px;
 
}

/* Посилання навколо іконки */
.user-action-link {
  display: inline-flex;
}

/* Стиль для розділювача "|" */
.meta-divider {
  color: #e0e0e0; /* Ледь помітний колір */
}

/* УНІФІКОВАНИЙ СТИЛЬ ДЛЯ ОБОХ SVG-ІКОНОК */
.user-action-link svg {
  /* Задаємо однаковий розмір */


  /* Важливо: задаємо колір для контурів */
  stroke: #a0a0a0; 
  fill: none; /* Переконуємось, що немає заливки */
  stroke-width: 1.5; /* Уніфікована товщина ліній */

  /* Плавний перехід кольору */
  transition: stroke 0.2s ease;
}

/* Зміна кольору обох іконок при наведенні */


/* --- СТИЛІ ДЛЯ ПІДКАЗКИ (залишаються без змін) --- */
.tooltip-custom {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.tooltip-custom::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 13px;
  z-index: 10;
}
.tooltip-custom::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.tooltip-custom:hover::after,
.tooltip-custom:hover::before {
  opacity: 1;
}


/* --- ОНОВЛЕНІ СТИЛІ ДЛЯ ЛІЧИЛЬНИКА --- */

/* Контейнер для іконки та її лічильника */
.action-item-with-counter {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Стиль для самого лічильника (числа) */
.action-counter-referrals {
  font-size: 13px;
  
  /* --- ГОЛОВНІ ЗМІНИ --- */
  font-weight: 400;      /* Робить шрифт звичайним, не жирним (normal) */
  text-decoration: none; /* Прибирає будь-яке підкреслення */
  
  color: #a0a0a0;
  transition: color 0.2s ease;
}

/* Зміна кольору лічильника при наведенні на посилання */

/* Стиль для посилання (іконка + лічильник) */
.user-action-link,
.user-action-link:hover { /* <<< ГОЛОВНА ЗМІНА ТУТ */
  display: flex;
  align-items: center;
  text-decoration: none; /* <<< ПОВНІСТЮ ПРИБИРАЄМО ПІДКРЕСЛЕННЯ */
}





/* --- НОВЫЙ ДИЗАЙН МЕНЮ: МИНИМАЛИЗМ И ЧИСТОТА --- */

/* 1. Настраиваем общую структуру и высоту */

.sidebar-bottom {
  flex: 1;
  min-height: 0;
  margin-top: 0;
  display: flex;
  /* Убираем все старые рамки и тени, так как блоки будут стилизованы отдельно */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
  overflow: visible; /* Возвращаем видимость для теней */
}

/* 2. Левая колонка с иконками: делаем ее отдельной карточкой */
.sidebar-block-1 {
  width: 90px;
  flex-shrink: 0;
  background-color: #ffffff; /* Белый фон */
  border-radius: 12px;
  border: 1px solid #f0f0f0; /* Очень легкая рамка */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* Легкая тень */
  
  /* Отступы и центрирование */
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden; /* Без прокрутки */
}

/* 3. Правая колонка: тоже отдельная карточка */
.sidebar-block-2 {
  flex-grow: 1;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 10px;
}

/* 4. Общие стили для иконок */
.sidebar-icon {
  border-radius: 8px; /* Скругляем углы самой иконки */
  margin: 0 8px; /* Отступы по бокам */
  padding: 8px 0; /* Уменьшаем вертикальные отступы */
  color: #475569; /* Мягкий, почти черный цвет текста */
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent; /* Заготовка для рамки при наведении */
}

/* 5. Наведение на НЕАКТИВНУЮ иконку */
.sidebar-icon:not(.active):hover {
  background-color: #f8fafc; /* Очень легкий серый фон */
  color: #0d6efd;
  border: 2px solid #e0efff; /* Легкая синяя рамка */
}

/* 6. Стиль АКТИВНОЙ иконки */
.sidebar-icon.active {
  background-color: #eef6ff !important; /* Нежно-голубой фон */

  
}

/* 7. Улучшаем подменю справа */
.sidebar-content-section ul li a {
  
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 14px;
  color: #334155;
}
.sidebar-content-section ul li a:hover{
  background-color: #f7f9fc !important; /* Нейтральный серый фон */
  color: #000000 !important; /* Более темный текст */
 
}

.sidebar-content-section ul li a.active {
  background-color: #eef6fe !important; /* Нейтральный серый фон */
  color: #000000 !important; /* Более темный текст */

}
.menu-divider {
  border-color: #e2e8f0 !important;
  margin: 2px 0 !important;
}


/* 1. Слегка увеличиваем ширину левой колонки */
.sidebar-block-1 {
  width: 100px !important; /* Было 90px, увеличиваем до 100px */
}

/* 2. Немного уменьшаем боковые отступы у иконок, чтобы дать тексту еще больше места */
.sidebar-icon {
  margin: 0 4px !important; /* Было 8px, уменьшаем до 4px */
}


.sidebar-bottom {
  flex-wrap: nowrap !important; /* Это заставит блоки всегда оставаться в один ряд */
  gap: 5px !important;         /* Устанавливаем четкий отступ между блоками */
}

/* 2. Убедимся, что правый блок правильно растягивается */
.sidebar-block-2 {
  /* Эти правила гарантируют, что блок займет все оставшееся свободное место */

  flex-grow: 1;
  min-width: 0; /* Важно для правильной работы flex-grow */
}


.sidebar-bottom {
  align-items: flex-start !important; /* Выравнивает обе карточки по верхнему краю */
}

/* 2. Убираем у правой колонки принудительное растягивание на всю высоту */
.sidebar-block-2 {
  flex-grow: 0 !important; /* Запрещаем блоку растягиваться */
  flex-shrink: 1 !important; /* Разрешаем сжиматься, если нужно */
}

/* 3. Небольшая корректировка для левой колонки, чтобы она хорошо выглядела */
.sidebar-block-1 {
  /* Равномерно распределяем иконки по всей высоте карточки */
  justify-content: space-around; 
}






/* =================================================================== */
/*               СТИЛІ ДЛЯ ЛІЧИЛЬНИКІВ В ПРОФІЛІ                      */
/* =================================================================== */

/* 1. Загальний контейнер для іконок з лічильниками (для обох іконок) */
.action-item-with-counter {


  align-items: center;
}

/* 2. Загальна база для всіх лічильників */
.action-item-with-counter .action-counter {
  position: absolute;
  top: -5px;      /* Положення відносно іконки */
  right: -8px;    /* Положення відносно іконки */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid white;
}


/* --- Стилі ТІЛЬКИ для лічильника рефералів --- */
/* Використовуємо селектор за посиланням, щоб стилі не перетиналися */
a[href*="my_referrals"] .action-counter {
    background-color: #0d6efd; /* Наприклад, синій для рефералів */
}


/* --- Стилі ТІЛЬКИ для іконки та лічильника СЕРФІНГУ --- */
/* Колір іконки за замовчуванням (якщо немає класів .orange або .green) */
#surfing-sites-link svg {
    color: #a0a0a0; /* Стандартний сірий колір */
}

/* Лічильник серфінгу за замовчуванням (коли він є, але немає кольору) */
#surfing-sites-link .action-counter {
    background-color: #28a745; /* Темно-сірий */
}

/* --- Динамічні кольори для серфінгу --- */

/* Колір для іконки, коли є ОБОВ'ЯЗКОВІ посилання */

/* Колір для лічильника, коли є ОБОВ'ЯЗКОВІ посилання */
#surfing-sites-link.orange .action-counter {
  background-color: #fd7e14;
}


/* Колір для лічильника, коли є звичайні посилання */
#surfing-sites-link.green .action-counter {
  background-color: #28a745;
}

/* Зробить фон лічильника червоним, коли іконка показує кількість відео */
#surfing-sites-link.red .action-counter {
  background-color: #ff273c; /* Червоний колір */
}


.tooltip-custom-link{
  display: flex !important;
}


.user-action-link.blue .action-counter {
  background-color: #0d6efd !important; /* Синій колір Bootstrap */
  color: white;
}




    /* Скрываем все секции по умолчанию */
    .sidebar-content-section {
      display: none;
  }
  /* Показываем только ту, у которой есть класс active */
  .sidebar-content-section.active {
      display: block;
  }









  .title-with-line h6 {
    margin: 0;
    white-space: nowrap;
    border: 1px solid #d9d9d9;
    padding: 6px;
    border-radius: 6px;
    color: #48494a;
    font-size: 12px;
}

.startcontentzag{
  font-size: 17px !important;
}

.header-line {
  border-bottom: 1px solid #d9d9d9 !important;
}










/* --- Стили для меню второго уровня (правый блок) --- */

/* Контейнер для списка ссылок */
.sidebar-content-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Отступ между пунктами меню */
}

/* Базовый стиль для ссылок в меню */
.sidebar-content-section ul li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #64748b; /* Светло-серый цвет текста */
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Стиль для SVG-иконок внутри ссылок */
.submenu-icon {
  width: 20px;
  height: 20px;
  fill: #94a3b8; /* Более светлый серый для иконок */
  transition: fill 0.2s ease;
  flex-shrink: 0;
}

/* --- Интерактивные состояния --- */

/* 1. Наведение на неактивную ссылку */
.sidebar-content-section ul li a:hover {
  background-color: #f8fafc; /* Очень легкий фон при наведении */
  color: #334155;
}
.sidebar-content-section ul li a:hover .submenu-icon {
  fill: #64748b;
}

/* 2. Стиль для активной ссылки (как на вашем скриншоте) */
.sidebar-content-section ul li a.active {
  background-color: #f0f5ff; /* Очень светлый голубой фон */
  color: #475569; /* Темно-серый текст (не синий) */
  font-weight: 500; /* Нормальная жирность */
}
/* Меняем цвет иконки в активном состоянии */
.sidebar-content-section ul li a.active .submenu-icon {
 /* fill: #475569;  */

 fill: #6db0ff; 
}



.review-count {
  /* Новий колір - насичений синій */
  color: #007BFF; 
  margin-left: 5px;
  font-size: 12px; /* Ваш розмір шрифту */
  font-weight: bold; /* Повертаємо жирність для кращої видимості */
}

.animated-arrow {
  display: inline-block;
  /* Новий колір - насичений синій */
  color: #007BFF; 
  font-weight: bold; /* Зробимо стрілку жирною */
  margin-left: 4px;
  animation: animate-arrow 1.2s infinite ease-in-out;
}

@keyframes animate-arrow {
  0% {
      transform: translateX(0);
      opacity: 0.5;
  }
  50% {
      transform: translateX(5px);
      opacity: 1;
  }
  100% {
      transform: translateX(0);
      opacity: 0.5;
  }
}





/* Пульсуюча синя точка */
.promotion-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  background-color: #0d6efd;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
  animation: pulse-blue 1.8s infinite ease-in-out;
  z-index: 10;
}

/* Головне правило: точка ВИДИМА ТІЛЬКИ коли іконка НЕ активна */
.sidebar-icon.active .promotion-dot {
  display: none !important;
}

/* Анімація пульсації */
@keyframes pulse-blue {
  0%, 100%   { opacity: 0.7; transform: scale(0.85); }
  50%        { opacity: 1;   transform: scale(1.15); }
}


.label-balance-info{
  font-size: 14px;
    color: #a0a0a0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}












/* --- ГЛОБАЛЬНІ СТИЛІ ДЛЯ СТІЙКОГО ФУТЕРА --- */
html, body {
  height: 100%; /* Забезпечуємо, що html та body займають всю висоту вікна */
  margin: 0;
  padding: 0;
  /* overflow: auto;  Дозволяємо прокрутку для всієї сторінки, якщо контент довгий */
  /* ВИДАЛЯЄМО overflow: hidden; з html, body, щоб сторінка могла прокручуватись */
}

body {
  display: flex; /* Перетворюємо body на flex-контейнер */
  flex-direction: column; /* Елементи body розташовуються вертикально */
  min-height: 100vh; /* Гарантуємо, що body займає щонайменше 100% висоти вікна */
}

.header-index {
  position: fixed; /* Залишаємо header фіксованим */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1002;
  background-color: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* НЕ ДОДАЄМО margin-top до body, оскільки body - це flex-контейнер,
     і ми будемо використовувати padding-top для контенту нижче хедера */
}

/* Відступ для контенту, щоб він не ховався за фіксованим хедером */
/* Примітка: 72px - це висота вашого хедера, налаштуйте за потреби */
.page-container {
  flex-grow: 1; /* ДОДАНО: Цей блок буде займати весь доступний простір, штовхаючи футер вниз */
  padding-top: 65px; /* ДОДАНО: Відступ зверху, щоб контент не перекривався фіксованим хедером */
  display: flex; /* Внутрішній flex, оскільки page-container також має бічне меню */
  flex-direction: row;
  /* min-height і margin-top для page-container тепер не потрібні, оскільки flex-grow і padding-top управляють висотою */
  min-height: auto; /* Скидаємо, оскільки flex-grow управляє висотою */
  margin-top: 0; /* Скидаємо, оскільки padding-top управляє відступом від хедера */
}

/* Зміни для main-content */
.main-content {
  flex: 1; /* Дозволяє main-content займати решту простору */
  padding: 14px 0 20px 20px;
  margin: 0 auto;
  /* ВИДАЛЯЄМО фіксовану висоту (height) та overflow-y з main-content,
     щоб прокрутка відбувалася для всієї сторінки, а не тільки для цього блоку */
  height: auto; /* Скидаємо фіксовану висоту */
  overflow-y: visible; /* Дозволяємо контенту виходити за межі, щоб body прокручувалось */
  overflow-x: hidden; /* Залишаємо прихованою горизонтальну прокрутку */
}

/* Футер буде відображатися автоматично, оскільки він є останнім елементом у body 
   і .page-container його штовхає вниз завдяки flex-grow: 1 */
footer {
  flex-shrink: 0; /* Гарантуємо, що футер не буде стискатися */
  /* Забезпечуємо, що він відображається, якщо його приховує інший CSS */
  display: block !important;    
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Бічна панель (sidebar) також потребує коригування, щоб її top відлік був відразу після хедера */
.sidebar {
  position: fixed;
  top: 0; /* Залишаємо top: 0, але внутрішній контент буде зміщений */
  left: 0;
  width: 350px;
  height: 100vh; /* Висота sidebar залишається 100% viewport */
  background-color: #f8f9fa;
  padding: 20px; /* Залишаємо padding для внутрішнього вмісту */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  flex-direction: column;
}



.page-container.authenticated {
  margin-left: 350px; /* Цей відступ залишаємо для push-контенту при активному сайдбарі */
}


.nav-list li {
  position: relative;
}

.nav-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Отступы чтобы выглядело красиво */
.nav-list li {
  padding-right: 15px;
  margin-right: 15px;
}