#zaphiAuthGate{overflow:auto;align-items:safe center}
.zaphi-auth-card{margin:auto;max-width:520px;width:100%}
.zaphi-auth-card input{min-height:44px;background:#202b34;color:#eef3f7;border:1px solid #556471;padding:10px;font-size:16px;border-radius:7px}
.zaphi-auth-card .btn:not(.primary){background:#202b34;color:#eef3f7;border:1px solid #556471}
.zaphi-auth-card small,.zaphi-auth-card p{color:#c6d0db;line-height:1.5}
.zaphi-auth-diagnostics{margin-top:18px;overflow-wrap:anywhere;font-size:12px}
.zaphi-auth-diagnostics summary{cursor:pointer;margin-bottom:8px}
.zaphi-user-list>div{flex-wrap:wrap}
html[data-zaphi-theme="dark"] .zfr-error{background:#3b2425!important;color:#ffe5df!important;border:1px solid #8d5251!important}
html[data-zaphi-theme="dark"] .zfr-error strong{color:#fff!important}
.v20-stationery-preview-pages:has(.v2281-print-surface){display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.v20-stationery-preview-pages>.v2281-print-surface{zoom:.48}
.v20-stationery-preview-pages .v212-logo-resize{display:block!important}
/* Notebook layouts keep their preview height fixed: make both sample sheets
   reachable horizontally when there is not room to show them side by side. */
@media(min-width:900px){#stationeryPreview .v20-stationery-preview-pages:has(.v2281-print-surface){min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}}
@media(max-width:720px){.v20-stationery-preview-pages>.v2281-print-surface{zoom:.38}}
.v2281-schedule-hint{margin:10px 0;line-height:1.5}
#v2281RepeatHint{display:block;line-height:1.5;margin-top:6px;white-space:normal}

/* K39f: employee colors identify the other participants in each row. */
.v20-appt-crewbar{display:flex;overflow:hidden;background:transparent}
.v20-appt-crewbar>i{display:block;flex:1;min-width:0;height:100%}


/* K39g: equal flexible columns; native date/time appearance must not set a
   wider painted box than the field. Container width controls the breakpoint. */
#v20AppointmentForm{container-name:appointment;container-type:inline-size;min-width:0}
#v20AppointmentForm .form-grid>.field{min-width:0}
#v20AppointmentForm .v20-time-grid{display:flex;flex-wrap:wrap;gap:12px;min-width:0;align-items:flex-start}
#v20AppointmentForm .v20-time-grid>.field{display:flex;flex:1 1 0;width:0;min-width:0;max-width:100%;gap:6px;margin:0;padding:0;background:transparent}
#v20AppointmentForm .v20-time-grid label{display:block;position:static;margin:0;white-space:normal;line-height:1.4;overflow-wrap:anywhere}
#v20AppointmentForm .v20-participant-row{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;min-width:0}
#v20AppointmentForm .v20-participant-row>*{min-width:0;max-width:100%;margin:0;box-sizing:border-box}
#v20AppointmentForm .v20-participant-person{flex:2 1 0;overflow-wrap:anywhere}
#v20AppointmentForm .v20-participant-same{flex:1.2 1 0;white-space:normal;overflow-wrap:anywhere}
#v20AppointmentForm .v20-participant-row>.field{display:flex;flex:1 1 0;width:0;gap:5px}
#v20AppointmentForm .v20-participant-row>.field label{margin:0;line-height:1.4}
#v20AppointmentForm .v20-participant-all-day{flex:2 1 0;white-space:normal;overflow-wrap:anywhere}
#v20AppointmentForm .v20-participant-row>.btn{flex:0 0 auto;min-height:44px;white-space:normal}
#v20AppointmentForm :is(.v20-time-grid,.v20-participant-row) :is(input[type="date"],input[type="time"]){
 display:block;-webkit-appearance:none;appearance:none;
 box-sizing:border-box!important;width:100%;min-width:0;max-width:100%;
 inline-size:100%;min-inline-size:0;max-inline-size:100%;
 margin:0;min-height:44px;padding:8px;font-size:16px;line-height:1.4;
}
#v20AppointmentForm :is(.v20-time-grid,.v20-participant-row) input::-webkit-date-and-time-value{min-width:0;min-inline-size:0;text-align:left}
#v20AppointmentForm :is(.v20-time-grid,.v20-participant-row) input::-webkit-datetime-edit{min-width:0;padding:0}
#v20AppointmentForm .v20-participant-same input[type="checkbox"]{flex:0 0 auto;width:16px;inline-size:16px;min-width:0;min-height:0;padding:0;margin:0}
#v20AppointmentForm .v20-series-controls input{box-sizing:border-box;min-width:0;max-width:100%;width:100%}
@container appointment (max-width:619px){
 #v20AppointmentForm .v20-time-grid>.field{flex-basis:calc((100% - 12px)/2)}
 #v20AppointmentForm .v20-participant-row{flex-wrap:wrap}
 #v20AppointmentForm :is(.v20-participant-person,.v20-participant-same){flex-basis:100%}
 #v20AppointmentForm .v20-participant-row>.field{flex-basis:calc((100% - 12px)/2)}
 #v20AppointmentForm .v20-participant-row>.btn{margin-left:auto}
}
/* Fallback also supports browsers without container queries. */
@media(max-width:660px){
 #v20AppointmentForm .v20-time-grid>.field{flex-basis:calc((100% - 12px)/2)}
 #v20AppointmentForm .v20-participant-row{flex-wrap:wrap}
 #v20AppointmentForm :is(.v20-participant-person,.v20-participant-same){flex-basis:100%}
 #v20AppointmentForm .v20-participant-row>.field{flex-basis:calc((100% - 12px)/2)}
 #v20AppointmentForm .v20-participant-row>.btn{margin-left:auto}
}
@container appointment (max-width:329px){#v20AppointmentForm .v20-time-grid>.field{flex-basis:100%}}
@media(max-width:370px){#v20AppointmentForm .v20-time-grid>.field{flex-basis:100%}}