﻿#drop-down-language {
    background: #EBEDF0;
    border-radius: 73.52px;
    padding-right: 7px;
}

.dx-dropdownbutton-action {
    font-weight: 600;
}

#drop-down-language .dx-button-normal.dx-state-hover {
    background: unset !important;
    border-radius: unset !important;
}

#drop-down-language .dx-buttongroup-item.dx-button.dx-button-mode-text.dx-state-focused {
    background-color: transparent !important;
}

#drop-down-language .dx-button-mode-text .dx-icon {
    color: #00AEEF !important;
}

#main-jtr-business {
    margin-top: 44px;
    margin-left: 142.05px;
}

#main-content-auth {
    height: calc(100vh - 180px) !important;
}

/* Container to center the box */
.shape-content-auth {
    display: flex;
    justify-content: center;
    /* horizontal centering */
    align-items: center;
    /* vertical centering */
    height: calc(100vh - 180px);
    /* full viewport height */
}

/* Outer container */
.outer-box {
    display: inline-flex;
    width: 850px;
    height: 586px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 16px 0 16px 16px;
}

/* Left and Right boxes */
.left-box,
.right-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.right-box {
    width: 400px;
}

.left-box {
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
    height: 554px;
}

.left-box-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 14px;
    background: var(--Gradient-04, linear-gradient(180deg, #00AEEF 0%, #08142C 100%));
    backdrop-filter: blur(50px);
}

.brand-banner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 44px;
}

.dad-auth-banner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 44px;
}

.dad-auth-form-title {
    color: #FFFFFF;

    /* Title */
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    /* 116.667% */
    letter-spacing: 0.35px;
    text-transform: capitalize;
}

.dad-background-run-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border-radius: 100px;
    background: rgba(0, 174, 239, 0.2);
    border: 1px solid rgba(5, 176, 239, 0.8);
    overflow: hidden;
    margin-bottom: 16px;
}

.dad-background-run-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0.35;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
    animation: badge-sweep 2.6s ease-in-out infinite;
    pointer-events: none;
}

.dad-auth-form-title-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.35px;
    text-transform: capitalize;
    color: #ffffff;
    white-space: nowrap;
}

.dad-auth-form-title-loading img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

