@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap");

* { padding:0; margin:0; box-sizing:border-box; font-family:"Open Sans",system-ui,sans-serif }


body {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #f3f8e9;
}

.login-box { display:flex; align-items:center; width:650px; max-width:90%; padding:20px 30px; background:url("../img/logo.png") no-repeat right 15% center,#fff; background-size:125px; border:1px solid #e6e6e6; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.08) }

.login-left { width:60% }

.login-form label { display:block; font-size:14px; font-weight:300; padding:10px 0 }

.login-form input, .login-form select { display:block; width:100%; height:36px; padding:0 14px; margin-top:10px; border:1px solid #adadad; border-radius:4px; background:#fff; color:#222; font-size:14px; line-height:36px }

.login-actions { display:flex; align-items:center; gap:16px; padding:10px 0 }

.login-actions button { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 18px; border:1px solid #42641a; border-radius:4px; background:#588424; color:#fff; font-size:14px; cursor:pointer }

.login-actions a { font-size:14px; color:#333; text-decoration:none }
.login-actions a:hover { color: #015aa3; }

.bluegard { width:100%; height:100%; background-image:url(../img/login.png); background-size:cover; background-position:center; display:flex; justify-content:center; align-items:center }
.bluegard::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); pointer-events: none; }
.bluegard > * { position: relative; z-index: 1; }

.login-msg { font-size:12px; line-height:18px; }
.login-msg:empty { display:none; }
.login-msg.error { color:#b00020; }
.login-msg.success { color:#1b7f3a; }
.login-msg.error, .login-msg.success { padding: 10px 0; }

@media (orientation: portrait) {
    
    .bluegard { background-image:url(../img/login-mobile.png); }
    .login-box { padding: 250px 20px 20px 30px; width:400px; max-width:90%; ; background: url("../img/logo.png") no-repeat top 15% center,#fff; background-size:150px; }
    .login-left { width:100% }
    
}