.topbar {
  position: fixed;
  display: flex;
  z-index: 50;

  top: 0;
  left: 0;
  right: var(--sidenav-width);

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

  flex-direction: row;

  width: calc(100% - var(--sidenav-width));
  height: 70px;

  padding: 0 20px;

  background: rgba(var(--g-background), 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
}

.topbar-row {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  height: 100%;
}

.topbar-collapser {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  width: 40px;
  height: 40px;

  border-radius: 100px;

  font-size: 20px;

  color: rgba(var(--g-font-color), 1);

  background: rgba(95, 135, 255, 0);
  transition: 0.3s all ease-in-out;
}
.topbar-collapser:hover {
  color: rgba(var(--g-link-color), 1);
  background: rgba(95, 135, 255, 0.1);
}

.topbar-account-container {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;
}

.topbar-account {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  height: 40px;

  font-weight: 500;

  color: rgba(var(--g-font-color), 1);
}
.topbar-account-title {
  position: relative;
}

.topbar-account-dropdown {
  position: absolute;
  display: none;
  z-index: 1;

  left: 0;
  top: 100%;

  flex-direction: column;

  width: 270px;

  padding: 20px;

  border-radius: 7px;

  background: white;
  box-shadow: rgba(145, 160, 170, 0.2) 0 0 2px 0, rgba(145, 160, 170, 0.12) 0 12px 24px -4px;
}
.topbar-account-container.active .topbar-account-dropdown {
  display: flex;
}

.topbar-account-dropdown-title {
  position: relative;
  display: flex;

  flex-direction: row;

  width: 100%;

  font-weight: 600;
  font-size: 18px;

  color: rgba(40, 55, 70, 1);
}

.topbar-account-dropdown-header {
  position: relative;
  display: flex;

  flex-direction: column;

  width: 100%;

  padding: 20px 0;

  border-bottom: 1px solid rgba(235, 240, 245, 1);
}

.topbar-account-dropdown-header-title,
.topbar-account-dropdown-header-subtitle {
  position: relative;
  display: flex;

  align-items: center;

  flex-direction: row;

  margin-bottom: 3px;

  width: 100%;

  font-weight: 600;
  font-size: 14px;

  color: rgba(40, 55, 70, 1);
}

.topbar-account-dropdown-header-subtitle {
  font-weight: 500;
  color: rgba(90, 105, 135, 1);
}

.topbar-account-dropdown-header-title i,
.topbar-account-dropdown-header-subtitle i {
  margin-left: 5px;
}

.topbar-account-dropdown-button {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  margin-top: 20px;

  width: 100%;
  height: 35px;

  font-weight: 500;
  font-size: 12px;

  border: 1px solid rgba(95, 135, 255, 1);
  border-radius: 7px;

  color: rgba(95, 135, 255, 1);

  transition: 0.3s all ease-in-out;
}
.topbar-account-dropdown-button:hover {
  background: rgba(95, 135, 255, 1);
  color: white;
}