#appScreen .shell-main .payroll-compact>header {padding:0 0 18px!important;background:transparent!important;border:0!important;}
#appScreen .shell-main .payroll-compact .payroll-toolbar {display:flex!important;flex-wrap:wrap;gap:12px;padding:12px 16px!important;align-items:end;}
#appScreen .shell-main .payroll-compact .payroll-toolbar label {flex:0 1 220px!important;min-width:140px;}
#appScreen .shell-main .payroll-compact .payroll-toolbar :is(select,button) {min-height:36px!important;height:36px!important;width:auto;}
#appScreen .shell-main .payroll-compact .payroll-toolbar select {width:100%;}
#appScreen .shell-main .payroll-compact .payroll-toolbar button {padding:6px 12px!important;}
#appScreen .shell-main .payroll-compact .payroll-flow {display:block;margin:0 0 12px;padding:10px 16px;border:1px solid var(--ui-border,#dce3ed);border-radius:8px;background:transparent;}
#appScreen .shell-main .payroll-compact .payroll-flow[hidden] {display:none!important;}
#appScreen .shell-main .payroll-compact .payroll-flow ol {display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:12px 0 0;margin:0;}
#appScreen .shell-main .payroll-compact .payroll-flow li {border:0;padding:0;}
#appScreen .shell-main .payroll-period-summary {margin-bottom:12px;border:1px solid var(--ui-border,#dce3ed);border-radius:8px;}
#appScreen .shell-main :is(.payroll-period-summary,.payroll-flow)>summary {cursor:pointer;font-size:13px;font-weight:500;}
#appScreen .shell-main .payroll-period-summary>summary {padding:10px 16px;}
#appScreen .shell-main .payroll-period-summary .payroll-kpis {padding:0 16px 12px;margin:0;}
#appScreen .shell-main .payroll-period-summary .payroll-kpis article {padding:12px;box-shadow:none;}
#appScreen .shell-main .payroll-compact .payroll-layout {display:block;min-width:0;}
#appScreen .shell-main .payroll-compact .payroll-periods {border-radius:8px;overflow:hidden;}
#appScreen .shell-main .payroll-compact .payroll-periods>header {padding:12px 16px!important;gap:12px;flex-wrap:wrap;background:transparent;}
#appScreen .shell-main .payroll-compact .payroll-periods>header>div>small {display:none;}
#appScreen .shell-main .payroll-compact .payroll-periods>header h4 {font-size:14px;margin:0;}
#appScreen .shell-main .payroll-compact .payroll-periods>header button {min-height:34px!important;padding:6px 10px!important;}
#appScreen .shell-main .payroll-period-table {overflow:auto;}
#appScreen .shell-main .payroll-period-table table {width:100%;min-width:900px;border-collapse:collapse;}
#appScreen .shell-main .payroll-period-table :is(th,td) {padding:12px 14px;text-align:left;border-bottom:1px solid var(--ui-border,#dce3ed);font-size:12px;}
#appScreen .shell-main .payroll-period-table th {font-weight:500;background:var(--ui-subtle,#f7f8fa);white-space:nowrap;}
#appScreen .shell-main .payroll-period-table td:first-child>div {display:inline-block;vertical-align:middle;}
#appScreen .shell-main .payroll-period-table td small {display:block;margin-top:4px;}
#appScreen .shell-main .payroll-period-table td:nth-child(n+3):nth-child(-n+5) {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
#appScreen .shell-main .payroll-period-table .payroll-period-number {display:inline-flex;width:28px;height:28px;min-width:28px;align-items:center;justify-content:center;margin-right:8px;border-radius:6px;vertical-align:middle;}
#appScreen .shell-main .payroll-period-table .payroll-state {white-space:nowrap;font-style:normal;padding:4px 8px;}
@media(max-width:600px){#appScreen .shell-main .payroll-compact .payroll-toolbar label {flex:1 1 140px!important;}#appScreen .shell-main .payroll-period-summary .payroll-kpis {grid-template-columns:1fr 1fr;}}