/*==========================================================
                SIRAP LOGIN FINAL V5
==========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

/*==========================================================
                        BODY
==========================================================*/

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:url("../images/bg-login.png") no-repeat center center;

    background-size:cover;

    background-attachment:fixed;

    position:relative;

    overflow:hidden;

}

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

body::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,25,70,.12);

    z-index:0;

}

/*==========================================================
                    WRAPPER
==========================================================*/

.login-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

    padding:30px;

}

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

.login-card{

    width:430px;

    border-radius:24px;

    overflow:hidden;

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

    backdrop-filter:blur(5px);

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

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

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

    transition:.3s;

    animation:fadeUp .6s ease;

}

.login-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 55px rgba(0,0,0,.25);

}

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

.login-header{

    text-align:center;

    padding:20px 28px 10px;

}

/*==========================================================
                        LOGO
==========================================================*/

.logo{

    width:70px;

    margin-bottom:10px;

    filter:drop-shadow(0 5px 12px rgba(0,0,0,.20));

}

/*==========================================================
                    TITLE
==========================================================*/

.login-header h1{

    color:#0A2E7A;

    font-size:42px;

    font-weight:700;

    margin-bottom:4px;

    letter-spacing:1px;

}

/*==========================================================
                    SUBTITLE
==========================================================*/

.login-header h5{

    color:#0A2E7A;

    font-size:15px;

    font-weight:600;

    margin-bottom:4px;

    line-height:1.5;

}

/*==========================================================
                    TEXT
==========================================================*/

.login-header p{

    color:#C79524;

    font-size:13px;

    font-weight:500;

    margin-bottom:15px;

}

/*==========================================================
                    DIVIDER
==========================================================*/

.divider{

    width:120px;

    height:2px;

    margin:auto;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        transparent,

        #D4AF37,

        #FFD54F,

        #D4AF37,

        transparent

    );

}
/*==========================================================
                    LOGIN BODY
==========================================================*/

.login-body{

    padding:12px 28px 20px;

}

/*==========================================================
                    FORM LABEL
==========================================================*/

.form-label{

    font-size:14px;

    font-weight:600;

    color:#0A2E7A;

    margin-bottom:8px;

}

/*==========================================================
                    INPUT GROUP
==========================================================*/

.input-group{

    display:flex;

    align-items:center;

    overflow:hidden;

    border-radius:14px;

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

    border:1px solid rgba(220,220,220,.8);

    box-shadow:

        0 6px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.input-group:hover{

    box-shadow:

        0 8px 18px rgba(0,0,0,.10);

}

.input-group:focus-within{

    border-color:#D4AF37;

    box-shadow:

        0 0 0 3px rgba(212,175,55,.18);

}

/*==========================================================
                    ICON
==========================================================*/

.input-group-text{

    width:50px;

    height:48px;

    border:none;

    background:linear-gradient(

        180deg,

        #103D9B,

        #0A2E7A

    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:17px;

}

/*==========================================================
                    INPUT
==========================================================*/

.form-control{

    height:48px;

    border:none;

    background:transparent;

    color:#222;

    font-size:15px;

    padding:0 15px;

}

.form-control:focus{

    box-shadow:none;

    border:none;

    background:transparent;

}

.form-control::placeholder{

    color:#9b9b9b;

}

/*==========================================================
                SHOW PASSWORD
==========================================================*/

#togglePassword{

    width:50px;

    height:48px;

    border:none;

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

    color:#103D9B;

    transition:.3s;

}

#togglePassword:hover{

    background:#103D9B;

    color:#fff;

}

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

.btn-login{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    margin-top:10px;

    background:linear-gradient(

        90deg,

        #0A2E7A,

        #1F62D0

    );

    color:#fff;

    font-size:17px;

    font-weight:600;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.3s;

    position:relative;

    overflow:hidden;

    box-shadow:

        0 8px 20px rgba(31,98,208,.28);

}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:

        0 12px 25px rgba(31,98,208,.35);

}

.btn-login::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.btn-login:hover::before{

    left:120%;

}

/*==========================================================
                    ALERT
==========================================================*/

.alert{

    border:none;

    border-radius:12px;

    font-size:14px;

    margin-bottom:18px;

}
/*==========================================================
                    LOGIN FOOTER
==========================================================*/

.login-footer{

    padding:14px 25px;

    text-align:center;

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

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

}

.divider-footer{

    width:120px;

    height:2px;

    margin:0 auto 12px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        transparent,

        #D4AF37,

        #FFD54F,

        #D4AF37,

        transparent

    );

}

.copyright{

    color:#0A2E7A;

    font-size:14px;

    font-weight:700;

    margin-bottom:2px;

}

.subtitle{

    color:#666;

    font-size:12px;

    margin-bottom:0;

}

/*==========================================================
                LOGO EFFECT
==========================================================*/

.logo{

    animation:logoFloat 5s ease-in-out infinite;

    transition:.35s;

}

.logo:hover{

    transform:scale(1.05);

}

@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:768px){

    .login-wrapper{

        padding:20px;

    }

    .login-card{

        width:95%;

    }

    .login-header{

        padding:18px 22px 10px;

    }

    .logo{

        width:65px;

    }

    .login-header h1{

        font-size:36px;

    }

    .login-header h5{

        font-size:14px;

    }

    .login-header p{

        font-size:12px;

    }

    .login-body{

        padding:15px 22px;

    }

}

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

@media(max-width:480px){

    body{

        overflow:auto;

    }

    .login-wrapper{

        padding:15px;

    }

    .login-card{

        width:100%;

        border-radius:20px;

    }

    .logo{

        width:60px;

    }

    .login-header{

        padding:18px;

    }

    .login-header h1{

        font-size:32px;

    }

    .login-header h5{

        font-size:13px;

    }

    .login-header p{

        font-size:11px;

    }

    .login-body{

        padding:15px 18px;

    }

    .input-group-text{

        width:46px;

        height:46px;

    }

    .form-control{

        height:46px;

        font-size:14px;

    }

    #togglePassword{

        width:46px;

        height:46px;

    }

    .btn-login{

        height:46px;

        font-size:15px;

    }

}