/* ===========================
   Smart ConstructionID Login
   Version : 1.0
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{

    --primary:#1565C0;
    --primary-dark:#0D47A1;
    --secondary:#42A5F5;
    --white:#ffffff;
    --text:#2d3748;
    --light:#f5f7fb;
    --border:#dfe6ee;
    --shadow:0 20px 45px rgba(0,0,0,.15);

}

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

body{

    background:#eef3f8;
    color:var(--text);
    overflow-x:hidden;

}

a{

    text-decoration:none;

}

a:hover{

    color:var(--primary);

}

/* ===========================
   LEFT PANEL
=========================== */

.left-panel{

    position:relative;
    width:100%;
    height:100vh;

    background:url('../../images/construction-bg.webp') center center;

    background-size:cover;

}

.left-panel .overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
		90deg,
		rgba(9,53,120,.72),
		rgba(20,110,220,.48)
	);

}

.left-panel .content{

    position:relative;

    z-index:10;

    color:#fff;

    height:100%;

    padding:70px;

    display:flex;

    flex-direction:column;

    justify-content:center;
	
	padding-left:70px;

	padding-top:30px;

}

.logo{

    width:170px;

    margin-bottom:25px;

}

.left-panel h1{

    font-size:46px;

    font-weight:700;

}

.left-panel h4{

    font-weight:400;

    opacity:.9;

}

.left-panel p{

    font-size:18px;

    margin-bottom:40px;

}

.features{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.features div{

    font-size:18px;

    display:flex;

    align-items:center;

}

.features i{

    color:#7CFC8A;

    margin-right:12px;

    font-size:20px;

    line-height:0;

}

/* ===========================
   RIGHT PANEL
=========================== */

.login-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;

    padding:40px;

    background:#eef3f8;

}

.login-card{

    width:520px;
	
	max-width:95%;

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

    backdrop-filter:blur(16px);

    border-radius:20px;

    padding:40px;

    box-shadow:var(--shadow);

    animation:fadeIn .8s ease;

}

.login-logo{

    width:175px;

    display:block;

    margin:0 auto 20px;

}

.login-card h2{

    text-align:center;

    font-weight:600;

}

.subtitle{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}

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

.form-label{

    font-weight:500;

    margin-bottom:8px;

}

.input-group-text{
	font-size:18px;
	
    background:#fff;

    border-color:var(--border);

}

.form-control{

    height:50px;

    border-color:var(--border);

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(21,101,192,.15);

}

.btn-primary{

    background:var(--primary);

    border:none;

    height:52px;

    font-weight:600;

    border-radius:10px;

    transition:all .3s ease;

}

.btn-primary:hover{

    background:var(--primary-dark);
    box-shadow:0 15px 30px rgba(21,101,192,.35);

    transform:translateY(-2px);

}

.form-check-input:checked{

    background:var(--primary);

    border-color:var(--primary);

}

/* ===========================
   SUPPORT SECTION
=========================== */

.support{

    margin-top:30px;

    text-align:center;

    color:#6c757d;

}

.support hr{

    margin:20px 0;

}

.support h6{

    color:#0D47A1;

    font-weight:600;

    margin-bottom:15px;

}

.support p{

    margin-bottom:8px;

    font-size:14px;

}

.support i{

    color:#1565C0;

    width:20px;

}

.version{

    margin-top:15px;

    font-size:13px;

    color:#999;

    font-weight:500;

}

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

.alert{

    border-radius:10px;

    border:none;

    font-size:14px;

}

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

footer{

    position:fixed;

    left:0;

    right:0;

    bottom:10px;

    text-align:center;

    font-size:13px;

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

    z-index:99;

}

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

#btnLoader{

    display:none;

}

/* ===========================
   ANIMATIONS
=========================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

.logo{

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

}

.features div{

    animation:slideLeft .8s ease;

}

/* ===========================
   HOVER EFFECTS
=========================== */

.login-card:hover{

    transform:translateY(-6px);

    transition:.35s;

}

.form-control:hover{

    border-color:#90CAF9;

}

.input-group-text{

    transition:.3s;

}

.input-group:focus-within .input-group-text{

    background:#1565C0;

    color:#fff;

}

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

@media(max-width:991px){

.left-panel{

    display:none;

}

.login-wrapper{

    padding:20px;

    background:url('../../images/construction-bg.jpg') center center;

    background-size:cover;

}

.login-wrapper::before{

    content:'';

    position:fixed;

    inset:0;

    background:rgba(13,71,161,.70);

    z-index:0;

}

.login-card{

    position:relative;

    z-index:5;

    width:100%;

    max-width:420px;

}

footer{

    position:relative;

    margin-top:20px;

    color:#fff;

}

}

/* ===========================
   SMALL DEVICES
=========================== */

@media(max-width:576px){

.login-card{

    padding:25px;

}

.login-logo{

    width:180px;
    margin-bottom:20px;

}

.login-card h2{

    font-size:24px;

}

.subtitle{

    font-size:14px;

}

.btn-primary{

    height:48px;

}

.form-control{

    height:46px;

}

.features{

    gap:12px;

}

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#1565C0;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f5f5f5;

}

.btn-primary{

	background:linear-gradient(
		135deg,
		#1565C0,
		#0D47A1
	);
	
	box-shadow:0 12px 25px rgba(21,101,192,.35);

}

.btn-primary:hover{

	transform:translateY(-3px);

}

.left-footer{
    position:absolute;
    bottom:20px;
    left:0;
    right:0;

    text-align:center;

    color: #999 !important;

    font-size:14px;

    background:rgba(0,0,0,.25);

    padding:8px 0;

    backdrop-filter:blur(3px);
}

/*==========================
PASSWORD STRENGTH
===========================*/

.strength-area{
    margin-bottom:20px;
}

.strength-text{
    font-size:14px;
    margin-bottom:8px;
}

.strength-bar{

    width:100%;

    height:8px;

    background:#e6e6e6;

    border-radius:20px;

    overflow:hidden;
}

#strengthFill{

    width:0;

    height:100%;

    transition:.4s;
}

/*==========================
REQUIREMENTS
===========================*/

.requirements{

    background:#f7f9fc;

    padding: 2px 10px;

    border-radius:10px;

    /* margin-bottom:25px; */
}

.requirements h4{

    color:#1565C0;
    font-size: 16px;
    margin-bottom:10px;
    
}

.requirements ul{

    list-style:none;
    font-size: 12px;
    margin-bottom: 8px;
}

.requirements li{

    margin-bottom:2px;

    color:#888;

    transition:.3s;
}

.requirements li.valid{

    color:#18a957;

    font-weight:600;
}

.requirements li.valid i{

    color:#18a957;
}

/*==========================
MATCH MESSAGE
===========================*/

#matchMessage{

    margin-bottom:15px;

    font-size:13px;

    font-weight:600;
}