:root {
  --hz-bg: #0d1113;
  --hz-bg2: #12181b;
  --hz-border: rgba(255,255,255,.10);
  --hz-text: #f6f7f8;
  --hz-muted: rgba(255,255,255,.67);
  --hz-green: #18d67c;
  --hz-green2: #7ef4aa;
  --hz-blue: #3ec5ff;
  --hz-purple: #8b5cf6;
}

html, body {
  min-height: 100%;
  background: var(--hz-bg) !important;
}

body.task-login {
  margin: 0 !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: var(--hz-text) !important;
  background:
    radial-gradient(circle at 85% 92%, rgba(139,92,246,.25), transparent 26%),
    radial-gradient(circle at 78% 82%, rgba(24,214,124,.18), transparent 22%),
    linear-gradient(135deg, #0f1315 0%, #0b0f11 100%) !important;
}

body.task-login #layout,
body.task-login #layout-content,
body.task-login #login-form,
body.task-login .box,
body.task-login .formcontent {
  all: unset;
}

body.task-login #layout {
  display: block !important;
  min-height: 100vh !important;
}

body.task-login #layout > *:not(.hz-login-page) {
  display: none !important;
}

.hz-login-page {
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(500px, .92fr) 1.08fr;
}

.hz-login-left {
  min-height: 100vh;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px clamp(56px, 7vw, 108px);
  position: relative;
}

.hz-brand {
  position: absolute;
  top: 52px;
  left: clamp(56px, 7vw, 108px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.hz-brand-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.hz-brand-text {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}

.hz-brand-host {
  color: #ffffff;
}

.hz-brand-zera {
  color: var(--hz-green);
}

.hz-login-card {
  width: 100%;
  max-width: 470px;
  margin-top: 70px;
}

.hz-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 9px 14px;
  border: 1px solid var(--hz-border);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--hz-green2);
  font-size: 14px;
  font-weight: 700;
}

.hz-pill::before {
  content: "✉";
  color: var(--hz-green);
}

.hz-login-card h1 {
  margin: 0 0 12px;
  color: var(--hz-text);
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 780;
}

.hz-login-card h1 span {
  color: var(--hz-green2);
}

.hz-subtitle {
  margin: 0 0 38px;
  max-width: 420px;
  color: var(--hz-muted);
  font-size: 16px;
  line-height: 1.65;
}

/* ===== Form reset ===== */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body.task-login #login-form tr {
  margin-bottom: 22px !important;
}

body.task-login #login-form td.title {
  margin-bottom: 10px !important;
}

body.task-login #login-form td.title label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  text-indent: 0 !important;
  background: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.task-login #login-form td.title label::before,
body.task-login #login-form td.title label::after {
  display: none !important;
  content: none !important;
}

body.task-login #rcmloginuser,
body.task-login #rcmloginpwd,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  width: 100% !important;
  height: 60px !important;
  box-sizing: border-box !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid var(--hz-border) !important;
  background: rgba(255,255,255,.04) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus,
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus {
  border-color: rgba(24,214,124,.75) !important;
  box-shadow: 0 0 0 4px rgba(24,214,124,.12) !important;
}

body.task-login #rcmloginuser::placeholder,
body.task-login #rcmloginpwd::placeholder {
  color: rgba(255,255,255,.38) !important;
}

body.task-login #login-form .formbuttons {
  margin-top: 6px !important;
}

body.task-login #rcmloginsubmit,
body.task-login #login-form button,
body.task-login #login-form .button,
body.task-login #login-form .mainaction {
  width: 100% !important;
  height: 64px !important;
  border-radius: 15px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--hz-green), var(--hz-green2)) !important;
  color: #06130c !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  box-shadow: 0 18px 42px rgba(24,214,124,.24) !important;
  cursor: pointer !important;
}

body.task-login #rcmloginsubmit::after {
  content: "Log in to Mail";
  font-size: 16px;
  line-height: 64px;
}

