/*=========================================================
LOGIN PAGE
Cyber Intelligence Dashboard
=========================================================*/

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

body{

    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;

    background:
        linear-gradient(rgba(7,19,33,.60),rgba(7,19,33,.72)),
        url("../img/login-bg.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    color:#fff;

    height:100vh;
    overflow:hidden;

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

    padding:20px;

}
/*=========================================================
LOGIN CONTAINER
=========================================================*/

.login-container{

    width:100%;

    max-width:460px;

}

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

.login-card{

    background:rgba(30,43,63,.90);

    border:1px solid #31445e;

    border-radius:22px;

    padding:28px 38px;

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

}

.login-card:hover{

    transform:translateY(-3px);

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

}

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

.login-logo{

    width:120px;
    height:120px;

    margin:auto;
    margin-bottom:18px;

    background:#2b3d58;

    border:2px solid #48648f;

    border-radius:50%;

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

}

.login-logo img{

    width:110px;
    height:110px;

    object-fit:contain;

}


/*=========================================================
HEADINGS
=========================================================*/

.login-card h1{

    text-align:center;
	line-height:1.2;
    font-size:30px;

    font-weight:700;

      margin-bottom:6px;

}
.login-card h1 span{

    display:block;

    font-size:18px;

    letter-spacing:5px;

    color:#8fb3ef;

    font-weight:600;

    margin-bottom:8px;

}

.login-card p{

    text-align:center;

    color:#8fb3ef;

    font-size:16px;

    margin-bottom:24px;

}

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

.login-error{

    background:#5d1d25;

    color:#ffd9d9;

    border:1px solid #a94a5d;

    padding:14px;

    border-radius:12px;

    margin-bottom:25px;

    text-align:center;

    font-size:14px;

}

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

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#8fb3ef;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

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

.form-group input{

    width:100%;

    height:55px;

    background:#24354d;

    border:1px solid #3b4f6a;

    border-radius:12px;

    color:#fff;

    font-size:16px;

    padding:0 18px;

    outline:none;

    transition:.25s;

}

.form-group input::placeholder{

    color:#7f95b6;

}

.form-group input:focus{

    border-color:#ffb740;

    box-shadow:0 0 0 3px rgba(255,183,64,.15);

}

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

.login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:#ffb740;

    color:#071321;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.login-btn:hover{
 background:#ffc85a;

    box-shadow:
    0 10px 30px rgba(255,183,64,.35);
    

    transform:translateY(-2px);

}

.login-btn:active{

    transform:scale(.98);

}

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

.login-footer{

    text-align:center;

    margin-top:28px;

    color:#8099bb;

    font-size:13px;

}

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

@media(max-width:600px){

    body{

        padding:20px;

    }

    .login-card{

        padding:30px;

    }

    .login-card h1{

        font-size:24px;

    }

    .login-logo{

        width:75px;

        height:75px;

        font-size:36px;

    }

}

.password-wrapper{

    position:relative;

    width:100%;

}
.password-wrapper .login-input{

    width:100%;

    padding-right:55px;

}

.toggle-password{

    position:absolute;

    top:50%;

    right:16px;

    transform:translateY(-50%);

    width:32px;

    height:32px;

    padding:0;

    margin:0;

    border:none;

    background:none;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#8eaee3;

    font-size:18px;

    box-shadow:none;

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

.login-footer{

    margin-top:22px;

    padding-top:22px;

    border-top:1px solid rgba(143,179,239,.18);

    text-align:center;

}

.footer-title{

    font-size:14px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:6px;

}

.footer-subtitle{

    font-size:13px;

    color:#8fb3ef;

    margin-bottom:10px;

    line-height:1.5;

}

.footer-version{

    display:inline-block;

    padding:4px 12px;

    background:#24354d;

    border:1px solid #3c5375;

    border-radius:30px;

    color:#ffb740;

    font-size:12px;

    font-weight:600;

    margin-bottom:10px;

}

.footer-copy{

    font-size:12px;

    color:#6f86a8;

}
@media (max-height: 780px){

    body{

        overflow:auto;

        height:auto;

        min-height:100vh;

        padding:20px;

    }

}