@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --font-family: "Inter", sans-serif; /* new font */
    --transition-speed: ease 0.3s all;
    /*Left side*/
    --primary-color: #7FBC03; /* the first company color*/
    --secondary-color: #218DCD; /* the second company color*/
    --button-text-color: white; /*Button text*/
    --neutral-100: #e6e6e6; /*Text fields/input border color also border color of dropdowns */
    --neutral-400: #999; /*Switch buttons*/
    --neutral-500: #808080; /*In branding - text color*/
    --neutral-black: #000; /*In branding - title color*/
    --error-color: #d00000; /*Error Message*/
    --left-panel-background: #fafafa; /*Main background*/
    --content-background: #fff; /*Background of fields*/
    --left-panel-link-color: #218DCD; /*forgot password link in sign in*, links in register page */
    --left-panel-link-color-hover: #7FBC03;
    --left-panel-button-color: #7FBC03; /*Form button "Sign in"*/
    --left-panel-button-color-hover: #218DCD; /*Hover button "Sign in"*/
    --page-link-color: #808080; /*Links to T&C, Privacy Policy etc.*/
    --page-link-color-hover: #7FBC03; /*Hover effects for smaller links*/
    /*Loader gradient - populated at render-time from branding primary/secondary*/
    --ip-loader-primary: #004A8B;
    --ip-loader-secondary: #2A76BD;
    /*-----------------*/
    /*Container Lookup*/
    --cl-background-search-rgb: 0, 109, 155; /*Container Lookup background*/
    --cl-primary-color: #7FBC03;
    --cl-secondary-color-rgb: 33, 141, 205; /*This is secondary color in rgb below is hex*/
    --cl-secondary-color: #218DCD;
    --cl-button-color: #114767; /*It is a 5 times darker color then secondary color - Lookup Button*/
    --cl-result-background: #ffffff; /*Container Lookup Result background*/
    --cl-neutral-30: #f7f7f7; /*Grid row hover (settings-style neutral)*/
    --cl-neutral-60: #f0f0f0; /*Grid header background (settings-style neutral)*/
    --cl-neutral-100: #e6e6e6; /*Separator (line) color, borders*/
    --cl-neutral-200: #ccc; /*Scrollbar hover*/
    --cl-neutral-400: #999; /*Information text*/
    --cl-neutral-500: #808080; /*Text*/
    --cl-neutral-700: #2d2d2d; /*Grid header text (dark neutral, settings-style)*/
    --cl-neutral-black: #000; /*Main text*/
    --cl-button-text-color: white; /*Button text*/
    --cl-skeleton-base: #e8e8e8; /*Loading skeleton shimmer — base shade*/
    --cl-skeleton-highlight: #f5f5f5; /*Loading skeleton shimmer — moving highlight*/
    --cl-search-text: #ffffff; /*Search-box text: title/description/hint on the search background*/
    --cl-success: #28a745; /*Found / success state */
    --cl-error: #d20000; /*Not-found / error state */
    --cl-warning: #b45309; /*Warning text/icon */
    --cl-warning-accent: #f59e0b; /*Warning fill/border */
}

.app__wrapper {
    background-color: #FAFAFA;
    width: 100%;
    height: 100vh; /* or 100% */
    display: flex;
    align-items: center;
}

.bodyLeftPart__wrapper {
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family) !important;
    overflow-y: auto;
}

.bodyLeftPart__wrapper::-webkit-scrollbar,
.cookieConsentBanner__categoryList::-webkit-scrollbar {
    width: 8px !important;
    height: 4px !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .bodyLeftPart__wrapper::-webkit-scrollbar,
    .cookieConsentBanner__categoryList::-webkit-scrollbar {
        width: 8px !important;
        background-color: transparent !important;
    }
}

.bodyLeftPart__wrapper::-webkit-scrollbar-track,
.cookieConsentBanner__categoryList::-webkit-scrollbar-track {
    background-color: #f0f0f0 !important; /* field below scrollbar */
    -webkit-box-shadow: none !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .bodyLeftPart__wrapper::-webkit-scrollbar-track,
    .cookieConsentBanner__categoryList::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: #f0f0f0 !important; /* Field below scrollbar */
    }
}

.bodyLeftPart__wrapper::-webkit-scrollbar-thumb,
.cookieConsentBanner__categoryList::-webkit-scrollbar-thumb {
    background-color: #CCCCCC !important; /* scrollbar color */
    border-radius: 1rem;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .bodyLeftPart__wrapper::-webkit-scrollbar-thumb,
    .cookieConsentBanner__categoryList::-webkit-scrollbar-thumb {
        background-color: #CCCCCC !important; /* scrollbar color - this show up more often as a setting in browser */
        border-radius: 1rem;
        border: unset;
    }
}

.bodyLeftPart__wrapper::-webkit-scrollbar-thumb:hover,
.cookieConsentBanner__categoryList::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
}

.logo__wrapper {
    margin: 3rem auto 4rem;
}

.logo_image {
    height: 4rem;
    width: fit-content;
    object-fit: cover;
}

.extraInformationBox__wrapper {
    background-color: #FFFFFF;
    box-shadow: -4px -4px 8px 0px #FFFFFF, -1px -1px 4px 0px #FFFFFF, 1.5px 1.5px 4px 0px rgba(230, 230, 230, 40%), 4px 4px 8px 0px rgba(230, 230, 230, 60%);
    width: 80%;
    padding: 32px;
    margin: 0 auto 2rem;
    border-radius: 0.5rem;
    text-align: center;
}

.extraInformationBox__title {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    margin: 0 0 1rem;
}

.extraInformationBox__text {
    color: #808080;
    font-size: 14px;
    font-weight: 300;
    padding: 0;
    margin: 0;
    line-height: 16.8px;
}

.extraInformationBox__text > a {
    text-decoration: underline;
    transition: var(--transition-speed);
}

.extraInformationBox__text > a:hover {
    font-weight: 500;
    color: #004A8B;
}

.imagePoweredBy__wrapper {
    margin: auto auto 0;
    display: flex;
    flex-direction: column;
    background-color: transparent !important;
}

.imagePoweredBy__container {
    width: 100%;
    margin: auto;
}

.imagePoweredBy {
    height: 3rem;
    width: fit-content;
    object-fit: cover;
}

.bodyRightPart__wrapper {
    width: 75%;
    height: 100%;
    font-family: var(--font-family) !important;
    /*Here is image that will be different for every tenat 
        - this is a image that we see as background on right side*/
    background-image: url('https://static.intermodalportal.com/images/20260922091103218-8bb13f87/dev_itco-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/*-- Lookup-only preview (PCL / PDL admin iframes): the sign-in side is visible but inert --*/
.app__wrapper--lookupOnly .bodyLeftPart__wrapper {
    pointer-events: none;
    user-select: none;
}

.app__wrapper--lookupOnly .form__wrapper,
.app__wrapper--lookupOnly .extraInformationBox__wrapper,
.app__wrapper--lookupOnly .imagePoweredBy__wrapper {
    opacity: 0.4;
    filter: grayscale(1);
}

.previewNotice__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 80%;
    margin: 0 auto 24px;
    padding: 12px 16px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #808080;
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 16px;
}

    .previewNotice__wrapper i {
        color: #2A76BD;
        font-size: 14px;
        line-height: 16px;
    }

/*Styles for better responsivness*/
@media(max-width: 1500px) {
    .bodyRightPart__wrapper {
        width: 60%;
    }

    .bodyLeftPart__wrapper {
        width: 40%;
    }
}

/*-- Styles form tablet screen --*/
@media (max-width: 1200px) {
    div#divPartialLookup {
        background: none !important;
    }

    .app__wrapper {
        /*Here is image that will be different for every tenat 
        - this is a image that we see as background on right side*/
        background-image: url('https://static.intermodalportal.com/images/20260922091103218-8bb13f87/dev_itco-background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        flex-direction: column-reverse;
        position: relative;
    }

    .bodyLeftPart__wrapper {
        height: 60%;
        width: 95%;
        margin: 0 auto;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        overflow-y: auto;
        background-color: #FAFAFA;
        transition: transform 0.5s ease, height 0.5s ease;
        position: relative;
        z-index: 11;
    }

    .bodyLeftPart__wrapper.fullscreen {
        height: 100vh;
        border-radius: 2rem 2rem 0 0;
    }

    .logo__wrapper {
        margin: 3rem auto;
    }

    .logo_image {
        height: 3.5rem;
    }

    .imagePoweredBy {
        height: 2.5rem;
    }

    .bodyRightPart__wrapper {
        width: 100%;
        height: 40%;
        top: 0;
        transition: height 0.3s ease-in-out;
        background: transparent;
    }

    .app__wrapper.fullscreen .bodyRightPart__wrapper {
        pointer-events: none;
        height: 0;
    }

    .app__wrapper.fullscreen .bodyRightPart__wrapper > .public__container__lookup,
    .app__wrapper.fullscreen .bodyRightPart__wrapper > #ip-pcl-form {
        display: none;
    }

    .grecaptcha-badge {
        z-index: 12;
    }
}

@media (max-width: 700px) {
    .bodyLeftPart__wrapper {
        width: 100%;
    }

    .bodyLeftPart__wrapper.fullscreen {
        border-radius: 0;
    }

    .logo__wrapper {
        margin: 2.5rem auto;
    }

    .logo_image {
        height: 3.5rem;
    }

    .imagePoweredBy {
        height: 2.5rem;
    }

    .extraInformationBox__wrapper {
        padding: 20px;
        width: 90%;
    }

    .extraInformationBox__text {
        font-size: 12px;
    }

    .bodyLeftPart__wrapper::-webkit-scrollbar {
        width: 6px !important;
    }
}

@media (max-width: 380px) {
    .bodyRightPart__wrapper {
        height: 60%;
    }

    .extraInformationBox__wrapper {
        width: unset;
        padding: 16px;
        margin: 0 10px 16px;
    }
}

.signOut__wrapper {
    font-family: var(--font-family);
    background-color: #FAFAFA;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.signOut__container {
    background-color: #FFFFFF;
    box-shadow: -4px -4px 8px 0px #FFFFFF, -1px -1px 4px 0px #FFFFFF, 1.5px 1.5px 4px 0px rgba(230, 230, 230, 40%), 4px 4px 8px 0px rgba(230, 230, 230, 60%);
    padding: 40px;
    margin: auto;
    border-radius: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-family);
    min-width: 300px;
    max-width: 600px;
    width: 100%;
}

.signOut__title {
    margin: 0 0 1rem;
    padding: 0;
    color: #2A76BD;
    font-weight: 600;
    text-align: center;
    font-size: 24px;
}

.signOut__text {
    max-width: 450px;
    font-weight: 400;
    font-size: 14px;
    color: #808080;
    line-height: 19.6px;
    padding: 0;
    margin: 0 0 3rem;
}

.signOut__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #004A8B;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    transition: var(--transition-speed);
}

.signOut__button:hover,
.signOut__button:focus {
    box-shadow: inset 0 40px 0 0 #2A76BD;
}

.signOutImage__container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

@media (max-width: 700px) {
    .signOut__container {
        padding: 20px 32px;
        margin: auto 24px;
        width: fit-content;
    }
}

@media (max-width: 400px) {
    .signOut__container {
        width: unset;
        padding: 16px 24px;
        margin: auto 10px;
    }

    .signOut__button {
        min-width: 200px;
        font-size: 14px;
        height: 32px;
    }

    .signOut__text {
        font-size: 10px;
        line-height: 16px;
        margin: 0 0 1.5rem;
    }
}

.navBrandImage__container {
    background-color: #FAFAFA;
}

.sessionExpired__wrapper {
    font-family: var(--font-family);
    background-color: #FAFAFA;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sessionExpired__container {
    background-color: #FFFFFF;
    box-shadow: -4px -4px 8px 0px #FFFFFF, -1px -1px 4px 0px #FFFFFF, 1.5px 1.5px 4px 0px rgba(230, 230, 230, 40%), 4px 4px 8px 0px rgba(230, 230, 230, 60%);
    padding: 40px;
    margin: auto;
    border-radius: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-family);
    min-width: 300px;
    max-width: 600px;
    width: 100%;
}

.sessionExpired__title {
    margin: 0 0 1rem;
    padding: 0;
    color: #D00000;
    font-weight: 600;
    text-align: center;
    font-size: 24px;
}

.sessionExpired__text {
    max-width: 450px;
    font-weight: 400;
    font-size: 14px;
    color: #808080;
    line-height: 19.6px;
    padding: 0;
    margin: 0 0 3rem;
}

.sessionExpired__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #004A8B;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    transition: var(--transition-speed);
}

.sessionExpired__button:hover,
.sessionExpired__button:focus {
    box-shadow: inset 0 40px 0 0 #2A76BD;
}

.sessionExpiredImage__container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

@media (max-width: 700px) {
    .sessionExpired__container {
        padding: 20px 32px;
        margin: auto 24px;
        width: fit-content;
    }
}

@media (max-width: 400px) {
    .sessionExpired__container {
        width: unset;
        padding: 16px 24px;
        margin: auto 10px;
    }

    .sessionExpired__button {
        min-width: 200px;
        font-size: 14px;
        height: 32px;
    }

    .sessionExpired__text {
        font-size: 10px;
        line-height: 16px;
        margin: 0 0 1.5rem;
    }
}

.form__wrapper {
    font-family: var(--font-family);
    background-color: #FFFFFF;
    box-shadow: -4px -4px 8px 0px #FFFFFF, -1px -1px 4px 0px #FFFFFF, 1.5px 1.5px 4px 0px rgba(230, 230, 230, 40%), 4px 4px 8px 0px rgba(230, 230, 230, 60%);
    width: 80%;
    padding: 40px;
    margin: auto;
    border-radius: 0.5rem;
}

/* Top switch button */
.formSwitch__wrapper {
    display: flex;
    align-items: center;
    margin: 0 auto 2rem;
    width: 100%;
}

.formSwitch__btn,
.formSwitch__btn-active {
    font-size: 20px;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
    width: 50%;
}

/* Registration disabled: only the Sign In tab is rendered — stretch it to the full width. */
.formSwitch__wrapper--single .formSwitch__btn-active {
    width: 100%;
}

/* When active button */
.formSwitch__btn-active {
    border-color: #004A8B;
    color: #004A8B;
    font-weight: 600;
}

.formSwitch__btn {
    border-color: #E6E6E6;
}

.formSwitch__btn > span {
    color: #999999;
    font-weight: 400;
}

.formSwitch__btn > span:hover {
    color: #2A76BD;
    font-weight: 500;
    cursor: pointer;
}

.formSwitch__btn:has(span:hover) {
    border-color: #2A76BD;
}
/*---END of btn---*/

.welcomeMsg__wrapper {
    margin: 0 auto 2rem;
    text-align: center;
    color: #808080;
    font-size: 14px;
    font-weight: 400;
}

.formInput__wrapper {
    margin-bottom: 1rem;
    padding: 0;
}

/*Input field type text*/
.formInput__title {
    color: #808080;
    font-size: 14px;
    margin-bottom: 0.5rem;
    display: block;
}

.formInput__title.hover {
    color: #004A8B;
}

.formInput__title.focus {
    color: #2A76BD !important;
}

.formInput__title.invalid {
    color: #D00000;
}

.formInput__field {
    box-shadow: none !important;
    border: 1px solid;
    border-color: #E6E6E6;
    border-radius: 0.5rem;
    width: 100%;
    min-width: 300px;
    font-size: 14px;
    font-weight: 500;
    padding: 0 0.5rem;
    background-color: transparent !important;
    height: 40px;
    color: #000000;
    caret-color: #004A8B;
}

.formInput__field::placeholder {
    color: #808080;
    opacity: 1;
    font-weight: 400;
}

.formInput__field:hover {
    border-color: #004A8B;
}

.formInput__field:hover::placeholder {
    color: #004A8B;
}

.formInput__field:focus {
    border-color: #2A76BD !important;
}

.formInput__field:focus::placeholder {
    color: #2A76BD;
}

.formInput__field.invalid {
    border-color: #D00000;
    color: #D00000;
}

.formInput__field.invalid::placeholder {
    color: #D00000;
}
/*---End---*/

.form__error {
    display: none;
    font-size: 12px;
    font-weight: 400;
    color: #D00000;
    margin: 0.5rem 0 0.5rem;
}

@media (max-width: 700px) {
    .form__wrapper {
        padding: 20px;
        width: 90%;
    }

    .formInput__field {
        min-width: 200px;
    }
}

@media (max-width: 380px) {
    .form__wrapper {
        padding: 16px;
        margin: auto 10px;
        width: unset;
    }

    .formInput__field {
        font-size: 12px;
        height: 32px;
    }
}


.errorMsg__wrapper {
    margin: 0 auto 2rem;
    text-align: center;
    color: #D00000;
    font-size: 14px;
    font-weight: 500;
}

.forgetPassword__wrapper {
    margin: 0 0 1.5rem;
}

.forgetPassword__link {
    display: inline-block;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    width: 100%;
}

span.forgetPassword__link > a {
    color: #2A76BD !important;
}

span.forgetPassword__link > a:hover {
    color: #004A8B !important;
}

.formButton__signIn {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #004A8B;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    margin-bottom: 3rem;
    transition: var(--transition-speed);
}

.formButton__signIn:hover,
.formButton__signIn:focus {
    box-shadow: inset 0 -40px 0 0 #2A76BD;
}

