/* #region Navigation: Layout */

#googleTranslateContainer {
    height: 26px;  /* Prevent CLS (layout shift) */
    text-align: right;
}

#googleTranslateContainer > :first-child {
    display: inline-block;
}

#googleTranslateContainer a.goog-te-menu-value:hover {
    text-decoration: none;
}

.nav-ds {
    display: grid;
    user-select: none;
    grid-column-gap: 30px;
    grid-template-columns: min-content auto min-content;
    grid-auto-rows: minmax(70px, min-content) auto;
    color: var(--nav-ds-module-default-text-colour);
    font-size: var(--nav-ds-module-text-size);
    align-items: center;
    margin-bottom: var(--nav-ds-page-content-margin);
}

.nav-ds-configuration-client-colour-nav-background {
    color: var(--nav-ds-module-singleline-text-colour);
    background-color: var(--nav-ds-module-singleline-background-colour);
}

.nav-ds-configuration-client-colour-nav-background:not(.nav-ds-legacy) {
    margin-left: -15px;
    margin-right: -15px;
    padding-right: 15px;
    padding-left: var(--nav-ds-alignment-left-margin);
}

.nav-ds-modules-configuration-transparent-bg-solid-underline.nav-ds-modules-configuration-separate-line-display { /* NOTE: Content must be kept identical to the media query below! */
    background-color: transparent;
    border-bottom: 2px solid var(--nav-ds-module-container-underline-colour);
}

.nav-ds-modules-configuration-separate-line-display { /* NOTE: Content must be kept identical to the media query below! */
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 4;

    margin-left: calc(0px - var(--nav-ds-alignment-left-margin));
    margin-right: -15px;
    padding-right: 15px;
    padding-left: var(--nav-ds-alignment-left-margin);
}

.nav-ds-modules-configuration-separate-line-display:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) { /* NOTE: Content must be kept identical to the media query below! */
    color: var(--nav-ds-module-singleline-text-colour);
    background-color: var(--nav-ds-module-singleline-background-colour);
}

.nav-ds > .nav-ds-profile-actions > a:hover,
.nav-ds > nav:not(.nav-ds-modules-configuration-separate-line-display) > ul > li.open > a.dropdown-toggle,
.nav-ds > nav:not(.nav-ds-modules-configuration-separate-line-display) > ul > li > a.dropdown-toggle:hover,
.nav-ds > nav:not(.nav-ds-modules-configuration-separate-line-display) > ul > li > a.dropdown-toggle-overridden:hover,
.nav-ds-modules-configuration-separate-line-display.nav-ds-modules-configuration-transparent-bg-solid-underline > ul > li > a.dropdown-toggle:hover,
.nav-ds-modules-configuration-separate-line-display.nav-ds-modules-configuration-transparent-bg-solid-underline > ul > li > a.dropdown-toggle-overridden:hover {  /* NOTE: Content must be kept identical to the media query below! */
    color: var(--nav-ds-module-default-hover-colour);
}

.nav-ds.nav-ds-configuration-client-colour-nav-background > .nav-ds-profile-actions > a:hover,
.nav-ds.nav-ds-configuration-client-colour-nav-background > nav > ul > li.open > a.dropdown-toggle,
.nav-ds.nav-ds-configuration-client-colour-nav-background > nav > ul > li > a.dropdown-toggle:hover,
.nav-ds.nav-ds-configuration-client-colour-nav-background > nav > ul > li > a.dropdown-toggle-overridden:hover,
.nav-ds-modules-configuration-separate-line-display:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) > ul > li > a.dropdown-toggle:hover,
.nav-ds-modules-configuration-separate-line-display:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) > ul > li > a.dropdown-toggle-overridden:hover {  /* NOTE: Content must be kept identical to the media query below! */
    color: var(--nav-ds-module-singleline-hover-colour);
}



