/* OJAS LOGIN V41
   Fix: Real/native dropdowns are restored and values are LEFT aligned.
   Copy these files directly into: C:\xampp\htdocs\OJAS\
*/

*{box-sizing:border-box}

html,body{
    width:100%;
    height:100%;
    margin:0;
}

body{
    overflow:hidden;
    background:#052754;
    font-family:"Segoe UI",Arial,sans-serif;
    color:#08275f;
}

.ojas-login-stage{
    position:relative;
    width:100vw;
    height:100vh;
    min-width:1180px;
    min-height:690px;
    overflow:hidden;
    background-image:var(--ojas-bg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% 100%;
}

.login-form-overlay{
    position:absolute;
    inset:0;
    z-index:10;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Exact field positions over the mock-up image */
.field-slot{
    position:absolute;
    height:4.90%;
    width:24.32%;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:#ffffff;
    border:1px solid #d4dfec;
    border-radius:11px;
    box-shadow:0 2px 8px rgba(7,35,80,.03);
}

.department-slot{left:68.60%;top:33.45%}
.username-slot{left:68.60%;top:42.66%}
.password-slot{left:68.60%;top:51.95%}

.field-icon{
    width:54px;
    height:100%;
    flex:0 0 54px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#08275f;
}

.field-icon svg,
.password-eye svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.field-slot select,
.field-slot input{
    height:100%;
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    background:#ffffff;
    color:#263c60;

    font-family:"Segoe UI",Arial,sans-serif;
    font-size:16px;
    font-weight:600;

    text-align:left !important;
    text-align-last:left !important;
    direction:ltr;
}

.field-slot select{
    padding:0 42px 0 0;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
}

.field-slot select option{
    color:#263c60;
    background:#ffffff;
    font-size:15px;
    font-weight:500;
    text-align:left;
}

.field-slot input{
    padding:0 46px 0 0;
}

.field-slot input::placeholder{
    color:#6d7892;
    font-weight:500;
}

.select-arrow{
    position:absolute;
    right:20px;
    top:50%;
    width:10px;
    height:10px;
    border-right:2px solid #062760;
    border-bottom:2px solid #062760;
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
}

.password-eye{
    position:absolute;
    right:0;
    top:0;
    width:48px;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#062760;
    cursor:pointer;
}

.field-slot:focus-within{
    border-color:#93d8df;
    box-shadow:0 0 0 3px rgba(0,151,165,.13);
}

/* Remember checkbox click only */
.remember-click{
    position:absolute;
    left:68.69%;
    top:58.95%;
    width:17px;
    height:17px;
    cursor:pointer;
}

.remember-click input{
    position:absolute;
    inset:0;
    width:17px;
    height:17px;
    margin:0;
    opacity:0;
    cursor:pointer;
}

.remember-click span{
    position:absolute;
    inset:0;
    display:block;
    border-radius:3px;
    pointer-events:none;
}

.remember-click input:checked + span{
    background:#0b8f9b;
}

.remember-click input:checked + span::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.forgot-click{
    position:absolute;
    left:86.55%;
    top:58.55%;
    width:7.3%;
    height:2.6%;
    display:block;
    background:transparent;
}

.signin-click{
    position:absolute;
    left:68.60%;
    top:62.22%;
    width:24.32%;
    height:4.95%;
    border:0;
    border-radius:10px;
    background:transparent;
    cursor:pointer;
}

.signin-click:focus{
    outline:3px solid rgba(255,255,255,.34);
    outline-offset:2px;
}

.login-alert{
    position:absolute;
    z-index:20;
    left:68.60%;
    top:29.35%;
    width:24.32%;
    padding:9px 12px;
    border-radius:9px;
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#9f1239;
    font-size:12px;
    box-shadow:0 8px 20px rgba(80,0,0,.08);
}

.file-missing-warning{
    position:absolute;
    z-index:30;
    left:50%;
    top:20px;
    transform:translateX(-50%);
    padding:10px 16px;
    border-radius:10px;
    color:#991b1b;
    background:#fff1f2;
    border:1px solid #fecaca;
    font-size:13px;
    font-weight:700;
}

@media (max-height:820px){
    .field-slot select,
    .field-slot input{
        font-size:14px;
    }

    .field-slot select option{
        font-size:13px;
    }
}

@media (max-width:1179px){
    body{overflow:auto}
    .ojas-login-stage{
        min-width:0;
        min-height:720px;
        background-size:cover;
    }
}