@keyframes badge-sweep {
    0% {
        transform: translateX(-80px);
    }

    100% {
        transform: translateX(calc(100% + 80px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dad-background-run-text::before {
        animation: none;
        display: none;
    }
}

.activation-check-circle-icon {
    border-radius: 36px;
    background: linear-gradient(180deg, var(--Secondary-Green-Green, rgba(31, 183, 106, 0.10)) 0%, var(--Secondary-Green-100, rgba(31, 183, 106, 0.01)) 100%);
    display: flex;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
}

.activation-shield-lock-icon {
    display: flex;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
    border-radius: 36px;
    background: linear-gradient(180deg, var(--Primary-Light-Blue-Primary, rgba(0, 174, 239, 0.10)) 0%, var(--Primary-Light-Blue-100, rgba(0, 174, 239, 0.01)) 100%);
}

.ready-sign-in {
    color: var(--Primary-Dark-Dark-Navy, #08142C);
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    /* 116.667% */
    letter-spacing: 0.35px;
    margin-top: 24px;
}

.activation-description {
    color: var(--Primary-Dark-600, rgba(8, 20, 44, 0.60));
    text-align: center;

    /* Body Small */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    /* 135.714% */
    letter-spacing: 0.35px;
    margin-top: 12px;
    margin-bottom: 24px;
}

.dad-auth-form-description {
    color: rgba(255, 255, 255, 0.80);

    /* Body Small */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    /* 135.714% */
    letter-spacing: 0.35px;
    margin: 0 !important;
}

.progress-pills {
    width: 120px;
    padding: 4px;
    background: var(--pill-track, rgba(0, 174, 239, 0.10));
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    /* parent needs display: block or the pills div needs display: block */
    display: flex;
    margin-top: 24px;
}

.pill {
    flex: 1 1 0;
    height: 4px;
    border-radius: 12px;
    background: var(--pill-inactive, rgba(0, 174, 239, 0.30));
    transition: background-color 0.2s ease;
}

.pill.is-active {
    background: var(--pill-active, #00AEEF);
}

.brand-eyebrow {
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    /* 138.462% */
    letter-spacing: 0.35px;
    background: var(--Gradient-02, linear-gradient(180deg, #00AEEF 0%, #0075C2 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.brand-heading {
    color: var(--Accent-White-800, rgba(255, 255, 255, 0.80));

    /* Bold - Headline 3 */
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    /* 127.273% */
    letter-spacing: 0.35px;
    text-transform: capitalize;
}

.left-box-scan,
.right-box-scan {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.left-box-scan {
    /*    background: linear-gradient(179.98deg, #00ADEF 0.01%, #08142C 99.99%);*/
    background-color: #FFFFFF;
    border-top-left-radius: 42px;
    border-bottom-left-radius: 42px;
    position: relative;
}

.right-box {
    background-color: #FFFFFF;
    border-top-right-radius: 42px;
    border-bottom-right-radius: 42px;
    display: block;
    position: relative;
}

.right-box-scan {
    background-color: #FFFFFF;
    border-top-right-radius: 42px;
    border-bottom-right-radius: 42px;
    display: block;
}

#img-jtrb-logo {
    width: 237px;
    height: 30.78px;
}

.dx-texteditor-input {
    padding: 7px 12px 8px !important;
}

/* .dx-placeholder {
    left: 3px !important;
} */

.title-jtr-business {
    height: 64px;
    width: auto;
}

.button-forgot-password {
    position: absolute;
    margin-bottom: 24px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-weight: 500;
    font-size: 13px;
    line-height: 175%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    background: transparent;
    color: #7b828e;
    border: unset;
}

.content-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 100px;
    padding-bottom: 100px;
    height: -webkit-fill-available;
}

.title-sign-in {
    font-weight: 600;
    font-size: 32px;
    line-height: 175%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.button-submit-auth {
    border-radius: 8px;
    font: 13.07px;
}

.button-submit-auth.dx-state-disabled {
    border-radius: 10px;
    opacity: 0.4;
    background: linear-gradient(135deg, #00ADEF 0%, #0075C2 100%);
    color: #FFFFFF !important;
    border-color: unset !important;
}

.button-submit-auth:not(.dx-state-disabled) {
    border-radius: 10px;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #00ADEF 0%, #0075C2 100%) !important;
    border-color: unset !important;
}

#button-sign-in,
#button-continue {
    margin-top: 24px;
}

.group-remember {
    margin-top: 0.3rem;
    margin-bottom: 0.7rem;
}

.user-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    font-size: 16px;
}

.user-id {
    font-size: 14px;
    opacity: 0.7;
}

.error-message {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    display: none;
    text-align: left;
}

.error-message.remaining-attempts {
    background: rgba(255, 128, 0, 0.05);
    display: block;
}

.error-message.account-locked {
    background: rgba(253, 70, 59, 0.05);
    display: block;
}

.remaining-attempts .error-message-title::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 128, 0, 0.10);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    margin-right: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cmask id=%27mask0_8982_244%27 style=%27mask-type:alpha%27 maskUnits=%27userSpaceOnUse%27 x=%270%27 y=%270%27 width=%2716%27 height=%2716%27%3E%3Crect width=%2716%27 height=%2716%27 fill=%27%23D9D9D9%27/%3E%3C/mask%3E%3Cg mask=%27url(%23mask0_8982_244)%27%3E%3Cpath d=%27M8.55659 11.2446C8.70692 11.0948 8.78209 10.9092 8.78209 10.6879C8.78209 10.4666 8.70725 10.28 8.55759 10.1282C8.40781 9.97658 8.2222 9.90074 8.00075 9.90074C7.77942 9.90074 7.59359 9.97658 7.44325 10.1282C7.29292 10.28 7.21775 10.4666 7.21775 10.6879C7.21775 10.9092 7.29259 11.0948 7.44225 11.2446C7.59203 11.3944 7.77764 11.4692 7.99909 11.4692C8.22042 11.4692 8.40625 11.3944 8.55659 11.2446ZM8.53875 8.45541C8.68509 8.30907 8.75825 8.12952 8.75825 7.91674V5.34174C8.75825 5.12896 8.68509 4.94935 8.53875 4.80291C8.39231 4.65658 8.2127 4.58341 7.99992 4.58341C7.78714 4.58341 7.60753 4.65658 7.46109 4.80291C7.31475 4.94935 7.24159 5.12896 7.24159 5.34174V7.91674C7.24159 8.12952 7.31475 8.30907 7.46109 8.45541C7.60753 8.60185 7.78714 8.67508 7.99992 8.67508C8.2127 8.67508 8.39231 8.60185 8.53875 8.45541ZM7.99992 14.8026C7.05648 14.8026 6.17125 14.6241 5.34425 14.2672C4.51714 13.9104 3.7977 13.4261 3.18592 12.8144C2.57425 12.2026 2.08998 11.4832 1.73309 10.6561C1.3762 9.82907 1.19775 8.94385 1.19775 8.00041C1.19775 7.05696 1.3762 6.17174 1.73309 5.34474C2.08998 4.51763 2.57425 3.79819 3.18592 3.18641C3.7977 2.57474 4.51714 2.09046 5.34425 1.73358C6.17125 1.37669 7.05648 1.19824 7.99992 1.19824C8.94336 1.19824 9.82859 1.37669 10.6556 1.73358C11.4827 2.09046 12.2021 2.57474 12.8139 3.18641C13.4256 3.79819 13.9099 4.51763 14.2668 5.34474C14.6236 6.17174 14.8021 7.05696 14.8021 8.00041C14.8021 8.94385 14.6236 9.82907 14.2668 10.6561C13.9099 11.4832 13.4256 12.2026 12.8139 12.8144C12.2021 13.4261 11.4827 13.9104 10.6556 14.2672C9.82859 14.6241 8.94336 14.8026 7.99992 14.8026ZM7.99992 13.2859C9.47814 13.2859 10.7286 12.7746 11.7514 11.7519C12.7741 10.7291 13.2854 9.47863 13.2854 8.00041C13.2854 6.52219 12.7741 5.27169 11.7514 4.24891C10.7286 3.22624 9.47814 2.71491 7.99992 2.71491C6.5217 2.71491 5.2712 3.22624 4.24842 4.24891C3.22575 5.27169 2.71442 6.52219 2.71442 8.00041C2.71442 9.47863 3.22575 10.7291 4.24842 11.7519C5.2712 12.7746 6.5217 13.2859 7.99992 13.2859Z%27 fill=%27%23FF8000%27/%3E%3C/g%3E%3C/svg%3E");
}

.account-locked .error-message-title::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(253, 70, 59, 0.10);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    margin-right: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cmask id=%27mask0_8982_172%27 style=%27mask-type:alpha%27 maskUnits=%27userSpaceOnUse%27 x=%270%27 y=%270%27 width=%2716%27 height=%2716%27%3E%3Crect width=%2716%27 height=%2716%27 fill=%27%23D9D9D9%27/%3E%3C/mask%3E%3Cg mask=%27url(%23mask0_8982_172)%27%3E%3Cpath d=%27M8.55659 11.2446C8.70692 11.0948 8.78209 10.9092 8.78209 10.6879C8.78209 10.4666 8.70725 10.28 8.55759 10.1282C8.40781 9.97658 8.2222 9.90074 8.00075 9.90074C7.77942 9.90074 7.59359 9.97658 7.44325 10.1282C7.29292 10.28 7.21775 10.4666 7.21775 10.6879C7.21775 10.9092 7.29259 11.0948 7.44225 11.2446C7.59203 11.3944 7.77764 11.4692 7.99909 11.4692C8.22042 11.4692 8.40625 11.3944 8.55659 11.2446ZM8.53875 8.45541C8.68509 8.30907 8.75825 8.12952 8.75825 7.91674V5.34174C8.75825 5.12896 8.68509 4.94935 8.53875 4.80291C8.39231 4.65658 8.2127 4.58341 7.99992 4.58341C7.78714 4.58341 7.60753 4.65658 7.46109 4.80291C7.31475 4.94935 7.24159 5.12896 7.24159 5.34174V7.91674C7.24159 8.12952 7.31475 8.30907 7.46109 8.45541C7.60753 8.60185 7.78714 8.67508 7.99992 8.67508C8.2127 8.67508 8.39231 8.60185 8.53875 8.45541ZM7.99992 14.8026C7.05648 14.8026 6.17125 14.6241 5.34425 14.2672C4.51714 13.9104 3.7977 13.4261 3.18592 12.8144C2.57425 12.2026 2.08998 11.4832 1.73309 10.6561C1.3762 9.82907 1.19775 8.94385 1.19775 8.00041C1.19775 7.05696 1.3762 6.17174 1.73309 5.34474C2.08998 4.51763 2.57425 3.79819 3.18592 3.18641C3.7977 2.57474 4.51714 2.09046 5.34425 1.73358C6.17125 1.37669 7.05648 1.19824 7.99992 1.19824C8.94336 1.19824 9.82859 1.37669 10.6556 1.73358C11.4827 2.09046 12.2021 2.57474 12.8139 3.18641C13.4256 3.79819 13.9099 4.51763 14.2668 5.34474C14.6236 6.17174 14.8021 7.05696 14.8021 8.00041C14.8021 8.94385 14.6236 9.82907 14.2668 10.6561C13.9099 11.4832 13.4256 12.2026 12.8139 12.8144C12.2021 13.4261 11.4827 13.9104 10.6556 14.2672C9.82859 14.6241 8.94336 14.8026 7.99992 14.8026ZM7.99992 13.2859C9.47814 13.2859 10.7286 12.7746 11.7514 11.7519C12.7741 10.7291 13.2854 9.47863 13.2854 8.00041C13.2854 6.52219 12.7741 5.27169 11.7514 4.24891C10.7286 3.22624 9.47814 2.71491 7.99992 2.71491C6.5217 2.71491 5.2712 3.22624 4.24842 4.24891C3.22575 5.27169 2.71442 6.52219 2.71442 8.00041C2.71442 9.47863 3.22575 10.7291 4.24842 11.7519C5.2712 12.7746 6.5217 13.2859 7.99992 13.2859Z%27 fill=%27%23FD463B%27/%3E%3C/g%3E%3C/svg%3E");
}

.remaining-attempts .error-message-title {
    color: #FF8000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0.35px;
}

.account-locked .error-message-title {
    color: #FD463B;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0.35px;
}

.error-message-description {
    color: #08142C;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.35px;
    margin: 8px 0 0 0;
}

#button-icon-view-password,
#button-icon-view-confirm-password {
    margin-right: 5px;
    background: transparent !important;
    box-shadow: unset !important;
}

#button-icon-user-id,
#button-icon-date-of-birth,
#button-icon-phone-number,
#button-icon-password,
#button-icon-view-password,
#button-icon-view-confirm-password {
    border: unset !important;
}

.dx-texteditor-buttons-container>.dx-button.dx-button-has-icon:not(.dx-button-has-text)>.dx-button-content {
    padding: 0 8px 0 11px;
}

.dad-form .dx-texteditor-input {
    padding: 7px 0px 8px !important;
}

.dad-form .dx-placeholder::before {
    padding: 7px 0px 8px;
}

#button-submit-forgot-password {
    margin-top: 22.87px;
}