/* In-flight state for the Sign in / Verify buttons (set by logon.js, logon-otp.js,
   logon-verify2fa.js). The button keeps its size and place so nothing below it moves; the inline
   spinner (Content/ip-loader/ip-loader.css .ip-loader__inline) is recoloured to the button text
   through the loader's own tokens. */
.formButton__signIn.is-loading,
.formButton__verify.is-loading {
    --ip-loader-primary: #FFFFFF;
    --ip-loader-secondary: #FFFFFF;
    cursor: default;
    pointer-events: none;
}

.formButton__signIn.is-loading:hover,
.formButton__signIn.is-loading:focus,
.formButton__verify.is-loading:hover,
.formButton__verify.is-loading:focus {
    box-shadow: none;
}

div.agree__wrapper {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 400;
    color: #808080;
}

span.agree__container {
    width: 100%;
    display: inline-block;
    text-align: center;
}

a.agree__link {
    text-decoration: underline !important;
    color: #808080;
}

a.agree__link:hover, a.agree__link:active {
    color: #004A8B !important;
    font-weight: 500;
}

/*Styles for OTP section*/
.otp__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.otp__wrapper > span {
    margin: 0 auto;
}

p.otpWelcomeMsg__wrapper {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    margin: 0;
    text-align: center;
    padding: 0;
}

p.otp__message {
    font-size: 14px;
    font-weight: 500;
    color: #D00000;
    margin: 0.25rem 0 0.5rem;
    text-align: center;
    padding: 0;
}

.otp__wrapper > .formInput__wrapper {
    width: 100%;
}

.formButton__verify {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #004A8B;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    margin-top: 1.5rem;
    transition: var(--transition-speed);
}

.formButton__verify:hover,
.formButton__verify:focus {
    box-shadow: inset 0 40px 0 0 #2A76BD;
}
/*---*/

@media (max-width: 700px) {
    .formButton__signIn {
        margin-bottom: 2.5rem;
        min-width: 200px;
    }

    .formButton__verify {
        min-width: 200px;
    }
}

@media (max-width: 380px) {
    .formButton__signIn {
        font-size: 14px;
        height: 32px;
    }

    .formButton__verify {
        font-size: 14px;
        height: 32px;
    }

    p.otpWelcomeMsg__wrapper {
        font-size: 14px;
    }

    p.otp__message {
        font-size: 12px;
    }
}


/* ============================================================================
   Second factor on the public pages — otpCode (Verify2fa authenticator / recovery input),
   passkeySignIn ("Sign in with a passkey" block on LogInV2) and the neutral OTP message.

   Ships through the branding pipeline ONLY: CommonController.GetFilesForBranding concatenates
   Content/account/css/*.css into Common/GetExternalCustomizeCssV2 — a Branding re-save or Redis
   flush is needed before edits show. Tokens come from Content/account/css/styles.css (the account
   :root), not the settings design-system file. Even px; 1px hairlines exempt; no !important.
   ============================================================================ */

/* ---------------------------------------------------------------- Verify2fa message + input */
p.otp__message--neutral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 16px;
    font-weight: 400;
    color: #808080;
}

.otp__messageIcon {
    font-size: 14px;
    color: #2A76BD;
}

.otpCode__input {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.24em;
    font-variant-numeric: tabular-nums;
}

.otpCode__input::placeholder {
    letter-spacing: 0.24em;
}

.otpCode__input[inputmode="text"] {
    font-size: 16px;
    letter-spacing: 0.12em;
}

.otpCode__switch {
    align-self: center;
    margin: 4px 0 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    color: #2A76BD;
    text-decoration: underline;
    cursor: pointer;
    transition: var(--transition-speed);
}

.otpCode__switch:hover,
.otpCode__switch:focus-visible {
    color: #004A8B;
    outline: none;
}

/* ---------------------------------------------------------------- "Sign in with a passkey" */
/* Sits between the Sign-in button (margin-bottom 3rem = 48px) and the agree block; the negative
   top margin pulls the divider up so the two buttons read as one group. */
.passkeySignIn {
    display: flex;
    flex-direction: column;
    margin: -24px 0 40px;
}

.passkeySignIn[hidden] {
    display: none;
}

.passkeySignIn__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #999999;
}

.passkeySignIn__divider::before,
.passkeySignIn__divider::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: #E6E6E6;
}

/* Outline twin of .formButton__signIn (login-form.css): same width / height / radius / type. */
.passkeySignIn__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 300px;
    height: 40px;
    border: 1px solid #004A8B;
    border-radius: 0.5rem;
    background-color: transparent;
    color: #004A8B;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-speed);
}

.passkeySignIn__button i {
    font-size: 16px;
}

.passkeySignIn__button:hover,
.passkeySignIn__button:focus-visible {
    border-color: #2A76BD;
    background-color: #2A76BD;
    color: #FFFFFF;
    outline: none;
}

.passkeySignIn__button[disabled],
.passkeySignIn__button--busy {
    opacity: 0.6;
    cursor: default;
}

/* Busy: logon-passkey.ts prepends an .ip-loader__inline spinner, which takes the fingerprint
   icon's slot (the button's gap already spaces it, so the loader's own margin is dropped). */
.passkeySignIn__button--busy i {
    display: none;
}

.passkeySignIn__button--busy .ip-loader__inline {
    margin-right: 0;
}

.passkeySignIn .errorMsg__wrapper {
    margin: 16px auto 0;
}

/* ---------------------------------------------------------------- responsive (mirrors login-form.css) */
@media (max-width: 700px) {
    .passkeySignIn {
        margin: -20px 0 32px;
    }

    .passkeySignIn__button {
        min-width: 200px;
    }
}

@media (max-width: 380px) {
    .passkeySignIn__button {
        height: 32px;
        font-size: 14px;
    }

    .passkeySignIn__button i {
        font-size: 14px;
    }

    .otpCode__input {
        font-size: 16px;
    }
}


.register__wrapper {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
}

.dropdown__wrapper {
    position: relative;
    width: 100%;
    min-width: 300px;
    margin-bottom: 1rem;
    padding: 0;
}

.dropdown__btn {
    box-shadow: none !important;
    border: 1px solid;
    border-color: #E6E6E6;
    border-radius: 0.5rem;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    padding: 0 0.5rem;
    background-color: transparent !important;
    height: 40px;
    color: #808080;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown__btn.has-selection {
    color: #000000;
}

.dropdown__btn:hover {
    border-color: #004A8B;
    color: #004A8B;
    cursor: pointer;
}

.dropdown__btn:hover svg path {
    stroke: #004A8B;
}

.dropdown__btn--active {
    border-color: #2A76BD;
    color: #2A76BD;
    box-shadow: none;
}

.dropdown__btn > span {
    color: inherit;
}

.dropdown__btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.dropdown__btn svg path {
    stroke: #808080;
}

.dropdown__wrapper.open svg {
    transform: rotate(180deg);
}

.dropdown__wrapper ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    z-index: 10;
    box-shadow: -4px -4px 8px 0px #FFFFFF, -1px -1px 4px 0px #FFFFFF, 1.5px 1.5px 4px 0px rgba(230, 230, 230, 40%), 4px 4px 8px 0px rgba(230, 230, 230, 60%);
}

.dropdown__wrapper ul::-webkit-scrollbar {
    width: 4px !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .dropdown__wrapper ul::-webkit-scrollbar {
        width: 4px !important;
        background-color: transparent !important;
    }
}

.dropdown__wrapper ul::-webkit-scrollbar-track {
    background-color: #f0f0f0 !important; /* field below scrollbar */
    -webkit-box-shadow: none !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .dropdown__wrapper ul::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: #f0f0f0 !important; /* Field below scrollbar */
    }
}

.dropdown__wrapper ul::-webkit-scrollbar-thumb {
    background-color: #CCCCCC !important; /* scrollbar color */
    border-radius: 1rem;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .dropdown__wrapper ul::-webkit-scrollbar-thumb {
        background-color: #CCCCCC !important; /* scrollbar color - this show up more often as a setting in browser */
        border-radius: 1rem;
        border: unset;
    }
}

.dropdown__wrapper.open ul {
    display: block;
}

.dropdown__wrapper li {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown__wrapper input[type="checkbox"],
.dropdown__wrapper input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid;
    border-color: #E6E6E6;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.dropdown__wrapper input[type="radio"] {
    border-radius: 50%;
}

.dropdown__wrapper ul li:hover input {
    border-color: #004A8B;
}

.dropdown__wrapper ul li:hover input + span {
    color: #004A8B;
}

.dropdown__wrapper ul li input[type="checkbox"]:checked {
    background: #2A76BD;
    border-color: #2A76BD;
}

.dropdown__wrapper ul li input[type="checkbox"]:checked + span {
    color: #2A76BD;
}

.dropdown__wrapper input[type="checkbox"]:checked::after {
    content: "\2714";
    position: absolute;
    bottom: 9px;
    left: 2.5px;
    width: 4px;
    height: 8px;
    color: #FFFFFF;
}

.dropdown__wrapper ul li input[type="radio"]:checked {
    background: #2A76BD;
    border-color: #2A76BD;
}

.dropdown__wrapper ul li input[type="radio"]:checked + span {
    color: #2A76BD;
}

.dropdown__wrapper input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2A76BD;
}

.dropdown__wrapper input:focus-visible {
    outline: 2px solid #004A8B;
    outline-offset: 2px;
}

.dropdown--error .dropdown__btn {
    border-color: #D00000;
}

.dropdown--error .dropdown__btn span {
    color: #D00000;
}

.dropdown__wrapper ul li label {
    margin: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100% !important;
}

.dropdown__wrapper ul li label span {
    width: 100%;
    font-size: 14px;
}

.acceptRules__wrapper {
    margin: 1rem 0 1.5rem;
    padding: 0;
    display: flex;
}

.acceptRules__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid;
    border-color: #E6E6E6;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    margin: 6px 2px 0 0;
}

input[type="checkbox"].acceptRules__checkbox:hover {
    border-color: #004A8B;
    cursor: pointer;
}

input[type="checkbox"].acceptRules__checkbox:checked {
    background: #2A76BD;
    border-color: #2A76BD;
}

input[type="checkbox"].acceptRules__checkbox:checked::after {
    content: "\2714";
    position: absolute;
    bottom: 9px;
    left: 2px;
    width: 4px;
    height: 8px;
    color: #FFFFFF;
}

.acceptRules__checkbox.acceptRules--error {
    border-color: #D00000;
}

.acceptRules__required {
    color: #808080;
    font-size: 16px;
    font-weight: 300;
    padding: 0;
    margin: 0 0.3rem 0 0;
}

.acceptRules__container {
    color: #808080;
    font-size: 12px;
    font-weight: 300;
    width: fit-content;
    display: flex;
    align-items: baseline;
}

a.acceptRules__link {
    text-decoration: underline !important;
    color: #2A76BD !important;
}

a.acceptRules__link:hover {
    cursor: pointer;
    color: #004A8B !important;
}

a.acceptRules__link:focus,
a.acceptRules__link:focus-visible,
a.acceptRules__link:active {
    color: #2A76BD !important;
}

.information__text {
    color: #808080;
    text-align: center;
    margin: 0 0 1.5rem;
    padding: 0;
    font-weight: 400;
    font-size: 12px;
}

/* Small left-aligned helper/note under a field — e.g. the configurable "Interested in" note. */
.formInput__note {
    margin: 4px 0 0;
    color: #808080;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}

.formbutton__signUp {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #2A76BD;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    transition: var(--transition-speed);
}

.formbutton__signUp:hover,
.formbutton__signUp:focus {
    box-shadow: inset 0 -40px 0 0 #004A8B;
}

@media (max-width: 1200px) {
    .information__text {
        text-align: left;
    }

    .dropdown__wrapper {
        min-width: 200px;
    }

    .formbutton__signUp {
        min-width: 200px;
    }
}

@media (max-width: 380px) {
    .formbutton__signUp {
        font-size: 14px;
        height: 32px;
    }

    .dropdown__btn {
        font-size: 10px;
        height: 32px;
    }

    .dropdown__btn svg {
        width: 12px;
        height: 12px;
    }

    .dropdown__wrapper ul li label span {
        font-size: 10px;
    }
}


#ip-pcl-form, .public__container__lookup {
    width: 100%;
    height: 100vh !important;
    padding: 0;
    margin: 0 !important;
    display: flex;
    overflow: hidden;
}

.containerLookup__wrapper {
    background-color: rgba(1, 63, 117, 0.85);
    width: 600px;
    border-radius: 0.5rem;
    min-height: 320px;
    margin: auto;
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.containerLookup__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cl-search-text);
    margin: 0 auto 1rem;
    padding: 0;
}

.containerLookup__description {
    margin: 0 auto 2rem;
}

.containerLookup__description > p {
    text-align: center;
    margin: 0;
    padding: 0;
    color: var(--cl-search-text);
    font-size: 1rem;
    font-weight: 400;
}

#PCL_inside, .containerLookupInput__wrapper {
    width: 100%;
}

.containerLookupInput__wrapper {
    margin: 0 auto 2rem;
}

.containerLookup__hint {
    display: none;
    margin: 0.5rem 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cl-search-text);
    opacity: 0.9;
    text-align: left;
}

.containerLookupInput__wrapper:focus-within .containerLookup__hint {
    display: block;
}

.containerLookup__hint > .fa-info-circle {
    margin-right: 4px;
}

.containerLookup__input {
    width: 100%;
    box-shadow: none !important;
    border: 1px solid;
    border-color: #E6E6E6;
    border-radius: 0.5rem;
    min-width: 300px;
    font-size: 14px;
    font-weight: 500;
    background-color: #FFFFFF !important;
    height: 40px;
    color: #000000;
    caret-color: #004A8B;
    padding: 0 0.5rem;
}

.containerLookup__input::placeholder {
    color: #808080;
    opacity: 1;
    font-weight: 400;
}

.containerLookup__input:hover {
    border-color: #004A8B;
}

.containerLookup__input:hover::placeholder {
    color: #004A8B;
}

.containerLookup__input:focus {
    border-color: #2A76BD !important;
}

.containerLookup__input:focus::placeholder {
    color: #2A76BD;
}

.containerLookup__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: 1px solid;
    background-color: #004A8B;
    border-color: #004A8B;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    transition: var(--transition-speed);
    -webkit-appearance: none;
    appearance: none;
}

.containerLookup__button:hover,
.containerLookup__button:focus {
    box-shadow: inset 0 -40px 0 0 #2A76BD;
    border-color: #2A76BD;
}

/* Busy state while a lookup request is in flight (skeleton showing) */
.containerLookup__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/*-- Styles form tablet screen --*/
@media (max-width: 1200px) {
    #ip-pcl-form, .public__container__lookup {
        height: 100% !important;
        padding: 0;
        margin: auto !important;
    }

    .containerLookupInput__wrapper {
        margin: 0 auto 1rem;
    }
}

@media (max-width: 700px) {
    .containerLookup__wrapper {
        min-width: 200px;
        margin: auto 24px;
        padding: 20px;
    }

    .containerLookup__description {
        margin: 0 auto 1.5rem;
    }

    .containerLookup__input, .containerLookup__button {
        min-width: 200px;
    }
}

@media (max-width: 400px) {
    .containerLookup__wrapper {
        margin: auto 10px;
        padding: 16px;
        min-height: unset;
    }

    .containerLookup__description {
        margin: 0 auto 0.5rem;
    }

    .containerLookup__title {
        font-size: 20px;
        margin: 0 auto 0.6rem;
    }

    .containerLookup__description > p {
        font-size: 0.8rem;
    }

    .containerLookup__button {
        font-size: 14px;
        height: 32px;
    }

    .containerLookup__input {
        font-size: 12px;
        height: 32px;
    }
}

.warningMsg__wrapper {
    margin: 8px auto 16px; /* bottom gap separates the over-limit warning from the results grid below */
    padding: 6px 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--cl-warning);
    background-color: color-mix(in srgb, var(--cl-warning-accent) 16%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--cl-warning-accent) 50%, #FFFFFF);
    border-radius: 0.5rem;
}

.warningMsg__wrapper > .fa-exclamation-triangle {
    margin-right: 4px;
}

.pclChallenge__wrapper {
    margin-top: 12px;
}

.pclChallenge__prompt {
    margin-bottom: 6px;
}

.containerLookup__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    min-width: 300px;
    min-height: 40px;
    padding: 4px 8px;
    border: 1px solid #E6E6E6;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #000000;
    cursor: text;
    transition: border-color 0.15s ease;
}

.containerLookup__chips:hover {
    border-color: #004A8B;
}

.containerLookup__chips:focus-within {
    border-color: #2A76BD;
}

.containerLookup__chips.invalid {
    border-color: var(--cl-error);
}

.containerLookup__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #E6E6E6;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
}

.containerLookup__chipLabel {
    white-space: nowrap;
}

.containerLookup__chipRemove {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: currentColor;
    color: #808080;
    opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20d='M1%201l12%2012M13%201L1%2013'/%3E%3C/svg%3E") center / 8px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20d='M1%201l12%2012M13%201L1%2013'/%3E%3C/svg%3E") center / 8px no-repeat;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.containerLookup__chipRemove:hover {
    color: #2A76BD;
    opacity: 1;
}

.containerLookup__chip--found .containerLookup__chipRemove {
    color: var(--cl-success);
}

