@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: #7FBC03;
    --ip-loader-secondary: #218DCD;
    /*-----------------*/
    /*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-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-black: #000; /*Main text*/
    --cl-button-text-color: white; /*Button text*/
}

.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: #7FBC03;
}

.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/20260612162900751-bb3c759c/dev_seacube-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/*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/20260612162900751-bb3c759c/dev_seacube-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: #218DCD;
    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: #7FBC03;
    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 #218DCD;
}

.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: #7FBC03;
    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 #218DCD;
}

.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%;
}

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

.formSwitch__btn {
    border-color: #E6E6E6;
}

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

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

.formSwitch__btn:has(span:hover) {
    border-color: #218DCD;
}
/*---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: #7FBC03;
}

.formInput__title.focus {
    color: #218DCD !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: #7FBC03;
}

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

.formInput__field:hover {
    border-color: #7FBC03;
}

.formInput__field:hover::placeholder {
    color: #7FBC03;
}

.formInput__field:focus {
    border-color: #218DCD !important;
}

.formInput__field:focus::placeholder {
    color: #218DCD;
}

.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: #218DCD !important;
}

span.forgetPassword__link > a:hover {
    color: #7FBC03 !important;
}

.formButton__signIn {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #7FBC03;
    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 #218DCD;
}

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: #7FBC03 !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: #7FBC03;
    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 #218DCD;
}
/*---*/

@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;
    }
}


.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: #7FBC03;
    color: #7FBC03;
    cursor: pointer;
}

.dropdown__btn:hover svg path {
    stroke: #7FBC03;
}

.dropdown__btn--active {
    border-color: #218DCD;
    color: #218DCD;
    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: #7FBC03;
}

.dropdown__wrapper ul li:hover input + span {
    color: #7FBC03;
}

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

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

.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: #218DCD;
    border-color: #218DCD;
}

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

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

.dropdown__wrapper input:focus-visible {
    outline: 2px solid #7FBC03;
    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: #7FBC03;
    cursor: pointer;
}

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

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: #218DCD !important;
}

a.acceptRules__link:hover {
    cursor: pointer;
    color: #7FBC03 !important;
}

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

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

.formbutton__signUp {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #218DCD;
    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 #7FBC03;
}

@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(0, 109, 155, 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__btn__hidden {
    display: none !important;
}

.containerLookup__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 auto 1rem;
    padding: 0;
}

.containerLookup__description {
    margin: 0 auto 2rem;
}

.containerLookup__description > p {
    text-align: center;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 1rem;
    font-weight: 400;
}

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

.containerLookupInput__wrapper {
    margin: 0 auto 2rem;
}

.containerLookup__input {
    width: 100%;
    box-shadow: none !important;
    border: 2px 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: #218DCD;
    padding: 0 0.5rem;
}

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

.containerLookup__input:hover {
    border-color: #218DCD;
}

.containerLookup__input:hover::placeholder {
    color: #218DCD;
}

.containerLookup__input:focus {
    border-color: #7FBC03 !important;
}

.containerLookup__input:focus::placeholder {
    color: #7FBC03;
}

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

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

/* 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;
    }
}

/* Inline warning banner (e.g. over-limit truncation) — shown above the results.
   Semantic amber palette hardcoded: no --cl-warning token exists in the theme vars. */
.warningMsg__wrapper {
    margin: 8px auto 0;
    padding: 6px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 0.5rem;
}

/* ==========================================================================
   Tokenfield skin — bootstrap-tokenfield restyled to the container-lookup
   design (vendor css is temp, moving to static storage; this skin is app-owned)
   Vendor file: bootstrap-tokenfield.min.css loaded before this file.
   Specificity strategy: double-class selectors (.containerLookup__tokenfield.tokenfield)
   beat vendor single-class rules without !important in most cases.
   !important used only where vendor sets the property at equal or higher specificity.
   ========================================================================== */