/* Extra large */
@media (max-width: 1400px) {
    #main-jtr-business {
        margin-top: 10px;
    }

    .shape-content-auth {
        height: unset;
    }

    .content-body {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .left-box {
        padding: 32px 40px;
    }

    .brand-heading {
        font-size: 22px;
        max-width: 260px;
    }

    .footer {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 8px !important;
        width: 100% !important;
        transform: none !important;
    }
}

/* Short viewport (any width): real browser windows are shorter than the
   physical screen once chrome/taskbar are subtracted, so the fixed-height
   #main-content-auth + absolutely-positioned .footer can overlap the card. */
@media (max-height: 800px) {
    #main-jtr-business {
        margin-top: 16px;
    }

    #main-content-auth {
        height: auto !important;
    }

    .shape-content-auth {
        height: auto;
    }

    .footer {
        padding: 16px !important;
    }
}

/* Tablet: keep left-box/right-box side by side, shrink outer-box to fit */
@media (max-width: 899.98px) {
    #main-content-auth {
        height: auto !important;
    }

    .outer-box {
        width: 100%;
        max-width: 850px;
        height: auto;
    }

    .left-box {
        height: auto;
    }

    .footer {
        position: static !important;
        transform: none !important;
        margin-top: 24px;
    }
}

/* Mobile: stack outer-box into 2 rows, left-box on top */
@media (max-width: 820px) {
    #main-jtr-business {
        margin-left: 0;
        margin-top: 16px;
    }

    #main-content-auth {
        height: auto !important;
        margin-top: 24px;
    }

    .outer-box {
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 16px;
        gap: 16px;
    }

    .left-box,
    .right-box {
        width: 100%;
        flex: none;
    }

    .left-box {
        height: auto;
        min-height: 140px;
        padding: 20px;
    }

    .dad-auth-banner {
        padding: 8px;
    }

    .footer {
        position: static !important;
        transform: none !important;
        margin-top: 24px;
        bottom: 0 !important;
        padding: 16px 16px 24px !important;
    }
}

.footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(calc(-50% + 0.5px));
    width: 100%;
    max-width: 1439px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 44px;
}

.footer-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.35px;
    white-space: nowrap;
}

.footer-text .link {
    color: #034ea2;
}

.footer-text .muted {
    color: #64748b;
}

.dad-form .textbox-mobile-number {
    padding: 7px 12px !important;
}

.editor-mobile-number .dx-placeholder {
    left: 12px !important;
}

#button-setup-via-email {
    border: unset;
    border-radius: 10px;
    background: var(--Primary-Light-Blue-100, rgba(0, 174, 239, 0.10));
    color: var(--Secondary-Navy-Blue-Navy-Blue, #034EA2);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 150% */
    letter-spacing: -0.15px;
    margin-top: 12px;
}

#button-setup-via-jtr-business-app::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    margin-left: 16px;
    margin-top: 7px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.66667 2H2.66667C2.29848 2 2 2.29848 2 2.66667V4.66667C2 5.03486 2.29848 5.33333 2.66667 5.33333H4.66667C5.03486 5.33333 5.33333 5.03486 5.33333 4.66667V2.66667C5.33333 2.29848 5.03486 2 4.66667 2Z' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3327 2H11.3327C10.9645 2 10.666 2.29848 10.666 2.66667V4.66667C10.666 5.03486 10.9645 5.33333 11.3327 5.33333H13.3327C13.7009 5.33333 13.9993 5.03486 13.9993 4.66667V2.66667C13.9993 2.29848 13.7009 2 13.3327 2Z' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66667 10.6667H2.66667C2.29848 10.6667 2 10.9651 2 11.3333V13.3333C2 13.7015 2.29848 14 2.66667 14H4.66667C5.03486 14 5.33333 13.7015 5.33333 13.3333V11.3333C5.33333 10.9651 5.03486 10.6667 4.66667 10.6667Z' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9993 10.6666H11.9993C11.6457 10.6666 11.3066 10.8071 11.0565 11.0572C10.8065 11.3072 10.666 11.6463 10.666 12V14' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 14V14.0067' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.99935 4.66663V6.66663C7.99935 7.02025 7.85887 7.35939 7.60882 7.60943C7.35878 7.85948 7.01964 7.99996 6.66602 7.99996H4.66602' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 8H2.00667' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 2H8.00667' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10.6667V10.6733' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.666 8H11.3327' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 8V8.00667' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 14V13.3333' stroke='%23FFFFFF' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#button-setup-via-email::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    margin-left: 16px;
    margin-top: 7px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill='%2300AEEF' d='M13.1506 4.44785H2.84622V11.5522H8.52672C8.72061 11.5522 8.88434 11.6186 9.01789 11.7515C9.15156 11.8845 9.21839 12.0475 9.21839 12.2403C9.21839 12.4332 9.15156 12.5973 9.01789 12.7327C8.88434 12.8679 8.72061 12.9355 8.52672 12.9355H2.84622C2.47089 12.9355 2.1465 12.7988 1.87306 12.5253C1.59961 12.2519 1.46289 11.9275 1.46289 11.5522V4.44785C1.46289 4.07251 1.59961 3.74813 1.87306 3.47468C2.1465 3.20124 2.47089 3.06451 2.84622 3.06451H13.1506C13.5337 3.06451 13.86 3.20124 14.1296 3.47468C14.3991 3.74813 14.5339 4.07251 14.5339 4.44785V8.24785C14.5339 8.44174 14.4674 8.60551 14.3346 8.73918C14.2016 8.87274 14.0386 8.93951 13.8457 8.93951C13.6528 8.93951 13.4887 8.87274 13.3534 8.73918C13.2182 8.60551 13.1506 8.44174 13.1506 8.24785V4.44785ZM7.99839 7.43118L13.1506 4.44785V5.98801L8.36689 8.75218C8.253 8.8184 8.1335 8.85151 8.00839 8.85151C7.88317 8.85151 7.76256 8.8184 7.64656 8.75218L2.84622 5.98801V4.44785L7.99839 7.43118ZM12.8666 12.9355H11.0571C10.8761 12.9355 10.7243 12.8746 10.6019 12.7528C10.4796 12.631 10.4184 12.48 10.4184 12.2998C10.4184 12.1197 10.4796 11.9674 10.6019 11.8428C10.7243 11.7182 10.8761 11.6558 11.0571 11.6558H12.8666L12.3967 11.186C12.2719 11.0612 12.2089 10.9117 12.2076 10.7373C12.2062 10.5629 12.2693 10.4093 12.3969 10.2765C12.5244 10.1516 12.6754 10.0898 12.8499 10.0912C13.0242 10.0925 13.1742 10.1561 13.2997 10.2818L14.8227 11.8082C14.8935 11.8764 14.9475 11.9523 14.9847 12.0358C15.0221 12.1194 15.0407 12.2067 15.0407 12.2977C15.0407 12.3887 15.0221 12.4753 14.9847 12.5575C14.9475 12.6397 14.8958 12.7139 14.8296 12.78L13.3027 14.3068C13.1725 14.4371 13.0243 14.4987 12.8582 14.4918C12.692 14.485 12.5436 14.4162 12.4131 14.2857C12.2833 14.1559 12.2184 14.0065 12.2184 13.8373C12.2184 13.6682 12.2834 13.5186 12.4136 13.3883L12.8666 12.9355Z'/%3E%3C/svg%3E");
}