.hz-bottom-note {
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--hz-muted);
  font-size: 14px;
  line-height: 1.6;
}

.hz-bottom-note a {
  color: var(--hz-green2) !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* ===== Right side ===== */
.hz-login-right {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 76px clamp(54px, 8vw, 120px);
  overflow: hidden;
}

.hz-gradient {
  position: absolute;
  width: 620px;
  height: 620px;
  right: -130px;
  bottom: -180px;
  background:
    radial-gradient(circle at 35% 45%, rgba(24,214,124,.40), transparent 35%),
    radial-gradient(circle at 60% 60%, rgba(139,92,246,.38), transparent 34%),
    radial-gradient(circle at 35% 72%, rgba(62,197,255,.20), transparent 30%);
  filter: blur(20px);
  opacity: .95;
}

.hz-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hz-content h2 {
  margin: 0 0 22px;
  color: var(--hz-text);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.03;
  letter-spacing: -.065em;
  font-weight: 800;
}

.hz-content h2 span {
  background: linear-gradient(90deg, var(--hz-green2), var(--hz-blue), var(--hz-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hz-description {
  max-width: 620px;
  margin: 0 0 44px;
  color: var(--hz-muted);
  font-size: 17px;
  line-height: 1.75;
}

.hz-features {
  display: grid;
  gap: 22px;
  margin-bottom: 50px;
}

.hz-feature {
  position: relative;
  padding-left: 42px;
}

.hz-feature::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(24,214,124,.16);
  color: var(--hz-green2);
  font-size: 14px;
  font-weight: 900;
}

.hz-feature b {
  display: block;
  color: #ffffff;
  font-size: 17px;
  margin-bottom: 5px;
}

.hz-feature p {
  margin: 0;
  color: var(--hz-muted);
  font-size: 14px;
  line-height: 1.55;
}

.hz-trust-card {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
}

.hz-trust-card strong {
  color: #ffffff;
  font-size: 15px;
}

.hz-trust-card span {
  color: var(--hz-muted);
  font-size: 13px;
}

#login-footer,
#message,
#messagestack,
.voice,
#logo {
  display: none !important;
}

@media (max-width: 1000px) {
  body.task-login {
    overflow: auto !important;
  }

  .hz-login-page {
    display: block;
  }

  .hz-login-left {
    min-height: auto;
    border-right: 0;
    padding: 126px 28px 60px;
  }

  .hz-brand {
    top: 30px;
    left: 28px;
  }

  .hz-login-card {
    margin-top: 24px;
    max-width: 100%;
  }

  .hz-login-right {
    display: none;
  }

  .hz-brand-text {
    font-size: 28px;
  }

  .hz-login-card h1 {
    font-size: 40px;
  }
}

/* ===== Hostzera final polish patch ===== */

/* stronger bottom glow like premium webmail pages */
body.task-login::after {
  content: "";
  position: fixed;
  right: -10vw;
  bottom: -28vh;
  width: 58vw;
  height: 52vh;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 32% 52%, rgba(24,214,124,.42), transparent 34%),
    radial-gradient(circle at 55% 50%, rgba(56,189,248,.30), transparent 30%),
    radial-gradient(circle at 78% 54%, rgba(139,92,246,.45), transparent 34%);
  filter: blur(34px);
  opacity: .95;
  animation: hzGlow 6s ease-in-out infinite alternate;
}

@keyframes hzGlow {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .72;
  }
  to {
    transform: translate3d(-32px, -18px, 0) scale(1.08);
    opacity: 1;
  }
}

/* right side: smaller gaps, tighter Hostinger-like composition */
.hz-login-right {
  padding-left: clamp(42px, 6vw, 92px) !important;
  padding-right: clamp(42px, 6vw, 100px) !important;
}

.hz-content {
  max-width: 650px !important;
}

.hz-content h2 {
  font-size: clamp(48px, 4.5vw, 66px) !important;
  line-height: .98 !important;
  margin-bottom: 18px !important;
}

