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

body{
    background:
    radial-gradient(circle at top right, rgba(0,97,255,.18), transparent 35%),
    radial-gradient(circle at bottom left, rgba(0,97,255,.12), transparent 35%),
    linear-gradient(135deg,#01040D 0%,#041D3C 50%,#01040D 100%);
    min-height:100vh;
    font-family:'Segoe UI',sans-serif;
}

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

.login-wrapper{
    background:rgba(1,4,13,.96);
    padding:40px 35px;
    border-radius:20px;

    border:1px solid rgba(0,97,255,.25);

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

    margin:60px 0;
}

/* ==========================
   HEADING
========================== */

.login-wrapper h3{
    font-size:30px;
    margin-bottom:25px;
    color:#fff;
    font-weight:700;
    text-align:center;
    letter-spacing:1px;
}

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

.login-wrapper .error-message{
    margin-bottom:15px;
    color:#ff5b5b;
    font-weight:600;
    text-align:center;
}

/* ==========================
   LABELS
========================== */

.login-wrapper label{
    color:#d8e6ff;
    font-weight:600;
    margin-bottom:8px;
    display:block;
}

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

.login-wrapper input.form-control,
.login-wrapper select.form-control{

    height:52px;

    border:1px solid rgba(0,97,255,.25);

    border-radius:12px;

    background:#08111F;

    color:#fff;

    padding:12px 15px;

    font-size:15px;

    transition:.3s;
}

.login-wrapper input.form-control::placeholder{
    color:#8ca0c7;
}

.login-wrapper input.form-control:focus,
.login-wrapper select.form-control:focus{

    border-color:#0061FF;

    background:#0B1528;

    box-shadow:
    0 0 0 4px rgba(0,97,255,.15);

    outline:none;
}

/* ==========================
   FORGOT PASSWORD
========================== */

.login-wrapper ul{
    padding-left:0;
    list-style:none;
    margin-bottom:25px;
}

.login-wrapper ul li a{
    color:#0061FF;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.login-wrapper ul li a:hover{
    color:#fff;
}

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

.default-btn.style5{

    width:100%;

    background:linear-gradient(
        135deg,
        #0061FF,
        #2A7BFF
    );

    color:#fff;

    font-weight:700;

    padding:14px 30px;

    border:none;

    border-radius:12px;

    font-size:16px;

    transition:.3s;
}

.default-btn.style5:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(0,97,255,.35);

    background:linear-gradient(
        135deg,
        #2A7BFF,
        #0061FF
    );

    color:#fff;
}

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

.login-logo{
    text-align:center;
    margin-bottom:25px;
}

.login-logo img{
    max-width:180px;
    filter:drop-shadow(0 0 20px rgba(0,97,255,.35));
}

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

@media(max-width:767px){

    .login-wrapper{
        margin:25px 10px;
        padding:25px;
    }

    .login-wrapper h3{
        font-size:24px;
    }
}