#button-setup-via-jtr-business-app::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 5.688px 9.636px;
    background-position: center;
    margin-right: 16px;
    margin-top: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M3.60104 4.82292L0.263959 1.48604C0.0879864 1.30993 0 1.10625 0 0.875C0 0.64375 0.0879864 0.440069 0.263959 0.263958C0.44007 0.0879858 0.64375 0 0.875 0C1.10625 0 1.30993 0.0879858 1.48604 0.263958L5.43938 4.21729C5.51868 4.29674 5.57986 4.38993 5.62292 4.49688C5.66597 4.60368 5.6875 4.71236 5.6875 4.82292C5.6875 4.93347 5.66597 5.04215 5.62292 5.14896C5.57986 5.2559 5.51868 5.3491 5.43938 5.42854L1.48604 9.38188C1.30993 9.55785 1.10972 9.64236 0.885417 9.63542C0.661111 9.62847 0.460903 9.53701 0.284792 9.36104C0.10882 9.18493 0.0208333 8.98125 0.0208333 8.75C0.0208333 8.51875 0.10882 8.31507 0.284792 8.13896L3.60104 4.82292Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

#button-setup-via-email::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 16px;
    margin-top: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='%23034EA2' d='M10.7143 9.99998L7.37724 6.66311C7.20127 6.48699 7.11328 6.28331 7.11328 6.05206C7.11328 5.82081 7.20127 5.61713 7.37724 5.44102C7.55335 5.26505 7.75703 5.17706 7.98828 5.17706C8.21953 5.17706 8.42321 5.26505 8.59932 5.44102L12.5527 9.39435C12.632 9.4738 12.6931 9.56699 12.7362 9.67394C12.7793 9.78074 12.8008 9.88942 12.8008 9.99998C12.8008 10.1105 12.7793 10.2192 12.7362 10.326C12.6931 10.433 12.632 10.5262 12.5527 10.6056L8.59932 14.5589C8.42321 14.7349 8.223 14.8194 7.9987 14.8125C7.77439 14.8055 7.57418 14.7141 7.39807 14.5381C7.2221 14.362 7.13411 14.1583 7.13411 13.9271C7.13411 13.6958 7.2221 13.4921 7.39807 13.316L10.7143 9.99998Z'/%3E%3C/svg%3E");
}