.hz-description {
  margin-bottom: 34px !important;
  line-height: 1.6 !important;
}

.hz-features {
  gap: 16px !important;
  margin-bottom: 36px !important;
}

.hz-feature {
  padding-left: 38px !important;
}

.hz-feature b {
  margin-bottom: 3px !important;
}

.hz-feature p {
  line-height: 1.45 !important;
}

/* left logo cleaner */
.hz-brand-icon {
  width: 50px !important;
  height: 50px !important;
}

.hz-brand-text {
  font-size: 31px !important;
}

/* Roundcube form hard reset: remove old icon boxes */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.task-login #login-form tr {
  margin-bottom: 20px !important;
}

body.task-login #login-form td.title {
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
  margin: 0 0 9px !important;
  overflow: visible !important;
}

body.task-login #login-form td.title::before,
body.task-login #login-form td.title::after,
body.task-login #login-form td.title label::before,
body.task-login #login-form td.title label::after,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.task-login #login-form td.title label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  text-indent: 0 !important;
  white-space: normal !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-transform: none !important;
}

body.task-login #login-form td.input {
  position: relative !important;
}

body.task-login #login-form td.input::before,
body.task-login #login-form td.input::after {
  display: none !important;
  content: none !important;
}

body.task-login #rcmloginuser,
body.task-login #rcmloginpwd {
  display: block !important;
  width: 100% !important;
  height: 62px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  font-size: 15px !important;
  box-shadow: none !important;
  outline: none !important;
}

body.task-login #rcmloginuser:hover,
body.task-login #rcmloginpwd:hover {
  border-color: rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.055) !important;
}

body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus {
  border-color: rgba(24,214,124,.78) !important;
  box-shadow: 0 0 0 4px rgba(24,214,124,.13) !important;
}

/* nicer button */
body.task-login #rcmloginsubmit {
  margin-top: 4px !important;
  height: 64px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #18d67c 0%, #7ef4aa 100%) !important;
  box-shadow:
    0 18px 48px rgba(24,214,124,.26),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body.task-login #rcmloginsubmit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}


/* ===== Hostzera fixes: spacing, glow, labels ===== */

/* remove Hostzera Mail pill above login title */
.hz-pill {
  display: none !important;
}

/* add a little vertical space after removing pill */
.hz-login-card {
  margin-top: 88px !important;
}

/* right headline spacing */
.hz-content h2 {
  line-height: 1.13 !important;
  letter-spacing: -0.045em !important;
  word-spacing: 0.02em !important;
  margin-bottom: 24px !important;
}

.hz-content h2 span {
  display: inline-block !important;
  padding-left: 6px !important;
}

/* cleaner right paragraph spacing */
.hz-description {
  margin-top: 4px !important;
  margin-bottom: 38px !important;
}

/* change button text to Login */
body.task-login #rcmloginsubmit::after {
  content: "Login" !important;
  font-size: 16px !important;
  line-height: 64px !important;
  letter-spacing: 0 !important;
}

/* stronger animated glow layer on the right */
.hz-login-right::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -28%;
  width: 72%;
  height: 62%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 45%, rgba(24,214,124,.55), transparent 32%),
    radial-gradient(circle at 56% 56%, rgba(56,189,248,.38), transparent 30%),
    radial-gradient(circle at 78% 58%, rgba(139,92,246,.62), transparent 34%);
  filter: blur(42px);
  opacity: .95;
  transform: translate3d(0,0,0) scale(1);
  animation: hzLiveGlow 4.8s ease-in-out infinite alternate;
}

@keyframes hzLiveGlow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .62;
    filter: blur(46px);
  }
  50% {
    transform: translate3d(-38px, -22px, 0) scale(1.08);
    opacity: .95;
    filter: blur(38px);
  }
  100% {
    transform: translate3d(24px, -34px, 0) scale(1.14);
    opacity: 1;
    filter: blur(50px);
  }
}

