/* Hostiva: huisstijl voor alleen de inlogpagina van de webmail (Roundcube, skin Elastic). */
@font-face { font-family: "HV Clash"; src: url("fonts/ClashDisplay-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "HV Satoshi"; src: url("fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HV Satoshi"; src: url("fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "HV Satoshi"; src: url("fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

body.task-login {
  --hv-ink: #16213B; --hv-deep: #0C1326; --hv-blue: #2458D6; --hv-blue-dark: #1B3F9E;
  --hv-sky: #9DB8FF; --hv-grey: #5D6373; --hv-line: #DDDAD0; --hv-on-deep: #AEB9D9;
  font-family: "HV Satoshi", "Helvetica Neue", system-ui, sans-serif;
  background-color: var(--hv-deep) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(36, 88, 214, .38), transparent 70%),
    radial-gradient(ellipse 45% 40% at 85% 100%, rgba(157, 184, 255, .14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='811' height='733'%3E%3Ccircle cx='158' cy='408' r='0.7' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='552' cy='100' r='0.5' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='42' cy='92' r='0.6' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='250' cy='96' r='0.5' fill='%239DB8FF' opacity='.9'/%3E%3Ccircle cx='583' cy='130' r='0.5' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='54' cy='230' r='0.9' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='433' cy='151' r='0.7' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='577' cy='702' r='0.7' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='385' cy='103' r='0.6' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='637' cy='214' r='0.5' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='480' cy='603' r='0.7' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='258' cy='188' r='0.7' fill='%239DB8FF' opacity='.5'/%3E%3Ccircle cx='592' cy='311' r='0.5' fill='%239DB8FF' opacity='.9'/%3E%3Ccircle cx='750' cy='463' r='0.7' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='528' cy='432' r='0.5' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='504' cy='435' r='0.6' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='352' cy='715' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='74' cy='99' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='66' cy='722' r='0.5' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='737' cy='399' r='0.7' fill='%239DB8FF' opacity='.7'/%3E%3Ccircle cx='476' cy='367' r='0.5' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='64' cy='227' r='0.9' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='411' cy='404' r='0.6' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='463' cy='415' r='0.6' fill='%239DB8FF' opacity='.7'/%3E%3Ccircle cx='444' cy='567' r='0.6' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='703' cy='393' r='0.7' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='184' cy='158' r='0.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='500' cy='607' r='0.5' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='8' cy='153' r='0.7' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='132' cy='711' r='0.7' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='802' cy='700' r='0.9' fill='%239DB8FF' opacity='.9'/%3E%3Ccircle cx='412' cy='407' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='67' cy='199' r='0.9' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='170' cy='116' r='0.9' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='4' cy='584' r='0.5' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='632' cy='30' r='0.7' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='156' cy='653' r='0.9' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='489' cy='129' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='495' cy='499' r='0.9' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='108' cy='354' r='0.6' fill='%239DB8FF' opacity='.7'/%3E%3Ccircle cx='712' cy='169' r='0.9' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='544' cy='374' r='0.6' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='662' cy='97' r='0.7' fill='%239DB8FF' opacity='.7'/%3E%3Ccircle cx='175' cy='368' r='0.7' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='631' cy='203' r='0.6' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='208' cy='534' r='0.6' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='32' cy='290' r='0.5' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='713' cy='623' r='0.6' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='377' cy='86' r='0.7' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='485' cy='205' r='0.6' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='643' cy='628' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='662' cy='90' r='0.7' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='805' cy='208' r='0.9' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='655' cy='344' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='415' cy='90' r='0.9' fill='%239DB8FF' opacity='.5'/%3E%3Ccircle cx='134' cy='32' r='0.6' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='630' cy='614' r='0.6' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='565' cy='565' r='0.6' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='747' cy='669' r='0.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='203' cy='220' r='0.9' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='303' cy='517' r='0.6' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='561' cy='433' r='0.7' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='473' cy='682' r='0.7' fill='%239DB8FF' opacity='.9'/%3E%3Ccircle cx='548' cy='159' r='0.6' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='799' cy='191' r='0.9' fill='%239DB8FF' opacity='.35'/%3E%3Ccircle cx='180' cy='148' r='0.6' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='337' cy='702' r='0.5' fill='%239DB8FF' opacity='.9'/%3E%3Ccircle cx='577' cy='62' r='0.5' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='47' cy='104' r='0.7' fill='%239DB8FF' opacity='.9'/%3E%3Ccircle cx='782' cy='68' r='0.5' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='713' cy='287' r='0.6' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='719' cy='539' r='0.6' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='144' cy='430' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='327' cy='78' r='0.9' fill='%239DB8FF' opacity='.5'/%3E%3Ccircle cx='78' cy='221' r='0.9' fill='%239DB8FF' opacity='.7'/%3E%3Ccircle cx='799' cy='162' r='0.5' fill='%239DB8FF' opacity='.7'/%3E%3Ccircle cx='263' cy='144' r='0.6' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='411' cy='502' r='0.5' fill='%23fff' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 811px 733px;
  min-height: 100vh;
}
body.task-login #layout { background: transparent; min-height: 100vh; }
body.task-login #layout-content {
  background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px 16px; box-sizing: border-box; height: auto;
}
body.task-login #logo { display: none; }

body.task-login #login-form {
  top: auto; width: 100%; max-width: 420px; margin: 0 auto;
  background: #fff; color: var(--hv-ink); text-align: left;
  border-radius: 22px; padding: 34px 32px 26px; box-sizing: border-box;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(157, 184, 255, .12);
}

.hv-head { margin-bottom: 22px; }
.hv-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--hv-ink) !important; }
.hv-brand span { font-family: "HV Clash", "HV Satoshi", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.hv-planet { width: 34px; height: 34px; background: var(--hv-ink); border-radius: 9px; padding: 3px; box-sizing: border-box; }
.hv-title { font-family: "HV Clash", "HV Satoshi", sans-serif; font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: 0; word-spacing: .04em; margin: 22px 0 6px; color: var(--hv-ink); }
.hv-sub { margin: 0; color: var(--hv-grey); font-size: 15px; line-height: 1.5; }

body.task-login #login-form table { margin: 0; }
body.task-login #login-form .form-group, body.task-login #login-form tr { margin-bottom: 12px; }
body.task-login #login-form .input-group { flex-wrap: nowrap; }
/* Eén strak veld: het losse pictogramvakje van Elastic weg */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group > .input-group-text { display: none !important; }
body.task-login #login-form input.form-control {
  height: 50px; padding: 0 16px; font-family: "HV Satoshi", sans-serif; font-size: 16px;
  color: var(--hv-ink) !important; -webkit-text-fill-color: var(--hv-ink); caret-color: var(--hv-blue);
  background: #fff !important; border: 1px solid var(--hv-line) !important; border-radius: 12px !important; box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
body.task-login #login-form input.form-control::placeholder { color: #8A90A0; -webkit-text-fill-color: #8A90A0; opacity: 1; }
body.task-login #login-form input.form-control:hover { border-color: #C9C6BB !important; }
body.task-login #login-form input.form-control:focus {
  border-color: var(--hv-blue) !important; box-shadow: 0 0 0 4px rgba(36, 88, 214, .14) !important; outline: 0;
}
body.task-login #login-form input.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #fff inset !important; -webkit-text-fill-color: var(--hv-ink);
}

