/* Synthetic approximation. Not a vendor asset. */
html,body{margin:0;height:100%}
body{font-family:Helvetica,Arial,sans-serif;color:#fff;background:#3b3546}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(ellipse 30% 28% at 41% 39%,rgba(150,170,115,.85),rgba(150,170,115,0) 100%),
    radial-gradient(ellipse 28% 22% at 54% 69%,rgba(160,115,100,.8),rgba(160,115,100,0) 100%),
    radial-gradient(ellipse 22% 30% at 15% 100%,rgba(165,60,75,.85),rgba(165,60,75,0) 100%),
    radial-gradient(ellipse 18% 26% at 0% 80%,rgba(150,95,60,.8),rgba(150,95,60,0) 100%),
    radial-gradient(ellipse 22% 24% at 86% 72%,rgba(125,115,75,.75),rgba(125,115,75,0) 100%),
    radial-gradient(ellipse 30% 25% at 45% 100%,rgba(45,30,70,.9),rgba(45,30,70,0) 100%),
    linear-gradient(90deg,#344a55 0%,#3f4d5e 35%,#383050 65%,#302a42 100%)}
.beam{position:absolute;inset:0}
.b1{background:rgba(255,255,255,.06);clip-path:polygon(10% 0,35.75% 0,26.5% 39%,19.25% 39%)}
.b2{background:rgba(0,0,0,.08);clip-path:polygon(85.75% 0,100% 0,100% 39%,76.75% 39%)}
.b3{background:rgba(255,255,255,.06);clip-path:polygon(19.25% 68.4%,26.5% 68.4%,34% 100%,12% 100%)}
.b4{background:rgba(0,0,0,.08);clip-path:polygon(69.75% 68.4%,100% 68.4%,100% 100%,62.25% 100%)}
.logon{position:relative;z-index:1;box-sizing:border-box;min-height:100%;padding-top:39vh}
.band{position:relative;width:100%;box-sizing:border-box;min-height:346px;padding:72px 16px;display:flex;align-items:center;justify-content:center;background:rgba(66,60,68,.88)}
.brand{position:absolute;left:8.5%;top:50%;transform:translateY(-50%);font-family:"Segoe UI","Open Sans",Helvetica,Arial,sans-serif;font-size:24px;font-weight:300;color:#e8e8ea;letter-spacing:.2px}
.brand b{font-weight:700;color:#fff}
form{width:567px;max-width:100%;margin-right:70px}
h1{margin:0 0 16px;font-size:18px;font-weight:400}
.row{display:grid;grid-template-columns:184px 1fr;align-items:center;margin-bottom:6px}
label{font-size:16px;color:#a7a5aa}
input[type=text],input[type=password]{width:100%;height:44px;box-sizing:border-box;padding:0 10px;border:0;border-radius:0;background:#fff;color:#222;font-size:16px;outline:none}
input[type=text]:focus,input[type=password]:focus{box-shadow:inset 0 0 0 2px #0ba1c2}
.actions{margin-top:20px}
button{height:44px;width:100%;border:0;border-radius:0;background:#0ba1c2;color:#fff;font:inherit;font-size:16px;cursor:pointer}
button:hover{background:#0a91af}
.error{margin:12px 0 0 184px;color:#ff8a80;font-size:14px}
@media (max-width:900px){
  .brand{position:static;transform:none;margin-bottom:24px}
  .band{flex-direction:column;align-items:stretch;padding:40px 16px}
  .logon{padding-top:0;display:flex;align-items:center}
  form{width:auto;margin-right:0}
  .row{grid-template-columns:1fr;gap:6px}
  .actions span{display:none}
  .error{margin-left:0}
}