*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}
body.login-page{position:relative;min-height:100vh;overflow:hidden;font-family:"Segoe UI",Arial,sans-serif;color:#fff;background:url("../img/login-background.png") center center/100% 100% no-repeat #061733}
.brand-area{position:absolute;left:4.8vw;top:10.5vh;width:34vw}.brand{display:flex;align-items:center;gap:14px}.brand img{width:64px;height:64px;object-fit:contain}
.brand-name{font-size:38px;line-height:1;font-weight:500}.brand-connect{margin-top:5px;color:#B7E10A;font-size:33px;line-height:1;font-weight:500}
.workplace-copy{margin-top:62px;margin-left:74px}.workplace-title{font-size:31px;font-weight:600;white-space:nowrap;text-shadow:0 2px 10px rgba(0,24,65,.28)}
.workplace-motto {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 500;
    color: #f2f5fa;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0,24,65,.28);
}

.workplace-motto span {
    color: #B7E10A;
    font-weight: 600;
}
.login-panel {
    position: absolute;
    right: 2.8vw !important;
    top: 30vh !important;
    width: 340px;
    padding: 30px 28px 29px;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 13px;
    color: #122a58;
    box-shadow: 0 18px 48px rgba(0,15,40,.30);
}
.login-panel h1{margin:0 0 26px;text-align:center;font-size:20px;font-weight:600}.field{height:48px;margin-bottom:14px;display:flex;align-items:center;overflow:hidden;background:#fff;border:1px solid #d4dbe6;border-radius:6px}
.field:focus-within{border-color:#6684bd;box-shadow:0 0 0 3px rgba(28,68,139,.10)}.field-icon{width:48px;min-width:48px;height:100%;display:grid;place-items:center;color:#173a79;border-right:1px solid #e3e8f0;background:#fff}
.field-icon svg{width:20px;height:20px;fill:currentColor}.field input{width:100%;height:100%;min-width:0;border:0;outline:0;padding:0 13px;background:#eef3ff;color:#1c2d4a;font:inherit;font-size:14px}
.field input::placeholder{color:#8190a6}.login-options{margin:3px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#263957;font-size:12px}
.remember{display:flex;align-items:center;gap:7px;white-space:nowrap}.remember input{width:16px;height:16px;margin:0}.login-options a{color:#3152c8;text-decoration:none;white-space:nowrap}
.login-panel button{width:100%;height:47px;border:0;border-radius:5px;background:linear-gradient(90deg,#102a69,#1f4398);color:#fff;font:inherit;font-size:15px;cursor:pointer}
.login-error{margin:-8px 0 15px;padding:8px 10px;border:1px solid #efcaca;border-radius:5px;background:#fff1f1;color:#9e2f2f;font-size:12px;text-align:center}
.login-footer{position:absolute;right:3.8vw;bottom:2.7vh;color:#c8d0dc;font-size:11px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.30)}
@media(max-width:1100px){.brand-area{left:4vw;width:40vw}.brand-name{font-size:32px}.brand-connect{font-size:25px}.workplace-copy{margin-left:62px}.workplace-title{font-size:26px}.workplace-motto{font-size:15px}.login-panel{right:4vw;width:320px}}
@media(max-width:800px){body.login-page{overflow:auto;background-size:cover}.brand-area{position:relative;left:auto;top:auto;width:auto;padding:30px 22px 0}.workplace-copy{margin:32px 0 0}.workplace-title,.workplace-motto{white-space:normal}.login-panel{position:relative;right:auto;top:auto;width:min(92%,340px);margin:36px auto 92px}.login-footer{right:18px;bottom:15px;left:18px;text-align:right;white-space:normal}}

/* Final login-panel position */
.login-panel {
    right: 2vw !important;
    top: 30vh !important;
}

/* Final login-panel position */
.login-panel {
    right: 2.8vw !important;
    top: 40vh !important;
}

/* Final login-panel position */
.login-panel {
    right: 3.8vw !important;
    top: 50vh !important;
}

.login-panel {
    right: 2.8vw !important;
    top: 30vh !important;
}

/* Final workplace motto size */
.workplace-motto {
    font-size: 22px !important;
    font-weight: 600 !important;
}

.workplace-motto span {
    color: #B7E10A !important;
    font-weight: 600 !important;
}