.containerLookup__chip--found .containerLookup__chipRemove:hover {
    color: color-mix(in srgb, var(--cl-success) 70%, #000000);
}

.containerLookup__chip--notFound .containerLookup__chipRemove {
    color: var(--cl-error);
}

.containerLookup__chip--notFound .containerLookup__chipRemove:hover {
    color: color-mix(in srgb, var(--cl-error) 70%, #000000);
}

.containerLookup__chip--found {
    background-color: color-mix(in srgb, var(--cl-success) 20%, #FFFFFF);
    border-color: var(--cl-success);
    color: color-mix(in srgb, var(--cl-success) 72%, #000000);
    cursor: pointer;
}

.containerLookup__chip--found:hover {
    background-color: color-mix(in srgb, var(--cl-success) 30%, #FFFFFF);
}

.containerLookup__chip--found .containerLookup__chipLabel::before {
    content: "\f00c";
    font-family: "Font Awesome 5";
    font-weight: 900;
    margin-right: 4px;
    color: var(--cl-success);
}

.containerLookup__chip--notFound {
    background-color: color-mix(in srgb, var(--cl-error) 12%, #FFFFFF);
    border-color: var(--cl-error);
    color: color-mix(in srgb, var(--cl-error) 72%, #000000);
    cursor: help;
}

.containerLookup__chip--notFound:hover {
    background-color: color-mix(in srgb, var(--cl-error) 20%, #FFFFFF);
}

.containerLookup__chip--notFound .containerLookup__chipLabel::before {
    content: "\f00d";
    font-family: "Font Awesome 5"; 
    font-weight: 900;
    margin-right: 4px;
    color: var(--cl-error);
}

.containerLookup__chipInput {
    flex: 1 1 60px;
    min-width: 60px;
    height: 28px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #000000;
    caret-color: #004A8B;
}

.containerLookup__chipInput::placeholder {
    color: #808080;
    opacity: 1;
    font-weight: 400;
}

/* NOTE: the typing field keeps the compact `flex: 1 1 60px` basis on all sizes. A larger desktop
   basis (140px) was tried so a word being typed would jump to a new line when it didn't fit, but
   flex line-breaking uses the flex-basis as the field's reserved size — so an EMPTY field would
   also wrap to a second line whenever less than 140px remained after the chips (e.g. when the
   panel collapses for the detail view), leaving what looked like free space. The 60px basis lets
   the field fill whatever space is left after the chips and wrap only when there's truly no room. */

/* Responsive — mirror .containerLookup__input breakpoint adjustments */
@media (max-width: 700px) {
    .containerLookup__chips {
        min-width: 200px;
    }
}

@media (max-width: 400px) {
    .containerLookup__chips,
    .containerLookup__chip,
    .containerLookup__chipInput {
        font-size: 12px;
    }
}


#PCL_inside > div.errorMsg__wrapper{
    margin-top: 8px;
}

.clSearchResult__wrapper {
    background-color: #FFFFFF;
    padding: 40px;
    margin: 40px auto;
    height: calc(100% - 80px) !important;
    border-radius: 0.5rem;
    overflow-y: auto;
    min-width: 600px;
    max-width: 600px;
    width: 100%;
    position: relative;
}

/* Desktop-only: the panel widens when it shows the multi-result grid, so more admin-configured
   columns fit without horizontal scrolling. The widening rule is scoped to min-width:1201px, so
   tablet/mobile (≤1200px, where the panel is a fixed/full-screen overlay) stay untouched. The
   `--wide` class is toggled from logon-pcl.js at the grid↔detail switch points. */
@media (min-width: 1201px) {
    .clSearchResult__wrapper {
        transition: max-width 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Compound selector: the modifier only has effect together with the base class, so a stray
       `--wide` left on #PCL after resetComponent (which removes clSearchResult__wrapper) is inert. */
    .clSearchResult__wrapper.clSearchResult__wrapper--wide {
        max-width: min(1600px, calc(100% - 80px));
    }

    /* When the panel is wide, the results grid (#searchResults) AND the chip input above it
       (.containerLookupInput__wrapper) use the full width — so many entered container IDs expand
       across the panel and wrap to a new line only when they run out of room. The Lookup button
       and the message wrappers (warning/challenge/error) stay bounded & centered — a full-screen-
       wide button reads poorly and loses the "button" affordance. */
    .clSearchResult__wrapper--wide #PCL_inside > *:not(#searchResults):not(.containerLookupInput__wrapper) {
        display: block;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* The chip input above the grid grows WITH its content (fit-content): it starts at 600px and
       widens only as more container IDs are entered — using the free width on either side — and
       wraps to a new line only once it reaches the available width. I.e. expand when it runs out
       of room, not immediately. */
    .clSearchResult__wrapper--wide .containerLookupInput__wrapper {
        width: fit-content;
        min-width: 600px;
        max-width: min(1600px, calc(100% - 80px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .clSearchResult__wrapper {
        transition: none;
    }
}

.clSearchResult__wrapper::-webkit-scrollbar,
.clMultiResult__gridWrapper::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .clSearchResult__wrapper::-webkit-scrollbar {
        width: 6px !important;
        background-color: transparent !important;
    }
}

.clSearchResult__wrapper::-webkit-scrollbar-track,
.clMultiResult__gridWrapper::-webkit-scrollbar-track {
    background-color: var(--cl-neutral-60) !important;
    -webkit-box-shadow: none !important;
    border-radius: 1rem;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .bodyLeftPart__wrapper::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: var(--cl-neutral-60) !important; /* Field below scrollbar */
    }
}

.clSearchResult__wrapper::-webkit-scrollbar-thumb,
.clMultiResult__gridWrapper::-webkit-scrollbar-thumb {
    background-color: #CCCCCC !important;
    border-radius: 1rem;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .bodyLeftPart__wrapper::-webkit-scrollbar-thumb {
        background-color: #CCCCCC !important; /* scrollbar color - this show up more often as a setting in browser */
        border-radius: 1rem;
        border: unset;
    }
}

.clSearchResult__wrapper::-webkit-scrollbar-thumb:hover,
.clMultiResult__gridWrapper::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
}

.clSearchResult__wrapper > .containerLookup__title {
    color: #2A76BD;
}

.clSearchResult__wrapper > .containerLookup__description > p {
    color: #000000;
}

.clSearchResult__wrapper .containerLookup__hint {
    color: #808080;
}

.clResultFor__text {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    margin-right: 0.25rem;
}

.clResultForContainer__text {
    color: #2A76BD;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResult__line {
    width: 100%;
    border-bottom: 1px solid;
    border-color: #E6E6E6;
    margin: 0.5rem auto 1rem;
}

.clResultNotFound__wrapper {
    width: 100%;
    margin: 2rem auto 0;
    display: block;
}

.clResultNotFound__text {
    color: var(--cl-error);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.clResultFound__wrapper {
    display: block;
}

.clResult__container {
    width: 100%;
    margin: 2rem auto 0;
}

.clResultSection__title {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 0.5rem;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResultSection__subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    margin: 0.5rem 0 1rem;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResultSection__container {
    margin: 0 0 1rem;
    width: 100%;
}

.clResultSection__caption {
    font-size: 14px;
    font-weight: 400;
    color: #808080;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResultSectionField__value {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin: 0.25rem 0 0;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

div.clResultAttachmentDescription__container.list-body:after {
    border-bottom: none !important;
}

.clResultAttachmentType__text {
    font-size: 16px;
    font-weight: 500;
    color: #808080;
    margin: 0 0 0.5rem;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResultAttachmentDescription__container {
    margin: 0 0.5rem;
}

.clResultAttachmentFile__name {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin: 0.25rem 0 0;
    padding: 0;
    cursor: pointer;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResultAttachmentFile__name:hover {
    text-decoration: underline;
    color: #2A76BD;
}

.clResultAttachmentFile__name:focus {
    color: #000000;
}

.clResultAttachmentFile__date {
    font-size: 12px;
    font-weight: 300;
    color: #808080;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.clResultAttachment__description {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.25rem 0.25rem 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.clResultAttachment__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.5rem;
}

.clResultAttachment__wrapper {
    margin: 0 0 1rem;
}

/* Attachment file-type icon */
.clResultAttachment__fileIcon path {
    stroke: #000000;
}

.clAttachment__btn {
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    border: 1px solid;
    border-color: #E6E6E6;
}

.clAttachment__btn > .clAttachmentButton__icon > path,
.clAttachment__btn > .clAttachmentButton__icon > line {
    stroke: #004A8B;
}

.clAttachmentButton__icon {
    margin: auto;
}

.clAttachment__btn:hover {
    background-color: rgba(42, 118, 189,0.05);
    cursor: pointer;
    border-color: #2A76BD;
}

.clAttachment__btn:hover > .clAttachmentButton__icon > path,
.clAttachment__btn:hover > .clAttachmentButton__icon > line {
    stroke: #2A76BD;
}

.clSearchResult__closeButton {
    display: none;
    position: absolute;
    right: 2.5rem;
    cursor: pointer;
}

.clSearchResult__closeButton path {
    stroke: #808080;
}

.clSearchResult__closeButton:hover path {
    stroke: #000000;
}

@media(max-width:1200px) {
    .clSearchResult__wrapper {
        position: fixed;
        top: 50%; /* center the tall panel (height: calc(100% - 80px)) → even 40px top/bottom margins; 30% pushed its top off-screen */
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0; /* override the base `40px auto` — its margin-top broke the centring (top gap, bottom touching the edge) */
        z-index: 14;
    }

    .clSearchResult__backdrop {
        position: fixed;
        inset: 0;
        backdrop-filter: blur(6px);
        background: rgba(0,0,0,0.3);
        z-index: 12;
        opacity: 0;
        pointer-events: none;
    }

    .clSearchResult__backdrop.active {
        opacity: 1;
        pointer-events: all;
    }
}

@media (max-width: 700px) {
    .clSearchResult__wrapper {
        top: 0;
        left: 0;
        transform: none;
        padding: 20px;
        margin: auto;
        width: 100%;
        min-width: 200px;
        max-width: none; /* drop the base 600px cap → truly full-width on mobile */
        border-radius: 0;
        height: 100vh !important; /* beat the base `calc(100% - 80px) !important` → full-height (was leaving an ~80px bottom gap) */
    }

    .clSearchResult__closeButton {
        right: 1.5rem;
    }

    .clSearchResult__wrapper::-webkit-scrollbar {
        width: 4px !important;
    }
}

@media (max-width: 380px) {
    .clSearchResult__wrapper {
        padding: 16px;
    }

    .clResultAttachmentFile__name {
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
    }

    .clResultAttachment__description {
        margin: 0.25rem 0 0;
    }

    .clResultAttachmentType__text {
        font-size: 14px;
    }

    .clSearchResult__closeButton {
        right: 0.5rem;
    }
}


/* Multi-container lookup RESULT GRID  */

:root {
    --cl-row-hover-bg: var(--cl-neutral-30); /* neutral grey hover — matches the settings grid */
}

/* Wrapper */
.clMultiResult__wrapper {
    padding: 8px 0;
}

.clMultiResult__gridWrapper {
    max-height: 50vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
}

/* Export toolbar (sits above the grid) */
.clMultiResultToolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.clMultiResultExport__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px; /* a bit roomier — closer to the settings buttons in CL/PCL */
    font-family: inherit; /* Inter, inherited from the page */
    font-size: 14px;
    font-weight: 600;
    line-height: 1; /* tight line box so the icon, label and caret center on one line */
    color: #004A8B;
    background-color: transparent;
    border: 1px solid #004A8B;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Hover — secondary fill, white text/icons (text/icons inherit `color`). */
.clMultiResultExport__button:hover {
    color: #FFFFFF;
    background-color: #2A76BD;
    border-color: #2A76BD;
}

/* Open dropdown (aria-expanded) OR keyboard focus — primary fill, white text/icons. The open
   state is what makes the primary look visible while the menu is open (a mouse click doesn't
   trigger :focus-visible, so that alone wouldn't show it). :focus-visible still covers keyboard
   focus without leaving the button "stuck" filled after a mouse click + cursor move-away.
   Placed after :hover so an open button stays primary even while hovered. */
.clMultiResultExport__button:focus-visible,
.clMultiResultExport__button[aria-expanded="true"] {
    color: #FFFFFF;
    background-color: #004A8B;
    border-color: #004A8B;
}

/* Export dropdown */
.clMultiResultExport {
    position: relative;
    display: inline-block;
}

.clMultiResultExport__caret {
    /* Slightly smaller than the 14px label/icon (14px read as too big) but close enough that
       align-items:center still keeps it on the row — 10px looked visibly off. */
    font-size: 12px;
    transition: transform 150ms ease;
}

.clMultiResultExport__button[aria-expanded="true"] .clMultiResultExport__caret {
    transform: rotate(180deg);
}

.clMultiResultExport__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    /* Above every sticky grid cell (lead header z-index:3, row-lead z-index:2) — the grid wrapper
       has no stacking context of its own and paints after this toolbar in DOM order, so the menu
       needs a higher z-index than the grid's sticky elements to sit in front of the grid. */
    z-index: 10;
    min-width: 180px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* Subtle open animation — plays each time the menu is shown (display flips from none via
       removing .hide). Mirrors the 150ms timing used across the grid's hover/caret transitions. */
    animation: pclExportMenuIn 150ms ease;
}

@keyframes pclExportMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clMultiResultExport__menu {
        animation: none;
    }

    .clMultiResultExport__caret {
        transition: none;
    }
}

.clMultiResultExport__item {
    margin: 0;
}

.clMultiResultExport__option {
    display: flex;
    align-items: center;
    gap: 10px; /* icon-to-label spacing — matches the new-settings formDropdown__option */
    width: 100%;
    padding: 12px; /* roomier rows, on par with the new-settings dropdown options */
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1; /* align the file icon and label on one line */
    text-align: left;
    color: var(--cl-neutral-700);
    background-color: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.clMultiResultExport__option:hover,
.clMultiResultExport__option:focus-visible {
    color: #2A76BD;
    background-color: var(--cl-neutral-30);
}

/* Table */
.clMultiResult__grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

/* Header */
.clMultiResult__grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cl-neutral-700);
    background-color: var(--cl-neutral-60);
    border-bottom: 1px solid #E6E6E6;
    white-space: nowrap;
}

/* Body cells */
.clMultiResult__grid tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #E6E6E6;
    vertical-align: middle;
    color: #000000;
    white-space: nowrap;
}

.clMultiResult__grid tbody tr:last-child td {
    border-bottom: none;
}

/* Row interactions */
.clMultiResultRow {
    cursor: pointer;
}

.clMultiResultRow td {
    transition: background-color 150ms ease;
}

.clMultiResultRow:hover td {
    background-color: var(--cl-row-hover-bg);
}

/* Pinned identity column (sticky-left) */
.clMultiResult__grid thead th.clMultiResult__leadHeader {
    position: sticky;
    left: 0;
    z-index: 3;
    border-right: 1px solid #E6E6E6;
    padding-left: 48px;
}

.clMultiResult__grid thead th {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.clMultiResultSort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clMultiResultSort__icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1;
    color: #999999;
}

.clMultiResult__grid thead th[aria-sort="ascending"] .clMultiResultSort__icons .fa-long-arrow-alt-up {
    color: #004A8B;
}

.clMultiResult__grid thead th[aria-sort="descending"] .clMultiResultSort__icons .fa-long-arrow-alt-down {
    color: #2A76BD;
}

.clMultiResultRow__lead {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #FFFFFF;
    border-right: 1px solid #E6E6E6;
}

.clMultiResultRow__leadInner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clMultiResultRow__id {
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.02em;
}

/* Chevron drill button */
.clMultiResultRow__actionBtn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 0;
    font-size: 14px;
    color: #004A8B;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.clMultiResultRow:hover .clMultiResultRow__actionBtn,
.clMultiResultRow__actionBtn:hover {
    background-color: color-mix(in srgb, #2A76BD 12%, transparent);
    color: #2A76BD;
}

/* Detail panel */
.clMultiResult__detail {
    padding-top: 8px;
}

.clMultiResult__detail .clResult__container {
    margin-top: 8px;
}

/* Back-to-grid link */
.clMultiResultBackToGrid__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #004A8B;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 12px;
}

.clMultiResultBackToGrid__link:hover,
.clMultiResultBackToGrid__link:focus {
    color: #2A76BD;
}

/* Underline only the text label on hover/focus — never the icon */
.clMultiResultBackToGrid__link:hover .clMultiResultBackToGrid__text,
.clMultiResultBackToGrid__link:focus .clMultiResultBackToGrid__text {
    text-decoration: underline;
}

.clMultiResult__emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 40px 24px;
    margin-top: 8px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.clMultiResult__emptyIcon {
    font-size: 36px;
    color: #999999;
    margin-bottom: 4px;
}

.clMultiResult__emptyHeadline {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.clMultiResult__emptySubText {
    font-size: 14px;
    color: #808080;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Responsive — small screens */
@media (max-width: 700px) {
    .clMultiResult__grid thead th,
    .clMultiResult__grid tbody td {
        padding: 8px 12px;
    }

    /* Larger tap target on touch screens (min ~44px height); the dropdown stays right-anchored
       and its 180px min-width still fits the full-width mobile panel. The option padding (12px)
       is already the base value, so it needs no mobile override. */
    .clMultiResultExport__button {
        padding: 12px 20px;
    }
}


/* PCL public lookup — SKELETON loading placeholder  */

@keyframes pclSkeletonShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.pclSkeleton {
    width: 100%;
    padding: 8px 0;
}

.pclSkeleton--detail {
    padding-top: 2rem;
}

/* Shimmer base */
.pclSkeleton__title,
.pclSkeleton__sectionTitle,
.pclSkeleton__label,
.pclSkeleton__value,
.pclSkeleton__cell,
.pclSkeleton__divider {
    background: linear-gradient(
        90deg,
        var(--cl-skeleton-base) 25%,
        var(--cl-skeleton-highlight) 50%,
        var(--cl-skeleton-base) 75%
    );
    background-size: 800px 100%;
    animation: pclSkeletonShimmer 1.4s infinite linear;
    border-radius: 4px;
}

/* Title bar (detail skeleton) */
.pclSkeleton__titleBar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.pclSkeleton__title {
    height: 18px;
    width: 55%;
}

.pclSkeleton__divider {
    height: 1px;
    border-radius: 0;
    margin: 4px 0 16px;
}

/* Sections (detail skeleton) */
.pclSkeleton__section {
    margin-bottom: 20px;
}

.pclSkeleton__sectionTitle {
    height: 14px;
    width: 40%;
    margin-bottom: 12px;
}

.pclSkeleton__pairs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pclSkeleton__pair {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pclSkeleton__label {
    height: 12px;
    width: 65%;
}

.pclSkeleton__value {
    height: 16px;
    width: 90%;
}

/* Grid skeleton (multi-result) */
.pclSkeleton__grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pclSkeleton__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #E6E6E6;
}

.pclSkeleton__row--header {
    padding: 8px 0;
}

.pclSkeleton__cell {
    height: 14px;
}

.pclSkeleton__cell--actions {
    flex: 0 0 20px;
    width: 20px;
}

.pclSkeleton__cell--col {
    flex: 1 1 0;
    min-width: 40px;
}

/* Responsive */
@media (max-width: 700px) {
    .pclSkeleton__title {
        width: 75%;
    }
}

@media (max-width: 400px) {
    .pclSkeleton__cell--col {
        min-width: 24px;
    }
}

/* Respect reduced-motion preference — disable animation */
@media (prefers-reduced-motion: reduce) {
    .pclSkeleton__title,
    .pclSkeleton__sectionTitle,
    .pclSkeleton__label,
    .pclSkeleton__value,
    .pclSkeleton__cell,
    .pclSkeleton__divider {
        animation: none;
        background: var(--cl-skeleton-base);
    }
}


/* Public Depot Lookup (PDL) - login-page search panel, chips input, and the Container | Depot switch.
   Served through CommonController.GetExternalCustomizeCssV2 (branding bundle) like the PCL files.
   Colours come from the account root tokens (styles.css :root, --cl-* brandable). */

#ip-pdl-form, .public__depot__lookup {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
}

/* Host wrappers: the login layout wraps each lookup app in one when both PCL and PDL are on. */
.publicLookupHost {
    width: 100%;
    height: 100%;
}

/* ---- Container | Depot segmented switch ----
   Rendered by the layout as a sibling of the host wrappers; logon-lookup-switch.js then MOVES it
   into the active panel's form (#ip-pcl-form / #ip-pdl-form) so it sits directly above the
   lookup card, centred with it as one group. Pinning it to the top of the right panel put it
   under the cookie-consent banner on first visit. The absolute rule below is only the no-JS
   fallback position. */
.bodyRightPart__wrapper {
    position: relative;
}

.bodyRightPart__wrapper > .pdlLookupSwitch {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

#ip-pcl-form:has(> .pdlLookupSwitch),
#ip-pdl-form:has(> .pdlLookupSwitch) {
    flex-direction: column;
    align-items: center;
}

#ip-pcl-form > .pdlLookupSwitch,
#ip-pdl-form > .pdlLookupSwitch {
    flex: 0 0 auto;
    margin: auto auto 24px;
}

#ip-pcl-form:has(> .pdlLookupSwitch) > .containerLookup__wrapper,
#ip-pdl-form:has(> .pdlLookupSwitch) > .pdlLookup__wrapper {
    margin: 0 auto auto;
    /* column flex items do not shrink horizontally the way the row layout did - cap them */
    max-width: 100%;
}

/* While a result popup owns the panel the switch steps aside; the close X brings it back. */
#ip-pcl-form:has(> .clSearchResult__wrapper) > .pdlLookupSwitch,
#ip-pdl-form:has(> .pdlResult__wrapper) > .pdlLookupSwitch {
    display: none;
}

.pdlLookupSwitch {
    z-index: 5;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 0.5rem;
    background-color: rgba(1, 63, 117, 0.85);
}

.pdlLookupSwitch__btn {
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 8px 16px;
    background-color: transparent;
    color: var(--cl-search-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.pdlLookupSwitch__btn:hover,
.pdlLookupSwitch__btn:focus-visible {
    background-color: rgba(42, 118, 189, 0.24);
    outline: none;
}

.pdlLookupSwitch__btn--active,
.pdlLookupSwitch__btn[aria-pressed="true"] {
    background-color: #FFFFFF;
    color: #2A76BD;
}

/* ---- search state: translucent card, centred ---- */
.pdlLookup__wrapper {
    background-color: rgba(1, 63, 117, 0.85);
    width: 600px;
    border-radius: 0.5rem;
    min-height: 320px;
    margin: auto;
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pdlLookup__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cl-search-text);
    margin: 0 auto 1rem;
    padding: 0;
}

.pdlLookup__description {
    margin: 0 auto 2rem;
}

.pdlLookup__description > p {
    text-align: center;
    margin: 0;
    padding: 0;
    color: var(--cl-search-text);
    font-size: 1rem;
    font-weight: 400;
}

#PDL_inside, .pdlLookupInput__wrapper {
    width: 100%;
}

.pdlLookupInput__wrapper {
    margin: 0 auto 2rem;
}

.pdlLookup__hint {
    display: none;
    margin: 0.5rem 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cl-search-text);
    opacity: 0.9;
    text-align: left;
}

.pdlLookupInput__wrapper:focus-within .pdlLookup__hint {
    display: block;
}

.pdlLookup__hint > .fa-info-circle {
    margin-right: 4px;
}

/* Plain single input (multi lookup OFF) */
.pdlLookup__input {
    width: 100%;
    box-shadow: none;
    border: 1px solid #E6E6E6;
    border-radius: 0.5rem;
    min-width: 300px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    background-color: #FFFFFF;
    height: 40px;
    color: #000000;
    caret-color: #004A8B;
    padding: 0 0.5rem;
    outline: none;
}

.pdlLookup__input::placeholder {
    color: #808080;
    opacity: 1;
    font-weight: 400;
}

.pdlLookup__input:hover {
    border-color: #004A8B;
}

.pdlLookup__input:focus {
    border-color: #2A76BD;
}

.pdlLookup__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: 1px solid #004A8B;
    background-color: #004A8B;
    font-size: 18px;
    font-family: inherit;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    transition: var(--transition-speed);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pdlLookup__button:hover,
.pdlLookup__button:focus {
    box-shadow: inset 0 -40px 0 0 #2A76BD;
    border-color: #2A76BD;
}

.pdlLookup__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.pdlChallenge__wrapper {
    margin-top: 12px;
}

.pdlChallenge__prompt {
    margin-bottom: 6px;
}

#PDL_inside > div.errorMsg__wrapper {
    margin-top: 8px;
}

/* ---- chip input (multi lookup ON): typed depots become chips; green found / red not found ---- */
.pdlChips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    min-width: 300px;
    min-height: 40px;
    padding: 4px 8px;
    border: 1px solid #E6E6E6;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #000000;
    cursor: text;
    transition: border-color 0.15s ease;
}

.pdlChips:hover {
    border-color: #004A8B;
}

.pdlChips:focus-within {
    border-color: #2A76BD;
}

.pdlChips.invalid {
    border-color: var(--cl-error);
}

.pdlChip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #E6E6E6;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
}

.pdlChip__label {
    white-space: nowrap;
}

/* x = the settings-modal close glyph via CSS mask (sanctioned project icon) */
.pdlChip__remove {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: currentColor;
    color: #808080;
    opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20d='M1%201l12%2012M13%201L1%2013'/%3E%3C/svg%3E") center / 8px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20d='M1%201l12%2012M13%201L1%2013'/%3E%3C/svg%3E") center / 8px no-repeat;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pdlChip__remove:hover {
    color: #2A76BD;
    opacity: 1;
}

.pdlChip--found {
    background-color: color-mix(in srgb, var(--cl-success) 20%, #FFFFFF);
    border-color: var(--cl-success);
    color: color-mix(in srgb, var(--cl-success) 72%, #000000);
    cursor: pointer;
}

.pdlChip--found:hover {
    background-color: color-mix(in srgb, var(--cl-success) 30%, #FFFFFF);
}

.pdlChip--found .pdlChip__remove {
    color: var(--cl-success);
}

.pdlChip--found .pdlChip__label::before {
    content: "\f00c";
    font-family: "Font Awesome 5";
    font-weight: 900;
    margin-right: 4px;
    color: var(--cl-success);
}

.pdlChip--notFound {
    background-color: color-mix(in srgb, var(--cl-error) 12%, #FFFFFF);
    border-color: var(--cl-error);
    color: color-mix(in srgb, var(--cl-error) 72%, #000000);
    cursor: help;
}

.pdlChip--notFound:hover {
    background-color: color-mix(in srgb, var(--cl-error) 20%, #FFFFFF);
}

.pdlChip--notFound .pdlChip__remove {
    color: var(--cl-error);
}

.pdlChip--notFound .pdlChip__label::before {
    content: "\f00d";
    font-family: "Font Awesome 5";
    font-weight: 900;
    margin-right: 4px;
    color: var(--cl-error);
}

.pdlChip__input {
    flex: 1 1 60px;
    min-width: 60px;
    height: 28px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #000000;
    caret-color: #004A8B;
}

.pdlChip__input::placeholder {
    color: #808080;
    opacity: 1;
    font-weight: 400;
}

/* ---- responsive (mirrors container-lookup.css breakpoints) ---- */
@media (max-width: 1200px) {
    #ip-pdl-form, .public__depot__lookup {
        height: 100%;
        padding: 0;
        margin: auto;
    }

    /* Login form in fullscreen mode (styles.css) hides the lookup panels; cover the host wrapper too */
    .app__wrapper.fullscreen .bodyRightPart__wrapper > .publicLookupHost > .public__container__lookup,
    .app__wrapper.fullscreen .bodyRightPart__wrapper > .publicLookupHost > .public__depot__lookup,
    .app__wrapper.fullscreen .bodyRightPart__wrapper > .publicLookupHost > #ip-pdl-form,
    .app__wrapper.fullscreen .bodyRightPart__wrapper > .public__depot__lookup,
    .app__wrapper.fullscreen .bodyRightPart__wrapper > #ip-pdl-form,
    .app__wrapper.fullscreen .bodyRightPart__wrapper > .pdlLookupSwitch {
        display: none;
    }

    .pdlLookupSwitch {
        top: 16px;
    }

    .pdlLookupInput__wrapper {
        margin: 0 auto 1rem;
    }
}

@media (max-width: 700px) {
    .pdlLookup__wrapper {
        min-width: 200px;
        margin: auto 24px;
        padding: 20px;
    }

    #ip-pcl-form:has(> .pdlLookupSwitch) > .containerLookup__wrapper,
    #ip-pdl-form:has(> .pdlLookupSwitch) > .pdlLookup__wrapper {
        max-width: calc(100% - 48px);
    }

    .pdlLookup__description {
        margin: 0 auto 1.5rem;
    }

    .pdlLookup__input, .pdlLookup__button, .pdlChips {
        min-width: 200px;
    }

    .pdlLookupSwitch {
        top: 8px;
    }

    .pdlLookupSwitch__btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .pdlLookup__wrapper {
        margin: auto 10px;
        padding: 16px;
        min-height: unset;
    }

    .pdlLookup__description {
        margin: 0 auto 0.5rem;
    }

    .pdlLookup__title {
        font-size: 20px;
        margin: 0 auto 0.6rem;
    }

    .pdlLookup__description > p {
        font-size: 0.8rem;
    }

    .pdlLookup__button {
        font-size: 14px;
        height: 32px;
    }

    .pdlLookup__input {
        font-size: 12px;
        height: 32px;
    }

    .pdlChips,
    .pdlChip,
    .pdlChip__input {
        font-size: 12px;
    }
}

/* ---- too many matches (Settings > General > Max results, "message" behavior) ---- */
.pdlChip--tooMany {
    background-color: color-mix(in srgb, var(--cl-warning-accent) 16%, #FFFFFF);
    border-color: var(--cl-warning-accent);
    color: var(--cl-warning);
    cursor: help;
}

.pdlChip--tooMany:hover {
    background-color: color-mix(in srgb, var(--cl-warning-accent) 24%, #FFFFFF);
}

.pdlChip--tooMany .pdlChip__remove {
    color: var(--cl-warning);
}

.pdlChip--tooMany .pdlChip__label::before {
    content: "0b0";
    font-family: "Font Awesome 5";
    font-weight: 900;
    margin-right: 4px;
    color: var(--cl-warning);
}

/* ---- depot directory (Settings > General > Depot Directory): the card grows so the filters, the
   map and the depot list fit. The modifier is server-rendered on #PDL and removed by
   logon-pdl-directory.js when the server hides the directory (low reCAPTCHA score), so the card
   never stays wide around nothing. The result (popup) state is untouched - it drops the base class. ---- */
/* Desktop: the card is ALWAYS wide enough for two columns (directory left, detail pane right - see
   the split-layout block in depot-lookup-result.css), so opening a depot never changes its width. */
@media (min-width: 1201px) {
    .pdlLookup__wrapper.pdlLookup__wrapper--directory {
        width: min(1400px, calc(100% - 48px));
    }
}

/* Medium desktops (the login layout gives the lookup only 60% of the viewport here): trade card
   padding and margin for column width. */
@media (min-width: 1201px) and (max-width: 1500px) {
    .pdlLookup__wrapper.pdlLookup__wrapper--directory {
        width: calc(100% - 24px);
        padding: 24px;
    }
}

@media (max-width: 1200px) {
    .pdlLookup__wrapper.pdlLookup__wrapper--directory {
        width: calc(100% - 48px);
        max-width: 880px;
    }
}

@media (max-width: 700px) {
    .pdlLookup__wrapper.pdlLookup__wrapper--directory {
        width: auto;
        max-width: calc(100% - 48px);
    }
}

.pdlLookup__wrapper--directory .pdlLookup__description,
.pdlLookup__wrapper--directory .pdlLookupInput__wrapper {
    margin-bottom: 1.5rem;
}

/* ---- search row (2026-09-25): the box and the Search button side by side, a search icon inside the
   box, a clear x while it has text, and the typeahead host (#pdlSuggest, filled by
   logon-pdl-directory.js from the loaded directory). In multi mode initPdlChips() moves the input into
   .pdlChips inside .pdlSearchRow__field, so the chip box takes the same inner padding. ---- */
.pdlSearchRow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pdlSearchRow__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.pdlSearchRow__icon {
    position: absolute;
    left: 14px;
    top: 20px;
    z-index: 1;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999999;
    pointer-events: none;
}

.pdlSearchRow__input,
.pdlSearchRow__field > .pdlChips {
    min-width: 0;
    padding-left: 40px;
    padding-right: 40px;
}

.pdlSearchRow__clear {
    position: absolute;
    right: 8px;
    top: 20px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--cl-neutral-60);
    color: #808080;
    font-size: 12px;
    cursor: pointer;
    transform: translateY(-50%);
}

.pdlSearchRow__clear:hover,
.pdlSearchRow__clear:focus-visible {
    background-color: #E6E6E6;
    color: #000000;
    outline: none;
}

.pdlSearchRow__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    padding: 0 24px;
    font-size: 16px;
}

/* typeahead under the box */
.pdlSuggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    text-align: left;
}

.pdlSuggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pdlSuggest__item:hover,
.pdlSuggest__item--active {
    background-color: var(--cl-neutral-30);
}

.pdlSuggest__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: rgba(42, 118, 189, 0.10);
    color: #2A76BD;
    font-size: 12px;
}

.pdlSuggest__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.pdlSuggest__name {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdlSuggest__name mark,
.pdlSuggest__meta mark {
    background-color: rgba(42, 118, 189, 0.16);
    padding: 0;
    margin: 0;
    color: inherit;
    border-radius: 2px;
}

.pdlSuggest__meta {
    font-size: 12px;
    font-weight: 400;
    color: #808080;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdlSuggest__item .pdlBadge {
    flex: 0 0 auto;
}

.pdlSuggest__foot {
    padding: 8px 10px 4px;
    border-top: 1px solid #E6E6E6;
    font-size: 12px;
    color: #808080;
}

@media (max-width: 700px) {
    .pdlSearchRow__input,
    .pdlSearchRow__btn,
    .pdlSearchRow__field > .pdlChips {
        min-width: 0;
    }

    /* icon-only Search button on phones */
    .pdlSearchRow__btnText {
        display: none;
    }

    .pdlSearchRow__btn {
        padding: 0 16px;
    }
}

/* ---- wider lookup side for the directory card (2026-09-25): the login layout gives the lookup 60% of
   the page between 1201 and 1500px, which left the depot list ~350px wide beside the detail pane.
   With the directory on, the lookup takes 66% and the sign-in side 34% (its 420px card still fits at
   1201px). Above 1500px the layout's own 35% / 75% flex split already gives the lookup ~68%. ---- */
@media (min-width: 1201px) and (max-width: 1500px) {
    .bodyRightPart__wrapper:has(.pdlLookup__wrapper--directory) {
        width: 66%;
    }

    .bodyLeftPart__wrapper:has(+ .bodyRightPart__wrapper .pdlLookup__wrapper--directory) {
        width: 34%;
    }
}


/* Public Depot Lookup (PDL) - result panel, single detail, status badge, rating pill, multi grid,
   loading skeleton. Served through the branding bundle after depot-lookup.css. */

/* Rating band palette - mirrored from Areas/DepotAudit/Content/Css/da-edit-audit.css (that file only
   loads on DA pages). Keep the three copies (DA, DAS, PDL) in step. */
:root {
    --pdl-rating-good-bg: #d1fae5;
    --pdl-rating-good-border: #8ce0bd;
    --pdl-rating-good-text: #065f46;
    --pdl-rating-ok-bg: #fef3c7;
    --pdl-rating-ok-border: #fcd980;
    --pdl-rating-ok-text: #92400e;
    --pdl-rating-low-bg: #ffe4e6;
    --pdl-rating-low-border: #fbb6c0;
    --pdl-rating-low-text: #9f1239;
}

/* ---- result state: white panel (same #PDL element, class swapped by _Lookup.cshtml) ---- */
.pdlResult__wrapper {
    background-color: #FFFFFF;
    padding: 40px;
    margin: 40px auto;
    height: calc(100% - 80px);
    border-radius: 0.5rem;
    overflow-y: auto;
    min-width: 600px;
    max-width: 600px;
    width: 100%;
    position: relative;
    display: block;
}

@media (min-width: 1201px) {
    .pdlResult__wrapper {
        transition: max-width 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Compound selector: the modifier is inert without the base class (a stray --wide after reset). */
    .pdlResult__wrapper.pdlResult__wrapper--wide {
        max-width: min(1600px, calc(100% - 80px));
    }

    .pdlResult__wrapper--wide #PDL_inside > *:not(#pdlDetailPane):not(.pdlLookupInput__wrapper) {
        display: block;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .pdlResult__wrapper--wide .pdlLookupInput__wrapper {
        width: fit-content;
        min-width: 600px;
        max-width: min(1600px, calc(100% - 80px));
    }

    /* Detail opened from the grid: the panel stays at the grid's width (no resize on drill-down or
       Back), the single-depot content is centred in the same 600px reading column as the title. */
    .pdlResult__wrapper--wide .pdlMultiResult__detail {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdlResult__wrapper {
        transition: none;
    }
}

.pdlResult__wrapper::-webkit-scrollbar,
.pdlMultiResult__gridWrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.pdlResult__wrapper::-webkit-scrollbar-track,
.pdlMultiResult__gridWrapper::-webkit-scrollbar-track {
    background-color: var(--cl-neutral-60);
    border-radius: 1rem;
}

.pdlResult__wrapper::-webkit-scrollbar-thumb,
.pdlMultiResult__gridWrapper::-webkit-scrollbar-thumb {
    background-color: #CCCCCC;
    border-radius: 1rem;
}

.pdlResult__wrapper > .pdlLookup__title {
    color: #2A76BD;
}

.pdlResult__wrapper > .pdlLookup__description > p {
    color: #000000;
}

.pdlResult__wrapper .pdlLookup__hint {
    color: #808080;
}

/* top-right reset x (shown only in the result state) */
.pdlResult__closeButton {
    display: none;
    position: absolute;
    right: 2.5rem;
    cursor: pointer;
}

.pdlResult__closeButton path {
    stroke: #808080;
}

.pdlResult__closeButton:hover path {
    stroke: #000000;
}

/* backdrop - active only on tablet/mobile where the panel is a fixed overlay */
.pdlResult__backdrop {
    display: none;
}

/* ---- result heading (not-found / too-many states and the multi grid's "Back to grid" block) ---- */
.pdlResult__container {
    width: 100%;
    margin: 2rem auto 0;
}

.pdlResultFor__text {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    margin-right: 0.25rem;
}

.pdlResultForDepot__text {
    color: #2A76BD;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
}

.pdlResult__line {
    width: 100%;
    border-bottom: 1px solid #E6E6E6;
    margin: 0.5rem auto 1rem;
}

.pdlResultNotFound__wrapper {
    width: 100%;
    margin: 2rem auto 0;
    display: block;
}

.pdlResultNotFound__text {
    color: var(--cl-error);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

/* =========================================================
   Depot detail (#pdlFoundResult.pdlDetail) - _LookupResult.cshtml, 2026-09-24 redesign.
   Hero (name, code, status badge, rating pill) + ONE tab strip (.pdlDetailTabs: Overview, one tab
   per public Depot Audit V2 group, Attachments, Contacts - only the tabs with content), then the
   always-visible report-request block, gate note and "Request login". Renders inside the split
   pane, the popup and the multi grid's hidden detail blocks alike.
   ========================================================= */
.pdlDetail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.pdlDetail__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 16px;
    border: 1px solid rgba(42, 118, 189, 0.16);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(42, 118, 189, 0.10), rgba(42, 118, 189, 0.03));
}

.pdlDetail__heroMain {
    min-width: 0;
    flex: 1 1 200px;
}

.pdlDetail__name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #000000;
    overflow-wrap: anywhere;
}

.pdlDetail__code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #808080;
}

.pdlDetail__heroMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pdlDetail__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 16px;
    border: 1px dashed #CCCCCC;
    border-radius: 8px;
    font-size: 14px;
    color: #808080;
}

/* Overview: one block per admin-configured display section, fields in a responsive label/value grid. */
.pdlDetailSection + .pdlDetailSection {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E6E6E6;
}

.pdlDetailSection__title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #808080;
    overflow-wrap: anywhere;
}

.pdlDetailSection__note {
    margin: -8px 0 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #999999;
}

.pdlDetail__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 16px;
    margin: 0;
}

.pdlField {
    min-width: 0;
    margin: 0;
}

.pdlField--wide {
    grid-column: 1 / -1;
}

.pdlField__label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #808080;
    overflow-wrap: anywhere;
}

.pdlField__value {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #000000;
    overflow-wrap: anywhere;
}

/* ---- status badge (COM_LocationExt.DasStatus) ---- */
.pdlBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.5;
}