@media only screen and (max-width: 1819px) {
    .nav-ds > nav.nav-ds-modules-configuration-transparent-bg-solid-underline {
        background-color: transparent;
        border-bottom: 2px solid var(--nav-ds-module-container-underline-colour);
    }

    .nav-ds > nav {
        grid-row: 2;
        grid-column-start: 1;
        grid-column-end: 4;

        margin-left: calc(0px - var(--nav-ds-alignment-left-margin));
        margin-right: -15px;
        padding-right: 15px;
        padding-left: var(--nav-ds-alignment-left-margin);
    }

    .nav-ds > nav:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) {
        color: var(--nav-ds-module-singleline-text-colour);
        background-color: var(--nav-ds-module-singleline-background-colour);
    }

    .nav-ds > nav.nav-ds-modules-configuration-transparent-bg-solid-underline > ul > li.open > a.dropdown-toggle,
    .nav-ds > nav.nav-ds-modules-configuration-transparent-bg-solid-underline > ul > li > a.dropdown-toggle:hover,
    .nav-ds > nav.nav-ds-modules-configuration-transparent-bg-solid-underline > ul > li > a.dropdown-toggle-overridden:hover {
        color: var(--nav-ds-module-default-hover-colour);
    }

    .nav-ds > nav:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) > ul > li.open > a.dropdown-toggle,
    .nav-ds > nav:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) > ul > li > a.dropdown-toggle:hover,
    .nav-ds > nav:not(.nav-ds-modules-configuration-transparent-bg-solid-underline) > ul > li > a.dropdown-toggle-overridden:hover {
        color: var(--nav-ds-module-singleline-hover-colour);
    }
}

.nav-ds-brand {
    margin-bottom: 10px;  /* TODO: change to Variable? */
    margin-top: 10px;
}

.nav-ds-brand,
.nav-ds-brand img {
    display: block; /* Bypass unusual inline properties set in v4 generic css file, to enable pixel perfect alignment on v4/legacy */
    max-width: var(--nav-ds-brand-max-width);
}

/* #endregion */


/* #region Navigation: Profile action buttons */

.nav-ds-profile-actions {
    grid-row: 1;
    grid-column: 3;

    padding: 5px;
    border-radius: 5px;
    font-size: var(--nav-ds-profile-actions-icon-size-px);

    display: grid;
    grid-column-gap: var(--nav-ds-profile-actions-spacing-px);
    grid-auto-flow: column;
    grid-auto-columns: var(--nav-ds-profile-actions-icon-size-px);
    grid-template-rows: var(--nav-ds-profile-actions-icon-size-px);
}

.nav-ds-profile-actions, 
.nav-ds-profile-actions > a {
    overflow: hidden;
}

.nav-ds-profile-actions > a,
.nav-ds-profile-actions > a:link,
.nav-ds-profile-actions > a:hover,
.nav-ds-profile-actions > a:focus {
    color: inherit;
    outline: none;
    text-decoration: none;
}

.nav-ds-profile-actions > a:focus-visible {
    color: var(--nav-ds-keyboard-focus-colour);
    outline: var(--nav-ds-keyboard-focus-outline);
}

.nav-ds-profile-actions #unreadNotificationCountContainer:not(:empty) {
    display: block;
    height: var(--nav-ds-profile-actions-notification-counter-size);
    width: var(--nav-ds-profile-actions-notification-counter-size);
    font-size: var(--nav-ds-profile-actions-notification-counter-textsize);
    font-family: sans-serif;
    text-align: center;
    padding-top: calc(calc(var(--nav-ds-profile-actions-notification-counter-size) - var(--nav-ds-profile-actions-notification-counter-textsize)) / 2); /* text-justify: center; */
    background-color: var(--nav-ds-profile-actions-notification-counter-colour);
    color: #fff;
    position: relative;
    top: calc(1px - var(--nav-ds-profile-actions-icon-size-px));  /* Overflows under the notification icon by default */
    left: calc(var(--nav-ds-profile-actions-icon-size-px) - var(--nav-ds-profile-actions-notification-counter-size)); /* Positioned on the left by default */
    border-radius: calc(var(--nav-ds-profile-actions-notification-counter-size) / 2);
}

/* #endregion */


/* #region Navigation: Modules container */

/* Module Caret */
.dropdown-toggle > span {
    font-size: 14px;
    text-rendering: optimizeSpeed;  /* for identical transform rendering in Chrome and FF */
    transform: translateX(2px) translateY(1px) scale(1.6) rotate(0deg);
}

.dropdown-toggle-overridden > span,
.dropdown-toggle > span {
    display: inline-block;
}