/* Wrapper — mirrors .containerLookup__input box geometry */
.containerLookup__tokenfield.tokenfield {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #E6E6E6;
    border-radius: 0.5rem;
    min-width: 300px;
    min-height: 40px;
    background-color: #FFFFFF !important; /* vendor sets background on .tokenfield */
    padding: 4px 0.5rem;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #000000;
    cursor: text;
    /* vendor uses inline-block tokens; don't override display to flex — keep flow layout */
    height: auto !important; /* override any fixed-height vendor rule */
    box-shadow: none !important;
    line-height: 1.4;
}

/* Hover — mirrors .containerLookup__input:hover */
.containerLookup__tokenfield.tokenfield:hover {
    border-color: #218DCD;
}

/* Focus — mirrors .containerLookup__input:focus */
.containerLookup__tokenfield.tokenfield.focus {
    border-color: #7FBC03 !important; /* vendor may set border on .tokenfield.focus */
    box-shadow: none !important;
    outline: none;
}

/* Invalid state — parallel to .containerLookup__input.invalid */
.containerLookup__tokenfield.tokenfield.invalid {
    border-color: #c0392b !important; /* no --cl-error var in this file; closest semantic */
}

/* Token chip */
.containerLookup__tokenfield.tokenfield .token {
    display: inline-flex;
    align-items: center;
    background-color: #E6E6E6 !important; /* vendor sets background; need !important */
    border: 1px solid #218DCD;
    border-radius: 4px;
    padding: 2px 6px;
    margin: 2px 3px 2px 0;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    color: #000000 !important;
    line-height: 1.5;
    vertical-align: middle;
    max-width: none; /* don't clip 11-char container IDs */
}

/* Token hover */
.containerLookup__tokenfield.tokenfield .token:hover {
    background-color: #114767 !important;
    border-color: #7FBC03;
    color: #FFFFFF !important;
    transition: var(--transition-speed);
}

/* Token label — no truncation for short IDs, vertically centered */
.containerLookup__tokenfield.tokenfield .token .token-label {
    display: inline-block;
    vertical-align: middle;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

/* Token × (close button) — vendor uses Bootstrap .close which may be globally reset */
.containerLookup__tokenfield.tokenfield .token .close {
    float: none !important;       /* vendor/Bootstrap sets float:right */
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1;
    margin-left: 5px;
    color: #808080;
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
    font-weight: 700;
    background: transparent !important;
    border: none !important;
    padding: 0;
}

.containerLookup__tokenfield.tokenfield .token .close:hover {
    color: #000000;
    opacity: 1;
}

/* Token result states — applied by markPclTokens() after a multi-lookup.
   Semantic green/red hardcoded: no success/error tokens exist in the theme vars
   (same precedent as .warningMsg__wrapper). Hover tooltip via native title attr. */
.containerLookup__tokenfield.tokenfield .token.token--found {
    background-color: #e6f4eb !important;
    border-color: #2e7d46;
    color: #1e5631 !important;
    cursor: pointer; /* click opens the unit's detail view */
}

.containerLookup__tokenfield.tokenfield .token.token--found .token-label::before {
    content: "\2713"; /* ✓ */
    margin-right: 4px;
    font-weight: 700;
    color: #2e7d46;
}

.containerLookup__tokenfield.tokenfield .token.token--notFound {
    background-color: #fdecea !important;
    border-color: #c0392b;
    color: #922b21 !important;
    cursor: help;
}

.containerLookup__tokenfield.tokenfield .token.token--notFound .token-label::before {
    content: "\2715"; /* ✕ */
    margin-right: 4px;
    font-weight: 700;
    color: #c0392b;
}

/* Keep the state colors on hover — found/not-found must not invert like neutral chips */
.containerLookup__tokenfield.tokenfield .token.token--found:hover {
    background-color: #d8eedf !important;
    border-color: #2e7d46;
    color: #1e5631 !important;
}

.containerLookup__tokenfield.tokenfield .token.token--notFound:hover {
    background-color: #fbdedb !important;
    border-color: #c0392b;
    color: #922b21 !important;
}

/* Visible typing input inserted by the plugin */
.containerLookup__tokenfield.tokenfield .token-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #000000;
    caret-color: #218DCD;
    padding: 0;
    min-width: 120px; /* keep placeholder readable; plugin overrides width via JS, leave it */
    vertical-align: middle;
    line-height: 1.4;
}