.pdlBadge--verified {
    color: color-mix(in srgb, var(--cl-success) 72%, #000000);
    border-color: color-mix(in srgb, var(--cl-success) 40%, #FFFFFF);
    background-color: color-mix(in srgb, var(--cl-success) 12%, #FFFFFF);
}

.pdlBadge--requested {
    color: var(--cl-warning);
    border-color: color-mix(in srgb, var(--cl-warning-accent) 48%, #FFFFFF);
    background-color: color-mix(in srgb, var(--cl-warning-accent) 12%, #FFFFFF);
}

.pdlBadge--notVerified {
    color: color-mix(in srgb, var(--cl-error) 80%, #000000);
    border-color: color-mix(in srgb, var(--cl-error) 40%, #FFFFFF);
    background-color: color-mix(in srgb, var(--cl-error) 8%, #FFFFFF);
}

/* ---- latest Depot Audit overall rating pill (same look as the DA / DAS pill) ---- */
.pdlOverallRating {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #E6E6E6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: #000000;
}

.pdlOverallRating[data-band="good"] {
    background-color: var(--pdl-rating-good-bg);
    border-color: var(--pdl-rating-good-border);
    color: var(--pdl-rating-good-text);
}

.pdlOverallRating[data-band="ok"] {
    background-color: var(--pdl-rating-ok-bg);
    border-color: var(--pdl-rating-ok-border);
    color: var(--pdl-rating-ok-text);
}

.pdlOverallRating[data-band="low"] {
    background-color: var(--pdl-rating-low-bg);
    border-color: var(--pdl-rating-low-border);
    color: var(--pdl-rating-low-text);
}

/* ---- attachments ---- */
.pdlResultAttachment__wrapper {
    margin: 0 0 1rem;
}

.pdlResultAttachmentType__text {
    font-size: 16px;
    font-weight: 500;
    color: #808080;
    margin: 0 0 0.5rem;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
}

.pdlResultAttachment__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.5rem;
}

.pdlResultAttachment__fileIcon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #000000;
}

.pdlResultAttachmentDescription__container {
    flex: 1 1 auto;
    margin: 0 0.5rem;
    min-width: 0;
}

.pdlResultAttachmentFile__name {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin: 0.25rem 0 0;
    padding: 0;
    cursor: pointer;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
    text-decoration: none;
}

.pdlResultAttachmentFile__name:hover {
    text-decoration: underline;
    color: #2A76BD;
}

.pdlResultAttachment__description {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.25rem 0.25rem 0;
}

.pdlResultAttachmentFile__date {
    font-size: 12px;
    font-weight: 300;
    color: #808080;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.pdlAttachment__btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E6E6E6;
    color: #004A8B;
    font-size: 16px;
    text-decoration: none;
    transition: var(--transition-speed);
}

.pdlAttachment__btn:hover {
    background-color: rgba(42, 118, 189, 0.05);
    border-color: #2A76BD;
    color: #2A76BD;
    cursor: pointer;
}

/* ---- Detail tabs (Overview / capability groups / Attachments / Contacts) ----
   Markup: _LookupResult.cshtml (.pdlDetailTabs). CSS-only tabs, the same mechanism Depot Assessment's
   detail card uses: .pdlDetailTabs > .pdlDetailTabs__strip (label[for] tabs) then one
   .pdlDetailTabs__radio + .pdlDetailTabs__panel pair per tab in tab order. The checked radio shows its
   sibling panel; the active / focused tab is matched by POSITION with :has() + nth-of-type (the
   radios are the only <input>s and the tabs the only <label>s among their siblings). Twelve
   positions are styled; a thirteenth tab still switches, it just would not highlight. */
.pdlDetailTabs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Focusable, not display:none (that would drop the radios from the tab order and kill keyboard use). */
.pdlDetailTabs__radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

/* Scrolls horizontally rather than wrapping: a tenant can configure many groups. overflow-y is set
   explicitly - overflow-x alone computes overflow-y as auto and paints a stray vertical scrollbar. */
.pdlDetailTabs__strip {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #E6E6E6;
    /* No scrollbar chrome (Chromium honours scrollbar-width over ::-webkit-scrollbar, so "thin" would
       still paint a bar under a short strip); wheel / drag / keyboard still scroll it. */
    scrollbar-width: none;
}

.pdlDetailTabs__strip::-webkit-scrollbar {
    height: 0;
}

.pdlDetailTabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 240px;
    padding: 8px 12px 10px;
    margin-bottom: -1px; /* sits ON the strip's hairline, so the active underline replaces it */
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #808080;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pdlDetailTabs__tabText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdlDetailTabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--cl-neutral-60);
    color: #808080;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.pdlDetailTabs__tab:hover {
    color: #000000;
}

.pdlDetailTabs__panel {
    display: none;
    min-width: 0;
}

.pdlDetailTabs__radio:checked + .pdlDetailTabs__panel {
    display: block;
}

.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(1):checked) .pdlDetailTabs__tab:nth-of-type(1),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(2):checked) .pdlDetailTabs__tab:nth-of-type(2),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(3):checked) .pdlDetailTabs__tab:nth-of-type(3),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(4):checked) .pdlDetailTabs__tab:nth-of-type(4),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(5):checked) .pdlDetailTabs__tab:nth-of-type(5),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(6):checked) .pdlDetailTabs__tab:nth-of-type(6),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(7):checked) .pdlDetailTabs__tab:nth-of-type(7),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(8):checked) .pdlDetailTabs__tab:nth-of-type(8),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(9):checked) .pdlDetailTabs__tab:nth-of-type(9),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(10):checked) .pdlDetailTabs__tab:nth-of-type(10),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(11):checked) .pdlDetailTabs__tab:nth-of-type(11),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(12):checked) .pdlDetailTabs__tab:nth-of-type(12) {
    color: #2A76BD;
    border-bottom-color: #2A76BD;
    font-weight: 600;
}

