@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: #7ac143;
    --ip-loader-secondary: #0093d0;
    /*-----------------*/
    /*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 {
    width: 8px !important;
    height: 4px !important;
}

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

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

.bodyLeftPart__wrapper::-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 {
        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 {
    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: #7ac143;
}

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

/*.navBrandImage__container {
    display: none !important;
}*/

.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: #0093d0;
    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: #7ac143;
    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 #0093d0;
}

.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: #7ac143;
    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 #0093d0;
}

.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: #7ac143;
    color: #7ac143;
    font-weight: 600;
}

.formSwitch__btn {
    border-color: #E6E6E6;
}

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

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

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

.formInput__title.focus {
    color: #0093d0 !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: #7ac143;
}

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

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

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

.formInput__field:focus {
    border-color: #0093d0 !important;
}

.formInput__field:focus::placeholder {
    color: #0093d0;
}

.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: #0093d0 !important;
}

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

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

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: #7ac143 !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: #7ac143;
    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 #0093d0;
}
/*---*/

@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: #7ac143;
    color: #7ac143;
    cursor: pointer;
}

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

.dropdown__btn--active {
    border-color: #0093d0;
    color: #0093d0;
    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: #7ac143;
}

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

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

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

.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: #0093d0;
    border-color: #0093d0;
}

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

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

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

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

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

.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: #0093d0 !important;
}

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

a.acceptRules__link:focus,
a.acceptRules__link:focus-visible,
a.acceptRules__link:active {
    color: #0093d0 !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: #0093d0;
    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 #7ac143;
}

@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, 96, 135, 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: #0093d0;
    padding: 0 0.5rem;
}

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

.containerLookup__input:hover {
    border-color: #0093d0;
}

.containerLookup__input:hover::placeholder {
    color: #0093d0;
}

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

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

.containerLookup__button {
    width: 100%;
    min-width: 300px;
    border-radius: 0.5rem;
    border: 1px solid;
    background-color: #003349;
    border-color: #003349;
    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 #0093d0;
    border-color: #0093d0;
}

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


#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: #0093d0 !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: #0093d0;
    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: #0093d0;
}

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

.clAttachmentButton__icon {
    margin: auto;
}

.clAttachment__btn:hover {
    background-color: rgba(0, 147, 208,0.05);
    cursor: pointer;
    border-color: #0093d0;
}

.clAttachment__btn:hover > .clAttachmentButton__icon > path,
.clAttachment__btn:hover > .clAttachmentButton__icon > line {
    stroke: #0093d0;
}

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


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

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

.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: #0093d0 !important;
}

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

@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: #7ac143;
    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: #0093d0;
    font-size: 14px;
    font-weight: 500;
}

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

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