/* ===========================================================
   BRISK BOX LOGISTICS MANAGEMENT SYSTEM
   LOGIN SCREEN
=========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    font-family:"Segoe UI",Arial,sans-serif;
}

/* ===========================================================
   BACKGROUND
=========================================================== */

body{

    background:url("../images/hero1.webp") center center no-repeat;
    background-size:cover;
    overflow:hidden;

}

/* ===========================================================
   OVERLAY
=========================================================== */

.page-overlay{

    width:100%;
    height:100%;

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

    background:linear-gradient(
        rgba(8,18,40,.42),
        rgba(8,18,40,.32)
    );

}

/* ===========================================================
   GLASS LOGIN PANEL
=========================================================== */

.login-box{

    width:520px;

    padding:50px;

    border-radius:24px;

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

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

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

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    animation:fadeup .6s ease;

}

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

.brand{

    text-align:center;

    font-size:62px;

    font-weight:900;

    letter-spacing:-3px;

    line-height:1;

    margin-bottom:10px;

}

.brand-blue{

    color:#273896;

}

.brand-orange{

    color:#F57C00;

}

.system-name{

    text-align:center;

    color:#ffffff;

    font-size:28px;

    font-weight:300;

    margin-bottom:8px;

}

.subtitle{

    text-align:center;

    color:#f3f3f3;

    font-size:15px;

    margin-bottom:35px;

}

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

.input-box{

    display:flex;

    align-items:center;

    margin-bottom:20px;

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

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

    border-radius:12px;

    transition:.30s;

}

.input-box:hover{

    border-color:#F57C00;

}

.input-box:focus-within{

    border-color:#F57C00;

    box-shadow:
    0 0 18px rgba(245,124,0,.35);

}

.input-box i{

    width:60px;

    text-align:center;

    color:white;

    font-size:18px;

}

.input-box input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:white;

    padding:17px 15px;

    font-size:16px;

}

.input-box input::placeholder{

    color:rgba(255,255,255,.85);

}

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

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:white;

    letter-spacing:.5px;

    background:linear-gradient(
        90deg,
        #273896,
        #3C4FD2
    );

    transition:.30s;

}

button:hover{

    background:linear-gradient(
        90deg,
        #F57C00,
        #FF9800
    );

    transform:translateY(-2px);

}

/* ===========================================================
   DEMO LOGIN
=========================================================== */

.demo{

    margin-top:28px;

    text-align:center;

    padding:18px;

    border-radius:12px;

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

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

    color:white;

    font-size:14px;

    line-height:28px;

}

/* ===========================================================
   ERROR
=========================================================== */

.error{

    margin-bottom:20px;

    padding:14px;

    border-radius:10px;

    background:rgba(220,53,69,.25);

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

    color:white;

    text-align:center;

}

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

footer{

    position:absolute;

    bottom:18px;

    left:0;

    width:100%;

    text-align:center;

    color:white;

    font-size:13px;

    text-shadow:0 2px 8px rgba(0,0,0,.8);

}

/* ===========================================================
   ANIMATION
=========================================================== */

@keyframes fadeup{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:900px){

.login-box{

    width:90%;

    max-width:520px;

}

.brand{

    font-size:52px;

}

.system-name{

    font-size:24px;

}

}

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

@media(max-width:600px){

body{

    background-position:68% center;

}

.login-box{

    width:94%;

    padding:30px;

}

.brand{

    font-size:42px;

    letter-spacing:-2px;

}

.system-name{

    font-size:22px;

}

.subtitle{

    font-size:14px;

}

.input-box input{

    padding:15px;

}

button{

    padding:15px;

}

}