body.tfsf-webmail {
  --tfsf-page: #141619;
  --tfsf-panel: #1c2025;
  --tfsf-field: #15181c;
  --tfsf-line: #353c43;
  --tfsf-ink: #f4f6f5;
  --tfsf-muted: #acb5bc;
  --tfsf-accent: #64e4d3;
  --tfsf-banner-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20720%20225%22%20width%3D%22720%22%20height%3D%22225%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22lines%22%3E%3Cstop%20stop-color%3D%22%233ee6d0%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%2343a99b%22/%3E%3Cstop%20offset%3D%22.69%22%20stop-color%3D%22%239ffbf2%22/%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22%236ad7c5%22%20stop-opacity%3D%22.34%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239cfff0%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22glass%22%20x1%3D%2215%25%22%20x2%3D%2266%25%22%20y1%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20stop-color%3D%22%230f605f%22/%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%232cbaae%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%235eebdc%22/%3E%3Cstop%20offset%3D%22.68%22%20stop-color%3D%22%231c8f89%22/%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%23bafff6%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232a6c66%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22rim%22%20x1%3D%2211%25%22%20x2%3D%2280%25%22%20y1%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20stop-color%3D%22%23358b82%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23caffff%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2353cbba%22/%3E%3C/linearGradient%3E%3CradialGradient%20id%3D%22atmosphere%22%3E%3Cstop%20stop-color%3D%22%2355ddc7%22%20stop-opacity%3D%22.22%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2355ddc7%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%3Cfilter%20id%3D%22bloom%22%20x%3D%22-30%25%22%20width%3D%22160%25%22%20y%3D%22-30%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%226%22/%3E%3C/filter%3E%3Cg%20id%3D%22mark%22%3E%3Cpath%20d%3D%22M%20565.46%2C389.10%20L%20696.40%2C615.90%20L%20609.05%2C571.85%20L%20559.93%2C486.77%20Z%22/%3E%3Cpath%20d%3D%22M%20670.94%2C660.00%20L%20409.06%2C660.00%20L%20490.88%2C606.38%20L%20589.12%2C606.38%20Z%22/%3E%3Cpath%20d%3D%22M%20383.60%2C615.90%20L%20514.54%2C389.10%20L%20520.07%2C486.77%20L%20470.95%2C571.85%20Z%22/%3E%3C/g%3E%3CclipPath%20id%3D%22glass-cut%22%3E%3Cpath%20d%3D%22M%20565.46%2C389.10%20L%20696.40%2C615.90%20L%20609.05%2C571.85%20L%20559.93%2C486.77%20Z%22/%3E%3Cpath%20d%3D%22M%20670.94%2C660.00%20L%20409.06%2C660.00%20L%20490.88%2C606.38%20L%20589.12%2C606.38%20Z%22/%3E%3Cpath%20d%3D%22M%20383.60%2C615.90%20L%20514.54%2C389.10%20L%20520.07%2C486.77%20L%20470.95%2C571.85%20Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse%20cx%3D%22495%22%20cy%3D%22118%22%20rx%3D%22196%22%20ry%3D%22135%22%20fill%3D%22url%28%23atmosphere%29%22%20opacity%3D%22.56%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22url%28%23lines%29%22%3E%3Cpath%20d%3D%22M0%2016.0%20C140%2035.0%20260%20116.0%20392%20108.0%20S532%2077.0%20618%20144.0%20S693%2070.0%20720%2036.0%22%20opacity%3D%220.46%22%20stroke-width%3D%221.8%22/%3E%3Cpath%20d%3D%22M0%2022.2%20C140%2041.2%20260%20117.9%20392%20108.9%20S532%2082.0%20618%20145.1%20S693%2072.2%20720%2039.1%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2028.4%20C140%2047.4%20260%20119.7%20392%20109.7%20S532%2086.9%20618%20146.1%20S693%2074.3%20720%2042.2%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2034.6%20C140%2053.6%20260%20121.6%20392%20110.6%20S532%2091.9%20618%20147.2%20S693%2076.5%20720%2045.3%22%20opacity%3D%220.46%22%20stroke-width%3D%221.8%22/%3E%3Cpath%20d%3D%22M0%2040.8%20C140%2059.8%20260%20123.4%20392%20111.5%20S532%2096.8%20618%20148.2%20S693%2078.7%20720%2048.4%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2047.0%20C140%2066.0%20260%20125.3%20392%20112.3%20S532%20101.8%20618%20149.3%20S693%2080.8%20720%2051.5%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2053.2%20C140%2072.2%20260%20127.2%20392%20113.2%20S532%20106.8%20618%20150.3%20S693%2083.0%20720%2054.6%22%20opacity%3D%220.46%22%20stroke-width%3D%221.8%22/%3E%3Cpath%20d%3D%22M0%2059.4%20C140%2078.4%20260%20129.0%20392%20114.1%20S532%20111.7%20618%20151.4%20S693%2085.2%20720%2057.7%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2065.6%20C140%2084.6%20260%20130.9%20392%20114.9%20S532%20116.7%20618%20152.4%20S693%2087.4%20720%2060.8%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2071.8%20C140%2090.8%20260%20132.7%20392%20115.8%20S532%20121.6%20618%20153.5%20S693%2089.5%20720%2063.9%22%20opacity%3D%220.46%22%20stroke-width%3D%221.8%22/%3E%3Cpath%20d%3D%22M0%2078.0%20C140%2097.0%20260%20134.6%20392%20116.7%20S532%20126.6%20618%20154.5%20S693%2091.7%20720%2067.0%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2084.2%20C140%20103.2%20260%20136.5%20392%20117.5%20S532%20131.6%20618%20155.6%20S693%2093.9%20720%2070.1%22%20opacity%3D%220.2%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M0%2090.4%20C140%20109.4%20260%20138.3%20392%20118.4%20S532%20136.5%20618%20156.6%20S693%2096.0%20720%2073.2%22%20opacity%3D%220.46%22%20stroke-width%3D%221.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28510%20115%29%20scale%28.71%29%20translate%28-540%20-524%29%22%3E%3Cuse%20href%3D%22%23mark%22%20fill%3D%22%2346cfc0%22%20opacity%3D%22.62%22%20filter%3D%22url%28%23bloom%29%22/%3E%3Cuse%20href%3D%22%23mark%22%20fill%3D%22url%28%23glass%29%22%20stroke%3D%22url%28%23rim%29%22%20stroke-width%3D%222%22/%3E%3Cg%20clip-path%3D%22url%28%23glass-cut%29%22%20fill%3D%22none%22%20stroke%3D%22%23b7fff8%22%3E%3Cpath%20d%3D%22M352%20613%20C487%20600%20606%20535%20721%20454%22%20stroke-width%3D%2214%22%20opacity%3D%22.13%22/%3E%3Cpath%20d%3D%22M346%20629%20C485%20617%20620%20547%20737%20470%22%20stroke-width%3D%223%22%20opacity%3D%22.32%22/%3E%3Cpath%20d%3D%22M354%20660%20C503%20651%20629%20573%20735%20495%22%20stroke-width%3D%2210%22%20opacity%3D%22.15%22/%3E%3Cpath%20d%3D%22M349%20683%20C494%20674%20609%20614%20739%20513%22%20stroke-width%3D%222%22%20opacity%3D%22.24%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--tfsf-page) !important;
  color: var(--tfsf-ink);
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.tfsf-webmail .tfsf-mail-masthead {
  border-bottom: 1px solid #2d3339;
  background: #17191d;
}

