/* Navigation overrides for high contrast theme */
@-webkit-keyframes balloon-animation {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@-moz-keyframes balloon-animation {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@-ms-keyframes balloon-animation {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@-o-keyframes balloon-animation {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes balloon-animation {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.vsts-header .hub-selector {
  margin-left: 0;
  height: 100%;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item {
  padding: 11px 14px 0 14px;
  vertical-align: top;
  text-decoration: none;
  outline: 0;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.focus, .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.hover,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.focus,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.hover {
  background-color: rgba( 16, 110, 190 ,  1 );
  background-color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.selected::after,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: calc(50% - 6px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom:  6px solid;
  border-bottom-color: rgba( 244, 244, 244 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.vss-focus-visible .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.focus::after, .vss-focus-visible
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.focus::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border-top:  1px solid;
  border-top-color: rgba( 255, 255, 255 ,  1 );
  border-top-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 255, 255, 255 ,  1 );
  border-right-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-bottom:  1px solid;
  border-bottom-color: rgba( 255, 255, 255 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 255, 255, 255 ,  1 );
  border-left-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  height: auto;
  width: auto;
  margin-left: 0;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.focus, .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.selected, .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.hover,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.focus,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.selected,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.hover {
  outline: none;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.focus > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.focus > span.html, .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.selected > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.selected > span.html, .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.hover > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item.hover > span.html,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.focus > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.focus > span.html,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.selected > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.selected > span.html,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.hover > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item.hover > span.html {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item > span,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item > span {
  text-decoration: none;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item > span.text, .vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item > span.html,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item > span.text,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item > span.html {
  padding: 0;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item > .separator,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item > .separator {
  height: 20px;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item .menu > .menu-item > .pin,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item .menu > .menu-item-container > .menu-item > .pin,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item .menu > .menu-item > .pin,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item .menu > .menu-item-container > .menu-item > .pin {
  /* use this instead of display:none for layout reasons */
  visibility: hidden;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item .menu > .menu-item.hover > .pin,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item .menu > .menu-item-container > .menu-item.hover > .pin,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item .menu > .menu-item.hover > .pin,
.vsts-header .hub-selector .hubs-menubar.menu-bar > .menu-item-container > .menu-item .menu > .menu-item-container > .menu-item.hover > .pin {
  visibility: visible;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar .second-level-menu.sub-menu {
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.vsts-header .hub-selector .hubs-menubar.menu-bar .more-item.balloon {
  -webkit-animation: balloon-animation 0.28s 1 linear;
  -moz-animation: balloon-animation 0.28s 1 linear;
  -ms-animation: balloon-animation 0.28s 1 linear;
  -o-animation: balloon-animation 0.28s 1 linear;
  animation: balloon-animation 0.28s 1 linear;
}

.vsts-header .hub-selector .hubs-menubar.menu-bar .menu-item.ms-vss-tfs-web-project-team-hub-group {
  background-color: rgba( 0, 90, 158 ,  1 );
  background-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  min-width: 200px;
  max-width: 200px;
  text-align: center;
}

.vsts-header .hub-selector .sub-menu {
  min-width: 200px;
  min-height: 0;
}

.vsts-header .hub-selector .sub-menu .menu-item.hub-default .text {
  font-weight: 600;
}

.vsts-header .hub-selector .sub-menu .menu-item.cta .text {
  font-weight: 600;
}

.vsts-header .hub-selector .sub-menu .menu-item-icon.large-submenu-icon {
  font-size: 20px;
  margin-top: 2px;
}

.vsts-header .hub-selector .sub-menu .menu-item-icon.bowtie-icon {
  margin-top: 2px;
}