.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(1):checked) .pdlDetailTabs__tab:nth-of-type(1) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(2):checked) .pdlDetailTabs__tab:nth-of-type(2) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(3):checked) .pdlDetailTabs__tab:nth-of-type(3) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(4):checked) .pdlDetailTabs__tab:nth-of-type(4) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(5):checked) .pdlDetailTabs__tab:nth-of-type(5) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(6):checked) .pdlDetailTabs__tab:nth-of-type(6) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(7):checked) .pdlDetailTabs__tab:nth-of-type(7) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(8):checked) .pdlDetailTabs__tab:nth-of-type(8) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(9):checked) .pdlDetailTabs__tab:nth-of-type(9) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(10):checked) .pdlDetailTabs__tab:nth-of-type(10) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(11):checked) .pdlDetailTabs__tab:nth-of-type(11) .pdlDetailTabs__count,
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(12):checked) .pdlDetailTabs__tab:nth-of-type(12) .pdlDetailTabs__count {
    background-color: rgba(42, 118, 189, 0.12);
    color: #2A76BD;
}

.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(1):focus-visible) .pdlDetailTabs__tab:nth-of-type(1),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(2):focus-visible) .pdlDetailTabs__tab:nth-of-type(2),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(3):focus-visible) .pdlDetailTabs__tab:nth-of-type(3),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(4):focus-visible) .pdlDetailTabs__tab:nth-of-type(4),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(5):focus-visible) .pdlDetailTabs__tab:nth-of-type(5),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(6):focus-visible) .pdlDetailTabs__tab:nth-of-type(6),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(7):focus-visible) .pdlDetailTabs__tab:nth-of-type(7),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(8):focus-visible) .pdlDetailTabs__tab:nth-of-type(8),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(9):focus-visible) .pdlDetailTabs__tab:nth-of-type(9),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(10):focus-visible) .pdlDetailTabs__tab:nth-of-type(10),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(11):focus-visible) .pdlDetailTabs__tab:nth-of-type(11),
.pdlDetailTabs:has(.pdlDetailTabs__radio:nth-of-type(12):focus-visible) .pdlDetailTabs__tab:nth-of-type(12) {
    outline: 2px solid #2A76BD;
    outline-offset: -2px;
    border-radius: 6px 6px 0 0;
}

/* ---- Capabilities & Services tab (2026-09-25 redesign): one card per category (code badge, name,
   answered count); the category's own questions first, then each subcategory as an indented
   group of sub-questions with an accent bar; Yes / No pills, chips for multi-select answers.
   Markup: _LookupResult.cshtml helpers CapTitle / CapValue / CapQuestions. ---- */
.pdlCap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.pdlCapCat {
    overflow: hidden;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    background-color: #FFFFFF;
}

.pdlCapCat__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #E6E6E6;
    background-color: var(--cl-neutral-30);
}

.pdlCapCat__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #000000;
    overflow-wrap: anywhere;
}

.pdlCapCat__count {
    flex: 0 0 auto;
    font-size: 12px;
    color: #808080;
    white-space: nowrap;
}

.pdlCapCode {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    background-color: rgba(42, 118, 189, 0.10);
    color: #2A76BD;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.pdlCapCat__body {
    padding: 4px 12px 8px;
}

/* question rows */
.pdlCapQ {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cl-neutral-60);
}

.pdlCapQs > .pdlCapQ:last-child {
    border-bottom: none;
}

.pdlCapQ__label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.pdlCapQ__question {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cl-neutral-700);
    overflow-wrap: break-word;
}

.pdlCapQ__value {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.pdlCapQ__text {
    max-width: 200px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #000000;
    text-align: right;
    overflow-wrap: anywhere;
}

.pdlCapPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pdlCapPill--yes {
    background-color: color-mix(in srgb, var(--cl-success) 14%, #FFFFFF);
    color: var(--cl-success);
}

.pdlCapPill--no {
    background-color: color-mix(in srgb, var(--cl-error) 12%, #FFFFFF);
    color: var(--cl-error);
}

.pdlCapChips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 200px;
}

/* several chips: the answer moves under the question, full width, left-aligned */
.pdlCapQ--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.pdlCapQ--stacked .pdlCapQ__value {
    justify-content: flex-start;
}

.pdlCapQ--stacked .pdlCapChips {
    justify-content: flex-start;
    max-width: none;
}

.pdlCapChip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    background-color: var(--cl-neutral-30);
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
}

/* subcategory = a group of sub-questions, indented behind an accent bar */
.pdlCapSub {
    margin: 8px 0 4px;
    padding-left: 12px;
    border-left: 4px solid rgba(42, 118, 189, 0.30);
}

.pdlCapSub__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0 2px;
}

.pdlCapSub__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #000000;
    overflow-wrap: anywhere;
}

.pdlCapQs--sub .pdlCapQ {
    padding: 6px 0;
}

@media (max-width: 700px) {
    .pdlCapQ {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdlCapQ__value {
        justify-content: flex-start;
    }

    .pdlCapQ__text {
        max-width: none;
        text-align: left;
    }

    .pdlCapChips {
        justify-content: flex-start;
        max-width: none;
    }
}

/* ---- Contacts - the depot's public contacts (My Depot / DPM "Public view" flag) ---- */
.pdlContacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 1rem;
}

.pdlContact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.pdlContact__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pdlContact__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(42, 118, 189, 0.12);
    color: #2A76BD;
    font-size: 14px;
}

.pdlContact__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pdlContact__name {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pdlContact__role,
.pdlContact__type {
    font-size: 12px;
    font-weight: 400;
    color: #808080;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pdlContact__type {
    color: #999999;
}

.pdlContact__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.pdlContact__row--link {
    color: #000000;
    text-decoration: none;
}

.pdlContact__row--link:hover .pdlContact__text {
    color: #2A76BD;
    text-decoration: underline;
}

.pdlContact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(42, 118, 189, 0.12);
    color: #2A76BD;
    font-size: 12px;
}

.pdlContact__mails {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 2px;
}