/* keep content above glow */
.hz-content {
  position: relative !important;
  z-index: 3 !important;
}

.hz-gradient {
  animation: hzSoftGlow 7s ease-in-out infinite alternate !important;
}

@keyframes hzSoftGlow {
  from {
    transform: translate3d(0,0,0) scale(1);
    opacity: .55;
  }
  to {
    transform: translate3d(-28px,-18px,0) scale(1.12);
    opacity: .95;
  }
}


.hz-login-right {
  overflow: hidden !important;
}

.hz-login-right::after {
  content: "" !important;
  position: absolute !important;
  right: -20% !important;
  bottom: -30% !important;
  width: 82% !important;
  height: 70% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 26% 44%, rgba(24, 214, 124, .82), transparent 31%),
    radial-gradient(circle at 52% 52%, rgba(56, 189, 248, .62), transparent 32%),
    radial-gradient(circle at 78% 60%, rgba(139, 92, 246, .86), transparent 36%) !important;
  filter: blur(36px) saturate(1.35) !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
  transform: translate3d(0,0,0) scale(1);
  animation: hzStrongGlow 3.2s ease-in-out infinite alternate !important;
}

.hz-login-right::before {
  content: "" !important;
  position: absolute !important;
  right: 4% !important;
  bottom: 4% !important;
  width: 44% !important;
  height: 36% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 45% 45%, rgba(24, 214, 124, .44), transparent 42%),
    radial-gradient(circle at 62% 58%, rgba(139, 92, 246, .50), transparent 46%) !important;
  filter: blur(28px) saturate(1.4) !important;
  opacity: .9 !important;
  mix-blend-mode: screen !important;
  animation: hzPulseGlow 2.4s ease-in-out infinite alternate !important;
}

@keyframes hzStrongGlow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .72;
    filter: blur(42px) saturate(1.15);
  }
  35% {
    transform: translate3d(-42px, -18px, 0) scale(1.08);
    opacity: 1;
    filter: blur(30px) saturate(1.55);
  }
  70% {
    transform: translate3d(20px, -38px, 0) scale(1.16);
    opacity: .92;
    filter: blur(38px) saturate(1.35);
  }
  100% {
    transform: translate3d(-18px, -10px, 0) scale(1.22);
    opacity: 1;
    filter: blur(34px) saturate(1.65);
  }
}

@keyframes hzPulseGlow {
  0% {
    transform: scale(.88) translate3d(0, 0, 0);
    opacity: .45;
  }
  50% {
    transform: scale(1.18) translate3d(-18px, -14px, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1.02) translate3d(16px, -22px, 0);
    opacity: .78;
  }
}

.hz-content {
  position: relative !important;
  z-index: 5 !important;
}

body.task-login #rcmloginsubmit,
body.task-login #login-form button,
body.task-login #login-form .button,
body.task-login #login-form .mainaction {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

body.task-login #rcmloginsubmit::after {
  content: "Login" !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}


.hz-login-right::after {
  right: -26% !important;
  bottom: -42% !important;
  width: 76% !important;
  height: 58% !important;
  z-index: 0 !important;
  opacity: .86 !important;
  filter: blur(46px) saturate(1.25) !important;
  background:
    radial-gradient(circle at 30% 48%, rgba(24, 214, 124, .72), transparent 30%),
    radial-gradient(circle at 58% 56%, rgba(56, 189, 248, .48), transparent 31%),
    radial-gradient(circle at 82% 62%, rgba(139, 92, 246, .68), transparent 35%) !important;
  animation: hzStrongGlowSafe 4.5s ease-in-out infinite alternate !important;
}

.hz-login-right::before {
  right: -2% !important;
  bottom: -4% !important;
  width: 38% !important;
  height: 28% !important;
  z-index: 0 !important;
  opacity: .65 !important;
  filter: blur(38px) saturate(1.25) !important;
  animation: hzPulseGlowSafe 3.6s ease-in-out infinite alternate !important;
}