.containerLookup__tokenfield.tokenfield .token-input::placeholder {
    color: #808080;
    opacity: 1;
    font-weight: 400;
}

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

@media (max-width: 400px) {
    .containerLookup__tokenfield.tokenfield {
        font-size: 12px;
    }

    .containerLookup__tokenfield.tokenfield .token {
        font-size: 11px;
    }

    .containerLookup__tokenfield.tokenfield .token-input {
        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;
}

.clSearchResult__wrapper::-webkit-scrollbar {
    width: 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 {
    background-color: #f0f0f0 !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: #f0f0f0 !important; /* Field below scrollbar */
    }
}

.clSearchResult__wrapper::-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 {
    cursor: pointer;
}

.clSearchResult__wrapper > .containerLookup__title {
    color: #218DCD !important;
}

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

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

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

.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: #d00000;
    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: 19.2px;
}

.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: 14.4px;
}

.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: 16.8px;
}

.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: 19.2px;
}

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: 19.2px;
}

.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: 19.2px;
}

.clResultAttachmentFile__name:hover {
    text-decoration: underline;
    color: #218DCD;
}

.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: 14.4px;
}

.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;
}

.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: #7FBC03;
}

.clAttachmentButton__icon {
    margin: auto;
}

.clAttachment__btn:hover {
    background-color: rgba(33, 141, 205,0.05);
    cursor: pointer;
    border-color: #218DCD;
}

.clAttachment__btn:hover > .clAttachmentButton__icon > path,
.clAttachment__btn:hover > .clAttachmentButton__icon > line {
    stroke: #218DCD;
}

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

.closeButton path {
    stroke: #808080;
}

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

@media(max-width:1200px) {
    .clSearchResult__wrapper {
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 14;
    }

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

    .blur-background.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;
        border-radius: 0;
        height: 100vh;
    }

    .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;
    }

    .closeButton {
        right: 0.5rem;
    }
}

/* ============================================================
   Multi-container lookup result — grid, not-found, back-link
   New CSS variables introduced in this block:
     --cl-row-hover-bg   : rgba(--cl-secondary-color-rgb, 0.06) tint for row hover
   ============================================================ */

:root {
    --cl-row-hover-bg: rgba(33, 141, 205, 0.06);
}

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

/* Header — mirrors .clResult__container sizing/colors */
.clMultiResult__header {
    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: 19.2px;
}

/* Scrollable grid container */
.clMultiResult__gridWrapper {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 8px;
}

/* Table */
.clMultiResult__grid {
    width: 100%;
    /* Let the table outgrow the wrapper when admin-configured columns demand it —
       the wrapper's overflow-x:auto then shows a horizontal scrollbar only when needed
       (with width:100% alone the cells just wrap and the table can never overflow) */
    min-width: max-content;
    border-collapse: collapse;
    font-size: 13px;
}

.clMultiResult__grid thead th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #808080;
    border-bottom: 1px solid #E6E6E6;
    background: transparent;
    white-space: nowrap;
}

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

/* Row interactions */
.clMultiResultRow {
    cursor: pointer;
    transition: background-color 150ms ease;
}

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

/* Actions column */
.clMultiResultRow__actions {
    text-align: right;
    width: 48px;
}

.clMultiResultRow__actionBtn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    color: #808080;
    transition: background-color 150ms ease, color 150ms ease;
}

.clMultiResultRow__actionBtn:hover {
    background-color: #E6E6E6;
    color: #7FBC03;
}

.clMultiResult__actionsHeader {
    width: 60px;
    text-align: right;
}

/* Not-found card */
.clMultiResult__notFound {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    background: #E6E6E6;
}