.pdlContact__mail,
.pdlContact__text {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.pdlContact__text {
    padding-top: 2px;
}

.pdlContact__mail {
    text-decoration: none;
}

.pdlContact__mail:hover {
    color: #2A76BD;
    text-decoration: underline;
}

/* ---- multiple results: grid ---- */
.pdlMultiResult__wrapper {
    padding: 8px 0;
}

.pdlMultiResult__gridWrapper {
    max-height: 50vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.pdlMultiResult__grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.pdlMultiResult__grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cl-neutral-700);
    background-color: var(--cl-neutral-60);
    border-bottom: 1px solid #E6E6E6;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.pdlMultiResult__grid tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #E6E6E6;
    vertical-align: middle;
    color: #000000;
    white-space: nowrap;
}

.pdlMultiResult__grid tbody tr:last-child td {
    border-bottom: none;
}

.pdlMultiResultRow {
    cursor: pointer;
}

.pdlMultiResultRow td {
    transition: background-color 150ms ease;
}

.pdlMultiResultRow:hover td {
    background-color: var(--cl-neutral-30);
}

/* Pinned depot-name column (sticky-left); the corner cell must beat the generic thead th z-index */
.pdlMultiResult__grid thead th.pdlMultiResult__leadHeader {
    position: sticky;
    left: 0;
    z-index: 3;
    border-right: 1px solid #E6E6E6;
    padding-left: 48px;
}

.pdlMultiResultRow__lead {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #FFFFFF;
    border-right: 1px solid #E6E6E6;
}

.pdlMultiResultRow__leadInner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pdlMultiResultRow__id {
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.02em;
}

.pdlMultiResultRow__actionBtn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 0;
    font-size: 14px;
    color: #004A8B;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.pdlMultiResultRow:hover .pdlMultiResultRow__actionBtn,
.pdlMultiResultRow__actionBtn:hover {
    background-color: rgba(42, 118, 189, 0.12);
    color: #2A76BD;
}

.pdlMultiResultSort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pdlMultiResultSort__icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1;
    color: #999999;
}

.pdlMultiResult__grid thead th[aria-sort="ascending"] .pdlMultiResultSort__icons .fa-long-arrow-alt-up {
    color: #004A8B;
}

.pdlMultiResult__grid thead th[aria-sort="descending"] .pdlMultiResultSort__icons .fa-long-arrow-alt-down {
    color: #2A76BD;
}

/* Detail block reached from the grid */
.pdlMultiResult__detail {
    padding-top: 8px;
}

.pdlMultiResult__detail .pdlResult__container {
    margin-top: 8px;
}

.pdlMultiResultBackToGrid__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #004A8B;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 12px;
}

.pdlMultiResultBackToGrid__link:hover,
.pdlMultiResultBackToGrid__link:focus {
    color: #2A76BD;
}

.pdlMultiResultBackToGrid__link:hover .pdlMultiResultBackToGrid__text,
.pdlMultiResultBackToGrid__link:focus .pdlMultiResultBackToGrid__text {
    text-decoration: underline;
}

/* ---- loading skeleton ---- */
@keyframes pdlSkeletonShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.pdlSkeleton {
    width: 100%;
    padding: 8px 0;
}

.pdlSkeleton--detail {
    padding-top: 2rem;
}

.pdlSkeleton__title,
.pdlSkeleton__sectionTitle,
.pdlSkeleton__label,
.pdlSkeleton__value,
.pdlSkeleton__cell,
.pdlSkeleton__divider {
    background: linear-gradient(90deg, var(--cl-skeleton-base) 25%, var(--cl-skeleton-highlight) 50%, var(--cl-skeleton-base) 75%);
    background-size: 800px 100%;
    animation: pdlSkeletonShimmer 1.4s infinite linear;
    border-radius: 4px;
}

.pdlSkeleton__titleBar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.pdlSkeleton__title {
    height: 18px;
    width: 55%;
}

.pdlSkeleton__divider {
    height: 1px;
    border-radius: 0;
    margin: 4px 0 16px;
}

.pdlSkeleton__section {
    margin-bottom: 20px;
}

.pdlSkeleton__sectionTitle {
    height: 14px;
    width: 40%;
    margin-bottom: 12px;
}

.pdlSkeleton__pairs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdlSkeleton__pair {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdlSkeleton__label {
    height: 12px;
    width: 65%;
}

.pdlSkeleton__value {
    height: 16px;
    width: 90%;
}

.pdlSkeleton__grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.pdlSkeleton__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #E6E6E6;
}

.pdlSkeleton__row--header {
    padding: 8px 0;
}

.pdlSkeleton__cell {
    height: 14px;
}

.pdlSkeleton__cell--actions {
    flex: 0 0 20px;
    width: 20px;
}

.pdlSkeleton__cell--col {
    flex: 1 1 0;
    min-width: 40px;
}

@media (prefers-reduced-motion: reduce) {
    .pdlSkeleton__title,
    .pdlSkeleton__sectionTitle,
    .pdlSkeleton__label,
    .pdlSkeleton__value,
    .pdlSkeleton__cell,
    .pdlSkeleton__divider {
        animation: none;
        background: var(--cl-skeleton-base);
    }
}

/* ---- responsive ---- */
@media (max-width: 1200px) {
    .pdlResult__wrapper {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        z-index: 14;
    }

    .pdlResult__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        background: rgba(0, 0, 0, 0.3);
        z-index: 12;
        opacity: 0;
        pointer-events: none;
    }

    .pdlResult__backdrop.active {
        opacity: 1;
        pointer-events: all;
    }
}

@media (max-width: 700px) {
    .pdlResult__wrapper {
        top: 0;
        left: 0;
        transform: none;
        padding: 20px;
        margin: auto;
        width: 100%;
        min-width: 200px;
        max-width: none;
        border-radius: 0;
        height: 100vh;
    }

    .pdlResult__closeButton {
        right: 1.5rem;
    }

    .pdlResult__wrapper::-webkit-scrollbar {
        width: 4px;
    }

    .pdlMultiResult__grid thead th,
    .pdlMultiResult__grid tbody td {
        padding: 8px 12px;
    }

    .pdlSkeleton__title {
        width: 75%;
    }
}

@media (max-width: 400px) {
    .pdlResult__wrapper {
        padding: 16px;
    }

    .pdlResultAttachmentFile__name,
    .pdlResultAttachmentType__text {
        font-size: 14px;
    }

    .pdlResult__closeButton {
        right: 0.5rem;
    }

    .pdlSkeleton__cell--col {
        min-width: 24px;
    }
}

/* ---- too many matches: narrow-down message (single term) / all-terms-over-limit empty state ---- */
.pdlResultTooMany__wrapper {
    width: 100%;
    margin: 2rem auto 0;
    display: block;
}

.pdlResultTooMany__text {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--cl-warning-accent);
    background-color: color-mix(in srgb, var(--cl-warning-accent) 12%, #FFFFFF);
    color: var(--cl-warning);
    font-size: 14px;
    line-height: 1.5;
}

.pdlResultTooMany__text .fas {
    margin-right: 8px;
}

/* Truncation notice above the multi grid ("first N of M" / narrow-down text for skipped terms) */
.pdlMultiResult__notice {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--cl-warning-accent);
    background-color: color-mix(in srgb, var(--cl-warning-accent) 12%, #FFFFFF);
    color: var(--cl-warning);
    font-size: 14px;
    line-height: 1.5;
}

.pdlMultiResult__notice .fas {
    margin-right: 8px;
}

/* =========================================================
   Depot directory (map + list shown in the lookup card before any search)
   Markup: Areas/PublicDepotLookup/Views/AppsPdl/_Lookup.cshtml (#pdlDirectory); behaviour:
   Scripts/logon-pdl-directory.js. A white surface inside the translucent card, laid out like the
   Depot Assessment directory (status chips + Location filter, map, list). The map pins are drawn
   by the engine from the three --pdl-status-* tokens below (read with getComputedStyle), which
   are the same hues the .pdlBadge--* / legend dots use - re-pick one and all three move together.
   ========================================================= */
:root {
    --pdl-status-verified: #1e7e34;
    --pdl-status-requested: #b45309;
    --pdl-status-notverified: #c62828;
}

.pdlDirectory {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    padding: 16px;
    text-align: left;
    background-color: #FFFFFF;
    border-radius: 12px;
}

/* Result (popup) state hides the directory; the popup owns the card then. Three ids on purpose:
   the --wide rule (.pdlResult__wrapper--wide #PDL_inside > *:not(#pdlDetailPane)...) counts
   its :not() ids and would otherwise win with display: block. */
#PDL.pdlResult__wrapper #PDL_inside > #pdlDirectory {
    display: none;
}

/* =========================================================
   Two-column desktop layout (directory on): the directory LEFT, the detail pane RIGHT - always.
   Keyed on pdlLookup__wrapper--directory (server-rendered on #PDL), so the card has its final
   shape before anything is clicked: #PDL_inside is a two-column grid, every child spans both
   columns except the directory (column 1) and the pane (column 2). The pane shows a placeholder
   until a lookup adds pdlLookup__wrapper--split (_Lookup.cshtml): then the result replaces the
   placeholder and the close X appears - the card's width, the map and the list never move. The
   directory alone sizes the shared row; the pane is stretched to it and scrolls its result
   inside (#pdlSearchResults is absolutely positioned in .pdlDetailPane__body, so the result's
   own height never grows the card). Below 1201px every rule here is inert and the popup rules
   apply (the directory collapses there anyway).
   ========================================================= */
.pdlDetailPane__bar,
.pdlDetailPane__placeholder {
    display: none;
}

@media (min-width: 1201px) {
    .pdlLookup__wrapper--directory #PDL_inside {
        display: grid;
        grid-template-columns: minmax(280px, calc(var(--pdl-split, 55) * 1% - 4px)) 8px minmax(280px, 1fr); /* directory | splitter | pane; --pdl-split = the directory's percent (logon-pdl-directory.js) */
        grid-auto-flow: row dense;
        column-gap: 0; /* the halves are one joined panel; the 8px splitter column is the seam */
        align-items: stretch;
    }

    .pdlLookup__wrapper--directory #PDL_inside > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .pdlLookup__wrapper--directory #PDL_inside > #pdlDirectory {
        grid-column: 1;
    }

    /* Viewport fit. The login form clips the card at 100vh, so on short desktop viewports the
       directory (map + list) and, in split mode, the pane beside it are capped to the space left
       under the card header: logon-pdl-directory.js measures it and sets --pdl-dir-max on #PDL
       (only when the natural height would overflow). The list is the part that gives way - the
       toolbar, map and footer keep their size. */
    .pdlLookup__wrapper--directory #PDL_inside > #pdlDirectory {
        max-height: var(--pdl-dir-max, none);
    }

    .pdlLookup__wrapper--directory .pdlDirectory__toolbar,
    .pdlLookup__wrapper--directory .pdlDirectory__foot,
    .pdlLookup__wrapper--directory .pdlDirectoryMap__foot {
        flex-shrink: 0;
    }

    /* The two-column card drops the intro copy under the title: the directory explains itself and the
       ~74px matter on 900px-tall desktops (the row beside the pane is what fits or does not). */
    .pdlLookup__wrapper--directory .pdlLookup__description {
        display: none;
    }

    /* The count flips between "1200 depots" and "1 depot" as the keyword filter narrows: a reserved
       width keeps the toolbar from re-wrapping (which moved the map and list by a few pixels right
       when a result opened). */
    .pdlLookup__wrapper--directory .pdlDirectory__count {
        min-width: 104px;
        text-align: right;
    }

    /* Same idea for the footer: "Show all" hides once every filtered row fits (one row after a
       search), and a footer that lost its 32px button would hand those pixels to the list. */
    .pdlLookup__wrapper--directory .pdlDirectory__foot {
        min-height: 32px;
    }

    /* The list container's minimum must equal the table wrap's: with min-height 0 the container
       shrank below its child and the footer painted over the last rows. */
    .pdlLookup__wrapper--directory .pdlDirectory__list {
        display: flex;
        flex-direction: column;
        min-height: 160px;
    }

    /* A FIXED list height (not max-height): the live keyword filter can leave one row after a
       search, and a content-sized list would then shrink the whole row and re-centre the card -
       a visible jump right when the result opens. The box scrolls inside; the viewport cap can
       still shrink it to 160px. */
    .pdlLookup__wrapper--directory .pdlDirectory__tableWrap {
        flex: 1 1 auto;
        height: 320px;
        min-height: 160px;
    }

    /* The map gives way after the list: its canvas keeps the 280px CSS height the atlas SDK measures
       at construction (logon-pdl-directory.js calls map.resize() on every layout change) and may
       shrink to 200px. Each level of the chain must be allowed to shrink (min-height) for the
       canvas to receive the constraint. */
    .pdlLookup__wrapper--directory .pdlDirectory__map {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;
        min-height: 220px;
    }

    .pdlLookup__wrapper--directory .pdlDirectoryMap {
        flex: 1 1 auto;
        min-height: 0;
    }

    .pdlLookup__wrapper--directory .pdlDirectoryMap__canvas {
        flex: 0 1 280px;
        min-height: 180px;
    }
}

/* Medium desktops (1201-1500px, where the lookup gets 60% of the viewport): the directory column is
   ~340-420px wide and the status chips stacked one per row, eating the height the list needs.
   Compact them: no "Status:" label, tighter gaps, smaller badges and Location trigger. */
@media (min-width: 1201px) and (max-width: 1500px) {
    .pdlLookup__wrapper--directory .pdlCheckGroup__label {
        display: none;
    }

    .pdlLookup__wrapper--directory .pdlDirectory__filters,
    .pdlLookup__wrapper--directory .pdlCheckGroup,
    .pdlLookup__wrapper--directory .pdlCheckGroup__items {
        gap: 6px 8px;
    }

    .pdlLookup__wrapper--directory .pdlCheck {
        gap: 6px;
    }

    .pdlLookup__wrapper--directory .pdlCheck .pdlBadge {
        padding: 2px 8px;
        font-size: 11px;
    }

    .pdlLookup__wrapper--directory .pdlLocFilter__trigger {
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
    }
}

/* Short desktop viewports (small laptops, 1280x800 and the like): the map legend and the loose
   spacing are the only things left to give once the map and the list sit at their minimums. */
@media (min-width: 1201px) and (max-height: 820px) {
    .pdlLookup__wrapper--directory .pdlDirectoryMap__foot {
        display: none;
    }

    .pdlLookup__wrapper--directory .pdlDirectory {
        gap: 8px;
        padding: 12px;
    }

    .pdlLookup__wrapper--directory .pdlDirectory__map {
        min-height: 180px;
    }

    .pdlLookup__wrapper--directory .pdlDirectory__list,
    .pdlLookup__wrapper--directory .pdlDirectory__tableWrap {
        min-height: 120px;
    }
}

@media (min-width: 1201px) {

    /* Before a depot is opened the pane shows its placeholder; a result (pdlLookup__wrapper--split on
       #PDL) swaps it for #pdlSearchResults and reveals the close X. Nothing else in the card moves. */
    .pdlLookup__wrapper--directory .pdlDetailPane__placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        gap: 8px;
        padding: 32px 24px;
        text-align: center;
    }

    .pdlLookup__wrapper--split .pdlDetailPane__placeholder {
        display: none;
    }

    .pdlLookup__wrapper--directory .pdlDetailPane__close {
        visibility: hidden;
    }

    .pdlLookup__wrapper--split .pdlDetailPane__close {
        visibility: visible;
    }

    .pdlDetailPane__placeholderIcon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-bottom: 4px;
        border-radius: 50%;
        background-color: rgba(42, 118, 189, 0.10);
        color: #2A76BD;
        font-size: 24px;
    }

    .pdlDetailPane__placeholderTitle {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #000000;
    }

    .pdlDetailPane__placeholderText {
        max-width: 320px;
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #808080;
    }

    .pdlLookup__wrapper--directory #PDL_inside > #pdlDetailPane {
        grid-column: 3;
        display: flex;
        flex-direction: column;
        min-height: min(560px, var(--pdl-dir-max, 560px));
        max-height: var(--pdl-dir-max, none);
        margin-top: 8px;
        background-color: #FFFFFF;
        border-radius: 12px;
        text-align: left;
        overflow: hidden;
    }

    .pdlLookup__wrapper--directory .pdlDetailPane__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex: 0 0 auto;
        padding: 8px 8px 8px 16px;
        border-bottom: 1px solid #E6E6E6;
    }

    .pdlDetailPane__title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #808080;
    }

    .pdlDetailPane__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background-color: transparent;
        color: #808080;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .pdlDetailPane__close:hover,
    .pdlDetailPane__close:focus-visible {
        background-color: var(--cl-neutral-60);
        color: #000000;
        outline: none;
    }

    .pdlLookup__wrapper--directory .pdlDetailPane__body {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
    }

    .pdlLookup__wrapper--directory #pdlSearchResults {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        padding: 8px 16px 16px;
        scrollbar-width: thin;
    }

    .pdlLookup__wrapper--directory #pdlSearchResults::-webkit-scrollbar {
        width: 6px;
    }

    .pdlLookup__wrapper--directory #pdlSearchResults::-webkit-scrollbar-track {
        background-color: var(--cl-neutral-60);
        border-radius: 1rem;
    }

    .pdlLookup__wrapper--directory #pdlSearchResults::-webkit-scrollbar-thumb {
        background-color: #CCCCCC;
        border-radius: 1rem;
    }

    /* The result blocks were spaced for the popup (2rem above the "Result for" line) - tighten in the pane. */
    .pdlLookup__wrapper--directory .pdlResult__container,
    .pdlLookup__wrapper--directory .pdlResultNotFound__wrapper,
    .pdlLookup__wrapper--directory .pdlResultTooMany__wrapper {
        margin-top: 8px;
    }

    .pdlLookup__wrapper--directory .pdlMultiResult__gridWrapper {
        margin-top: 12px;
        max-height: none;
    }
}

