/* =========================================================

   JoTrack LeptonX Login Custom CSS (desktop exact size sync)

   ========================================================= */
 
/* Card body background */

.card .card-body {

    background-color: var(--lpx-card-bg);

}
 
/* Canvas overlay — scope to the background network canvas ONLY.
   A bare `canvas` selector also matched the QR code's generated canvas
   (inside #appQrCode) and stretched it fullscreen for a moment on load. */

#net {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;

    display: block;

}
 
/* Keep card above canvas */

.card {

    position: relative;

    z-index: 1;

}
 
.customBtn {

    color: #fff !important;

    background-color: #0F76DC !important;

}
 
/* Wrapper */

.jt-login-wrap {

    width: 100%;

    max-width: 980px; /* try 900–1000 */

}
 
/* ===== Shared exact desktop size ===== */

:root {

    --jt-login-card-height: 520px; /* change this one value only */

    --jt-login-radius: 20px;

}
 
/* Main card */

.jt-login-card {

    transform: scale(0.9);

    transform-origin: center;

    width: 100%;

    margin-inline: auto;

    border-radius: var(--jt-login-radius);

    overflow: hidden;

    box-shadow: 0 12px 28px rgba(0,0,0,.18);

    /* IMPORTANT: remove scaling if you want exact size like old page */

    transform: none; /* was scale(0.9) */

    transform-origin: center;

}
 
/* Make row columns equal height */

.jt-login-row {

    min-height: var(--jt-login-card-height);

    height: var(--jt-login-card-height);

    align-items: stretch;

}
 
/* Left banner column gets exact same height */

.jt-login-banner {

    height: var(--jt-login-card-height);

    min-height: var(--jt-login-card-height);

    display: block;

    overflow: hidden;

}
 
/* Banner image fills banner exactly */

.jt-login-banner__img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: fill; /* keep your choice */

}
 
/* Right column and body also same height */

.jt-login-right {
    height: 539px;
    min-height: 539px;
    display: flex;
}
 
.jt-login-body-right {

    height: 100%;

    min-height: 100%;

    width: 100%;

    display: flex;

    flex-direction: column;

    overflow: auto;

    box-sizing: border-box;

}
 
/* Tighter hr spacing */

.jt-login-right .card-body hr {

    margin: .75rem 0;

    opacity: .15;

}
 
/* Logo spacing */

.lpx-login-logo {

    margin-bottom: 18px !important;

}
 
/* Footer inside form (if rendered inside body) */
.login-box-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}


 
.login-box-footer a img {

    display: block;

}

/* QR code box — reserve a fixed 56x56 footprint and clip its contents so the
   generated canvas/img can never overflow (defensive, in case any global rule
   targets canvas/img again) and there is no layout shift while it renders. */
.img-qr-code {
    width: 56px;
    height: 56px;
    overflow: hidden;
    line-height: 0;
}

.img-qr-code canvas,
.img-qr-code img {
    width: 56px !important;
    height: 56px !important;
    display: block;
}
 
.customColorLang {

    background-color: var(--lpx-navbar-active-bg-color);

}
 
    .customColorLang:hover {

        background-color: var(--lpx-navbar-active-bg-color);

    }
 
/* ===== LTR/RTL radius handling ===== */
 
/* LTR: banner on left */

html[dir="ltr"] .jt-login-banner,

html[dir="ltr"] .jt-login-banner__img {

    border-top-left-radius: var(--jt-login-radius);

    border-bottom-left-radius: var(--jt-login-radius);

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

}
 
/* LTR: form on right */

html[dir="ltr"] .jt-login-body-right {

    border-top-left-radius: 0 !important;

    border-bottom-left-radius: 0 !important;

    border-top-right-radius: var(--jt-login-radius) !important;

    border-bottom-right-radius: var(--jt-login-radius) !important;

}
 
/* RTL: banner on right */

html[dir="rtl"] .jt-login-banner,

html[dir="rtl"] .jt-login-banner__img {

    border-top-right-radius: var(--jt-login-radius);

    border-bottom-right-radius: var(--jt-login-radius);

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

}
 
/* RTL: form on left */

html[dir="rtl"] .jt-login-body-right {

    border-top-right-radius: 0 !important;

    border-bottom-right-radius: 0 !important;

    border-top-left-radius: var(--jt-login-radius) !important;

    border-bottom-left-radius: var(--jt-login-radius) !important;

}
 
/* =========================================================

   Tablet + Mobile (<= 991.98px)

   ========================================================= */

@media (max-width: 991.98px) {
    .jt-login-wrap {
        max-width: 100%;
        width: 91.66666667%;
    }

    .jt-login-banner {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
    }
 
    .jt-login-right {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

    }
 
    .jt-login-row {

        height: auto !important;

        min-height: 0 !important;

    }
 
    .jt-login-card {

        transform: none !important;

    }
 
    html[dir="ltr"] .jt-login-body-right,

    html[dir="rtl"] .jt-login-body-right {

        border-radius: var(--jt-login-radius) !important;

        border-top-left-radius: var(--jt-login-radius) !important;

        border-top-right-radius: var(--jt-login-radius) !important;

        border-bottom-left-radius: var(--jt-login-radius) !important;

        border-bottom-right-radius: var(--jt-login-radius) !important;

    }
 
    .jt-login-body-right {

        overflow: auto !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: calc(100vh - 32px) !important;

        -webkit-overflow-scrolling: touch;

    }

    .login-box-footer {
        height: auto !important;
        padding: 12px 0;
        gap: 14px !important;
    }
        
}