/* Global layout styles for TFS */
/* Colors used specifically in TFS */
.region-navigation {
  overflow: hidden;
  position: relative;
  width: 48px;
  transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1); }
  .region-navigation.expanded {
    transition-duration: 200ms;
    width: 260px; }
  .region-navigation .navigation-link {
    color: rgba(0, 0, 0, .9);
    color: var(--text-primary-color,rgba(0, 0, 0, .9));
    padding-right: 4px; }
  body.ms-vss-web-vsts-theme-hc-dark .region-navigation .expanded .navigation-link {
    color: rgba(255, 255, 255, 1);
    color: var(--background-color,rgba(255, 255, 255, 1)); }
  body.ms-vss-web-vsts-theme-hc-light .region-navigation .expanded .navigation-link {
    color: rgba(255, 255, 255, 1);
    color: var(--background-color,rgba(255, 255, 255, 1)); }
  .region-navigation .hover-effect:hover, .region-navigation .hover-effect:focus {
    background: rgba(0, 0, 0, 0.08);
    background: var(--nav-vertical-item-hover-background,rgba(0, 0, 0, 0.08)); }
  .region-navigation .alt-hover-effect:hover, .region-navigation .alt-hover-effect:focus {
    color: rgba(0, 90, 158, 1);
    color: var(--communication-foreground,rgba(0, 90, 158, 1));
    text-shadow: 0 0 4px rgba( 0, 120, 212 ,  0.5 );
    text-shadow: 0 0 4px rgba( var(--palette-primary,0, 120, 212) ,  0.5 ); }

.full-screen-mode .region-navigation {
  display: none; }

/**
 * TopLevel Navigation styles (Organization/Collection pages)
 */
.top-level-navigation {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-right: 1px solid rgba(0, 0, 0, 0.10);
  border-right: 1px solid var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
  padding-top: 20px; }
  @media screen and (max-width: 599px) {
    .top-level-navigation {
      margin-top: 0px; } }
  .top-level-navigation .section-header {
    color: rgba(0, 0, 0, .55);
    color: var(--text-secondary-color,rgba(0, 0, 0, .55));
    padding-bottom: 12px;
    padding-left: 16px;
    padding-top: 24px; }
  .top-level-navigation .top-navigation-item:hover, .top-level-navigation .top-navigation-item:focus {
    background-color: rgba( 244, 244, 244 ,  1 );
    background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 ); }
  .top-level-navigation .host-link {
    padding: 8px 4px 8px 12px; }
    .top-level-navigation .host-link.displayed {
      background-color: rgba( 222, 236, 249 ,  1 );
      background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 ); }
      .top-level-navigation .host-link.displayed:hover, .top-level-navigation .host-link.displayed:focus {
        background-color: rgba( 199, 224, 244 ,  1 );
        background-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 ); }
      .top-level-navigation .host-link.displayed::before {
        background-color: rgba(0, 120, 212, 1);
        background-color: var(--communication-background,rgba(0, 120, 212, 1));
        bottom: 0px;
        content: "";
        left: 0px;
        position: absolute;
        top: 0px;
        width: 3px; }
    .top-level-navigation .host-link .project-persona {
      margin-right: 12px; }
  .top-level-navigation .related-link {
    margin-bottom: 10px;
    padding-left: 14px; }
  .top-level-navigation .action-section {
    padding-top: 8px; }
  .top-level-navigation .action-link {
    line-height: 20px;
    padding: 10px 8px 10px 12px; }
  .top-level-navigation .navigation-footer {
    margin: 10px 0px; }

.bolt-focus-visible .region-navigation .focus-treatment:focus {
  animation: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  position: relative; }
  .bolt-focus-visible .region-navigation .focus-treatment:focus::after {
    border: 1px solid rgba(0, 0, 0, .9);
    border: 1px solid var(--text-primary-color,rgba(0, 0, 0, .9));
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0; }

/**
 * Project specific styles
 */