@keyframes hzStrongGlowSafe {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .62;
  }
  50% {
    transform: translate3d(-22px, -12px, 0) scale(1.06);
    opacity: .9;
  }
  100% {
    transform: translate3d(18px, -20px, 0) scale(1.1);
    opacity: .78;
  }
}

@keyframes hzPulseGlowSafe {
  0% {
    transform: scale(.9) translate3d(0, 0, 0);
    opacity: .35;
  }
  100% {
    transform: scale(1.12) translate3d(-10px, -12px, 0);
    opacity: .7;
  }
}

.hz-content {
  position: relative !important;
  z-index: 10 !important;
}

.hz-content h2,
.hz-description,
.hz-features,
.hz-trust-card {
  position: relative !important;
  z-index: 11 !important;
}

@media (max-width: 1000px) {
  body.task-login {
    overflow: auto !important;
    min-height: 100vh !important;
  }

  .hz-login-page {
    display: block !important;
    min-height: 100vh !important;
  }

  .hz-login-left {
    min-height: 100vh !important;
    border-right: 0 !important;
    padding: 118px 24px 48px !important;
    justify-content: flex-start !important;
  }

  .hz-brand {
    top: 30px !important;
    left: 24px !important;
  }

  .hz-brand-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .hz-brand-text {
    font-size: 28px !important;
  }

  .hz-login-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 30px !important;
  }

  .hz-login-card h1 {
    font-size: 38px !important;
    line-height: 1.08 !important;
  }

  .hz-subtitle {
    font-size: 15px !important;
    margin-bottom: 30px !important;
  }

  body.task-login #rcmloginuser,
  body.task-login #rcmloginpwd {
    height: 58px !important;
    font-size: 15px !important;
  }

  body.task-login #rcmloginsubmit {
    height: 60px !important;
  }

  .hz-login-right {
    display: none !important;
  }

  .hz-bottom-note {
    margin-top: 34px !important;
  }
}

@media (max-width: 420px) {
  .hz-login-left {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hz-brand {
    left: 18px !important;
  }

  .hz-login-card h1 {
    font-size: 34px !important;
  }
}


html,
body {
  min-height: 100% !important;
  height: auto !important;
}

body.task-login {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 100vh !important;
}

.hz-login-page {
  min-height: 100vh !important;
  height: auto !important;
}

.hz-login-left,
.hz-login-right {
  min-height: 100vh !important;
  height: auto !important;
}

@media (max-height: 820px) and (min-width: 1001px) {
  body.task-login {
    overflow-y: auto !important;
  }

  .hz-login-page {
    align-items: stretch !important;
  }

  .hz-login-left,
  .hz-login-right {
    min-height: 900px !important;
  }

  .hz-login-left {
    justify-content: flex-start !important;
    padding-top: 130px !important;
    padding-bottom: 70px !important;
  }

  .hz-login-card {
    margin-top: 40px !important;
  }

  .hz-login-right {
    align-items: flex-start !important;
    padding-top: 130px !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 1000px) {
  html,
  body,
  body.task-login {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .hz-login-page {
    display: block !important;
    min-height: 100vh !important;
    height: auto !important;
  }

  .hz-login-left {
    min-height: 100vh !important;
    height: auto !important;
    padding: 118px 24px 56px !important;
    justify-content: flex-start !important;
  }

  .hz-login-right {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hz-login-left {
    padding: 108px 18px 46px !important;
  }

  .hz-brand {
    top: 26px !important;
    left: 18px !important;
  }

  .hz-login-card {
    margin-top: 22px !important;
  }

  .hz-login-card h1 {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  .hz-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 26px !important;
  }

  body.task-login #rcmloginuser,
  body.task-login #rcmloginpwd {
    height: 56px !important;
  }

  body.task-login #rcmloginsubmit {
    height: 58px !important;
  }
}