﻿.content-header-progress {
    background: transparent;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%
}

body.ms-vss-web-vsts-theme-hc-dark .content-header-progress {
    bottom: -6px
}

body.ms-vss-web-vsts-theme-hc-light .content-header-progress {
    bottom: -6px
}

.content-header, .top-level-header {
    position: relative
}

    .content-header .commandbar-item, .top-level-header .commandbar-item {
        position: relative
    }

        .content-header .commandbar-item:hover, .top-level-header .commandbar-item:hover {
            background-color: rgba(0,0,0,.02);
            background-color: var(--nav-header-item-hover-background,rgba(0, 0, 0, .02))
        }

        .content-header .commandbar-item.expanded, .top-level-header .commandbar-item.expanded {
            background-color: rgba(0,0,0,.02);
            background-color: var(--nav-header-item-hover-background,rgba(0, 0, 0, .02))
        }

        .content-header .commandbar-item:focus, .top-level-header .commandbar-item:focus {
            background-color: rgba(0,0,0,.02);
            background-color: var(--nav-header-item-hover-background,rgba(0, 0, 0, .02));
            outline: none
        }

    .content-header .commandbar-icon, .top-level-header .commandbar-icon {
        width: 48px
    }

.region-header, .region-header-menubar {
    background: rgba(255,255,255,1);
    background: var(--nav-header-background,rgba(255, 255, 255, 1));
    box-shadow: rgba(0,0,0,.08) 0 1px 0;
    box-shadow: var(--border-subtle-color,rgba(0, 0, 0, .08)) 0 1px 0;
    color: rgba(0,0,0,.55);
    color: var(--nav-vertical-text-secondary-color,rgba(0, 0, 0, .55));
    min-height: 48px;
    overflow-x: hidden;
    z-index: 100
}

    .region-header .search {
        border-radius: 2px;
        color: rgba(0,0,0,.9);
        color: var(--nav-header-text-primary-color,rgba(0, 0, 0, .9));
        width: 200px;
        border: 1px solid;
        border-color: rgba(102,102,102,1);
        border-color: rgba(var(--palette-neutral-60,102, 102, 102),1)
    }

        .region-header .search.focus {
            background-color: rgba(255,255,255,1);
            background-color: var(--background-color,rgba(255, 255, 255, 1));
            width: 300px;
            border-radius: 0 2px 2px 0;
            -webkit-transition: width .367s cubic-bezier(.1,.9,.2,1);
            transition: width .367s cubic-bezier(.1,.9,.2,1)
        }

            .region-header .search.focus .search-input {
                color: rgba(0,0,0,.9);
                color: var(--text-primary-color,rgba(0, 0, 0, .9))
            }

    .region-header .search-input::placeholder {
        color: rgba(0,0,0,.55);
        color: var(--nav-header-text-secondary-color,rgba(0, 0, 0, .55))
    }

    .region-header .search-input::-ms-input-placeholder {
        color: rgba(0,0,0,.55);
        color: var(--nav-header-text-secondary-color,rgba(0, 0, 0, .55))
    }

.bolt-focus-visible .commandbar-item:focus::after, .bolt-focus-visible .commandbar-item.selected::after {
    border: .5px solid rgba(0,0,0,.9);
    border: .5px solid var(--nav-header-text-primary-color,rgba(0, 0, 0, .9));
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.full-screen-mode .region-header, .full-screen-mode .region-header-menubar {
    display: none
}

.bolt-panel-callout-content.flyout-my-work {
    margin-top: 48px;
    margin-bottom: 24px;
    max-height: 730px;
    width: 520px
}

.flyout-my-work-container {
    flex-basis: 0%
}

.flyout-my-work-tabs {
    padding: 5px 20px 5px 12px
}

    .flyout-my-work-tabs .bolt-tab-text {
        max-width: 160px
    }

.flyout-my-work-content {
    padding: 0 20px
}

.region-navigation {
    overflow: hidden;
    position: relative;
    width: 48px;
    transition: width 1ms cubic-bezier(.4,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,.08);
    background: var(--nav-vertical-item-hover-background,rgba(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,.5);
    text-shadow: 0 0 4px rgba(var(--palette-primary,0, 120, 212),.5)
}

.full-screen-mode .region-navigation {
    display: none
}

.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,.1);
    border-right: 1px solid var(--palette-black-alpha-10,rgba(0, 0, 0, .1));
    padding-top: 20px
}

@media screen and (max-width: 599px) {
    .top-level-navigation {
        margin-top: 0
    }
}

.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: 0;
            content: "";
            left: 0;
            position: absolute;
            top: 0;
            width: 3px
        }

    .top-level-navigation .host-link .content-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 0
}

.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
    }

.content-navigation {
    background: rgba(0,0,0,.08);
    background: var(--nav-vertical-background-color,rgba(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,.1);
    border-right: 1px solid var(--palette-black-alpha-10,rgba(0, 0, 0, .1));
    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 .content-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 .content-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) {
    .content-navigation {
        background: rgba(255,255,255,1);
        background: rgba(var(--palette-neutral-0,255, 255, 255),1)
    }
}

.content-navigation.expanded .collapsible-section {
    display: flex;
    flex-direction: row
}

.content-navigation.expanded .collapsed-only {
    display: none;
}

.content-navigation.collapsed .collapsible-section {
    display: flex;
    flex-direction: column
}

.content-navigation.collapsed .expanded-only {
    display: none;
}

.content-navigation .separator {
    background-color: rgba(0,0,0,.1);
    background-color: var(--palette-black-alpha-10,rgba(0, 0, 0, .1));
    height: 1px;
    margin: 0 10px;
}

.content-navigation .navigation-section {
    margin: 4px 0;
}

.content-navigation .navigation-icon {
    padding-bottom: 12px;
    padding-top: 12px;
    width: 47px;
}

.content-navigation .contributed-icon-image {
    height: 1.5rem;
    width: 1.5rem
}

.content-navigation .touch-chevron {
    margin-right: 8px;
    padding: 4px
}

    .content-navigation .touch-chevron:hover {
        background-color: rgba(0,0,0,.08);
        background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, .08))
    }

