.topbar {
  background: #f4f4f4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 14px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
}

.topbar .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar .right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.topbar .right i,
.topbar .left i {
  font-size: 16px;
}

.topbar a {
  text-decoration: none;
  color: #111;
}

.divider {
  display: flex;
  align-items: center;
  gap: 6px;
}

.email-icon {
  font-size: 18px;
}


/* Responsive */
@media (max-width: 768px) {
  .topbar {
    font-size: 10px;
    padding: 2px 3px;
  }

  .topbar .left i {
    font-size: 14px;
  }

  .topbar .right span {
    font-size: 10px;
  }

  .email-icon {
    font-size: 16px;
  }

}

@media (max-width: 480px) {
  .topbar {
    font-size: 10px;
    gap: 1px;
  }

  .topbar .left i {
    font-size: 12px;
  }

  .topbar .right {
    gap: 6px;
  }

  .topbar .right span {
    font-size: 10px;
    gap: 1px;
  }

  .topbar .right span i {
    font-size: 11px;
    padding-left: 1px;
  }

  .email-icon {
    font-size: 14px;
  }

}