@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url("/roboto-v29-regular.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url("/roboto-v29-regular-700.woff2") format("woff2"); }
/* Elastic-style presentation, based on Roundcube Webmail. Credits: ../THIRD_PARTY.md. */
:root { color-scheme: light; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #2c363a; background: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; }
body { min-height: 100vh; }
#layout-content { width: 100%; text-align: center; }
#logo { display: block; position: relative; top: 16vh; margin: 0 auto; width: 100px; height: 100px; }
#login-panel { position: relative; top: 20vh; width: calc(100% - 32px); max-width: 320px; margin: 0 auto; padding-bottom: 32px; text-align: left; }
.input-group { display: flex; width: 100%; height: 38px; margin-bottom: 16px; }
.input-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; color: #6c757d; background: #f4f4f4; border: 1px solid #ced4da; border-right: 0; border-radius: 4px 0 0 4px; }
.input-icon svg { display: block; width: 16px; height: 16px; fill: currentColor; }
input { display: block; width: 100%; min-width: 0; height: 38px; margin: 0; padding: 8px 12px; color: #495057; background: #fff; border: 1px solid #ced4da; border-radius: 0 4px 4px 0; font: inherit; line-height: 20px; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder { color: #6c757d; opacity: 1; }
input:focus { position: relative; z-index: 1; border-color: #37beff; box-shadow: 0 0 0 3px rgb(55 190 255 / 20%); }
button { display: block; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; color: #fff; background: #37beff; border: 1px solid #37beff; border-radius: 4px; font: inherit; font-weight: 700; line-height: 20px; text-align: center; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
button:hover { background: #11b2ff; border-color: #11b2ff; }
button:active { background: #00a7f6; border-color: #00a7f6; }
button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(55 190 255 / 35%); }
#notice { margin: 16px 0 0; padding: 10px 12px; color: #a42825; background: #fff0ef; border: 1px solid #ffd1cf; border-radius: 4px; line-height: 1.5; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-height: 430px) { #logo { top: 24px; width: 76px; height: 76px; } #login-panel { top: 48px; } }
@media (prefers-reduced-motion: reduce) { input, button { transition: none; } }