/* ---- toolbar: filters left, count right ---- */
.pdlDirectory__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pdlDirectory__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pdlDirectory__count {
    font-size: 12px;
    color: #808080;
    white-space: nowrap;
}

.pdlDirectory__count > strong {
    color: #000000;
    font-weight: 600;
}

/* ---- status chips (custom checkbox + the shared status badge) ---- */
.pdlCheckGroup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.pdlCheckGroup__label {
    font-size: 12px;
    font-weight: 500;
    color: #808080;
}

.pdlCheckGroup__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.pdlCheck {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.pdlCheck__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.pdlCheck__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    background-color: #FFFFFF;
    color: transparent;
    font-size: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pdlCheck__input:checked + .pdlCheck__box {
    background-color: #2A76BD;
    border-color: #2A76BD;
    color: #FFFFFF;
}

.pdlCheck__input:focus-visible + .pdlCheck__box {
    box-shadow: 0 0 0 3px rgba(42, 118, 189, 0.3);
}

.pdlCheck__input:not(:checked) ~ .pdlBadge {
    opacity: 0.55;
}

/* ---- Location filter (country / geo-3 with flags) ---- */
.pdlLocFilter {
    position: relative;
    display: inline-flex;
}

.pdlLocFilter__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: var(--cl-neutral-700);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.pdlLocFilter__trigger:hover,
.pdlLocFilter.open .pdlLocFilter__trigger {
    border-color: #2A76BD;
    color: #2A76BD;
}

.pdlLocFilter__trigger:focus-visible {
    outline: 2px solid #2A76BD;
    outline-offset: 2px;
}

.pdlLocFilter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #2A76BD;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.pdlLocFilter__caret {
    font-size: 10px;
    transition: transform 0.15s ease;
}

.pdlLocFilter.open .pdlLocFilter__caret {
    transform: rotate(180deg);
}

/* Right-anchored: the trigger is the last control on the filter row, so a left-anchored panel
   ran past the card's edge (seen in the browser 2026-09-24). */
.pdlLocFilter__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; /* the trigger is now the first filter: anchor the panel to its left edge */
    z-index: 30;
    display: none;
    flex-direction: column;
    width: 280px;
    max-height: 400px;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pdlLocFilter.open .pdlLocFilter__panel {
    display: flex;
}

.pdlLocFilter__search {
    position: relative;
    flex-shrink: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #E6E6E6;
}

.pdlLocFilter__searchIcon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #808080;
    pointer-events: none;
}

.pdlLocFilter__searchInput {
    width: 100%;
    height: 36px;
    padding: 0 32px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    color: #000000;
    transition: border-color 0.15s ease;
}

.pdlLocFilter__searchInput::placeholder {
    color: #808080;
}

.pdlLocFilter__searchInput:focus {
    outline: none;
    border-color: #2A76BD;
}

.pdlLocFilter__searchClear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #999999;
    font-size: 12px;
    cursor: pointer;
}

.pdlLocFilter__searchClear:hover {
    background-color: var(--cl-neutral-30);
    color: var(--cl-error);
}

.pdlLocFilter__list {
    flex: 1 1 auto;
    max-height: 280px;
    padding: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #CCCCCC var(--cl-neutral-30);
}

.pdlLocFilter__option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pdlLocFilter__option:hover {
    background-color: var(--cl-neutral-30);
}

.pdlLocFilter__option--hidden {
    display: none;
}

/* flag-icon is a 4:3 sprite; the hairline keeps white-field flags visible on the white panel */
.pdlLocFilter__flag {
    flex-shrink: 0;
    width: 20px;
    height: 16px;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
}

.pdlLocFilter__flagFallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 16px;
    font-size: 12px;
    color: #999999;
}

.pdlLocFilter__optionLabel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #000000;
}

.pdlLocFilter__empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 14px;
    color: #808080;
}

.pdlLocFilter__foot {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid #E6E6E6;
}

.pdlLocFilter__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--cl-error);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- map ---- */
.pdlDirectoryMap {
    display: flex;
    flex-direction: column;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    overflow: hidden;
}

/* The atlas SDK measures the host at construction: the height MUST come from here. */
.pdlDirectoryMap__canvas {
    height: 280px;
    background-color: var(--cl-neutral-30);
}

.pdlDirectoryMap__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 8px 12px;
    border-top: 1px solid #E6E6E6;
}

.pdlDirectoryMap__note {
    margin: 0 0 0 auto;
    font-size: 12px;
    color: #808080;
}

.pdlMapLegend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdlMapLegend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #808080;
}

.pdlMapLegend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pdlMapLegend__dot--verified { background-color: var(--pdl-status-verified); }
.pdlMapLegend__dot--requested { background-color: var(--pdl-status-requested); }
.pdlMapLegend__dot--notVerified { background-color: var(--pdl-status-notverified); }

/* Pin popup (rendered by the engine inside the map host; .ip-azure-map-content keeps the product look) */
.pdlMapPopup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    max-width: 260px;
    padding: 4px;
    text-align: left;
}

.pdlMapPopup__title {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.pdlMapPopup__code {
    font-size: 12px;
    color: #808080;
}

.pdlMapPopup__addr {
    font-size: 12px;
    line-height: 1.4;
    color: #808080;
    overflow-wrap: anywhere;
}

.pdlMapPopup__open {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background-color: #004A8B;
    color: #FFFFFF;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- list ---- */
.pdlDirectory__tableWrap {
    max-height: 320px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
}

.pdlDirectory__table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.pdlDirectory__th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--cl-neutral-700);
    background-color: var(--cl-neutral-60);
    border-bottom: 1px solid #E6E6E6;
    white-space: nowrap;
}

.pdlDirectory__cell {
    padding: 8px 12px;
    border-bottom: 1px solid #E6E6E6;
    vertical-align: middle;
    color: #000000;
    white-space: nowrap;
}

.pdlDirectory__row:last-child .pdlDirectory__cell {
    border-bottom: none;
}

.pdlDirectory__row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pdlDirectory__row:hover .pdlDirectory__cell,
.pdlDirectory__row:focus-visible .pdlDirectory__cell {
    background-color: var(--cl-neutral-30);
}

.pdlDirectory__row:focus-visible {
    outline: 2px solid #2A76BD;
    outline-offset: -2px;
}

.pdlDirectory__leadInner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pdlDirectory__openBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #E6E6E6;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #2A76BD;
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdlDirectory__row:hover .pdlDirectory__openBtn,
.pdlDirectory__openBtn:hover {
    background-color: #2A76BD;
    border-color: #2A76BD;
    color: #FFFFFF;
}

.pdlDirectory__leadText {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pdlDirectory__name {
    font-weight: 600;
}

.pdlDirectory__code {
    font-size: 12px;
    color: #808080;
}

.pdlDirectory__state:empty { display: none; }

.pdlDirectory__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 24px 12px;
    text-align: center;
    font-size: 14px;
    color: #808080;
}

/* loading skeleton - same shimmer as the result skeleton */
.pdlDirectory__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.pdlDirectory__skeletonRow {
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--cl-skeleton-base) 25%, var(--cl-skeleton-highlight) 50%, var(--cl-skeleton-base) 75%);
    background-size: 200% 100%;
    animation: pdlSkeletonShimmer 1.4s ease-in-out infinite;
}

/* ---- footer: "Showing N of M" + Show all ---- */
.pdlDirectory__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.pdlDirectory__footCount {
    font-size: 12px;
    color: #808080;
}

.pdlDirectory__showAll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #2A76BD;
    border-radius: 8px;
    background-color: transparent;
    color: #2A76BD;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdlDirectory__showAll:hover,
.pdlDirectory__showAll:focus-visible {
    background-color: #2A76BD;
    color: #FFFFFF;
    outline: none;
}

/* ---- "Show all" grid header inside the wide result panel ---- */
.pdlDirGrid__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.pdlDirGrid__count {
    font-size: 12px;
    color: #808080;
}

/* Tablet / mobile: the login layout stacks the lookup in a FIXED-HEIGHT band above the sign-in
   card (#content-body ~400px, overflow hidden - measured 2026-09-24), so the map + list cannot
   show there. The directory collapses to its count + "Show all", which opens the full list in the
   result popup (a full-screen overlay below 1200px). logon-pdl-directory.js keeps the button
   visible at these widths even when every depot already fits the list. */
@media (max-width: 1200px) {
    .pdlDirectory {
        gap: 8px;
        padding: 12px 16px;
        border-radius: 8px;
    }

    .pdlDirectory__toolbar,
    .pdlDirectory__map,
    .pdlDirectory__list {
        display: none;
    }

    .pdlDirectory__footCount {
        font-size: 14px;
        color: #000000;
    }
}

@media (max-width: 700px) {
    .pdlDirectory {
        padding: 12px;
    }

    .pdlLocFilter__panel {
        width: min(280px, calc(100vw - 32px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdlDirectory__skeletonRow {
        animation: none;
    }
}

/* =========================================================
   Request assessment report - the Depot Assessment flow for anonymous visitors.
   Block: _LookupResult.cshtml (.pdlReport, per found depot). Dialog: Scripts/logon-pdl-report-request.js
   appends .pdlDialog to <body>; z-index 3000 clears the result popup and its backdrop.
   ========================================================= */
.pdlReport {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    background-color: var(--cl-neutral-30);
    text-align: left;
}

.pdlReport__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(42, 118, 189, 0.12);
    color: #2A76BD;
    font-size: 16px;
}

.pdlReport__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pdlReport__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.pdlReport__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #808080;
}

/* Shown instead of the button when nobody would receive the request (Depot Assessment > General > No-recipients note). */
.pdlReport__note {
    margin: 4px 0 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    color: #808080;
}

.pdlReport__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #2A76BD;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #2A76BD;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdlReport__btn:hover,
.pdlReport__btn:focus-visible {
    background-color: #2A76BD;
    color: #FFFFFF;
    outline: none;
}

/* ---- dialog ---- */
.pdlDialog {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.pdlDialog[hidden] { display: none; }
.pdlDialog--open { opacity: 1; pointer-events: auto; }

.pdlDialog__backdrop {
    position: absolute;
    inset: 0;
    background-color: #000000;
    opacity: 0.4;
}

.pdlDialog__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    margin: 0;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    text-align: left;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.2s ease;
}

.pdlDialog--open .pdlDialog__panel { transform: none; }

.pdlDialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #E6E6E6;
}

.pdlDialog__title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-align: left;
}

.pdlDialog__title > i { color: #2A76BD; font-size: 16px; }

.pdlDialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #808080;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdlDialog__close:hover,
.pdlDialog__close:focus-visible { background-color: var(--cl-neutral-30); color: #000000; outline: none; }
.pdlDialog__close:disabled { cursor: default; opacity: 0.5; }

.pdlDialog__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
}

.pdlDialog__intro { margin: 0; font-size: 14px; line-height: 20px; color: var(--cl-neutral-700); }
.pdlDialog__intro strong { color: #000000; font-weight: 600; }

.pdlDialog__field { display: flex; flex-direction: column; gap: 8px; }
/* E-mail field when Depot Assessment > General "Show 'Send confirmation to'" is off - display:flex above beats [hidden]. */
.pdlDialog__field--hidden { display: none; }
.pdlDialog__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.pdlDialog__label {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--cl-neutral-700);
}

.pdlDialog__opt { font-weight: 400; color: #808080; }

.pdlDialog__input,
.pdlTextarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    transition: border-color 0.15s ease;
}

.pdlTextarea { min-height: 96px; resize: vertical; }

.pdlDialog__input:hover,
.pdlTextarea:hover { border-color: #CCCCCC; }
.pdlDialog__input:focus,
.pdlTextarea:focus { border-color: #2A76BD; outline: none; }
.pdlDialog__input::placeholder,
.pdlTextarea::placeholder { color: #808080; }

/* report picker - a radio list styled as selectable rows (no native select) */
.pdlChoice { display: flex; flex-direction: column; gap: 8px; }

.pdlChoice__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pdlChoice__item:hover { border-color: #CCCCCC; }
.pdlChoice__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

.pdlChoice__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pdlChoice__mark > i { opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; }
.pdlChoice__text { font-size: 14px; color: var(--cl-neutral-700); }
.pdlChoice__input:checked ~ .pdlChoice__mark { background-color: #2A76BD; border-color: #2A76BD; }
.pdlChoice__input:checked ~ .pdlChoice__mark > i { opacity: 1; transform: none; }
.pdlChoice__input:checked ~ .pdlChoice__text { color: #000000; font-weight: 600; }
.pdlChoice__item:has(.pdlChoice__input:checked) { border-color: #2A76BD; background-color: var(--cl-neutral-30); }
.pdlChoice__item:has(.pdlChoice__input:focus-visible) { outline: 2px solid #2A76BD; outline-offset: 2px; }

.pdlDialog__challenge { display: flex; flex-direction: column; gap: 8px; }

.pdlDialog__error { margin: 0; padding: 0 24px; font-size: 14px; line-height: 20px; color: var(--cl-error); }
.pdlDialog__error:empty { display: none; }

.pdlDialog__actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 24px; }

.pdlDialog__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pdlDialog__btn--primary { background-color: #004A8B; color: #FFFFFF; }
.pdlDialog__btn--primary:hover:not(:disabled) { opacity: 0.9; }
.pdlDialog__btn--ghost { background-color: transparent; border-color: #CCCCCC; color: var(--cl-neutral-700); }
.pdlDialog__btn--ghost:hover:not(:disabled) { background-color: var(--cl-neutral-30); }
.pdlDialog__btn:disabled { cursor: default; }
.pdlDialog__btn.is-success { background-color: var(--cl-success); border-color: var(--cl-success); color: #FFFFFF; }

@media (max-width: 700px) {
    .pdlDialog { align-items: flex-end; padding: 0; }

    .pdlDialog__panel {
        max-width: none;
        max-height: calc(100vh - 48px);
        border-radius: 12px 12px 0 0;
        transform: translateY(16px);
    }

    .pdlDialog__actions { flex-direction: column-reverse; }
    .pdlDialog__actions .pdlDialog__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pdlDialog,
    .pdlDialog__panel,
    .pdlChoice__item,
    .pdlChoice__mark,
    .pdlChoice__mark > i { transition: none; }
}

/* =========================================================
   Directory UX layer (2026-09-25, ported from the version-03 mock): toolbar tools (count + the
   "Map + list | List" view toggle), "Clear filters", the list-only view, sortable list headers, the
   depot shown in the pane marked in the list, previous / next in the pane bar and the hero's
   Directions link. Driven by logon-pdl-directory.js; the search row lives in depot-lookup.css.
   ========================================================= */
.pdlDirectory__tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.pdlViewToggle {
    display: inline-flex;
    padding: 2px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background-color: var(--cl-neutral-30);
}

.pdlViewToggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #808080;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdlViewToggle__btn:hover {
    color: #000000;
}

.pdlViewToggle__btn--active {
    background-color: #FFFFFF;
    color: #2A76BD;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pdlDirectory__clearFilters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #2A76BD;
    cursor: pointer;
}

.pdlDirectory__clearFilters:hover,
.pdlDirectory__clearFilters:focus-visible {
    background-color: rgba(42, 118, 189, 0.10);
    outline: none;
}

/* list-only view: the map steps aside and the list takes its height, so the card never resizes */
.pdlDirectory--listOnly .pdlDirectory__map {
    display: none;
}

@media (min-width: 1201px) {
    .pdlLookup__wrapper--directory .pdlDirectory--listOnly .pdlDirectory__tableWrap {
        height: 652px; /* 320 list + 280 map canvas + 40 legend + 12 gap */
        max-height: none;
    }
}

@media (min-width: 1201px) and (max-height: 820px) {
    .pdlLookup__wrapper--directory .pdlDirectory--listOnly .pdlDirectory__tableWrap {
        height: 600px; /* the legend is hidden at this height */
        max-height: none;
    }
}

/* sortable list headers (the multi grid's two-arrow UI) */
.pdlDirectory__th--sortable {
    cursor: pointer;
    user-select: none;
}

.pdlDirectory__th--sortable:hover {
    color: #000000;
}

.pdlDirectory__th .pdlMultiResultSort__icons {
    margin-left: 4px;
}

.pdlDirectory__th[aria-sort="ascending"] .fa-long-arrow-alt-up,
.pdlDirectory__th[aria-sort="descending"] .fa-long-arrow-alt-down {
    color: #2A76BD;
}

/* the depot shown in the pane is marked in the list */
.pdlDirectory__row--active .pdlDirectory__cell {
    background-color: rgba(42, 118, 189, 0.08);
}

.pdlDirectory__row--active .pdlDirectory__cell--lead {
    box-shadow: inset 3px 0 0 #2A76BD;
}

.pdlDirectory__row--active .pdlDirectory__openBtn {
    background-color: #2A76BD;
    border-color: #2A76BD;
    color: #FFFFFF;
}

/* pane bar: previous / next */
.pdlDetailPane__nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 4px;
}

.pdlDetailPane__nav.hide {
    display: none;
}

.pdlDetailPane__navBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #E6E6E6;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #808080;
    font-size: 12px;
    cursor: pointer;
}

.pdlDetailPane__navBtn:hover:not(:disabled),
.pdlDetailPane__navBtn:focus-visible {
    border-color: #2A76BD;
    color: #2A76BD;
    outline: none;
}

.pdlDetailPane__navBtn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pdlDetailPane__pos {
    min-width: 48px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #808080;
}

@media (max-width: 1200px) {
    /* the list is collapsed at these widths: nothing for the toggle to switch, nothing to clear */
    .pdlDirectory__tools,
    .pdlDirectory__clearFilters {
        display: none;
    }
}

/* ---- depot list: thin scrollbars + a pinned Depot column (2026-09-25). The table is wider than the
   box whenever the configured grid columns do not fit (widths come from Settings), so the sideways
   scroll keeps the name in view and the bar matches the detail pane's. ---- */
.pdlDirectory__tableWrap {
    scrollbar-width: thin;
    scrollbar-color: #CCCCCC var(--cl-neutral-60);
}

.pdlDirectory__tableWrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.pdlDirectory__tableWrap::-webkit-scrollbar-track {
    background-color: var(--cl-neutral-60);
    border-radius: 1rem;
}

.pdlDirectory__tableWrap::-webkit-scrollbar-thumb {
    background-color: #CCCCCC;
    border-radius: 1rem;
}

.pdlDirectory__tableWrap::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
}

.pdlDirectory__tableWrap::-webkit-scrollbar-corner {
    background-color: var(--cl-neutral-60);
}

.pdlDirectory__th--lead,
.pdlDirectory__cell--lead {
    position: sticky;
    left: 0;
    border-right: 1px solid #E6E6E6;
}

.pdlDirectory__th--lead {
    z-index: 2;
}

.pdlDirectory__cell--lead {
    z-index: 1;
    background-color: #FFFFFF;
}

.pdlDirectory__row:hover .pdlDirectory__cell--lead,
.pdlDirectory__row:focus-visible .pdlDirectory__cell--lead {
    background-color: var(--cl-neutral-30);
}

/* the marked row's pinned cell needs a SOLID tint (a translucent one lets scrolled cells show through) */
.pdlDirectory__row--active .pdlDirectory__cell--lead {
    background-color: color-mix(in srgb, #2A76BD 8%, #FFFFFF);
}

/* ---- joined panel + splitter (2026-09-25): on desktop the directory and the detail pane are ONE white
   panel - directory left, an 8px draggable splitter (#pdlSplitter, grid column 2), pane right. The
   directory's share is --pdl-split on #PDL (percent, default 55, clamped 30-70 by
   logon-pdl-directory.js, remembered in localStorage "pdlDirectorySplit"); each side also keeps a
   280px floor through the minmax() below. Hidden below 1201px, where the popup takes over. ---- */
.pdlSplitter {
    display: none;
}

@media (min-width: 1201px) {
    .pdlLookup__wrapper--directory #PDL_inside > #pdlSplitter {
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        max-height: var(--pdl-dir-max, none);
        background-color: #FFFFFF;
        cursor: col-resize;
        user-select: none;
        touch-action: none;
    }

    .pdlSplitter__grip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 8px;
        height: 48px;
        border-radius: 4px;
        background-color: var(--cl-neutral-60);
        color: #999999;
        font-size: 10px;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .pdlSplitter:hover .pdlSplitter__grip,
    .pdlSplitter:focus-visible .pdlSplitter__grip,
    .pdlSplitter--dragging .pdlSplitter__grip {
        background-color: #2A76BD;
        color: #FFFFFF;
    }

    .pdlSplitter:focus-visible {
        outline: none;
    }

    /* a hairline on each side of the grip reads as the seam between the two halves */
    .pdlLookup__wrapper--directory #PDL_inside > #pdlSplitter::before,
    .pdlLookup__wrapper--directory #PDL_inside > #pdlSplitter::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #E6E6E6;
    }

    .pdlLookup__wrapper--directory #PDL_inside > #pdlSplitter {
        position: relative;
    }

    .pdlLookup__wrapper--directory #PDL_inside > #pdlSplitter::before {
        left: 0;
    }

    .pdlLookup__wrapper--directory #PDL_inside > #pdlSplitter::after {
        right: 0;
    }

    /* while dragging, the map canvas must not swallow the pointer */
    .pdlLookup__wrapper--split-dragging #pdlDirectoryMap,
    .pdlLookup__wrapper--split-dragging #pdlSearchResults {
        pointer-events: none;
    }

    /* the two halves share one rounded outline */
    .pdlLookup__wrapper--directory #PDL_inside > #pdlDirectory {
        border-radius: 12px 0 0 12px;
    }

    .pdlLookup__wrapper--directory #PDL_inside > #pdlDetailPane {
        border-radius: 0 12px 12px 0;
    }
}