.clMultiResult__notFoundTitle {
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

.clMultiResult__notFoundList {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.clMultiResult__notFoundChip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    font-size: 12px;
    font-family: monospace, system-ui;
    color: #000000;
}

/* Detail panel (single-result drill-down) */
.clMultiResult__detail {
    padding-top: 8px;
}

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

.clMultiResultBackToGrid__link:hover {
    text-decoration: underline;
}

/* ============================================================
   Responsive — small screens
   ============================================================ */

@media (max-width: 700px) {
    .clMultiResult__grid {
        font-size: 12px;
    }

    .clMultiResult__grid thead th,
    .clMultiResult__grid tbody td {
        padding: 6px 8px;
    }
}

/* ============================================================
   PCL Skeleton loading placeholder — BEM block: pclSkeleton
   Shown inside #searchResults while the AJAX request is in
   flight. Self-contained: no external CSS variable deps beyond
   what is defined in styles.css :root (all cl-* tokens).
   ============================================================ */

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

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

/* Shimmer base — applied to every leaf shimmer element */
.pclSkeleton__title,
.pclSkeleton__sectionTitle,
.pclSkeleton__label,
.pclSkeleton__value,
.pclSkeleton__cell,
.pclSkeleton__divider {
    background: linear-gradient(
        90deg,
        #e8e8e8 25%,
        #f5f5f5 50%,
        #e8e8e8 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: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

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

.pclSkeleton__label {
    height: 11px;
    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;
}

/* Cell width variants */
.pclSkeleton__cell {
    height: 14px;
    flex-shrink: 0;
}

.pclSkeleton__cell--sm {
    width: 10%;
}

.pclSkeleton__cell--md {
    width: 22%;
}

.pclSkeleton__cell--lg {
    width: 35%;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .pclSkeleton__pairs {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .pclSkeleton__pairs {
        grid-template-columns: 1fr;
    }

    .pclSkeleton__title {
        width: 75%;
    }

    .pclSkeleton__cell--lg {
        width: 45%;
    }
}

@media (max-width: 400px) {
    .pclSkeleton__cell--md {
        display: none;
    }

    .pclSkeleton__cell--lg {
        width: 60%;
    }
}

/* 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: #e8e8e8;
    }
}


/*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: #7FBC03;
    color: #7FBC03;
    font-weight: 600;
}

/*Forgot Password form*/
.formButton__reset {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: none;
    background-color: #7FBC03;
    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 #218DCD;
}

.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: #218DCD !important;
}

.backToSignIn__wrapper span:hover a {
    text-decoration: underline;
    color: #7FBC03 !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: #7FBC03;
    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: #218DCD;
    border: 1px solid #218DCD;
    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 #7FBC03;
    color: #FFFFFF;
    border-color: #7FBC03;
}

@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: #7FBC03;
    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: #218DCD;
    font-size: 14px;
    font-weight: 500;
}

.fpEmailMessage__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    background-color: transparent;
    font-size: 18px;
    color: #218DCD;
    border: 1px solid #218DCD;
    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 #7FBC03;
    color: #FFFFFF;
    border-color: #7FBC03;
}

@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;
    }
}

/*-- 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: 999;
}

.mainPolicy__backdrop--hidden {
    display: none;
}

.mainPolicy__wrapper {
    font-family: var(--font-family);
    position: fixed;
    inset: 0;
    z-index: 1000;
    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: #7FBC03;
    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: #7FBC03;
    color: #FFFFFF;
    background-color: #7FBC03;
}

.policyButton__tab:hover {
    border-color: #218DCD;
    color: #FFFFFF;
    background-color: #218DCD;
}

.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;
}

.policyTitle__date {
    color: #808080;
    font-size: 12px;
    font-weight: 400;
    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;
}

/*-- 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;
        flex-shrink: 1;
        min-width: 0;
    }

    .policyButton__tab {
        flex-shrink: 0;
        scroll-snap-align: start;
        white-space: nowrap;
        min-width: 160px;
        padding: 6px 8px;
    }

    .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;
    }

    .policyBody__wrapper {
        padding: 0 24px 24px;
    }

    .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;
    }
}



.logoPage2{ }