@media screen and (prefers-reduced-motion: no-preference) {
    .dropdown-toggle > span {
        transition: transform 0.3s ease-out;
    }
}

.open > .dropdown-toggle > span {
    transform: translateX(2px) translateY(1px) scale(1.6) rotate(180deg);
}

.nav-ds > nav > ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: var(--nav-ds-module-gap);
}

/* Modules */
.nav-ds > nav > ul > li {
    list-style: none;
    color: inherit; /* Override Legacy */
    padding: 0;
}

.nav-ds > nav > ul > li > a,
.nav-ds > nav > ul > li > a:hover,
.nav-ds > nav > ul > li > a:active {
    display: inline-flex;
    color: inherit;
    height: var(--nav-ds-module-height); 
    align-items: center;  /* Centre label and caret within anchor */
    text-decoration: none;
    gap: var(--nav-ds-module-caret-gap);
}

.nav-ds > nav > ul > li > a:focus-visible {
    color: var(--nav-ds-keyboard-focus-colour);
    outline: var(--nav-ds-keyboard-focus-outline);
}
/* #endregion */


/* #region Navigation: Modules Dropdown menu & search */
.nav-ds > nav > ul > li,
.nav-ds > nav > ul > li > .dropdown-menu li {
    padding: 0;  /* Override Legacy */
}

.nav-ds > nav > ul > li > .dropdown-menu {
    font-size: var(--nav-ds-module-dropdown-text-size);
}

.nav-ds > nav > ul > li > .dropdown-menu li > a {
    background: transparent;
    color: var(--nav-ds-module-dropdown-default-text-colour);
    font-weight: var(--nav-ds-module-dropdown-text-weight);
    transition: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
    .nav-ds > nav > ul > li > .dropdown-menu li > a {
        transition: background-color 0.1s ease-out, color 0.1s ease-out;
    }
}

.nav-ds > nav > ul > li > .dropdown-menu li > a:hover {
    background: var(--nav-ds-module-dropdown-hover-background-colour);
    color: var(--nav-ds-module-dropdown-hover-text-colour);
}

.nav-ds > nav > ul > li > .dropdown-menu > li > a.current-tab-indicator {
    border-right: 5px solid var(--nav-ds-module-dropdown-active-current-tab-indicator-colour);
}

/* Search section header */
.nav-ds > nav > ul > li > .dropdown-menu .menu-dropdowns > p {
    color: var(--client-primary);
}

/* #endregion */


/* #region Navigation: Profile Action buttons Search Modal/Specs and Standards Search modal */

.nav-ds-quick-search {
    padding: 20px;

    display: grid;
    grid-row-gap: 7px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}

.nav-ds-quick-search > :first-child {
    grid-column-start: 1;
    grid-column-end: 3;
}

/* #endregion */

/* #region Navigation: Tasks Module */
.dropdown-toggle-overridden[data-module-id='332'] {
    margin-right: calc(0px - (7px + var(--nav-ds-module-caret-gap)));  /* Prevent navigation bar CLS caused by Tasks module override when page is loading. TODO: there should be a much nicer way to do this */
    gap: calc(var(--nav-ds-module-caret-gap) + (var(--nav-ds-module-caret-gap)/2)) !important; /* Spacing between the "Tasks" module button, and the counter located beside it. Currently scales with the caret spacing/gap variable */
}

.dropdown-toggle-overridden[data-module-id='332'] > span {
    border: 0; /* Remove bootstrap 3.0.0 caret */
    font-weight: inherit;
    position: relative;
    display: inline-block;
    margin-top: 0px !important; /* Override legacy */

    background-color: transparent;
    height: var(--nav-ds-module-notification-counter-size);
    width: var(--nav-ds-module-notification-counter-size);
    font-size: inherit;
    font-family: sans-serif;
    text-align: center;
    padding-top: calc(calc(var(--nav-ds-module-notification-counter-size) - var(--nav-ds-module-notification-counter-textsize)) / 2); /* text-justify: center; */
}

.dropdown-toggle-overridden[data-module-id='332'] > span:not(:empty) {
    line-height: 1;
}

.dropdown-toggle-overridden[data-module-id='332'] > span:empty {
    padding: unset;
    height: unset;
}

