<style>

:root {
  /* === Фон панели === */
  --leftbar-bg1:    #17b3ed; /* Фон левой панели */

  /* === Кнопки меню === */
  --leftbar-bg2:    #5f88d5; /* Фон кнопок в спокойном состоянии */
  --leftbar-bg3:    #e739aa; /* Фон выбранного пункта */
  --leftbar-bg5:    #8c6ec6; /* Фон пункта меню при наведении */

  /* === Тексты меню === */
  --leftbar-bg4:    #fff;    /* Цвет текста пункта меню в спокойном состоянии */
  --leftbar-bg4_1:  #fff;    /* Цвет текста выбранного пункта меню */

  /* === Аватарка === */
  --leftbar-bg6:    2px solid #8c6ec6; /* Обводка аватарки */

  /* === Подменю === */
  --leftbar-bg7:    #fffaff; /* Фон раскрывающегося меню */
  --leftbar-bg8:    #8c6ec6; /* Пункты раскрывающегося меню при наведении */
  --leftbar-bg9:    #222;    /* Цвет текста пунктов раскрывающегося меню */
  --leftbar-bg10:   #fff;    /* Цвет текста пунктов раскрывающегося меню при наведении */
  --leftbar-bg13:   #e739aa; /* Цвет заголовка раскрывающегося меню */

  /* === Уведомления === */
  --leftbar-bg11:   #FEDA62; /* Цвет фона уведомлений */
  --leftbar-bg12:   #000;    /* Цвет текста уведомлений */
}


/* === Левая панель и переключатель === */
.custom-menu .gc-account-leftbar,
.custom-menu .gc-account-leftbar .gc-account-user-menu,
.custom-menu .gc-account-leftbar .toggle-link {
  background: var(--leftbar-bg1);
}

/* === Основное меню === */
.custom-menu .gc-account-leftbar .gc-account-user-menu li a {
  background-color: var(--leftbar-bg2);
}
.custom-menu .gc-account-leftbar .gc-account-user-menu li.active a,
.custom-menu .gc-account-leftbar .gc-account-user-menu li.selected a {
  background-color: var(--leftbar-bg3);
}
.custom-menu .gc-account-leftbar .gc-account-user-menu li:not(.active):not(.selected) a:hover {
  background-color: var(--leftbar-bg5);
}

/* === Цвета текста основного меню === */
.gc-account-leftbar .menu-item-label {
  color: var(--leftbar-bg4);
}
.gc-account-leftbar li.active .menu-item-label,
.gc-account-leftbar li.selected .menu-item-label {
  color: var(--leftbar-bg4_1);
}

/* === Заголовок подменю === */
.gc-account-user-submenu-bar h3 {
  color: var(--leftbar-bg13);
}

/* === Фон подменю и фон просмотренных уведомлений === */
.custom-menu .gc-account-leftbar .gc-account-user-submenu-bar,
.custom-menu .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
  background-color: var(--leftbar-bg7);
}

/* === Обводка аватарки профиля (на ПК) === */
@media (min-width: 767px) {
  .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a img {
    max-width: 80%;
    margin: 5px;
    border-radius: 50%;
    border: var(--leftbar-bg6);
  }
}

/* === Подменю: фон и цвет текста при наведении === */
.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
  background-color: var(--leftbar-bg8);
}
#gcAccountUserMenu > div.gc-account-leftbar > div > ul a {
  color: var(--leftbar-bg9) !important;
}
#gcAccountUserMenu > div.gc-account-leftbar > div > ul a:hover {
  color: var(--leftbar-bg10) !important;
}

/* === Уведомления (значок с цифрой) === */
.custom-menu .gc-account-leftbar .gc-account-user-menu li .notify-count,
.custom-menu .gc-account-leftbar .gc-account-user-submenu li .notify-count {
  background-color: var(--leftbar-bg11);
  color: var(--leftbar-bg12) !important;
}

/* === Шрифты меню и подменю === */
.gc-account-leftbar span,
.menu-item-user .menu-item-label:before,
.gc-account-user-submenu-bar.gc-account-user-submenu-bar-profile,
#gcAccountUserMenu > div.gc-account-leftbar > ul > li.menu-item.active > a > span.menu-item-label,
#gcAccountUserMenu > div.gc-account-leftbar > ul > li.menu-item.selected > a > span.menu-item-label {
  font-weight: 500 !important;
  font-size: 9px !important;
}

/* === Размер иконок основного меню (кроме аватарки) === */
#gcAccountUserMenu > div.gc-account-leftbar > ul > li.menu-item a > img:not(#gcAccountUserMenu > div.gc-account-leftbar > ul > li.menu-item.menu-item-profile > a > img) {
  height: 20px !important;
}

/* === Размер текста в подменю === */
#gcAccountUserMenu > div.gc-account-leftbar > div > ul a {
  font-size: 12px !important;
}

/* === Центрирование иконки уведомлений === */
li.menu-item.menu-item-notifications_button_small img {
  display: block !important;
  margin: 0 auto;
}

/* === Расположение счётчика уведомлений (маленькая иконка) === */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
  bottom: 15px;
  right: 7px;
}

/* === Отступы и скругления пунктов меню (на ПК) === */
@media (min-width: 767px) {
  .gc-account-leftbar .gc-account-user-menu li {
    margin: 5px 0;
  }
  .gc-account-leftbar .gc-account-user-menu li a {
    border-radius: 6px !important;
    padding: 5px !important;
    height: 60px !important;
  }
  .custom-menu .gc-account-leftbar,
  .custom-menu .gc-account-leftbar .gc-account-user-menu,
  .custom-menu .gc-account-leftbar .toggle-link {
    width: min-content;
    padding: 0 5px;
  }
  .gc-account-leftbar .notify-count.with-label {
    top: 17px;
  }
}

/*Уведомления*/

#gcAccountUserMenu > div.gc-account-leftbar > ul > li.menu-item.menu-item-notifications_button_small > a > img{
  display:block!important;  
    margin:0 auto;
   
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    bottom: 5px;
    right: 0px;
}

</style>