.project-navigation {
  background: rgba(0, 0, 0, 0.08);
  background: var(--nav-vertical-background-color,rgba(0, 0, 0, 0.08));
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-right: 1px solid rgba(0, 0, 0, 0.10);
  border-right: 1px solid var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  white-space: nowrap; }
  body.ms-vss-web-vsts-theme-hc-dark .project-navigation {
    border-color: rgba(0, 120, 212, 1);
    border-color: var(--focus-border-color,rgba(0, 120, 212, 1)); }
  body.ms-vss-web-vsts-theme-hc-light .project-navigation {
    border-color: rgba(0, 120, 212, 1);
    border-color: var(--focus-border-color,rgba(0, 120, 212, 1)); }
  @media screen and (max-width: 599px) {
    .project-navigation {
      background: rgba( 255, 255, 255 ,  1 );
      background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 ); } }
  .project-navigation.expanded .collapsible-section {
    display: flex;
    flex-direction: row; }
  .project-navigation.collapsed .collapsible-section {
    display: flex;
    flex-direction: column; }
  .project-navigation.collapsed .expanded-only {
    display: none; }
  .project-navigation .separator {
    background-color: rgba(0, 0, 0, 0.10);
    background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, 0.10));
    height: 1px;
    margin: 0 10px; }
  .project-navigation .navigation-section {
    margin: 4px 0; }
  .project-navigation .navigation-icon {
    padding-bottom: 12px;
    padding-top: 12px;
    width: 47px; }
  .project-navigation .contributed-icon-image {
    height: 1.5rem;
    width: 1.5rem; }
  .project-navigation .touch-chevron {
    margin-right: 8px;
    padding: 4px; }
    .project-navigation .touch-chevron:hover {
      background-color: rgba(0, 0, 0, 0.08);
      background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, 0.08)); }
  .project-navigation .hub-group-container.expanded-container {
    background-color: rgba(0, 0, 0, 0.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, 0.08)); }
    body.ms-vss-web-vsts-theme-hc-dark .project-navigation .hub-group-container.expanded-container {
      border: 1px solid rgba(0, 120, 212, 1);
      border: 1px solid var(--focus-border-color,rgba(0, 120, 212, 1)); }
    body.ms-vss-web-vsts-theme-hc-light .project-navigation .hub-group-container.expanded-container {
      border: 1px solid rgba(0, 120, 212, 1);
      border: 1px solid var(--focus-border-color,rgba(0, 120, 212, 1)); }
  body.ms-vss-web-vsts-theme-hc-dark .project-navigation .hub-group-container > .expanded {
    background-color: rgba(0, 120, 212, 1);
    background-color: var(--focus-border-color,rgba(0, 120, 212, 1));
    color: rgba(255, 255, 255, 1);
    color: var(--background-color,rgba(255, 255, 255, 1)); }
  body.ms-vss-web-vsts-theme-hc-light .project-navigation .hub-group-container > .expanded {
    background-color: rgba(0, 120, 212, 1);
    background-color: var(--focus-border-color,rgba(0, 120, 212, 1));
    color: rgba(255, 255, 255, 1);
    color: var(--background-color,rgba(255, 255, 255, 1)); }
  .project-navigation .hub-group-container.displayed-container::before {
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.20);
    background-color: var(--palette-black-alpha-20,rgba(0, 0, 0, 0.20));
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px; }
  .project-navigation .hub-group-container.displayed-container.hub-group-only::before {
    background-color: rgba(0, 120, 212, 1);
    background-color: var(--communication-background,rgba(0, 120, 212, 1)); }
  .project-navigation .hub-group.displayed .navigation-text {
    font-weight: 600; }
  .project-navigation .hub.stand-alone {
    padding-bottom: 4px;
    padding-top: 4px; }
  .project-navigation .hub.displayed {
    background-color: rgba(0, 0, 0, 0.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, 0.08)); }
    .project-navigation .hub.displayed::before {
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--communication-background,rgba(0, 120, 212, 1));
      bottom: 0px;
      content: "";
      left: 0px;
      position: absolute;
      top: 0px;
      width: 3px; }
    .project-navigation .hub.displayed .navigation-text {
      font-weight: 600; }
    body.ms-vss-web-vsts-theme-hc-dark .project-navigation .hub.displayed {
      border: 2px solid rgba(0, 120, 212, 1);
      border: 2px solid var(--focus-border-color,rgba(0, 120, 212, 1)); }
    body.ms-vss-web-vsts-theme-hc-light .project-navigation .hub.displayed {
      border: 2px solid rgba(0, 120, 212, 1);
      border: 2px solid var(--focus-border-color,rgba(0, 120, 212, 1)); }
    @media (forced-colors: active) {
      .project-navigation .hub.displayed {
        border: 2px solid Highlight; } }
  .project-navigation .hub .contributed-icon-image {
    height: 1rem;
    width: 1rem; }
  .project-navigation .expanded {
    background-color: rgba(0, 0, 0, 0.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, 0.08)); }
    body.ms-vss-web-vsts-theme-hc-dark .project-navigation .expanded {
      color: rgba(255, 255, 255, 1);
      color: var(--background-color,rgba(255, 255, 255, 1));
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--focus-border-color,rgba(0, 120, 212, 1)); }
    body.ms-vss-web-vsts-theme-hc-light .project-navigation .expanded {
      color: rgba(255, 255, 255, 1);
      color: var(--background-color,rgba(255, 255, 255, 1));
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--focus-border-color,rgba(0, 120, 212, 1)); }
    body.ms-vss-web-vsts-theme-hc-dark .project-navigation .expanded:hover {
      color: rgba(255, 255, 255, 1);
      color: var(--background-color,rgba(255, 255, 255, 1));
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--focus-border-color,rgba(0, 120, 212, 1)); }
    body.ms-vss-web-vsts-theme-hc-light .project-navigation .expanded:hover {
      color: rgba(255, 255, 255, 1);
      color: var(--background-color,rgba(255, 255, 255, 1));
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--focus-border-color,rgba(0, 120, 212, 1)); }
  .project-navigation .navigation-element:focus, .project-navigation .navigation-element:hover {
    background-color: rgba(0, 0, 0, 0.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, 0.08)); }
    body.ms-vss-web-vsts-theme-hc-dark .project-navigation .navigation-element:focus, body.ms-vss-web-vsts-theme-hc-dark .project-navigation .navigation-element:hover {
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--focus-border-color,rgba(0, 120, 212, 1));
      color: rgba(255, 255, 255, 1);
      color: var(--background-color,rgba(255, 255, 255, 1)); }
    body.ms-vss-web-vsts-theme-hc-light .project-navigation .navigation-element:focus, body.ms-vss-web-vsts-theme-hc-light .project-navigation .navigation-element:hover {
      background-color: rgba(0, 120, 212, 1);
      background-color: var(--focus-border-color,rgba(0, 120, 212, 1));
      color: rgba(255, 255, 255, 1);
      color: var(--background-color,rgba(255, 255, 255, 1)); }