body.task-login #login-form .formbuttons { margin: 18px 0 0; }
body.task-login #rcmloginsubmit {
  height: 50px; border-radius: 12px; border: 0; background: var(--hv-blue); color: #fff;
  font-family: "HV Satoshi", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none !important;
  box-shadow: 0 10px 24px -10px rgba(36, 88, 214, .8); transition: background .2s, transform .2s;
}
body.task-login #rcmloginsubmit:hover, body.task-login #rcmloginsubmit:focus { background: var(--hv-blue-dark); }
body.task-login #rcmloginsubmit:active { transform: translateY(1px); }

body.task-login #login-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid #ECEAE3; color: var(--hv-grey); font-size: 13.5px; line-height: 1.5; text-align: center; flex: none; }
body.task-login #login-footer > div { margin: 0; padding: 0; background: none; }
body.task-login #login-footer a { color: var(--hv-blue); font-weight: 500; }

/* Meldingen (bijv. "Inloggen mislukt"): de lege meldingenlaag mag nooit tikken en klikken onderscheppen.
   Op telefoons staat die laag over de hele breedte; geen top/bottom aanpassen, dan bedekt hij de pagina. */
body.task-login #messagestack { pointer-events: none; }
body.task-login #messagestack > * { pointer-events: auto; }

/* Donkere modus van Roundcube: de kaart blijft licht, de achtergrond is al donker */
html.dark-mode body.task-login #login-form { background: #fff; color: var(--hv-ink); }
html.dark-mode body.task-login #login-footer { color: var(--hv-grey); }

/* De astronaut die over de bovenrand van de kaart gluurt. De rand ligt op 132/150 van de tekening. */
body.task-login #layout-content { padding-top: 130px; }
.hv-peek { position: absolute; right: 26px; top: -92.4px; width: 168px; height: 105px; pointer-events: none; z-index: 2; }
.hv-peek svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hv-peek-head { animation: hv-peek-rise .9s cubic-bezier(.32, .72, 0, 1) .25s both; }
.hv-peek-hand { transform-box: fill-box; transform-origin: 50% 100%; animation: hv-peek-grab .5s cubic-bezier(.32, .72, 0, 1) .1s both; }
.hv-peek-hand + .hv-peek-hand { animation-delay: .18s; }
.hv-peek-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: hv-peek-blink 5.5s 2s infinite; }
.hv-peek-beacon { animation: hv-peek-beacon 2.4s ease-in-out infinite; }
@keyframes hv-peek-rise { from { transform: translateY(70px); } to { transform: none; } }
@keyframes hv-peek-grab { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hv-peek-blink { 0%, 94%, 100% { transform: none; } 97% { transform: scaleY(.1); } }
@keyframes hv-peek-beacon { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .hv-peek-head, .hv-peek-hand, .hv-peek-eyes, .hv-peek-beacon { animation: none; }
}

@media (max-width: 480px) {
  body.task-login #login-form { padding: 28px 22px 22px; border-radius: 18px; }
  .hv-peek { right: 16px; width: 136px; height: 85px; top: -74.8px; }
  .hv-title { font-size: 24px; }
}