#button-setup-later {
    color: var(--Primary-Dark-600, rgba(8, 20, 44, 0.60));
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    /* 107.692% */
    letter-spacing: -0.14px;
    text-transform: capitalize;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.00);
    margin-top: 12px;
}

.dad-container-content {
    display: grid;
    gap: 8px;
}

.content-item {
    border-radius: 8px;
    border: 1px solid var(--Accent-White-100, rgba(255, 255, 255, 0.10));
    background: var(--Primary-Light-Blue-100, rgba(0, 174, 239, 0.10));
    backdrop-filter: blur(25px);
    display: flex;
    padding: 10px;
    align-items: flex-start;
    gap: 12px;
    align-self: flex-start;
}

.item-number {
    display: flex;
    width: 22px;
    height: 22px;
    justify-content: center;
    align-items: center;
    border-radius: 16777200px;
    background: rgba(0, 120, 255, 0.30);
}

.item-number span {
    color: #00BAFF;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    /* 150% */
    letter-spacing: 0.117px;
}

.item-description {
    display: grid;
    gap: 19px;
}

.item-description .item-text {
    margin-top: 5px;
}

.item-description span {
    color: var(--Accent-White-White, #FFF);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;
    /* 108.333% */
    letter-spacing: 0.35px;
}

.store-item {
    height: 24.323px;
}

.store-item .img-store {
    width: 82.173px;
    height: 24.323px;
    aspect-ratio: 125/37;
    border-radius: 3.418px;
}

.store-item .img-store:first-child {
    margin-right: 6px;
}

.item-qr-code {
    border-radius: 5px;
    border: 0.36px solid var(--Stroke-color, #EDEFF0);

    display: flex;
    width: 57px;
    padding: 2.877px;
    justify-content: center;
    align-items: center;
    gap: 3.597px;
    position: absolute;
    right: 10px;
}

.scan-qr-code-image {
    position: relative;
    border: 1px solid #EDEFF0;
    padding: 15px;
    border-radius: 10px;
}

.scan-qr-code-image.qr-code-expired #qr-code {
    opacity: 0.3;
    filter: grayscale(100%);
}

#button-reload-session-expired-qr-code {
    display: none;
}