.tfsf-webmail .tfsf-mail-brand {
  display: flex;
  align-items: center;
  min-height: 62px;
  gap: 11px;
  width: min(1060px, calc(100% - 56px));
  margin-inline: auto;
  color: var(--tfsf-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.tfsf-mail-brand-mark {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  overflow: hidden;
}

.tfsf-mail-brand-mark img {
  display: block;
  width: 29px;
  height: 29px;
  transform: scale(2.7);
}

.tfsf-webmail > .container.flex-grow-1 {
  width: min(1060px, calc(100% - 56px));
  max-width: none;
  padding: 0;
  margin: 0 auto !important;
}

.tfsf-webmail .tfsf-login-layout {
  display: grid;
  justify-items: center;
  gap: clamp(24px, 4.7vh, 45px);
  padding: clamp(22px, 4.6vh, 46px) 0 38px;
}

.tfsf-webmail .tfsf-mail-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(154px, 22vh, 215px);
  width: 100%;
  padding: clamp(23px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid #32514f;
  border-radius: 16px;
  background: linear-gradient(105deg, #1e2328 0%, #1d2126 58%, #21292d 100%);
}

.tfsf-webmail .tfsf-mail-banner::after {
  content: "";
  position: absolute;
  inset: 0 0 0 27%;
  z-index: -1;
  pointer-events: none;
  background: var(--tfsf-banner-art) right center / auto 100% no-repeat;
  mask-image: linear-gradient(90deg, #0000, #000 30%);
}

.tfsf-mail-banner-copy h1 {
  margin: 0;
  color: var(--tfsf-ink);
  font-size: clamp(44px, 6.2vw, 75px);
  font-weight: 680;
  letter-spacing: -.072em;
  line-height: .99;
}

.tfsf-mail-banner-copy p {
  margin: 12px 0 0;
  max-width: 27ch;
  color: #ced9d8;
  font-size: clamp(13px, 1.55vw, 16px);
  line-height: 1.5;
}

.tfsf-webmail .tfsf-auth-column {
  min-width: 0;
  width: min(100%, 446px);
}

.tfsf-webmail .login-card.login-user {
  margin: 0;
  overflow: hidden;
  color: var(--tfsf-ink);
  background: var(--tfsf-panel);
  border: 1px solid var(--tfsf-line) !important;
  border-radius: 16px;
  box-shadow: 0 14px 42px #080b104a;
}

.tfsf-webmail .login-card.login-user::before { display: none; }

.tfsf-webmail .login-card.login-user .card-body { padding: clamp(22px, 4vw, 34px); }

.tfsf-webmail .login-card.login-user .card-header,
.tfsf-webmail .login-card.login-user .mailcow-logo,
.tfsf-webmail .login-card.login-user .hr-title,
.tfsf-webmail .login-card.login-user #fido2-login,
.tfsf-webmail .login-card.login-user #fido2-alerts:empty,
.tfsf-webmail .login-card.login-user .apps,
.tfsf-webmail .login-card.login-user .apps + div,
.tfsf-webmail .login-card.login-user legend,
.tfsf-webmail .login-card.login-user legend + hr,
.tfsf-webmail .login-card.login-user form > .text-muted:has(a[href="/reset-password"]),
.tfsf-webmail .tfsf-auth-column > p.text-center.text-muted,
.tfsf-webmail > .footer:empty {
  display: none !important;
}

.tfsf-webmail .tfsf-login-heading {
  margin: 0 0 22px;
  color: var(--tfsf-ink);
  font-size: clamp(27px, 4vw, 34px);
  font-weight: 680;
  letter-spacing: -.05em;
  line-height: 1.1;
}

.tfsf-webmail .login-card.login-user form > .d-flex.mt-3 {
  flex-direction: column;
  gap: 8px;
  margin-top: 15px !important;
}

.tfsf-webmail .login-card.login-user form label[for] {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  color: var(--tfsf-ink);
  font-size: 14px;
  font-weight: 570;
}

.tfsf-webmail .login-card.login-user .input-group {
  flex-wrap: nowrap;
  border: 1px solid #424b54;
  border-radius: 9px;
  background: var(--tfsf-field);
}

.tfsf-webmail .login-card.login-user .input-group:focus-within {
  border-color: var(--tfsf-accent);
  box-shadow: 0 0 0 2px #64e4d329;
}

.tfsf-webmail .login-card.login-user .input-group > :is(input.form-control, .input-group-text) {
  min-height: 46px;
  margin: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tfsf-ink);
}

.tfsf-webmail .login-card.login-user .input-group > input.form-control {
  min-width: 0;
  padding: 9px 6px;
  caret-color: var(--tfsf-accent);
  font-size: 16px;
  outline: none;
}

.tfsf-webmail .login-card.login-user .input-group > input.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--tfsf-field) inset !important;
  -webkit-text-fill-color: var(--tfsf-ink);
}

.tfsf-webmail .login-card.login-user .input-group > input::placeholder { color: #a3adb6; opacity: 1; }

.tfsf-webmail .login-card.login-user .input-group > .input-group-text {
  padding-inline: 13px;
  color: var(--tfsf-muted);
  font-size: 16px;
}

.tfsf-webmail .login-card.login-user .input-group > button.input-group-text {
  justify-content: center;
  flex: 0 0 44px;
}

.tfsf-webmail .login-card.login-user .input-group > button.input-group-text:hover { color: var(--tfsf-accent); }
.tfsf-webmail .login-card.login-user .input-group > button.input-group-text:focus-visible { outline-offset: -4px; }

.tfsf-webmail .login-card.login-user [type="submit"],
.tfsf-webmail .modal .btn-success {
  min-height: 47px;
  background: var(--tfsf-accent);
  border: 1px solid var(--tfsf-accent);
  border-radius: 9px;
  color: #102421;
  font-weight: 685;
}

.tfsf-webmail .login-card.login-user [type="submit"] { max-width: none !important; margin: 0 !important; }

.tfsf-webmail .login-card.login-user [type="submit"]:hover,
.tfsf-webmail .modal .btn-success:hover {
  background: #8ceedd;
  border-color: #8ceedd;
  color: #102421;
}

.tfsf-webmail :focus-visible { outline: 2px solid var(--tfsf-accent); outline-offset: 3px; }

.tfsf-webmail .modal-content {
  background: var(--tfsf-panel);
  color: var(--tfsf-ink);
  border-color: var(--tfsf-line);
}

.tfsf-webmail .modal :is(.form-control, .form-select) {
  min-height: 44px;
  background: var(--tfsf-field);
  border-color: #424b54;
  color: var(--tfsf-ink);
  font-size: 16px;
}

.tfsf-webmail .modal :is(.form-text, .text-muted) { color: var(--tfsf-muted) !important; }
.tfsf-webmail .modal .btn-close { filter: invert(1); }
.tfsf-webmail .modal :is(.modal-header, .modal-footer) { border-color: var(--tfsf-line); }

@media (max-width: 560px) {
  .tfsf-webmail > .container.flex-grow-1,
  .tfsf-webmail .tfsf-mail-brand { width: calc(100% - 32px); }

  .tfsf-webmail .tfsf-mail-brand { min-height: 54px; }
  .tfsf-webmail .tfsf-login-layout { gap: 17px; padding: 16px 0 24px; }
  .tfsf-webmail .tfsf-mail-banner { min-height: 132px; padding: 18px; }
  .tfsf-webmail .tfsf-mail-banner::after { left: 35%; background-position: calc(100% + 52px) center; }
  .tfsf-mail-banner-copy h1 { font-size: 42px; }
  .tfsf-mail-banner-copy p { margin-top: 8px; max-width: 20ch; }
  .tfsf-webmail .tfsf-login-heading { margin-bottom: 17px; }
}

