.avatar-wrap {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.avatar-wrap.large {
  width: 76px;
  height: 76px;
}

.avatar-wrap .avatar {
  position: absolute;
  inset: 0;
}

.avatar-photo.failed {
  display: none;
}

.identity-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.sidebar-identity .identity-user {
  justify-content: flex-start;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--success);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.live-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(66, 215, 155, .1);
}

nav a img,
.metric-head img,
.empty img {
  filter: brightness(0) saturate(100%) invert(72%) sepia(42%) saturate(1143%) hue-rotate(163deg) brightness(101%);
  opacity: .92;
}

nav a.active img,
nav a:hover img {
  filter: brightness(0) saturate(100%) invert(81%) sepia(52%) saturate(1006%) hue-rotate(164deg) brightness(102%);
  opacity: 1;
}