.scan-qr-code-image.qr-code-expired #button-reload-session-expired-qr-code {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 1000;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    height: 24px;
    padding: 4px 12px 4px 4px;
    gap: 4px;

    border: none;
    border-radius: 24px;
    background: #FF8000;
    color: #FFF;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 0.2px;

    cursor: pointer;
}

.session-qr-code {
    display: grid;
    gap: 4px;
    border-radius: 24px;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    height: 24px;
    padding: 4px 8px 4px 4px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
}

.session-qr-code.qr-active {
    background: rgba(255, 128, 0, 0.10);
    color: #FF8000;
}

.session-qr-code.qr-expired {
    background: rgba(253, 70, 59, 0.10);
    color: #FD463B;
}

.session-qr-code .session-text {
    font-weight: 500;
    line-height: 13px;
    /* 118.182% */
    letter-spacing: 0.2px;
}

.session-qr-code .session-countdown {
    font-weight: 700;
    line-height: 13px;
    letter-spacing: 0.2px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner-wrap {
    position: relative;
    width: 80px;
    height: 80px;
}

.spinner {
    width: 80px;
    height: 80px;
    animation: spin 1.5s linear infinite;
}

.icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrap img {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
}

.loading-text {
    color: rgba(8, 20, 44, 0.60);
    text-align: center;

    /* Body Small */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    /* 135.714% */
    letter-spacing: 0.35px;
}

.authentication-expired,
.authentication-successfully {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.authentication-expired .icon {
    display: flex;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(253, 70, 59, 0.10) 0%, rgba(253, 70, 59, 0.01) 100%);
}

.authentication-successfully .icon {
    display: flex;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
    border-radius: 36px;
    background: linear-gradient(180deg, var(--Secondary-Green-Green, rgba(31, 183, 106, 0.10)) 0%, var(--Secondary-Green-100, rgba(31, 183, 106, 0.01)) 100%);
}


#button-retry-authentication {
    display: flex;
    height: 40px;
    min-width: 100px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid var(--Secondary-Red-Red, #FD463B);
    background: #FFFFFF;
    color: var(--Secondary-Red-Red, #FD463B);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    /* 100% */
    letter-spacing: -0.14px;
    text-transform: capitalize;
    text-decoration-line: none;
}

.login-form {
    display: block;
}

.writing-confirmation,
.authentication-successfully,
.authentication-expired {
    display: none;
}

.writing-confirmation-login {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 554px;
    display: flex;
}

.form-reset-password-header h1 {
    color: #08142C;

    /* Bold - Headline 3 */
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    /* 127.273% */
    letter-spacing: 0.35px;
    text-transform: capitalize;
}

.form-reset-password-header p {
    color: rgba(8, 20, 44, 0.60);

    /* Body Small */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    /* 135.714% */
    letter-spacing: 0.35px;
    margin-bottom: 0 !important;
}

.dad-input-reset-password {
    text-transform: uppercase !important;
}

.form-reset-password-header {
    margin-bottom: 32px;
}

.footer-text-reset-password {
    color: rgba(8, 20, 44, 0.60);
    text-align: center;

    /* Med - Caption */
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    /* 138.462% */
    letter-spacing: 0.2px;
    margin-top: 12px;
}

#form-reset-password .dx-box-item:nth-child(2) .dx-field-button-item {
    margin-bottom: 0px !important;
    margin-top: 8px;
}

/* Hide Edge default password reveal button */
input[type="password"]::-ms-reveal {
    display: none;
}

.button-continue-authentication {
    margin-top: 8px !important;
}

.password-message {
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.2px;
    display: none;
}

.password-message.progress {
    color: #6B7280;
    display: block;
    background: unset;
}

.password-message.success {
    color: #1FB76A;
    display: block;
    background: unset;
}