/* ==========================================================
   Jitronex Authentication Styles
========================================================== */

/* ==========================================================
   Reset
========================================================== */

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

html,
body{
    width:100%;
    min-height:100%;
}

input,
button,
select,
textarea{
    box-sizing:border-box;
}

/* ==========================================================
   Body
========================================================== */

body{

    font-family:"Segoe UI",Arial,sans-serif;

    background:linear-gradient(135deg,#081c2d,#134e5e,#0f2027);

    overflow-x:hidden;

    position:relative;

}

/* ==========================================================
   Animated Background
========================================================== */

body::before,
body::after{

    content:"";

    position:fixed;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

    z-index:-1;

    animation:float 12s ease-in-out infinite;

}

body::before{

    width:380px;
    height:380px;

    top:-120px;
    left:-120px;

    background:#00c8ff;

}

body::after{

    width:300px;
    height:300px;

    right:-100px;
    bottom:-80px;

    background:#00ffb0;

    animation-delay:5s;

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

}

/* ==========================================================
   Layout
========================================================== */

.container,
.container-fluid{

    padding:40px 15px 70px;

}

/* ==========================================================
   Cards
========================================================== */

.card,
.login-card,
.register-card{

    width:100%;
    max-width:430px;

    margin:auto;

    background:#ffffff;

    border:none;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/* ==========================================================
   Banner
========================================================== */

.banner,
.card img{

    width:100%;

    display:block;

    max-height:170px;

    object-fit:cover;

}

/* ==========================================================
   Header
========================================================== */

.card-header,
.login-header,
.card-header-custom{

    background:#ffffff;

    border-bottom:1px solid #e9ecef;

    text-align:center;

    padding:20px;

}

.card-header h4,
.login-header h3,
.card-header-custom h3{

    color:#0b3555;

    font-weight:700;

    margin-bottom:6px;

}

.login-header p,
.card-header-custom p{

    color:#777;

    margin:0;

}

/* ==========================================================
   Card Body
========================================================== */

.card-body{

    padding:22px;

}

/* ==========================================================
   Inputs
========================================================== */

.input-group{

    margin-bottom:18px;

}

.input-group-text{

    background:#eef2f7;

    border:none;

}

.form-control{

    height:48px;

    border:none;

    background:#eef2f7;

}

.form-control:focus{

    background:#ffffff;

    outline:none;

    box-shadow:0 0 0 .2rem rgba(37,117,252,.15);

}

/* ==========================================================
   Buttons
========================================================== */

.btn{

    display:flex;

    align-items:center;

    justify-content:center;

    height:48px;

    padding:0 16px;

    line-height:normal;

    white-space:nowrap;

    text-align:center;

    text-decoration:none;

    border:none;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    -webkit-appearance:none;

    appearance:none;

}

.btn,
.btn:link,
.btn:visited{

    text-decoration:none;

}

/* Shared */

.btn-login,
.btn-register,
.btn-device{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   Login Button
========================================================== */

.btn-login{

    background:linear-gradient(90deg,#17a34a,#0f8d41);

    border:1px solid #0f8d41;

    color:#ffffff;

}

.btn-login:hover{

    background:linear-gradient(90deg,#14863d,#0d7336);

    border-color:#0d7336;

    color:#ffffff;

    transform:translateY(-2px);

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

}

/* ==========================================================
   Register Button
========================================================== */

.btn-register{

    background:linear-gradient(90deg,#2575fc,#1c60d6);

    border:1px solid #1c60d6;

    color:#ffffff;

}

.btn-register:hover{

    background:linear-gradient(90deg,#1d66e0,#174fb6);

    border-color:#174fb6;

    color:#ffffff;

    transform:translateY(-2px);

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

}

/* ==========================================================
   Device Button
========================================================== */

.btn-device{

    background:linear-gradient(90deg,#17a34a,#0f8d41);

    border:1px solid #0f8d41;

    color:#ffffff;

}

.btn-device:hover{

    background:linear-gradient(90deg,#14863d,#0d7336);

    border-color:#0d7336;

    color:#ffffff;

    transform:translateY(-2px);

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

}

/* ==========================================================
   Active / Focus
========================================================== */

.btn-login:active,
.btn-register:active,
.btn-device:active{

    transform:scale(.98);

}

.btn-login:focus,
.btn-register:focus,
.btn-device:focus{

    outline:none;

    box-shadow:0 0 0 .2rem rgba(37,117,252,.25);

}

/* ==========================================================
   Footer
========================================================== */

.footer{

    margin-top:20px;

    text-align:center;

    font-size:12px;

    color:#888;

}

/* ==========================================================
   Terms & Privacy
========================================================== */

.auth-links{

    max-width:430px;

    margin:20px auto 0;

    padding:0 10px;

    text-align:center;

    color:#ffffff !important;

    font-size:13px;

    line-height:1.8;

}

.auth-links,
.auth-links span,
.auth-links p{

    color:#ffffff !important;

}

.auth-links a{

    color:#4fc3ff !important;

    text-decoration:none;

    font-weight:600;

}

.auth-links a:hover{

    color:#ffffff !important;

    text-decoration:underline;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .container,
    .container-fluid{

        padding:25px 15px 60px;

    }

    .card-body{

        padding:20px;

    }

}

@media (max-width:576px){

    .container,
    .container-fluid{

        padding:20px 12px 60px;

    }

    .card,
    .login-card,
    .register-card{

        max-width:100%;

    }

    .banner,
    .card img{

        max-height:150px;

    }

}