.elementor-1913 .elementor-element.elementor-element-6055fc2{--display:flex;--min-height:100vh;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1913 .elementor-element.elementor-element-6055fc2:not(.elementor-motion-effects-element-type-background), .elementor-1913 .elementor-element.elementor-element-6055fc2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}@media(min-width:768px){.elementor-1913 .elementor-element.elementor-element-6055fc2{--content-width:100vw;}}/* Start custom CSS for html, class: .elementor-element-74aebc7 *//* ==============================
   ZIPNOVA ADMIN LOGIN V3
============================== */


*{

box-sizing:border-box;

}




.zipnova-admin-login{


--orange:#ff6500;

--border:
rgba(255,255,255,.10);


--text:#f5f5f5;

--muted:#8f8f8f;



width:100%;

min-height:100vh;



display:flex;

justify-content:center;

align-items:center;



padding:
50px 20px;



color:
var(--text);



font-family:
"Inter",
Arial,
sans-serif;


}









/* ==============================
   CARD
============================== */


.login-card{


width:100%;

max-width:
440px;



padding:
52px 48px;



background:

linear-gradient(
145deg,
rgba(255,255,255,.045),
rgba(255,255,255,.015)
);



border:
1px solid var(--border);



border-radius:
24px;



backdrop-filter:
blur(35px);



box-shadow:

0 35px 90px rgba(0,0,0,.55),

inset 0 1px 0 rgba(255,255,255,.08);



animation:
loginFade .45s ease;


}








@keyframes loginFade{


from{

opacity:0;

transform:
translateY(20px);

}



to{

opacity:1;

transform:
translateY(0);

}


}










/* ==============================
   BRAND
============================== */


.login-brand{


text-align:center;

margin-bottom:
42px;


}




.login-brand img{


max-width:
165px;


}




.login-brand span{


display:block;


margin-top:
20px;


color:#aaa;


font-size:
11px;


letter-spacing:
7px;


}











/* ==============================
   HEADER
============================== */


.login-header{


text-align:center;


margin-bottom:
38px;


}




.login-header h1{


margin:0;


font-size:
36px;


font-weight:
400;


letter-spacing:
-1.5px;


}




.login-header p{


margin-top:
14px;


color:
var(--muted);


font-size:
14px;


line-height:
1.6;


}










/* ==============================
   INPUTS
============================== */


.login-field{


margin-bottom:
24px;


}




.login-field label{


display:block;


margin-bottom:
10px;


color:#cfcfcf;


font-size:
13px;


}







.input-wrapper{


height:
58px;



padding:
0 22px;



display:flex;


align-items:center;



background:
rgba(255,255,255,.035);



border:
1px solid rgba(255,255,255,.09);



border-radius:
14px;



transition:
.25s;


}







.input-wrapper:hover{


border-color:
rgba(255,255,255,.18);


}







.input-wrapper:focus-within{


background:
rgba(255,255,255,.055);



border-color:
var(--orange);



box-shadow:
0 0 35px rgba(255,101,0,.16);


}








.input-wrapper input{


width:100%;


background:none;

border:none;

outline:none;


color:white;


font-size:
15px;


}




.input-wrapper input::placeholder{


color:#777;


}









/* ==============================
   PASSWORD VIEW
============================== */

.password-wrapper{

    position:relative;

}

.toggle-password{

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent;

    border:none;

    color:var(--orange);

    cursor:pointer;

    transition:.25s;

}

.toggle-password svg{

    width:20px;
    height:20px;

    stroke:var(--orange);
    fill:none;

}

.toggle-password i{

    color:var(--orange);
    font-size:18px;

}

.toggle-password:hover{

    transform:scale(1.10);

    filter:brightness(1.2);

}






/* ==============================
   SESSION
============================== */


.login-options{


display:flex;


justify-content:flex-start;


align-items:center;



margin:
5px 0 32px;



font-size:
13px;


}





.login-options label{


display:flex;


align-items:center;


gap:
8px;



color:#aaa;



cursor:pointer;


}






.login-options input{


accent-color:
var(--orange);


}











/* ==============================
   BUTTON
============================== */


#loginButton{


width:100%;


height:
58px;



border:none;


border-radius:
14px;



background:

linear-gradient(
135deg,
#ff6500,
#ff7b22
);



color:white;


font-size:
14px;


font-weight:
600;


cursor:pointer;


transition:
.25s;


}






#loginButton:hover{


transform:
translateY(-3px);



filter:
brightness(1.15);



box-shadow:
0 20px 45px rgba(255,101,0,.30);


}











/* ==============================
   MESSAGE
============================== */


.login-message{


min-height:
18px;


margin-top:
18px;


text-align:center;


color:
var(--orange);


font-size:
13px;


}










/* ==============================
   FOOTER
============================== */


.login-footer{


margin-top:
42px;



padding-top:
22px;



border-top:
1px solid rgba(255,255,255,.08);



text-align:center;



color:#777;



font-size:
12px;


}











/* ==============================
   TABLET
============================== */


@media(max-width:900px){



.login-card{


max-width:
420px;


}



}










/* ==============================
   MOBILE
============================== */


@media(max-width:600px){



.zipnova-admin-login{


padding:
25px 18px;


}




.login-card{


padding:
38px 28px;


border-radius:
20px;


}




.login-header h1{


font-size:
30px;


}




.login-brand img{


max-width:
145px;


}




.login-brand span{


font-size:
10px;


letter-spacing:
5px;


}





.input-wrapper{


height:
54px;


padding:
0 16px;


}





#loginButton{


height:
54px;


}



}










/* ==============================
   SMALL PHONES
============================== */


@media(max-width:380px){



.login-card{


padding:

32px 22px;


}




.login-header h1{


font-size:

27px;


}




.login-header p{


font-size:

13px;


}




.login-footer{


font-size:

11px;


}



}










/* ==============================
   LOW HEIGHT SCREENS
============================== */


@media(max-height:720px){



.zipnova-admin-login{


align-items:flex-start;


}



.login-card{


margin:

20px 0;


}



}/* End custom CSS */