public/video-ui/styles/layout/_topbar.scss

$topbarHeight: 50px;

.topbar {
  position: sticky;
  top: 0;
  z-index: 1;

  justify-content: right;
  flex-wrap: wrap;

  background: $color700Grey;
  border-bottom: 1px solid $greyBorderColor;

  &--training-mode {
    background: repeating-linear-gradient(
        -45deg,
        $color500Grey,
        $color500Grey 10px,
        $color800Grey 10px,
        $color800Grey 20px
    );

    .topbar__search {
      background-color: $color700Grey;
    }
  }
}

.topbar__search {
  border-bottom: 1px solid #999;
  box-sizing: border-box;
  min-width: 250px;
  input {
    background-color: transparent;
    border: none;
    &::placeholder {
      color: $color400Grey;
    }
  }
}

.topbar__nav_ {
  &:hover {
    background: $color650Grey;
  }
}

.topbar__nav-link {
  padding-right: 10px;
  text-decoration: none;
}

.topbar__global {
  margin-right: 10px;
}
.topbar__global select {
  font-family: inherit;
  background: none;
  color: inherit;
  padding: 3px;
}

.topbar__functional {
  margin-left: 20px;
}

.topbar__home-link {
  width: $topbarHeight;
  height: $topbarHeight;
  background: url(../images/logo.svg) no-repeat center;
  background-size: 30px 30px;
  margin-right: 0;
  vertical-align: top;
  float: left;

  &:hover {
    background-color: $color650Grey;
  }
}

.topbar__progress {
  position: absolute;
  align-items: center;
  width: 100%;
  height: 2px;
  top: 49px // covering 1px border, otherwise would be 50px :)
}

.topbar__back-link {
  width: $topbarHeight;
  height: $topbarHeight;
  margin-right: 0;
}

.topbar__scheduler {
  padding-right: 10px;
  justify-content: flex-end;
  height: 100%;
}

.topbar__scheduler > button {
  margin-left: 10px;
}

.topbar__alert {
  color: $cRedE3;
  margin: 0 10px 0 10px;
}

.topbar__launch-label {
  margin: 0 20px;
}