html, body{margin:0;padding:0}
.login-container{display:flex;min-height:100vh;font-family:Inter, 'Segoe UI', Arial, Helvetica, sans-serif;background:#f3f6f8}
.login-background{position:relative;min-height:100vh;box-sizing:border-box;background-image:url('../../assets/Loginpage.png');background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:space-between;padding:38px 54px 49px 269px;overflow:hidden}
.login-side-panel{align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;padding-top:18px}
.side-brand{display:inline-block;margin-bottom:18px;padding:6px 14px;border-radius:6px;z-index:3}
.login-side-panel h1{font-family:Inter, 'Segoe UI', sans-serif;font-size:56px;line-height:1.02;margin:8px 0 18px;color:#13243d;font-weight:800}
.login-side-panel p{font-size:16px;line-height:1.8;color:#5a6b78;max-width:420px}
.login-card-wrapper{width:460px;max-width:100%}
.login-card{background:#ffffff;border-radius:24px;box-shadow:0 30px 60px rgba(17,45,84,0.12);padding:42px 44px;position:relative;overflow:visible;border:1px solid rgba(34,60,80,0.04)}
.login-card-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50% !important;
    background: #e9f6ee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #36c6d3;
    font-size: 36px;
    border: 2px dashed #36c6d3;
    box-shadow: 0 0 0 8px rgba(45,141,69,.06)
}
.login-card-icon i{font-size:34px}
.form-title{font-weight:800;color:#13243d;text-align:center;font-size:22px;margin:8px 0 8px}
.login-subtitle{color:#7b8c99;text-align:center;font-size:13px;margin:0 0 20px}
.form-divider{width:48px;height:4px;background:#36c6d3;margin:12px auto 22px;border-radius:4px}
.new-input{position:relative;margin-bottom:18px}
.new-input .form-control {
    width: 100%;
    padding: 11px 13px 9px 59px !important;
    height: 54px;
    border-radius: 12px !important;
    border: 1px solid #e6eef3;
    background: #ffffff;
    box-shadow: none;
    color: #243447;
    box-sizing: border-box;
    line-height: 20px;
}
.new-input i {
    position: absolute;
    left: 20px;
    top: 28%;
    transform: translateY(-50%);
    color: #36c6d3;
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 22px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}
.new-input .form-control::placeholder{color:#9aa8b2}
.form-actions{margin-top:18px}
.btn-login{width:100%;background:linear-gradient(90deg,#36c6d3,#5ebf72) !important;border:none;color:#fff;padding:14px 20px;border-radius:12px;font-size:16px;font-weight:700;box-shadow:0 8px 18px rgba(46,124,71,0.16)}
.login-footer-text{min-height:24px;margin-top:18px}
.login-extra{text-align:right;margin-top:12px}
.login-extra a{color:#36c6d3;font-weight:600}
.create-account{margin-top:24px;text-align:center;color:#6f7b8a;font-size:14px;line-height:1.7}
@media(max-width:1100px){.login-background{padding:16px 40px 40px 220px}.login-side-panel{width:42%}}
@media(max-width:960px){.login-background{padding:40px 24px;justify-content:center;flex-direction:column;align-items:center}.login-side-panel{width:100%;max-width:500px;text-align:center;padding-top:10px}.side-brand{justify-content:center;margin:0 auto 18px}.login-card-wrapper{width:100%;margin-top:32px;padding:0 18px}}
@media(max-width:680px){.login-card{padding:26px}.form-title{font-size:20px}.login-side-panel h1{font-size:34px}.login-side-panel p{font-size:15px}.side-brand img{width:130px}
.new-input i{left:16px;width:18px;height:18px;font-size:16px;line-height:18px}
.new-input .form-control{padding-left:56px;height:50px}
}
/* Fallback for when image isn't available: use solid green gradient */
@supports not (background-image: url('../../assets/Loginpage.png')){
    .login-background{background-image:linear-gradient(180deg,#e8f6ef,#f4fbf7)}
}