.topbar {
  position: sticky;
  display: flex;
  z-index: 1000;

  top: 0;

  overflow: auto;

  width: 100%;

  padding: 10px 0;

  background: #993e71;
}

.topbar > .container {

}

.topbar > .container > * {
  margin: 0 25px;
}
.topbar > .container > *:first-child { margin-right: 0; }
.topbar > .container > *:last-child { margin-left: 0; }

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

  height: 60px;
}

.topbar .topbar-logobox > img {
  position: relative;
  display: flex;

  object-fit: contain;
  object-position: right center;

  width: auto;
  height: 100%;
}

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

  flex-direction: row;

  align-items: center;

  padding: 0 15px;

  color: white;
  opacity: 0.75;

  transition: 0.15s all ease-out;
}
.topbar .topbar-item:first-child { margin-right: 0; }
.topbar .topbar-item:last-child { margin-left: 0; }

.topbar .topbar-item > .topbar-item__icon {
  position: relative;
  display: flex;

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

  margin-left: 5px;

  width: 16px;
  height: 16px;

  font-size: 16px;
}
.topbar .topbar-item > .topbar-item__title {
  position: relative;
  display: flex;

  white-space: nowrap;

  font-size: 20px;
  font-weight: 500;
}

.topbar .topbar-item:hover {
  opacity: 1;
}




/* TOPBAR-UNDER */
.topbarunder {
  position: relative;
  display: flex;

  width: 100%;

  background: #6c284e;
}
.topbarunder > .container {
  position: relative;
  display: flex;

  overflow: hidden;
  overflow-x: auto;

  color: white;
}

.topbarunder > .container::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.topbarunder > .container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.topbarunder > .container::-webkit-scrollbar-thumb {
  background: #993e71;
}

.topbarunder > .container > a {
  position: relative;
  display: flex;

  margin-left: 20px;

  padding: 10px 0;

  white-space: nowrap;
}

.topbarunder > .container > a.active {
  border-bottom: 2px dotted #f5aad4;
  color: #f5aad4;
}