.dropdown-toggle-overridden[data-module-id='332'] > span:empty:before {  /* If there are no notifications, show a Tasks icon (ds-icon-default-checklist). Content value may need updating if Design System library is updated */
    content: "\e974";
    font-family: "icomoon";
    font-size: 1.5em;
    position: relative;
}

.dropdown-toggle-overridden[data-module-id='332'] > span:not(:empty) {  /* If there are notifications, display red circle with number instead */
    border-radius: calc(var(--nav-ds-module-notification-counter-size) / 2);
    background-color: var(--nav-ds-module-notification-counter-colour);
    font-size: var(--nav-ds-module-notification-counter-textsize);
    color: #ffffff;
}

.dropdown-toggle-overridden[data-module-id='332'] > span:not(:empty):hover {
    border:1px solid var(--client-secondary-text);
    background-color: var(--client-secondary);
    color: var(--client-secondary-text);
}

@media screen and (prefers-reduced-motion: no-preference) {
    .dropdown-toggle-overridden[data-module-id='332'] > span:not(:empty) { /* Notification will gently fade in, unless accessibility preferences disabled animations */
        transition: background-color 0.2s ease-out;
    }
}

.taskNavSummaryMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000000;
    opacity: 0.16;
    display: block;
    padding: 0px;
    margin: 0px;
}

.taskSearchInputContainer {
    padding: 15px;
    background-color: #DFDFDF;
    margin-top: 10px;
    margin-bottom: 5px;
}

.taskSummaryTaskEntryContainer {
    display: flow-root;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid var(--client-secondary);
}

.taskSummaryTaskEntryContainer:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--client-primary);
    text-underline-offset: 3px;
}

.taskSummaryTaskEntryContainer:hover > .taskSummaryTaskTitle {
    color: var(--client-primary) !important;
}

.taskSummaryTaskTitle {
    font-size: medium;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskSummarytaskTypeLabel {
    display: inline;
    font-size: smaller;
    color: var(--client-secondary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskSummaryFilteredFieldLabel {
    display: inline;
    font-size: smaller;
    color: var(--client-secondary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskSummaryTabButtonContainer {
    text-align: center;
    padding: 2vh 0px 1vh 0px;
}

/* #endregion */

/* #region Notification Summary */
.notificationSummaryTitle {
    display: inline-block;
    text-align: center;
    margin: 10px 0px 10px 0px;
    padding-bottom: 5px;
    color: black;
    border-bottom: 1px solid black;
}

.notificationSummaryNotificationEntryContainer:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--client-primary);
    text-underline-offset: 3px;
}

.notificationSummaryNotificationEntryContainer:hover > .notificationSummaryNotificationTitle {
    color: var(--client-primary) !important;
}

.notificationSummaryNotificationTitle {
    font-size: 17px;
    color: #000;
}

.notificationSummaryNotificationTypeLabel,
.notificationSummaryFilteredFieldLabel {
    display: inline;
    font-size: 12px;
    color: #717171;
}

.notificationSummaryNotificationTitle,
.notificationSummaryNotificationTypeLabel,
.notificationSummaryFilteredFieldLabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* #endregion */

/* #region Tasks and Notification summary shared definitions */
#taskSummaryTabContent,
#notificationSummaryContent {
    min-height: 130px;
}

.nav-ds span.nav-ds-user-information-counter-offline:not(:empty),
.nav-ds span.nav-ds-user-information-counter-offline#unreadNotificationCountContainer:not(:empty) {
    color: #00000000; /* Remove text w/transparency */
    background-color: #F7B219; /* DS Warning Colour */
}
/* #endregion */

/* #region Style overrides for Select2 dropdowns, for flat appearance and site colours */
.select2-container--classic .select2-selection--single {
    background-color: #fff !important;
    background-image: none !important;
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    background-image: none !important;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #fff !important;
    border-left: none !important;
    background-image: none !important;
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: var(--client-primary) !important;
}

.select2-container--classic .select2-selection--single:focus {
    border-color: var(--client-primary) !important;
}

.select2-container--classic.select2-container--open .select2-selection--single {
    border-color: var(--client-primary) !important;
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background-color: var(--client-primary) !important;
    color: var(--client-primary-text) !important;
}
/* #endregion */