/* Layout condiviso delle pagine di accesso ufficio e dipendenti. */
.office-login,
#loginScreen.employee-login {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  max-width: none;
  margin: 0;
  padding: 24px;
  overflow: auto;
  background: radial-gradient(circle at 12% 8%, #1f78b9 0, transparent 32rem), radial-gradient(circle at 90% 95%, #f28b19 0, transparent 30rem), #071a33;
}
#loginScreen.employee-login[hidden] { display: none !important; }
.office-login::before, .office-login::after,
#loginScreen.employee-login::before, #loginScreen.employee-login::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  opacity: .23;
}
.office-login::before, #loginScreen.employee-login::before { width: 30rem; height: 30rem; border: 1px solid #55c9f1; top: -14rem; right: -9rem; }
.office-login::after, #loginScreen.employee-login::after { width: 22rem; height: 22rem; border: 1px solid #ffb358; bottom: -12rem; left: -8rem; }

.office-login-card, .employee-login-card {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(300px, .9fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 28px;
  background: rgba(255,255,255,.13);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  backdrop-filter: blur(16px);
}
.office-login-brand, .employee-login-brand { padding: clamp(30px, 5vw, 58px); color: #fff; background: linear-gradient(145deg, rgba(13,50,84,.8), rgba(8,24,49,.46)); }
.office-login-brand img, .employee-login-brand img { display: block; width: 100%; max-width: 330px; height: 72px; margin: 0 0 16px; object-fit: contain; object-position: center center; border-radius: 8px; background: #fff; padding: 5px 8px; }
.office-login-brand .daikin-login-logo, .employee-login-brand .daikin-login-logo { height: 54px; }
.office-login-kicker, .employee-login-kicker { margin: 34px 0 12px; color: #8fe0fb !important; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.office-login-brand h1, .employee-login-brand h1 { margin: 0; font-size: clamp(33px, 4vw, 54px); line-height: 1; letter-spacing: -.055em; }
.office-login-brand h1 span, .employee-login-brand h1 span { color: #ffad49; }
.office-login-brand p, .employee-login-brand p { max-width: 460px; margin: 18px 0 0; color: #d2e2f0; line-height: 1.55; }

.office-login-form, .employee-login-form { padding: clamp(30px, 5vw, 54px); background: #fff; color: #172033; }
.office-login-form h2, .employee-login-form h2 { margin: 0 0 8px; font-size: 28px; }
.office-login-form .muted, .employee-login-form .subtitle { margin: 0 0 26px; color: #6c7686; line-height: 1.45; }
.office-login-form label, .employee-login-form label { display: block; margin: 18px 0 7px; color: #4c5c70; font-size: 13px; font-weight: 800; }
.office-login-form input, .office-login-form select, .employee-login-form input, .employee-login-form select { width: 100%; margin-bottom: 0; padding: 14px 15px; border: 1px solid #d5dfeb; border-radius: 10px; background: #fff; font: inherit; }
.office-login-form input:focus, .office-login-form select:focus, .employee-login-form input:focus, .employee-login-form select:focus { border-color: #1780c1; box-shadow: 0 0 0 4px rgba(23,128,193,.13); outline: 0; }
.office-login-error, .employee-login-form .login-error { display: block; min-height: 20px; margin: 15px 0 5px; color: #b42318; font-size: 13px; font-weight: 700; }
.office-login-form .btn, .employee-login-form .btn-primary { width: 100%; margin-top: 8px; padding: 14px; border: 0; border-radius: 9px; background: #0879bd; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.office-login-note, .employee-login-note { display: block; margin-top: 19px; color: #77879a; font-size: 12px; line-height: 1.45; }

@media (max-width: 720px) {
  .office-login, #loginScreen.employee-login { padding: 14px; }
  .office-login-card, .employee-login-card { grid-template-columns: 1fr; border-radius: 22px; }
  .office-login-brand, .employee-login-brand { padding: 28px 25px 26px; }
  .office-login-brand img, .employee-login-brand img { max-width: 275px; height: 60px; }
  .office-login-brand .daikin-login-logo, .employee-login-brand .daikin-login-logo { height: 45px; }
  .office-login-kicker, .employee-login-kicker { margin-top: 22px; }
  .office-login-brand h1, .employee-login-brand h1 { font-size: 37px; }
  .office-login-form, .employee-login-form { padding: 28px 25px 30px; }
}