/* Navigation Bar Extension (desktop) */
.nav-bar-extension-wrapper {
    display: none;
    position: relative;
    border-bottom: 1px solid var(--gcss-colors-line-primary);
    width: 100%
}
@media screen and (min-width: 1005px) {
    .nav-bar-extension-wrapper { display: block }
}
.nav-bar-extension-wrapper .nav-bar-extension-grid {
    text-align: right;
    position: relative;
    z-index: 100
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link {
    display: inline-block;
    margin-left: -.0714286rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link .nav-bar-links-wrapper {
    border-left: .0714286rem solid var(--gcss-colors-line-primary)
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link .link {
    font-family: var(--gcss-typography-label-2-family);
    font-size: var(--gcss-typography-label-2-size);
    font-weight: var(--gcss-typography-label-2-weight);
    margin-bottom: 0;
    padding: 1.2142857rem 1.7857143rem;
    display: inline-block
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link .link .icon {
    padding-right: .7142857rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.loggedout .link {
    border-left: none;
    padding: 1.2142857rem 1.7857143rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.flyout .link {
    font-family: var(--gcss-typography-label-3-family);
    font-size: var(--gcss-typography-label-3-size);
    font-weight: var(--gcss-typography-label-3-weight);
    transition: all .5s ease;
    padding: 1.2142857rem 1.7857143rem;
    cursor: pointer
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.flyout .link span {
    display: inline-block;
    padding: 0 0 0 .3571429rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.flyout .link span.icon {
    font-size: .7857143rem;
    transition: all .5s ease
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.user-flyout .link {
    font-family: var(--gcss-typography-label-3-family);
    font-size: var(--gcss-typography-label-3-size);
    font-weight: var(--gcss-typography-label-3-weight);
    transition: all .5s ease;
    padding: 1.2142857rem 1.7857143rem;
    cursor: pointer;
    text-align: left
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.user-flyout .link .username {
    text-transform: capitalize
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.user-flyout .link span {
    display: inline-block;
    padding: 0 0 0 .3571429rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.user-flyout .link span.user-icon {
    -webkit-transform: none;
    transform: none;
    padding: 0 .3571429rem 0 0
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.user-flyout .link span.icon {
    font-size: .7857143rem;
    transition: all .5s ease
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.user {
    font-family: var(--gcss-typography-label-3-family);
    font-size: var(--gcss-typography-label-3-size);
    font-weight: var(--gcss-typography-label-3-weight);
    padding: 0 1.7857143rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.simple {
    font-family: var(--gcss-typography-label-2-family);
    font-size: var(--gcss-typography-label-2-size);
    font-weight: var(--gcss-typography-label-2-weight)
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.simple .nav-bar-links-wrapper.no-border { border-left: 0 }
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.simple .nav-bar-links-wrapper .link { font-weight: 700 }
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.login .link {
    font-family: var(--gcss-typography-label-3-family);
    font-size: var(--gcss-typography-label-3-size);
    font-weight: var(--gcss-typography-label-3-weight);
    padding: 1.2142857rem 1.7857143rem
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.active .nav-bar-links-wrapper { border: none }
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.active .nav-bar-links-wrapper #welcome { min-width: 16.4285714rem }
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.active .nav-bar-links-wrapper .username { font-weight: 700 }
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.active a {
    margin: 0;
    transition: all .5s ease
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.active a span.icon {
    color: var(--gcss-colors-element-accent);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    overflow: hidden;
    transition: all .5s ease
}
.nav-bar-extension-wrapper .nav-bar-extension-grid .nav-bar-extension-link.active a span.user-icon { overflow: visible }

/* Flyout */
.nav-bar-extension-wrapper .nav-bar-extension-flyout {
    position: absolute;
    width: 100%;
    background: #fff;
    top: 3.6428571rem;
    z-index: 111;
    display: none;
    color: #000;
    margin-top: -.0714286rem
}
@media screen and (min-width: 1005px) {
    .nav-bar-extension-wrapper .nav-bar-extension-flyout .nav-flyout-close {
        position: fixed;
        right: 0;
        padding: .7142857rem 1.5714286rem;
        z-index: 5
    }
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=user-active] {
    padding: 0 1.3571429rem;
    right: 0;
    min-height: 8.5714286rem;
    min-width: 16.4285714rem;
    margin-top: -.2142857rem
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=user-active] .flyout-links .icon { padding-right: .3571429rem }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=user-active] .nav-flyout-close { display: none }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] {
    display: block;
    -webkit-animation: fadeIn 1ms linear;
    animation: fadeIn 1ms linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1
}

/* RESTORED: Desktop flyout navcards and link-list layout/animation */
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navigation-card-wrapper .icon-details .icon {
    font-size: 3.2142857rem;
    margin-bottom: 1.6428571rem
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid .navigation-card-wrapper {
    -webkit-animation: fadeIn .5s linear;
    animation: fadeIn .5s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid>.sdp-col:first-child .navigation-card-wrapper { -webkit-animation-delay: 10ms; animation-delay: 10ms }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid>.sdp-col:nth-child(2) .navigation-card-wrapper { -webkit-animation-delay: 20ms; animation-delay: 20ms }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid>.sdp-col:nth-child(3) .navigation-card-wrapper { -webkit-animation-delay: 30ms; animation-delay: 30ms }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid>.sdp-col:nth-child(4) .navigation-card-wrapper { -webkit-animation-delay: 40ms; animation-delay: 40ms }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid>.sdp-col:nth-child(5) .navigation-card-wrapper { -webkit-animation-delay: 50ms; animation-delay: 50ms }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .navcards .layout-grid>.sdp-col:nth-child(6) .navigation-card-wrapper { -webkit-animation-delay: 60ms; animation-delay: 60ms }

.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .link-list {
    border-top: .0714286rem solid #bfbfbf;
    padding: .9285714rem 0 0
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid .link-list {
    -webkit-animation: fadeIn .13s linear;
    animation: fadeIn .13s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    padding: 2.5rem 0 3.5714286rem 6.0714286rem;
    height: 100%
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid .link-list ul.links li a { padding-left: 0 }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid>.sdp-col:last-of-type .link-list { border-right: none }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid>.sdp-col:first-child .link-list { -webkit-animation-delay: .23s; animation-delay: .23s }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid>.sdp-col:nth-child(2) .link-list { -webkit-animation-delay: .24s; animation-delay: .24s }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid>.sdp-col:nth-child(3) .link-list { -webkit-animation-delay: .25s; animation-delay: .25s }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid .sdp-col.col-item {
    border-right: .0714286rem solid var(--gcss-colors-element-subdued)
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid .sdp-col.col-item:last-of-type { border-right: none }
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid .sdp-col.col-item:only-child {
    border-left: .0714286rem solid var(--gcss-colors-element-subdued);
    border-right: .0714286rem solid var(--gcss-colors-element-subdued)
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout[class*=ext-active] .flyout-links .layout-grid .sdp-col.col-item p.heading { border: none }

.nav-bar-extension-wrapper .nav-bar-extension-flyout .divider {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-bottom: .0714286rem solid #bfbfbf;
    margin: 0;
    color: var(--gcss-colors-line-primary)
}
.nav-bar-extension-wrapper .nav-bar-extension-flyout .nav-bar-extension-flyout-navcard { padding: 1.4285714rem 0 }

/* Page overlay */
.nav-bar-extension-wrapper .page-overlay {
    position: absolute;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    display: none
}
.nav-bar-extension-wrapper .page-overlay.active {
    bottom: 0;
    display: block;
    left: 0;
    padding: 1.7857143rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5
}

/* Themes */
.gcss-theme-light.nav-bar-extension-wrapper { background: var(--gcss-colors-background-primary_light) }
.gcss-theme-light.nav-bar-extension-wrapper .nav-bar-extension-link .link { color: var(--gcss-colors-text-body-primary_light) }
.gcss-theme-light.nav-bar-extension-wrapper .nav-bar-extension-link .link:hover { background-color: var(--gcss-colors-background-tertiary_light) }
.gcss-theme-light.nav-bar-extension-wrapper .nav-bar-extension-link.active .link:hover { background-color: var(--gcss-colors-text-body-primary_light) }
.gcss-theme-light.nav-bar-extension-wrapper .nav-bar-extension-link.active a {
    background-color: var(--gcss-colors-background-primary_light);
    color: var(--gcss-colors-background-primary_dark)
}
.gcss-theme-light.nav-bar-extension-wrapper .nav-bar-extension-link.active a .gcss-icon-chevron-up {
    color: var(--gcss-colors-element-accent_light)
}
.gcss-theme-light.nav-bar-extension-wrapper .nav-bar-extension-flyout {
    background-color: var(--gcss-colors-background-primary_light)
}
.gcss-theme-dark.nav-bar-extension-wrapper { background: var(--gcss-colors-background-primary_dark) }
.gcss-theme-dark.nav-bar-extension-wrapper .nav-bar-extension-link .link { color: var(--gcss-colors-text-body-primary_dark) }
.gcss-theme-dark.nav-bar-extension-wrapper .nav-bar-extension-link .link:hover { background-color: var(--gcss-colors-background-tertiary_dark) }
.gcss-theme-dark.nav-bar-extension-wrapper .nav-bar-extension-link.active .link:hover { background-color: var(--gcss-colors-text-body-primary_dark) }
.gcss-theme-dark.nav-bar-extension-wrapper .nav-bar-extension-link.active a {
    background-color: var(--gcss-colors-background-primary_light);
    color: var(--gcss-colors-background-primary_dark)
}
.gcss-theme-dark.nav-bar-extension-wrapper .nav-bar-extension-link.active a .gcss-icon-chevron-up {
    color: var(--gcss-colors-element-accent_dark)
}
.gcss-theme-dark.nav-bar-extension-wrapper .nav-bar-extension-flyout {
    background-color: var(--gcss-colors-background-primary_light)
}

/* Navigation Card (used in extension flyout) */
.navigation-card-wrapper {
    padding-bottom: 1.0714286rem;
    padding-top: 1.0714286rem;
    text-transform: uppercase;
    position: relative
}
@media screen and (max-width: 1004px) {
    .navigation-card-wrapper .description { text-align: left }
}
@media screen and (min-width: 1005px) {
    .navigation-card-wrapper .description { text-align: center }
}
.navigation-card-wrapper a {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
    display: block
}
.navigation-card-wrapper .navigation-card-container {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex: inherit;
    -ms-flex: inherit;
    flex: inherit;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
@media screen and (min-width: 1005px) {
    .navigation-card-wrapper .navigation-card-container {
        display: flex;
        flex-direction: column;
        gap: 1.6428571rem;
    }
}
.navigation-card-wrapper .navigation-card-container .icon-details .icon {
    position: absolute;
    color: var(--gcss-colors-element-primary)
}
@media screen and (min-width: 1005px) {
    .navigation-card-wrapper .navigation-card-container .icon-details .icon {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: .7142857rem;
        position: static
    }
}
.navigation-card-wrapper .navigation-card-container .icon-details .icon-label {
    font-family: var(--gcss-typography-label-3-family);
    font-size: var(--gcss-typography-label-3-size);
    font-weight: var(--gcss-typography-label-3-weight);
    margin-left: 1.5714286rem;
    color: var(--gcss-colors-text-body-primary)
}
@media screen and (min-width: 1005px) {
    .navigation-card-wrapper .navigation-card-container .icon-details .icon-label {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        margin-left: 0
    }
}

/* Fleet Mobile Accordions */
@media screen and (max-width: 1004px) {
    .fleet-accordion-mobile {
        display: block;
        background-color: var(--gcss-colors-background-secondary_light);
        margin: 1.0714286rem 1.0714286rem 0;
    }
    .fleet-accordions-container { width: 100% }
    .fleet-accordion-item {
        padding-left: 1.4285714rem;
        border-bottom: .1428571rem solid var(--gcss-colors-element-subdued_light);
        color: var(--gcss-colors-text-body-primary_light);
        font-family: var(--gcss-typography-label-4-family);
        font-size: var(--gcss-typography-label-4-size);
        font-weight: var(--gcss-typography-label-4-weight);
        line-height: 4.4285714rem;
    }
    .fleet-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        outline: none;
    }
    .fleet-accordion-header[aria-expanded="true"]{
        border-bottom: .1428571rem solid var(--gcss-colors-element-subdued_light);
    }
    .fleet-accordion-title { text-transform: uppercase; margin: 0 }
    .fleet-accordion-header .gcss-icon-login:before {
        margin-right: 2px;
    }
    .fleet-accordion-icon {
        float: right;
        clear: both;
        padding: 0 1.0714286rem 0 0;
        transition: transform 0.3s ease;
        color: var(--gcss-colors-text-heading_light);
    }
    .fleet-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
    }
    .fleet-accordion-item.expanded .fleet-accordion-content { padding-bottom: 1rem }
    .fleet-accordion-section { margin-bottom: 1.5rem }
    .fleet-accordion-item[data-accordion-id='welcome'] .fleet-accordion-section { margin-bottom: 0 }
    .fleet-accordion-section-title {
        color: var(--gcss-colors-text-heading_light);
        text-transform: uppercase;
        margin: 0 0 .7142857rem;
        font-family: var(--gcss-typography-label-2-family);
        font-size: var(--gcss-typography-label-2-size);
        font-weight: var(--gcss-typography-label-2-weight);
        line-height: var(--gcss-typography-font-size-default-line-height);
    }
    .fleet-accordion-links { list-style: none; margin: 0; padding: 0 }
    .fleet-accordion-links li { margin-bottom: 0.5rem }
    .fleet-accordion-links li:last-child { margin-bottom: 0 }
    .fleet-accordion-links a {
        font-family: var(--gcss-typography-label-4-family);
        color: var(--gcss-colors-text-body-primary_light);
        line-height: 2.8571429rem;
        text-transform: none;
        padding: 0;
        font-weight: 400;
        display: inherit;
        text-decoration: none;
    }
    .fleet-accordion-item[data-accordion-id="welcome"] .fleet-accordion-title { font-weight: 700 }
    .fleet-accordion-item[data-accordion-id="welcome"] .fleet-accordion-links a .icon {
        margin-right: 0.5rem;
        font-size: 1rem;
    }
    .fleet-login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--gcss-colors-background-primary_light);
    }
    .fleet-login-button {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 0rem 1rem 1rem;
        border: none;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease;
        width: 100%;
        background-color: var(--gcss-colors-background-secondary_light);
        font-family: var(--gcss-typography-label-4-family);
        font-size: var(--gcss-typography-label-4-size);
        font-weight: var(--gcss-typography-label-4-weight);
    }
    .fleet-login-button:hover {
        background-color: var(--gcss-colors-background-tertiary);
        transform: translateY(-1px);
    }
    .fleet-login-button:active { transform: translateY(0) }
    .fleet-login-button:focus {
        outline: 2px solid var(--gcss-colors-element-accent);
        outline-offset: 2px;
    }
    .fleet-login-button .icon { font-size: 1.2rem }
    .fleet-customer-hub-link {
        border-bottom: .1428571rem solid var(--gcss-colors-element-subdued_light);
        line-height: 4.4285714rem;
    }
    a.fleet-hub-link {
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 15px;
        text-decoration: none;
        color: var(--gcss-colors-text-body-primary_light);
        font-family: var(--gcss-typography-label-4-family);
        font-size: var(--gcss-typography-label-4-size);
        font-weight: var(--gcss-typography-label-4-weight);
    }
    .fleet-accordion-navcard:last-child { padding-bottom: 1.7857143rem }
    .fleet-accordion-navcard-container:empty {
        padding-top: 0;
        padding-bottom: 1.7857143rem;
    }
    .fleet-accordion-navcard:not(:last-child){
        border-bottom: .0714286rem solid var(--gcss-colors-element-subdued_light);
    }
    .fleet-accordion-navcard .fleet-accordion-navcard-content .icon {
        position: absolute;
        color: var(--gcss-colors-element-primary);
        font-weight: 400;
    }
    .fleet-accordion-navcard .fleet-accordion-navcard-content .icon-label{
        margin-left: 1.5714286rem;
        font-family: var(--gcss-typography-label-3-family);
        font-size: var(--gcss-typography-label-3-size);
        font-weight: var(--gcss-typography-label-3-weight);
        color: var(--gcss-colors-text-body-primary_light);
    }
    .fleet-accordion-navcard .fleet-accordion-navcard-content{
        text-decoration: none;
        line-height: var(--gcss-typography-font-size-default-line-height);
        display: flex;
        align-items: center;
        padding-bottom: 1.0714286rem;
        padding-top: 1.0714286rem;
        text-transform: uppercase;
        position: relative;
    }

    .sso-action-buttons {
        display: none;
    }

}
/* Overriding styles for MainNavigation in different Viewports */
@media screen and (max-width: 509px) {
    .header-wrapper .m-header-wrapper .header .brand-logo .link-image img {
        max-width: 100%;
        width: 6.7857143rem;
        height: 1.0714286rem;
    }
}
@media screen and (min-width: 510px) and (max-width: 699px) {
    .header-wrapper .m-header-wrapper .header .brand-logo .link-image img {
        width: 12rem;
        height: 1.7142857rem;
    }
}

@media screen and (min-width: 700px) and (max-width: 1004px) {
    .header-wrapper .m-header-wrapper .header .brand-logo .link-image img {
        width: 12.5rem;
        height: 1.4285714rem;
    }
}

/* Hide fleet accordions on desktop */
@media screen and (min-width: 1005px) {
    .fleet-accordion-mobile {
        display: none
    }
    .header-wrapper .logo {
        width: 13.2142857rem;
    }
}