.content-navigation .hub-group-container.expanded-container {
    background-color: rgba(0,0,0,.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, .08))
}

body.ms-vss-web-vsts-theme-hc-dark .content-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 .content-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 .content-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 .content-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))
}

.content-navigation .hub-group-container.displayed-container::before {
    bottom: 0;
    background-color: rgba(0,0,0,.2);
    background-color: var(--palette-black-alpha-20,rgba(0, 0, 0, .2));
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px
}

.content-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))
}

.content-navigation .hub-group.displayed .navigation-text {
    font-weight: 600
}

.content-navigation .hub.stand-alone {
    padding-bottom: 4px;
    padding-top: 4px
}

.content-navigation .hub.displayed {
    background-color: rgba(0,0,0,.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, .08))
}

    .content-navigation .hub.displayed::before {
        background-color: rgba(0,120,212,1);
        background-color: var(--communication-background,rgba(0, 120, 212, 1));
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        top: 0;
        width: 3px
    }

    .content-navigation .hub.displayed .navigation-text {
        font-weight: 600
    }

body.ms-vss-web-vsts-theme-hc-dark .content-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 .content-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) {
    .content-navigation .hub.displayed {
        border: 2px solid Highlight
    }
}

.content-navigation .hub .contributed-icon-image {
    height: 1rem;
    width: 1rem
}

.content-navigation .expanded {
    background-color: rgba(0,0,0,.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, .08))
}

body.ms-vss-web-vsts-theme-hc-dark .content-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 .content-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 .content-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 .content-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))
}

.content-navigation .navigation-element:focus, .content-navigation .navigation-element:hover {
    background-color: rgba(0,0,0,.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, .08))
}

body.ms-vss-web-vsts-theme-hc-dark .content-navigation .navigation-element:focus, body.ms-vss-web-vsts-theme-hc-dark .content-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 .content-navigation .navigation-element:focus, body.ms-vss-web-vsts-theme-hc-light .content-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(.215,.61,.355,1)
    }

@media screen and (max-width: 599px) {
    .navigation-callout .nav-animation-container {
        animation: grow-xsmall 300ms cubic-bezier(.215,.61,.355,1)
    }
}

.navigation-callout .nav-animation-container.collapsing {
    animation: shrink-small 300ms cubic-bezier(.215,.61,.355,1)
}

@media screen and (max-width: 599px) {
    .navigation-callout .nav-animation-container.collapsing {
        animation: shrink-xsmall 300ms cubic-bezier(.215,.61,.355,1)
    }
}

.navigation-callout.pageHasFooter {
    margin-bottom: 22px
}

.navigation-callout .region-header {
    background-color: rgba(0,0,0,.08);
    background-color: var(--nav-vertical-background-color,rgba(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,.08);
    background-color: var(--nav-vertical-active-group-background,rgba(0, 0, 0, .08))
}

@keyframes grow-xsmall {
    0% {
        width: 0
    }
}

@keyframes grow-small {
    0% {
        width: 48px
    }
}

@keyframes shrink-xsmall {
    100% {
        width: 0
    }
}

@keyframes shrink-small {
    100% {
        width: 48px
    }
}

.me-control-div.commandbar-item {
    position: static;
    align-items: stretch;
    width: 56px
}

.me-control-div.sign-in {
    width: 115px
}

.me-control-div #me-control-container {
    position: absolute;
    z-index: 10
}

.sign-in-link {
    color: rgba(0,0,0,.55);
    color: var(--nav-vertical-text-secondary-color,rgba(0, 0, 0, .55));
    padding-left: 12px;
    padding-right: 12px
}

    .sign-in-link:hover {
        color: rgba(0,0,0,.55);
        color: var(--nav-vertical-text-secondary-color,rgba(0, 0, 0, .55))
    }

.suite-logo {
    color: rgba(0,120,212,1);
    color: var(--nav-header-product-color,rgba(0, 120, 212, 1))
}

@media screen and (-ms-high-contrast:active) {
    .suite-logo:hover {
        text-decoration: underline
    }
}

.suite-logo .suite-image {
    font-size: 1.3125rem
}

.suite-logo .brand {
    flex-grow: 1
}

    .suite-logo .brand .brand {
        width: auto
    }

.navigation-callout .suite-logo .brand {
    width: 211px
}

.bolt-focus-visible .suite-logo:focus {
    animation: none;
    box-shadow: none
}

a.skip-to-main-content {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999
}

    a.skip-to-main-content:focus, a.skip-to-main-content:active {
        left: 0;
        right: 0;
        top: 12px;
        width: 100%;
        max-width: 30%;
        height: auto;
        background-color: rgba(255,255,255,1);
        background-color: var(--callout-background-color,rgba(255, 255, 255, 1));
        overflow: auto;
        margin: 0 auto;
        padding: 15px;
        text-decoration: none;
        z-index: 999
    }

.user-menuitem-row:hover {
    background-color: transparent
}

.user-menu-item-image {
    flex-shrink: 0;
    height: 40px;
    margin-right: 8px;
    width: 40px;
    border-radius: 50%
}

.region-page {
    flex-direction: column
}