.navigation-callout {
  bottom: 5000px; }
  .navigation-callout .nav-animation-container {
    width: 260px;
    transform-origin: left;
    animation: grow-small 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
    @media screen and (max-width: 599px) {
      .navigation-callout .nav-animation-container {
        animation: grow-xsmall 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } }
    .navigation-callout .nav-animation-container.collapsing {
      animation: shrink-small 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
      @media screen and (max-width: 599px) {
        .navigation-callout .nav-animation-container.collapsing {
          animation: shrink-xsmall 300ms cubic-bezier(0.215, 0.61, 0.355, 1); } }
  .navigation-callout.pageHasFooter {
    margin-bottom: 22px; }
  .navigation-callout .region-header {
    background-color: rgba(0, 0, 0, 0.08);
    background-color: var(--nav-vertical-background-color,rgba(0, 0, 0, 0.08)); }
    @media screen and (max-width: 599px) {
      .navigation-callout .region-header {
        background-color: rgba( 255, 255, 255 ,  1 );
        background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
        box-shadow: none; } }
    .navigation-callout .region-header .suite-logo:hover {
      background-color: rgba(0, 0, 0, 0.08);
      background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, 0.08)); }

@keyframes grow-xsmall {
  0% {
    width: 0px; } }

@keyframes grow-small {
  0% {
    width: 48px; } }

@keyframes shrink-xsmall {
  100% {
    width: 0px; } }

@keyframes shrink-small {
  100% {
    width: 48px; } }