@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/zeus-fonts/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2) format('woff2');
}
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/zeus-fonts/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7M.woff2) format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/zeus-fonts/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
}
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(/zeus-fonts/s/redhatmono/v16/jVyN7nDnA2uf2zVvFAhhzEsUWOxS.woff2) format('woff2');
}
:root:root {
--z-paper: #F8F7F4;
--z-card: #FFFFFF;
--z-ink: #262423;
--z-black: #211F1E;
--z-grey: #716D69;
--z-line: #E8E4DF;
--z-line-strong: #DAD5CF;
--z-red: #E31B2B;
--z-red-ink: #B42332;
--z-red-soft: #FFF1F2;
--z-red-line: #D9505C;
--z-radius: 8px;
--z-radius-sm: 6px;
--z-font-display: 'Instrument Serif', Georgia, serif;
--z-font-ui: 'Outfit', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--z-font-mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--z-max: 1240px;
--bulma-family-primary: var(--z-font-ui);
--bulma-family-secondary: var(--z-font-ui);
--bulma-family-code: var(--z-font-mono);
--bulma-scheme-h: 30;
--bulma-scheme-s: 6%;
--bulma-link-h: 355;
--bulma-link-s: 79%;
--bulma-link-l: 50%;
--bulma-primary-h: 355;
--bulma-primary-s: 79%;
--bulma-primary-l: 50%;
--bulma-radius-small: 5px;
--bulma-radius: 6px;
--bulma-radius-medium: 8px;
--bulma-radius-large: 8px;
--bulma-radius-rounded: 6px;
--bulma-body-background-color: var(--z-paper);
--bulma-body-color: var(--z-ink);
--bulma-text: var(--z-ink);
--bulma-text-strong: var(--z-black);
--bulma-border: var(--z-line-strong);
--bulma-border-weak: var(--z-line);
}
html, body {
background-color: var(--z-paper) !important;
color: var(--z-ink);
font-family: var(--z-font-ui);
-webkit-font-smoothing: antialiased;
}
body, button, input, optgroup, select, textarea,
.button, .input, .textarea, .select select, .label, .title, .subtitle, .tag {
font-family: var(--z-font-ui);
}
::selection { background: var(--z-red-soft); color: var(--z-red-ink); }
.sidig-top {
max-width: var(--z-max);
margin: 0 auto;
padding: 28px 32px 0;
}
.sidig-top__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.sidig-brand {
display: inline-flex;
align-items: center;
font: 800 18px/1 var(--z-font-ui);
letter-spacing: .04em;
color: var(--z-red) !important;
text-decoration: none !important;
}
.sidig-brand span {
margin-left: 12px;
padding-left: 12px;
border-left: 1px solid var(--z-line-strong);
font: 500 10px/15px var(--z-font-ui);
letter-spacing: .17em;
color: var(--z-grey);
}
.sidig-nav {
display: flex;
align-items: center;
gap: 18px;
}
.sidig-nav a {
display: inline-flex;
align-items: center;
padding: 4px 0;
border-bottom: 2px solid transparent;
font: 500 13px/18px var(--z-font-ui);
color: var(--z-grey) !important;
text-decoration: none !important;
transition: color .15s, border-color .15s;
}
.sidig-nav a:hover { color: var(--z-ink) !important; }
.sidig-nav svg { width: 18px; height: 18px; }
body:has(.accounts-container) .sidig-nav__codes,
body:has(.quick-uploader-wrapper) .sidig-nav__add,
body:has(#txtService) .sidig-nav__add,
body:has(.group-item) .sidig-nav__groups,
body:has(#lnkTabOptions) .sidig-nav__settings {
color: var(--z-red) !important;
border-bottom-color: var(--z-red);
}
body:has(#frmLegacyLogin, #frmRegister, #frmResetPassword, #frmPasswordReset, #frmWebauthnLogin) .sidig-nav { display: none; }
.sidig-hero {
display: none;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
padding-bottom: 24px;
border-bottom: 1px solid var(--z-line-strong);
}
body:has(.accounts-container) .sidig-hero--codes,
body:has(.quick-uploader-wrapper) .sidig-hero--add,
body:has(#lnkTabOptions) .sidig-hero--settings { display: flex; }
.sidig-lead {
max-width: 520px;
margin-top: 8px;
font: 400 14px/1.5 var(--z-font-ui);
color: var(--z-grey);
}
.sidig-eyebrow {
font: 600 10px/15px var(--z-font-ui);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--z-red);
margin-bottom: 6px;
}
.sidig-title {
font: 400 48px/1.05 var(--z-font-display);
letter-spacing: -.025em;
color: var(--z-black);
margin: 0;
}
.sidig-title em { font-style: italic; color: var(--z-red); }
.sidig-hero .sidig-btn { flex: none; }
.sidig-btn,
.button {
border-radius: var(--z-radius-sm) !important;
font: 500 13px/1.2 var(--z-font-ui);
box-shadow: none !important;
}
.sidig-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 9px 14px;
border: 1px solid var(--z-line-strong);
background: var(--z-card);
color: var(--z-ink) !important;
text-decoration: none !important;
transition: border-color .15s, background .15s;
}
.sidig-btn:hover { border-color: var(--z-grey); }
.sidig-btn--primary,
.button.is-link:not(.is-outlined):not(.is-text):not(.is-ghost),
.button.is-primary:not(.is-outlined):not(.is-text):not(.is-ghost) {
background-color: var(--z-red) !important;
border: 1px solid var(--z-red) !important;
color: #fff !important;
font-weight: 600;
}
.sidig-btn--primary:hover,
.button.is-link:not(.is-outlined):not(.is-text):not(.is-ghost):hover,
.button.is-primary:not(.is-outlined):not(.is-text):not(.is-ghost):hover {
background-color: var(--z-red-ink) !important;
border-color: var(--z-red-ink) !important;
}
.button.is-link.is-outlined,
.button.is-primary.is-outlined,
.button.is-light,
.button:not([class*="is-"]) {
background-color: var(--z-card) !important;
border: 1px solid var(--z-line-strong) !important;
color: var(--z-ink) !important;
}
.button.is-link.is-outlined:hover,
.button.is-primary.is-outlined:hover,
.button.is-light:hover,
.button:not([class*="is-"]):hover {
border-color: var(--z-grey) !important;
}
.button.is-danger:not(.is-outlined) {
background-color: var(--z-red-soft) !important;
border: 1px solid var(--z-red-line) !important;
color: var(--z-red-ink) !important;
}
.button.is-text, .button.is-ghost { color: var(--z-grey); }
.button.is-text:hover, .button.is-ghost:hover { color: var(--z-ink); background: transparent; }
a, .is-link:not(.button), .has-text-link { color: var(--z-red); }
a:hover { color: var(--z-red-ink); }
.label {
font: 500 13px/1.45 var(--z-font-ui);
color: var(--z-ink);
margin-bottom: 6px !important;
}
.input, .textarea, .select select {
background-color: var(--z-card) !important;
border: 1px solid var(--z-line-strong) !important;
border-radius: var(--z-radius-sm) !important;
box-shadow: none !important;
color: var(--z-ink) !important;
font-size: 14px;
min-height: 43px;
padding-left: 12px;
padding-right: 12px;
}
.input::placeholder, .textarea::placeholder { color: #A8A29C; }
.input:focus, .textarea:focus, .select select:focus,
.input:focus-visible, .textarea:focus-visible {
border-color: var(--z-red-line) !important;
box-shadow: 0 0 0 3px rgba(227, 27, 43, .10) !important;
}
.help { font-size: 12px; color: var(--z-grey); }
.help.is-danger { color: var(--z-red-ink); }
.toggle-wrapper { border-radius: var(--z-radius-sm); }
.toggle-buttons .button {
background: var(--z-card) !important;
border: 1px solid var(--z-line-strong) !important;
color: var(--z-ink) !important;
}
.toggle-active .button {
background: var(--z-red-soft) !important;
border: 1px solid var(--z-red-line) !important;
color: var(--z-red-ink) !important;
}
.toggle-active { box-shadow: none; }
.title {
font-family: var(--z-font-display) !important;
font-weight: 400 !important;
letter-spacing: -.02em;
color: var(--z-black) !important;
}
h1.title { font-size: 44px !important; line-height: 1.05; }
.subtitle { color: var(--z-grey) !important; }
.has-text-grey, .has-text-grey-light, .has-text-grey-dark { color: var(--z-grey) !important; }
.card, .box {
background: var(--z-card);
border: 1px solid var(--z-line-strong);
border-radius: var(--z-radius);
box-shadow: none;
}
.tag:not(body) {
border-radius: 5px;
font-weight: 500;
}
.tag.is-white, .tag.is-light {
background: var(--z-card);
border: 1px solid var(--z-line-strong);
color: var(--z-ink);
}
.notification {
border-radius: var(--z-radius);
font-size: 13px;
}
.notification.is-warning, .notification.is-info {
background: var(--z-card) !important;
border: 1px solid var(--z-line-strong);
border-left: 3px solid var(--z-red);
color: var(--z-ink) !important;
}
.menu-list a, .menu-list button, .menu-list .menu-item {
background: transparent !important;
border-radius: var(--z-radius-sm);
font-size: 13px;
color: var(--z-grey) !important;
}
.menu-list a:hover, .menu-list button:hover, .menu-list .menu-item:hover { color: var(--z-ink) !important; }
.menu-list a.is-active, .menu-list .is-active { color: var(--z-red) !important; font-weight: 600; }
.tabs a { font-size: 14px; color: var(--z-grey); border-bottom-color: var(--z-line-strong); }
.tabs a:hover { color: var(--z-ink); border-bottom-color: var(--z-grey); }
.tabs li.is-active a { color: var(--z-red); border-bottom-color: var(--z-red); }
.tabs ul { border-bottom-color: var(--z-line-strong); }
.group-item {
margin-bottom: 8px;
padding: 12px 16px !important;
background: var(--z-card);
border: 1px solid var(--z-line-strong) !important;
border-radius: var(--z-radius);
}
.group-item .tfa-content { min-height: 0; font-weight: 600; }
.stack-content .container:has(#frmLegacyLogin, #lnkResetPwd, #lnkRegister) {
max-width: 460px !important;
margin: 48px auto 0;
padding: 32px 32px 28px !important;
background: var(--z-card);
border: 1px solid var(--z-line-strong);
border-radius: var(--z-radius);
}
#punchline { color: var(--z-grey); font-size: 14px; }
.nav-links { font-size: 13px; color: var(--z-grey); }
#btnSignIn { width: 100%; height: 42px; }
#frmLegacyLogin .field.is-grouped .control { flex: 1; }
.quick-uploader-wrapper {
display: inline-block;
padding: 28px 36px;
background: var(--z-card);
border: 1px solid var(--z-line-strong);
border-radius: var(--z-radius);
}
:root:root, footer, footer .submenu, .header, .modal-background, .modal-slot, .options-header {
background-color: var(--z-paper);
}
#app { min-height: calc(100vh - 90px); }
.main-section { background: transparent; }
.stack.is-max-height { height: auto !important; min-height: calc(100vh - 90px); }
.stack-content-wrapper { overflow: visible; }
.stack-footer {
position: sticky;
bottom: 0;
z-index: 30;
}
footer.main {
padding-top: 14px;
border-top: 1px solid var(--z-line);
background: rgba(248, 247, 244, .94);
backdrop-filter: blur(6px);
}
footer.main .field.is-grouped { gap: 8px; }
#btnEmailMenu { font-size: 12px; }
.accounts-container,
.accounts-container:not(.is-max-tablet):not(.is-max-desktop) {
max-width: 1208px !important;
padding: 0 16px;
}
.stack-header .header { padding: 20px 0 10px; }
.stack-header .header .column {
flex: none !important;
width: min(520px, calc(100vw - 32px)) !important;
}
.input.is-search {
height: 42px;
border-radius: var(--z-radius-sm) !important;
padding-left: 14px;
}
#groupChips { gap: 6px; margin-bottom: 14px !important; }
#groupChips .button.tag {
height: 30px;
margin: 0 !important;
padding: 0 11px;
border: 1px solid var(--z-line-strong) !important;
border-radius: 5px !important;
background: var(--z-card) !important;
color: var(--z-ink) !important;
font: 500 12px/1 var(--z-font-ui);
}
#groupChips .button.tag.has-text-grey { color: var(--z-grey) !important; }
#groupChips .button.tag:not(.has-text-grey) {
background: var(--z-red-soft) !important;
border-color: var(--z-red-line) !important;
color: var(--z-red-ink) !important;
}
#groupChips .button.tag:hover { border-color: var(--z-grey) !important; }
#dv { gap: 12px; padding: 4px 0 24px; }
.tfa-list,
.tfa-list.column {
width: calc((100% - 24px) / 3) !important;
margin: 0 !important;
padding: 14px 16px !important;
background: var(--z-card);
border: 1px solid var(--z-line-strong) !important;
border-radius: var(--z-radius);
transition: border-color .15s, box-shadow .15s;
}
.tfa-list:hover {
border-color: var(--z-grey) !important;
box-shadow: 0 6px 18px rgba(33, 31, 30, .06);
}
.tfa-content,
.tfa-content.is-size-3 {
min-height: 44px;
font-size: 16px !important;
}
.tfa-text {
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
column-gap: 12px;
min-width: 0;
font: 600 16px/1.25 var(--z-font-ui);
letter-spacing: -.01em;
color: var(--z-black);
}
.tfa-text > img,
.tfa-container img {
grid-row: 1 / span 2;
width: 36px !important;
height: 36px !important;
margin: 0 !important;
padding: 6px;
border: 1px solid var(--z-line);
border-radius: var(--z-radius);
background: var(--z-paper);
object-fit: contain;
}
.tfa-container img[src$="/noicon.svg"] {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E31B2B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.2 7 10 4-1.8 7-5.5 7-10V6l-7-3Z'/%3E%3Cpath d='m9.2 12 2 2 3.8-4'/%3E%3C/svg%3E");
}
.tfa-text > .is-block {
grid-column: 2;
font: 400 13px/1.35 var(--z-font-ui) !important;
letter-spacing: 0;
color: var(--z-grey) !important;
}
.always-on-otp.is-size-5 {
margin-left: 12px !important;
padding-top: 0 !important;
font: 600 24px/1.1 var(--z-font-mono) !important;
letter-spacing: .04em;
color: var(--z-black) !important;
}
.always-on-otp.is-size-7 {
font: 500 11px/1 var(--z-font-mono) !important;
letter-spacing: .06em;
color: var(--z-grey) !important;
}
.always-on-otp:hover { color: var(--z-red) !important; }
.dots li { background: var(--z-red); }
.dots li:nth-child(-n+9) { background: var(--z-red-line); }
.dots li:nth-child(-n+6) { background: var(--z-ink); }
.dots li[data-is-active] ~ li,
.dots.off li { background: var(--z-line-strong); }
.dots.condensed li { width: 4px; height: 4px; margin: 0 1.5px; }
@media screen and (max-width: 1217px) {
.tfa-list, .tfa-list.column { width: calc((100% - 12px) / 2) !important; }
}
@media screen and (max-width: 769px) {
.tfa-list, .tfa-list.column { width: 100% !important; }
.always-on-otp.is-size-5 { font-size: 21px !important; }
}
@media (max-width: 768px) {
.sidig-top { padding: 18px 16px 0; }
.sidig-brand span { display: none; }
.sidig-nav { gap: 14px; }
.sidig-title { font-size: 36px; }
.sidig-hero { flex-wrap: wrap; align-items: flex-start; margin-top: 14px; padding-bottom: 18px; }
.sidig-hero .sidig-btn { height: 36px; }
.quick-uploader-wrapper { padding: 20px; }
h1.title { font-size: 34px !important; }
}
@media screen and (max-width: 768px) {
.accounts-container, .accounts-container:not(.is-max-tablet):not(.is-max-desktop) { padding: 0; }
.tfa-list, .tfa-list.column { margin: 0 0 10px !important; }
}