.portal-navbar {
  height: 72px;
  background: #fff;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 32px;

  position: relative;
  z-index: 100;
}

.portal-navbar__toggle {
  width: 42px;
  height: 42px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: transparent;

  border: none;

  color: #000;

  cursor: pointer;

  transition: 0.25s;
}

.portal-navbar__toggle:hover {
  opacity: 0.75;
}

/* Relative Parent Account */

.portal-navbar__account {
  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  cursor: pointer;
}

.portal-navbar__avatar {
  width: 40px;

  height: 40px;

  border-radius: 50%;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #ffffff;
}

.portal-navbar__avatar img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.portal-navbar__info {
  display: flex;

  flex-direction: column;

  line-height: 1.2;
}

.portal-navbar__title {
  color: #000;

  font-size: 14px;

  font-weight: 600;
}

.portal-navbar__email {
  color: #000;

  font-size: 12px;
}

/*  Account Dropdown When User click */
.account-dropdown {
  position: absolute;

  top: calc(100% + 12px);

  right: 0;

  width: 220px;

  background: #1b1b1b;

  border: 1px solid #2a2a2a;

  border-radius: 12px;

  display: none;

  overflow: hidden;

  z-index: 9999;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Show */
.account-dropdown.show {
  display: block;
}

/* Links */

.account-dropdown a {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  color: white;

  text-decoration: none;

  transition: 0.2s;
}

.account-dropdown a:hover {
  background: #2a2a2a;
}

.account-dropdown hr {
  border: none;

  border-top: 1px solid #303030;

  margin: 0;
}

/* --- */