/*Title color-profile section from _LayoutLogin*/
.formSwitch__title {
    font-size: 20px;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
    width: 100%;
    border-color: #004A8B;
    color: #004A8B;
    font-weight: 600;
}

/*Forgot Password form*/
.formButton__reset {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #004A8B;
    font-size: 18px;
    color: #FFFFFF;
    height: 40px;
    font-weight: 500;
    margin-top: 1.5rem;
    transition: var(--transition-speed);
}

.formButton__reset:hover,
.formButton__reset:focus {
    box-shadow: inset 0 40px 0 0 #2A76BD;
}

.backToSignIn__wrapper {
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    margin: 1rem 0 2rem;
    color: #808080;
}

.backToSignIn__wrapper span a {
    text-decoration: underline;
    color: #2A76BD !important;
}

.backToSignIn__wrapper span:hover a {
    text-decoration: underline;
    color: #004A8B !important;
    font-weight: 500;
}
/* --- */

@media (max-width: 700px) {
    .formButton__reset {
        min-width: 200px;
    }
}

@media (max-width: 380px) {
    .formButton__reset {
        font-size: 14px;
        height: 32px;
    }
}


.successfulRegister__wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: var(--font-family);
}

.successfulRegister__title {
    font-size: 24px;
    color: #004A8B;
    margin: 0 0 1rem;
    font-weight: 500;
}

.successfulRegister__message {
    margin: 0;
    text-align: center;
    color: #808080;
    font-size: 14px;
    font-weight: 400;
}

.successfulRegister__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    background-color: transparent;
    font-size: 18px;
    color: #2A76BD;
    border: 1px solid #2A76BD;
    height: 40px;
    font-weight: 400;
    transition: var(--transition-speed);
    margin: 2rem 0 0;
}

.successfulRegister__button:hover,
.successfulRegister__button:focus {
    box-shadow: inset 0 -40px 0 0 #004A8B;
    color: #FFFFFF;
    border-color: #004A8B;
}

@media (max-width: 700px) {
    .successfulRegister__button {
        min-width: 200px;
    }
}

@media (max-width: 380px) {
    .successfulRegister__button {
        font-size: 14px;
        height: 32px;
    }

    .successfulRegister__message {
        font-size: 12px;
    }
}

.fpEmailMessage__wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: var(--font-family);
}

.fpEmailMessage__title {
    font-size: 24px;
    color: #004A8B;
    margin: 0 0 1rem;
    font-weight: 500;
}

.fpEmailMessage__message {
    margin: 0;
    text-align: center;
    color: #808080;
    font-size: 12px;
    font-weight: 400;
}

.fpEmailMessage__information {
    text-align: center;
    color: #808080;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 0.5rem;
}

.fpEmailMessage__actionText {
    margin: 0;
    text-align: center;
    color: #2A76BD;
    font-size: 14px;
    font-weight: 500;
}

.fpEmailMessage__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    background-color: transparent;
    font-size: 18px;
    color: #2A76BD;
    border: 1px solid #2A76BD;
    height: 40px;
    font-weight: 400;
    transition: var(--transition-speed);
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fpEmailMessage__button:hover,
.fpEmailMessage__button:focus {
    box-shadow: inset 0 -40px 0 0 #004A8B;
    color: #FFFFFF;
    border-color: #004A8B;
}

@media (max-width: 700px) {
    .fpEmailMessage__button {
        min-width: 200px;
    }
}

@media (max-width: 400px) {
    .fpEmailMessage__message {
        font-size: 8px;
    }

    .fpEmailMessage__information {
        font-size: 12px;
    }

    .fpEmailMessage__title {
        font-size: 1rem;
        margin: 0 auto 0.6rem;
    }

    .fpEmailMessage__button {
        font-size: 14px;
        height: 32px;
    }
}

.mainPolicy__backdrop,
.mainPolicy__wrapper {
    --content-background: var(--background-color, #fff);
    --button-text-color: var(--neutral-0, #fff);
    --neutral-black: var(--neutral-1000, #000);
    --cl-neutral-500: var(--neutral-500, #808080);
    --cl-neutral-black: var(--neutral-1000, #000);
    --grey-100: var(--neutral-100, #e6e6e6);
    /* Skeleton shimmer highlight. Deliberately NOT --button-text-color: the external branding
       pipeline (BaseBranding.ToCssContent) rewrites that literal to the tenant's button-text colour. */
    --skeleton-shine: var(--neutral-0, #fff);
}

/*-- Backdrop overlay --*/
.mainPolicy__backdrop {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(8px) brightness(0.9);
    -webkit-backdrop-filter: blur(8px) brightness(0.9);
    z-index: 10000;
}

.mainPolicy__backdrop--hidden {
    display: none;
}

.mainPolicy__wrapper {
    font-family: var(--font-family);
    position: fixed;
    inset: 0;
    z-index: 10001;
    margin: auto;
    width: 80%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: -4px -4px 8px 0px #FFFFFF, -1px -1px 4px 0px #FFFFFF, 1.5px 1.5px 4px 0px rgba(230, 230, 230, 40%), 4px 4px 8px 0px rgba(230, 230, 230, 60%);
}

.policyButtons__wrapper {
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 24px;
    margin: 0 auto 32px;
    flex-shrink: 0;
    padding: 40px 40px 0;
}

/*-- Modal visibility toggle --*/
.mainPolicy__wrapper--hidden {
    display: none;
}

.mainPolicy__closeButton {
    position: absolute;
    right: 2rem;
    top: 2rem;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0;
    line-height: 0;
}

.mainPolicy__closeButton path {
    stroke: #808080;
}

.mainPolicy__closeButton:hover path,
.mainPolicy__closeButton:focus-visible path {
    stroke: #000000;
}

.policyButton__tab {
    min-width: 200px;
    border: 1px solid;
    border-color: #004A8B;
    color: #000000;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
    border-radius: 0.5rem;
    cursor: pointer;
}

.policyButton__tab-active {
    border-color: #004A8B;
    color: #FFFFFF;
    background-color: #004A8B;
}

.policyButton__tab:hover {
    border-color: #2A76BD;
    color: #FFFFFF;
    background-color: #2A76BD;
}

.policyTitle__wrapper {
    text-align: center;
    margin: 0 0 32px 0;
    padding: 0 40px 0;
    flex-shrink: 0;
}

.policyTitle__text {
    color: #000000;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    padding: 0;
}

/* A fixed 16px row whether it holds text, nothing, or the loading skeleton - so the body below does
   not jump when the date appears. */
.policyTitle__date {
    display: block;
    min-height: 16px;
    color: #808080;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin: 0;
    padding: 0;
}

.policyBody__wrapper {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 40px 40px;
}

/*
 * Body content area is a fixed "white paper" card independent of external branding.
 * Reason: policy bodies come from a rich-text DB field whose inline styles (white
 * paragraph backgrounds, dark text) were authored against a white page. When a tenant
 * picks a dark external-branding palette, the modal frame goes dark but the DB content
 * still paints white-on-white spans, producing visible "stripes" between paragraphs.
 * Fixing the card to white guarantees readability for every branding choice.
 */
.policyBodySections__container {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    scroll-padding-top: 8px;
    padding: 16px;
    background-color: #fff;
    color: #1a1a1a;
    border-radius: 0.5rem;
}

.policyBodySections__container .policyBodySection__title {
    color: #1a1a1a;
}

.policyBodySections__container .policyBodySection__text {
    color: #4a4a4a;
}

.policyBodySections__container::-webkit-scrollbar {
    width: 8px !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .policyBodySections__container::-webkit-scrollbar {
        width: 8px !important;
        background-color: #E6E6E6 !important;
    }
}

.policyBodySections__container::-webkit-scrollbar-track {
    background-color: #f5f5f5 !important;
    -webkit-box-shadow: none !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .policyBodySections__container::-webkit-scrollbar {
        width: 8px !important;
        background-color: #F5F5F5 !important;
    }
}

.policyBodySections__container::-webkit-scrollbar-thumb {
    background-color: #E6E6E6 !important;
    border-radius: 1rem;
}

.policyBodySections__container::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
}

.policyBody__section {
    margin: 0 0 32px 0;
    width: 100%;
}

.policyBody__section:last-child {
    margin-bottom: 0;
}

.policyBodySection__title {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 16px 0;
    padding: 0;
}

.policyBodySection__text {
    color: #808080;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.policyTab__panel {
    display: none;
}

.policyTab__panel-active {
    display: contents;
}

/*-- Loading skeleton ------------------------------------------------------------------
   Shown while a policy loads: the whole modal on the first open (appMain.showPolicyModal ->
   PolicyModalExternal.getShellSkeletonHtml) and the title / body on a tab switch
   (loadPolicyContent). Same shimmer as the consent gate (consent-modal.css). Colours come
   from the aliases on .mainPolicy__wrapper, which carry fallbacks for the login pages. */
.mainPolicy__skeleton {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mainPolicy__skeletonSection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mainPolicy__skeletonBlock {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--grey-100);
}

.mainPolicy__skeletonBlock::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--skeleton-shine) 55%, transparent) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: mainPolicy__skeletonShimmer 1.6s ease-in-out infinite;
    pointer-events: none;
}

/* Real desktop tab = 8px padding x2 + 24px line (body line-height 1.5 at 16px) + 1px borders = 42px. */
.mainPolicy__skeletonBlock--tab {
    width: 200px;
    height: 42px;
    border-radius: 8px;
    flex-shrink: 0;
}

.mainPolicy__skeletonBlock--title {
    width: 280px;
    max-width: 60%;
    height: 24px;
    margin: 0 auto 8px;
}

/* 12px bar + 2px margins = the 16px .policyTitle__date row. */
.mainPolicy__skeletonBlock--date {
    width: 140px;
    max-width: 40%;
    height: 12px;
    margin: 2px auto;
}

.mainPolicy__skeletonBlock--heading {
    width: 40%;
    height: 16px;
    margin-bottom: 4px;
}

.mainPolicy__skeletonBlock--line {
    width: 100%;
    height: 12px;
}

.mainPolicy__skeletonBlock--lineShort {
    width: 70%;
}

@keyframes mainPolicy__skeletonShimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mainPolicy__skeletonBlock::after {
        animation: none;
        display: none;
    }
}

/* Load failure (first open or tab switch). */
.policyBody__error {
    margin: 24px 0;
    color: #808080;
    font-size: 14px;
    text-align: center;
}

/*-- Styles for tablet screen --*/
@media (max-width: 1200px) {
    .mainPolicy__wrapper {
        width: 90%;
        height: 90vh;
    }

    .policyButtons__wrapper {
        gap: 16px;
    }

    .policyBody__wrapper {
        gap: 16px;
    }

    .policyBodySections__container::-webkit-scrollbar {
        width: 6px !important;
    }

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .policyBodySections__container::-webkit-scrollbar {
            width: 6px !important;
            background-color: transparent !important;
        }
    }

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .policyBodySections__container::-webkit-scrollbar {
            width: 6px !important;
            background-color: #F5F5F5 !important;
        }
    }

}

/*-- Styles for mobile screen --*/
@media (max-width: 700px) {
    .policyButtons__wrapper {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: var(--grey-100) #f5f5f5;
        padding: 40px 0 16px;
        margin: 0 24px 32px;
        width: auto;
        /* Must not shrink: overflow-x makes this a scroll container, whose automatic min-height is 0,
           so in the fixed-height column it could be squeezed vertically and clip the tabs. */
        flex-shrink: 0;
        min-width: 0;
    }

    /* The smaller mobile padding (6px, then 4px at <=500px) used to make the tabs visibly shorter;
       min-height keeps them at the design-system button height. */
    .policyButton__tab {
        flex-shrink: 0;
        scroll-snap-align: start;
        white-space: nowrap;
        min-width: 160px;
        min-height: 40px;
        padding: 6px 8px;
    }

    .mainPolicy__skeletonBlock--tab {
        width: 160px;
        height: 40px;
    }

    .policyButtons__wrapper::-webkit-scrollbar {
        height: 6px;
    }

    .policyButtons__wrapper::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        border-radius: 1rem;
    }

    .policyButtons__wrapper::-webkit-scrollbar-thumb {
        background-color: var(--grey-100);
        border-radius: 1rem;
    }

    .policyButtons__wrapper::-webkit-scrollbar-thumb:hover {
        background-color: #808080;
    }

    /* stretch, not the desktop flex-start: the container (height:auto here) must take the body
       row's height so its overflow-y can scroll. With flex-start it grew to its content, overflowed
       the fixed 90vh wrapper and a long policy was cut off with no way to reach the rest. */
    .policyBody__wrapper {
        padding: 0 24px 24px;
        align-items: stretch;
    }

    .policyBodySections__container {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
}

/*-- Styles for extra-small screen --*/
@media (max-width: 500px) {
    /*-- Close button --*/
    .mainPolicy__closeButton {
        right: 1rem;
        top: 1rem;
    }

    .policyButton__tab {
        min-width: 140px;
        padding: 4px 8px;
        font-size: 14px;
    }

    .mainPolicy__skeletonBlock--tab {
        width: 140px;
    }
}