body{background-image:url('../images/login-photo.png');background-size:cover;background-position:center center;display:grid}header{display:block;text-align:center}footer{align-self:end}#loginPage{box-sizing:border-box;margin:auto;padding:.25em;width:clamp(var(--minWidth),50%,var(--maxWidth));background-color:var(--grayColor,#e6e6e6);border-radius:1em}#loginPage>h2{background-color:var(--horizonBlue,hsl(0 0 45%));color:#fff;width:clamp(400px,80%,450px);margin-inline:auto;padding:.25em;text-align:center}.loginSeparator{width:clamp(400px,80%,450px);margin-inline:auto}.loginForm{text-align:center;margin:.5em auto;padding:1em}.loginRow{margin:0 auto;margin-bottom:.5em;width:clamp(400px,80%,450px);text-align:center;box-sizing:border-box}.loginRow label{text-align:left;display:block;font-size:.95rem;box-sizing:border-box;color:var(--horizonBlue,hsl(0 0 25%))}.loginRow input[type=text],.loginRow input[type=password]{box-sizing:border-box;width:100%;font-size:1rem}.loginRow input[type=submit]{font-size:1rem;font-weight:bold;padding:.25em .5em;box-shadow:0 0 3px 3px white;width:150px;cursor:pointer}.input-validation-error{outline-color:var(--errorBorderColor,#c9c9c9);background-color:var(--errorBackgroundColor,#c9c9c9)}.field-validation-valid,.field-validation-error{padding:.2em;grid-column:1/span 2;display:inherit;margin:.25em}.loginLeft{background-image:linear-gradient(to bottom,var(--horizonBlue,transparent) 20px,transparent 20px,transparent 25px,var(--horizonRed) 25px);background-size:65% 100%;background-repeat:no-repeat;height:30px;margin-inline:0;margin-block:1em;animation:rollRight 3s ease-in-out 1 forwards}@keyframes rollRight{from{background-position-x:-100%}to{background-position-x:0%}}@property --position{syntax:"<percentage>";inherits:true;initial-value:0%;}.loginRight{--position:0%;background-image:linear-gradient(to left,var(--horizonYellow,transparent) var(--position,100%),transparent var(--position,100%));background-repeat:no-repeat;height:30px;margin-inline:0;margin-block:1em;animation:rollLeft 2s linear 1 forwards}@keyframes rollLeft{to{--position:25%}}.recoveryDialog{width:400px}.recoveryLinkContainer{width:clamp(400px,80%,450px);display:flex;justify-content:space-between;margin:0 auto;padding:0}.recoveryLink{color:var(--horizonBlue,hsl(0 0 25%));cursor:pointer;font-size:.8rem;padding:.25em .5em}.recoveryRow{display:grid;grid-template-columns:1fr 2fr;gap:.25em}.recoveryRow{margin-inline:1em;margin-block:.5em}.dialogButtons{margin-inline:1em;margin-block:1em;display:grid;grid-template-columns:1fr 1fr;gap:1em}