/******** STYLES SPECIFIC TO PAYROLL WEB APP ********/



/* -------- Variables -------- */


:root {
    --annual-leave: #fecb2f;
    --unpaid-leave: #fd9426;
    --absence-leave: #f2a7de;
    --strike-leave: #bd86df;
    --sick-leave: #f22424;
    --parenting-leave: #68d845;
    --user-leave-1 : #c19b68;
    --user-leave-2 : #8fd8ed;
    --user-leave-3 : #c5e14d;
    --user-leave-4 : #bcbfcf;
    --user-leave-5 : #60ce9e;
    --user-leave-6 : #9aac89;
    --user-leave-7 : #f3eda7;
    --user-leave-8 : #aed8d6;
    --user-leave-9 : #ed9aa0;
}



/* -------- General -------- */

html { font-size: 13px; }

.container-fluid { padding-left: 25px; padding-right: 25px; }

.border-end-fade-in { border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(180deg, rgba(222,226,230,0) 0%, rgba(222,226,230,1) 10%); }

.clickable-card { cursor: pointer; background-color: transparent; transition: background-color 250ms; }
.clickable-card:hover { background-color: rgba(0,123,255,.1); }

.side-list-group { min-height: 100%; border-radius: 0; background-image: linear-gradient(transparent calc(2.875rem - 1px), var(--border-color-list) 1px); background-size: 100% 2.875rem; line-height: 1.25; }
.side-list-group-lg { background-image: linear-gradient(transparent calc(3.75rem - 1px), var(--border-color-list) 1px); background-size: 100% 3.75rem; }
.side-list-group-xl { background-image: linear-gradient(transparent calc(5.25rem - 1px), var(--border-color-list) 1px); background-size: 100% 5.25rem; }
.side-list-group .list-group-item { height: calc(2.875rem - 1px); margin-bottom: 1px; border-style: none; padding: 0 1rem; background-color: transparent; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 500; transition: background 250ms; }
.side-list-group-lg .list-group-item { height: calc(3.75rem - 1px); }
.side-list-group-xl .list-group-item { height: calc(5.25rem - 1px); }
.side-list-group .list-group-item:hover { background-color: var(--bs-tertiary-bg); }
.side-list-group .list-group-item.active { margin-top: 0 !important;  border-top-width: 0 !important; background-color: var(--bs-primary); }
.side-list-group .list-group-item.active i.text-success { color: var(--bs-white) !important; }

dl.columns { display: grid; column-gap: .75rem; grid-template-columns: auto 1fr; }
dl.columns > dt, dl.columns > dd { line-height: 1.333; }
dl.columns > dt { opacity: .667; }
dl.columns > dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.max-two-lines { max-height: 2.6rem; overflow: hidden; text-overflow: ellipsis; }

.select-by-dropdown a {  display: grid; grid-template-columns: 1fr auto; align-items: center; }

.current-employer-modal-header { padding-bottom: 0; border-bottom-style: none; background-color: var(--bright-orange-highlight); }
.current-employer-modal { padding: 0; }
.current-employer-modal .organisation { margin-top:-1px; padding: 0 2rem 5rem 2rem; color: var(--bs-white); background-color: rgba(244,170,55,1); background-image:linear-gradient(180deg, var(--bright-orange-highlight) 0%, var(--bright-orange) 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%); }
.current-employer-modal .organisation .org-badge-lg { background-color: var(--bs-white); color: var(--bright-orange); }
.current-employer-modal .employer { padding: 0 2rem 2rem 2rem; text-align: right; }
.current-employer-modal .lead { margin-bottom: .75rem; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: .55 }
.current-employer-modal .gap-3 h3 {  margin: 0; font-size: 2.5rem; line-height: 1.25em; }
.current-employer-modal .gap-3 p { margin: 0; opacity: .5; }

.site-footer { display: none; z-index: 1; padding: .5rem 1rem; font-size: .8rem; box-shadow: 0 -.25rem .5rem -.5rem rgba(0,0,0,.333); }
.site-footer p { margin: 0; }
.site-footer > *:first-child { display: flex; gap: .5em; margin-right: auto; }
.site-footer > *:last-child { display: flex; gap: .5em; margin-left: auto; }
@media (min-width: 768px) {
    .site-footer { display: flex; }
}

.modal-content-fixed-height { max-height: 750px; }
.modal-content-fixed-height-lg { max-height: 940px; }
.modal-dialog.modal-level-1 .modal-content-fixed-height { max-height: calc(750px - 4rem); }
.modal-dialog.modal-level-1 .modal-content-fixed-height-lg { max-height: calc(940px - 4rem); }
.modal-dialog.modal-level-2 .modal-content-fixed-height { max-height: calc(750px - 8rem); }
.modal-dialog.modal-level-2 .modal-content-fixed-height-lg { max-height: calc(940px - 8rem); }

.message-box-content-fixed-height { max-height: 780px; }
.message-box-content-fixed-height-lg { max-height: 990px; }

dl.service-message-attributes { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; margin: 0; padding: 1rem 1.5rem; border-bottom: solid 1px var(--border-color-list);  }
dl.service-message-attributes dt { margin: 0; padding: 0; font-style: italic; }
dl.service-message-attributes dd { margin: 0; padding: 0; font-weight: bold; }

.color-tag-selection { display: flex; gap: .5rem; }
.color-tag-selection > * { display:flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; outline: none; outline-offset: 1px; border-radius: 50% !important; padding: 1px; color: var(--bs-secondary-color); cursor: pointer; transition: transform 100ms ease-out; }
.color-tag-selection > *.selected { outline: solid 2px var(--bs-secondary); transition: none; }
.color-tag-selection > *:hover { transform: scale(1.125); }
.color-tag-selection > *.selected:hover { transform: none; }



/* -------- Layout -------- */

.with-navs { transform: translateX(0); transition: transform 250ms; }
.with-navs.left-visible { transform: translateX(20rem); transition: transform 250ms; }
.with-navs.right-visible { transform: translateX(-20rem); transition: transform 250ms; }

.blade-brightpay { cursor: pointer; padding: 0 2.5rem 0 1.5rem; background-color: var(--bright-orange); background-image:linear-gradient(180deg, var(--bright-orange-highlight) 0%, var(--bright-orange) 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
.blade-brightpay img { height: 1.7rem }
.blade-context { cursor: pointer; margin-left: calc(-1.5rem - 1px); padding: 0 2.5rem; background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-text); clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
@media (min-width: 992px) {
    .blade-context { margin-left: 0; padding: 0 1.5rem 0 2.5rem; clip-path: polygon(1rem 0, 100% 0, 100% 100%, 0 100%); }
}
.blade-context-name { max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

nav.main-menu a { display: flex; align-items: center; margin: 0 .75rem; padding: .75rem 0; border-top: solid 5px transparent; border-bottom: solid 5px transparent; line-height: 1.0; text-decoration: none; text-transform: uppercase; letter-spacing: .1rem; color: var(--bs-emphasis-color); transition: color 250ms, border-bottom-color 250ms; }
nav.main-menu a:hover { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
nav.main-menu a.active { color: var(--bs-emphasis-color); border-bottom-color: var(--bs-primary); }
nav.main-menu .nav-badge { margin: -1rem 0 -1rem .25rem; display: flex; justify-content: center; align-items: center; min-width: 1.5rem; height: 1.5rem; font-size: .75rem; letter-spacing: 0; font-weight: 700; color: var(--bs-body-bg); background-color: var(--bright-orange); border-radius: 50%; }

.nav-trigger { align-self: center; padding-right: 1rem; }

.nav-side { position: fixed; top: 0; width: 20rem; height: 100vh; overflow: hidden; }
.nav-side a.link { display: block; margin: 0 -1.25rem; padding: .75rem 1.25rem; color: var(--bs-secondary-color); background-color: transparent; font-size: 1.25rem; transition: color 250ms, background-color 250ms; }
.nav-side a.link:hover { color: var(--bs-emphasis-color); text-decoration: none; background-color: var(--bs-border-color); }
.nav-side a.link.active, nav.nav-side a.link.active:hover { color: var(--bs-white); background-color: var(--bs-primary); }
.nav-side a.link i { width: 1.75rem; opacity: .5; transition: opacity 250ms; }
.nav-side a.link:hover i { opacity: 1; }
.nav-side a.link.active i { opacity: 1; }
.nav-side hr { opacity: .2; }
.nav-side.nav-left { left: 0; -box-shadow: inset -4rem 0 4rem -4rem rgba(0, 0, 0, .5); transform: translateX(-20rem); transition: transform 250ms; }
.nav-side.nav-left.visible { transform: translateX(0); transition: transform 250ms; }
.nav-side.nav-right { right: 0; -box-shadow: inset 4rem 0 4rem -4rem rgba(0, 0, 0, .5); transform: translateX(20rem); transition: transform 250ms; }
.nav-side.nav-right.visible { transform: translateX(0); transition: transform 250ms; }
[data-bs-theme=dark] .nav-side.nav-right { border-left: solid 1px var(--bs-border-color); }
@media (min-width: 992px) {
    [data-bs-theme=dark] .nav-side.nav-right { border-left: none; }
}

.right-nav-trigger { width: 1.5rem; text-align: right; }
.nav-trigger { padding-top: 0.1rem; font-size: 1.25rem; }
.nav-trigger a { cursor: pointer; color: #898989; text-decoration: none; transition: color 250ms, opacity 250ms; }
.nav-trigger a:hover { color: #e4941f; transition: color 250ms; }
.with-navs .nav-trigger a.show-trigger { display: inline-block; }
.with-navs .nav-trigger a.hide-trigger { display: none; }
.with-navs.right-visible .right-nav-trigger a.show-trigger { display: none; }
.with-navs.right-visible .right-nav-trigger a.hide-trigger { display: inline-block; }

.side-bar-tabs { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.side-bar-tabs .filler { flex-grow: 1; }
.side-bar-tabs > a { cursor: pointer; display: block; height: 3.5rem; border-bottom: solid 1px var(--bs-border-color); color: rgba(var(--bs-emphasis-color-rgb), .625); text-align: center; line-height: 3.5rem; font-size: 1.625rem; }
.side-bar-tabs > a:hover { color: rgba(var(--bs-emphasis-color-rgb), 1); opacity: 1; }
.with-navs.right-visible .side-bar-tabs > a.active, .nav-side .side-bar-tabs > a.active { opacity: 1; border-left: solid 1px var(--bs-border-color); border-right: solid 1px var(--bs-border-color); border-bottom-style: none; background-color: var(--bs-secondary-bg); color: rgba(var(--bs-emphasis-color-rgb), 1); }
@media (min-width: 992px) {
    [data-bs-theme=dark] .side-bar-tabs { border-left: solid 1px var(--bs-border-color); }
    .side-bar-tabs .filler { border-right: solid 1px var(--bs-border-color); }
    .side-bar-tabs > a { height: 4rem; border-bottom-style: none; border-right: solid 1px var(--bs-border-color); line-height: 4rem; }
    .with-navs.right-visible .side-bar-tabs > a.active, .nav-side .side-bar-tabs > a.active { border-top: solid 1px var(--bs-border-color); border-bottom: solid 1px var(--bs-border-color); border-left-style: none; border-right-style: none; padding-right: 1px; color: rgba(var(--bs-emphasis-color-rgb), 1); line-height: calc(4rem - 2px); }
}

.side-bar-content { padding: 1.25rem; background-color: var(--bs-secondary-bg); color: var(--bs-body-color); overflow: auto; }
.side-bar-content h1 { margin: 0 0 1rem 0; padding: 0; font-size: 2rem; font-weight: 300; letter-spacing: 0; }
.side-bar-content h2 { margin: 0 0 1rem 0; padding: 0; font-size: 1.25rem; letter-spacing: 0; text-transform: uppercase; color: var(--bs-body-color); }
.side-bar-content .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); }
.side-bar-content .btn-titled { padding: .625rem 1rem; }
.side-bar-content .btn-titled p:first-child { margin: 0 0 .25rem 0; color: var(--bs-emphasis-color); line-height: 1.25!important; text-align: left; font-weight: bold; }
.side-bar-content .btn-titled p:last-child { margin: 0; line-height: 1.25!important; text-align: left; font-size: .875em; }



/* -------- START view -------- */

.start-header { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; }
.start-header > .blade-brightpay { padding: 1rem 2.5rem 1rem 1.5rem; }
.start-header > .blade-brightpay img { height: 100%; min-height: 2rem; }
.start-header > .toolbar { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; border-top: solid 1px var(--bs-border-color); box-shadow: 0 .25rem .5rem -.5rem rgba(0,0,0,.333) inset; }
.start-header > .tax-year-selection { grid-column-start: 2; grid-row-start: 1; align-self: center; padding: 0 1rem; font-size: 1.5rem; font-weight: 300; color: var(--bs-secondary-color); white-space: nowrap; }
.start-header > .nav-trigger { grid-column-start: 3; grid-row-start: 1; width: auto !important; }
@media (min-width: 992px) {
    .start-header { grid-template-rows: auto; }
    .start-header > .blade-brightpay { padding: 1.75rem 3.25rem 1.75rem 2rem; clip-path: polygon(0 0, 100% 0, calc(100% - 2rem) 100%, 0 100%); }
    .start-header > .toolbar { grid-column-start: 2; grid-column-end: 2; grid-row-start: 1; border-top: none; box-shadow: none; }
    .start-header > .tax-year-selection { grid-column-start: 3; padding: 0 1.5rem; font-size: 2rem; font-weight: 100; }
    .start-header > .nav-trigger { display: none; }
}

.list-group.import-requests-list-group { min-height: calc(4.75rem - 2px); border-radius: 0; background-image: linear-gradient(transparent calc(4.75rem - 1px), var(--border-color-list) 1px); background-size: 100% 4.75rem; line-height: 1.25; }
.list-group.import-requests-list-group > .list-group-item { display: grid; grid-template-columns: 2.25rem 1fr auto; grid-template-rows: auto auto auto; column-gap: .75rem; align-items: start; height: 4.75rem; border-style: none; padding: .5rem 1rem; background-color: transparent; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 500; }
.list-group.import-requests-list-group > .list-group-item > *:first-child { grid-row-end: span 2; margin-top: .25rem; justify-self: center; opacity: .75; }
.list-group.import-requests-list-group > .list-group-item > *:first-child > i { font-size: 2rem; }
.list-group.import-requests-list-group > .list-group-item > p { grid-column-start: 2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-group.import-requests-list-group > .list-group-item > p:nth-of-type(1) { font-weight: bold; }
.list-group.import-requests-list-group > .list-group-item > p:nth-of-type(2) { grid-row-start: 2; }
.list-group.import-requests-list-group > .list-group-item > p:nth-of-type(3) { grid-row-start: 3; opacity: .5; font-style: italic; }
.list-group.import-requests-list-group > .list-group-item > a { grid-row: span 3; grid-column-start: 3; margin-top: 1px; }
.list-group.import-requests-list-group > .list-group-item > a:hover { border-color: inherit; }
.modal-content-fixed-height .list-group.import-requests-list-group { min-height: 100%; }

.employers-grid { line-height: 1.25; }
.employers-grid .org-badge { width: 2.25rem; }
.employers-grid .org-badge-sm { width: 1.75rem; }
.employers-grid .fw-bold { font-weight: 600!important; overflow: hidden; text-overflow: ellipsis; }
.employers-grid dl { display: flex; }
.employers-grid dl > * { line-height: 1; white-space: nowrap; }
.employers-grid dl > dt { padding: .45em .65em 0 .65em; border: solid 1px var(--bs-secondary); border-right: none; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; color: var(--bs-secondary-color); font-size:.875rem; }
.employers-grid dl > dd { padding: .35em .65em; border: solid 1px var(--bs-secondary); border-left: none; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; background-color: var(--bs-secondary); color: var(--bs-body-bg); font-weight: bold; }
.employers-grid td.with-tag { border-left-style: solid; border-left-width: 5px; padding-left: calc(1rem - 5px) !important; }
/*@media (min-width: 992px) {
    .employers-grid table th:first-child, .employers-grid table td:first-child { padding-left: 1.5rem; }
    .employers-grid table th:last-child, .employers-grid table td:last-child { padding-right: 1.5rem; }
}*/



/* -------- ORGANISATIONS > Edit Details -------- */

.modal-launch-form-group { margin: 0 0 -1px 0; border: solid 1px var(--bs-border-color); padding-top: .75rem; padding-bottom: .75rem; }
.modal-launch-form-group:first-of-type { border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
.modal-launch-form-group:last-of-type { border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; }
.modal-launch-form-group .col-md-10 { display: flex; align-items: center; }
.modal-launch-form-group .col-md-10 label { flex-grow: 1; margin: 0; padding: 0 1rem 0 0; }
.modal-launch-form-group .col-md-10 p { flex-grow: 1; margin: 0; text-align: right; font-weight: bold; }
.modal-launch-form-group button { align-self: center; margin: 0; }

.users-data-grid .badge { position: relative; top: -1px; margin-top: -1rem; margin-bottom: -1rem; cursor: default; }
.users-data-grid .user-invite { color: var(--bs-purple-500); }
.users-data-grid .user-invite .badge { background-color: var(--bs-purple-500); }



/* -------- PAYROLL > Schedules view -------- */

.schedule-container { position: relative; }
.schedule-container:not(:first-of-type) { margin-top: 1px }
.schedule { display: grid; }
.schedule > .btn, .schedule > *:not(.btn) > .btn { padding: 0; border-radius: 0; overflow:hidden; }
.schedule > *:not(:first-child) { margin-left: 1px; }
.schedule > .btn:first-child, .schedule > *:not(.btn):first-child > .btn { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.schedule > .btn:last-child, .schedule > *:not(.btn):last-child > .btn { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.schedule > *:not(.btn) > .btn { width: 100%; height: 100%; }



/* -------- PAYROLL > Payslip view -------- */

.payslip-list-group-item > * { display: grid; gap: .5rem; align-items: end; grid-template-columns: auto 1fr; }
.payslip-list-group-item.flagged > * { grid-template-columns: auto 1fr auto; }
.payslip-list-group-item > * > *:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.payslip-list-group-item.flagged > * > *:nth-child(3) { color: var(--bs-body-color); opacity: .5; transition: color 250ms, opacity 250ms; }
.payslip-list-group-item.active.flagged > * > *:nth-child(3) { color: white; opacity: .75; }

.payslip-items { }
.payslip-items h4 { margin: 0; padding: .5rem 0; font-size: 1.25rem; font-weight: 400; border-bottom: solid 1px var(--bs-border-color); }
.payslip-items ul { padding-left: 0; }
.payslip-items ul > li { display: block; margin: 0; padding: .5rem 0; border-bottom: solid 1px var(--border-color-list); }
.payslip-items input[disabled], .payslip-items select[disabled] { color: var(--bs-body-color); }

.payslip-item-dropdown { font-size: 92.86%; box-shadow: 0 .5rem 1rem rgba(0,0,0,.33) !important; }
.payslip-item-dropdown section { padding: .75rem 1rem; border-top: solid 1px var(--bs-border-color); }
.payslip-item-dropdown section:first-of-type { padding-top: .375rem; border-top: none; }
.payslip-item-dropdown section:last-of-type { padding-bottom: .375rem; }
.payslip-item-dropdown h5 { margin: 0; text-align: center; font-weight: bold; font-size: 1rem; }
.payslip-item-dropdown a { text-decoration: underline; }
.payslip-item-dropdown .form-check { margin: 0; }
.payslip-item-dropdown .form-check label { max-width: 24rem; }
.payslip-item-dropdown .form-check a { color: inherit; }
.payslip-item-dropdown .form-check a:hover { color: var(--bs-emphasis-color); }
.payslip-item-dropdown dl { display: grid; column-gap: 1rem; grid-template-columns: 2fr 1fr; margin: 0; }
.payslip-item-dropdown dt, .payslip-item-dropdown dd { margin: 0; }
.payslip-item-dropdown dt { font-weight: normal; font-style: italic; }
.payslip-item-dropdown dd { text-align: right; color: var(--bs-emphasis-color); }
.payslip-item-dropdown .form-text { max-width: 24rem; }
.payslip-item-dropdown .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); }

.rates-dropdown { overflow: auto; padding-top: .5rem; padding-bottom: .5rem; font-size: 92.86%; }
.rates-dropdown h5 { margin: .5rem 1rem; font-weight: normal; }
.rates-dropdown h6 { margin: .5rem 1rem; font-size: inherit; font-weight: bold; }
.rates-dropdown button > dl { display: grid; column-gap: 1.5rem; grid-template-columns: 3fr 1fr; }
.rates-dropdown button > dl > dt { white-space: nowrap; }
.rates-dropdown button > dl > dd { text-align: right; font-weight: 500; }
.rates-dropdown hr { margin: .5rem 0; }
.rates-dropdown p { margin: .5rem 1rem 0 1rem; opacity: .5; }
.rates-dropdown a { display: block; margin: .5rem 1rem; }

.rate-input-group-text {display: block; min-width: 0; max-width: 8rem; text-overflow: ellipsis; overflow: hidden; }
select.input-group-label { flex: 0 0 3.75rem !important; }

.note-entry { position: relative; }
.note-entry > textarea { padding-left: 2.25rem; }
.note-entry > i { position: absolute; left: .625rem; top: .875rem; font-size: 1rem; line-height: 1; }

.calculation-summary h6 { margin-bottom: .75rem; color: var(--bs-secondary-color); font-weight: 600; text-transform: uppercase; }
.calculation-summary h6:not(:first-of-type) { margin-top: 1rem; padding-top: 1rem; border-top: solid 1px var(--bs-border-emphasis); }
.calculation-summary dl { display: grid; column-gap: 1rem; grid-template-columns: 1fr auto; }
.calculation-summary dl > dt, dl.payslip-amount > dd { line-height: 1.333; }
.calculation-summary dl > dt { font-style: italic; }
.calculation-summary dl > dd { }

.coding-notices-data-grid table.data-grid-selectable > tbody > *:not(.selected) > *:not(:first-child,:nth-child(2)) { color: rgba(var(--bs-dark-rgb), .75); }
.coding-notices-data-grid table.data-grid-selectable > tbody > *:not(.selected) .badge { background-color: var(--bs-secondary-subtle) !important; }
.coding-notices-data-grid td { line-height: 1; }



/* -------- ANALYSIS -------- */

.define-report { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.define-report h3 { height: 3rem; margin: 0; border-bottom: solid 1px var(--bs-border-color); padding: 0 1rem; line-height: 3rem; font-size: 1.125rem; }

.define-report-list-group { min-height: 100%; border-radius: 0; background-image: linear-gradient(var(--bs-body-bg) calc(2.875rem - 1px), var(--border-color-list) calc(2.875rem - 1px)); background-size: 100% 2.875rem; line-height: 1.25; }
.define-report-list-group .list-group-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem; align-items: center; height: calc(2.875rem); margin: 0; border-style: none; border-bottom: solid 1px var(--border-color-list); padding: 0 .5rem 0 1rem; }
.define-report-list-group .list-group-item > p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.define-report-list-group .list-group-item > .order-indicator { padding-right: .5rem; }
.define-report-list-group .list-group-item > .dropdown > button { display: none; }
.define-report-list-group .list-group-item:hover > .dropdown > button, .define-report-list-group .list-group-item > .dropdown > button.show { display: block; }
.define-report-list-group .list-group-item[draggable] { cursor: move; }
.define-report-list-group .list-group-item[draggable] .dropdown { cursor: auto; }

.report-data-grid { }
.report-data-grid h2 { margin: 0; font-size: 12pt; letter-spacing: -.5px; }
.report-data-grid h2 > span::before { content: '('; }
.report-data-grid h2 > span::after { content: ')'; }
.report-data-grid tr.title-record td { box-shadow: 0 -1px 0 var(--bs-border-color), 0 .25rem .5rem -.5rem rgba(0,0,0,.333) inset; }
.report-data-grid tr.group-record td { font-style: italic; background-image: linear-gradient(var(--border-color-list) calc(3rem - 1px), var(--border-color-list) calc(3rem - 1px)); }
.report-data-grid tr.aggregate-record td { font-weight: bold; }
.report-data-grid td.null { color: var(--bs-tertiary-color); }
.report-data-grid td.null::after { content: '–' }


/* -------- EMPLOYEES > Edit Details -------- */

table.employee-schedules-table td:first-child { padding-left: .75rem; }
table.employee-schedules-table td:last-child { padding-right: .75rem; text-align: right; }

table.employee-starting-ni-summaries-table > * > * > *:first-child { padding-left: 0; }
table.employee-starting-ni-summaries-table > * > * > *:last-child { padding-right: 0; }
table.employee-starting-ni-summaries-table > * > * > td:not(:first-child) { padding-left: 0; }
table.employee-starting-ni-summaries-table > thead { border-top: none !important; }
table.employee-starting-ni-summaries-table > thead > tr > th { font-weight: normal; font-style: italic; }
table.employee-starting-ni-summaries-table > thead > tr > th:not(:first-child) { text-align: end; }
table.employee-starting-ni-summaries-table > tbody { border-top: solid 1px var(--bs-table-border-color) !important; }



/* -------- EMPLOYEES > Calendar -------- */

.calendar { display: grid; grid-template-columns: repeat(auto-fill, 1fr ); grid-template-rows: repeat(auto-fill, 2fr ); cursor: default; user-select: none; -webkit-user-select: none; margin: -1px 0 0 -1px; }
.calendar .month { display: grid; grid-template-rows: auto 1fr; border-top: 1px solid var(--bs-border-color); border-left: 1px solid var(--bs-border-color); }
.calendar .month > header { cursor: default; position: relative; margin: 0; padding-top: .75rem; text-align: center; text-transform: uppercase; }
.calendar .month > header > .btn { position: absolute; top: .7rem; left: .7rem; padding-top: .125rem; padding-bottom: .125rem; }
.calendar .month > header > .btn:last-child { left: auto; right: .7rem; }
.calendar .month > section { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); margin: .5rem; }
.calendar .month > section > div { cursor: default; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--bs-body-bg); border-bottom: solid 1px var(--bs-body-bg); }
.calendar .month > section > div.start-leave { border-top-left-radius: .333rem; border-bottom-left-radius: .333rem; }
.calendar .month > section > div.end-leave { border-top-right-radius: .333rem; border-bottom-right-radius: .333rem; }
.calendar .month > section > div.ssp { color: var(--sick-leave); }
.calendar .month > section > div > p { cursor: pointer; user-select: none; -webkit-user-select: none; margin: 0; font-weight: 600; }
.calendar .month > section > div.nw > p { font-weight: normal; opacity: 0.5; }
.calendar .month > section > div.with-notes > p { text-decoration: underline !important; }
.calendar .month > section > div.public-holiday > p { text-decoration: underline rgba(var(--bs-emphasis-color-rgb), .25) double; }
.calendar .month > section > div > s { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background-color: transparent; border-top: solid 1px var(--sick-leave); border-bottom: solid 1px var(--sick-leave); }
.calendar .month > section > div.start-sickness > s { border-left: solid 1px var(--sick-leave); border-top-left-radius: .333rem; border-bottom-left-radius: .333rem; }
.calendar .month > section > div.end-sickness > s { border-right: solid 1px var(--sick-leave); border-top-right-radius: .333rem; border-bottom-right-radius: .333rem; }
.calendar .month > section > div > mark { cursor: pointer; user-select: none; -webkit-user-select: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background-color: transparent; }
.calendar .month > section > div > mark.active { background-color: rgba(var(--bs-emphasis-color-rgb), .15); }
.calendar .month > section > div > mark.active.start { border-top-left-radius: .333rem; border-bottom-left-radius: .333rem; }
.calendar .month > section > div > mark.active.end { border-top-right-radius: .333rem; border-bottom-right-radius: .333rem; }

.bg-annual-leave { color: var(--bs-gray-900); background-color: var(--annual-leave) !important; }
.bg-annual-leave.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(254,203,47,1) 50%, rgba(254,203,47,0.5) 50%) !important; }
.bg-unpaid-leave { color: var(--bs-gray-900); background-color: var(--unpaid-leave) !important; }
.bg-unpaid-leave.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(253,148,38,1) 50%, rgba(253,148,38,0.5) 50%) !important; }
.bg-absence-leave { color: var(--bs-gray-900); background-color: var(--absence-leave) !important; }
.bg-absence-leave.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(242,167,222,1) 50%, rgba(242,167,222,0.5) 50%) !important; }
.bg-strike-leave { color: var(--bs-gray-900); background-color: var(--strike-leave) !important; }
.bg-strike-leave.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(189,134,223,1) 50%, rgba(189,134,223,0.5) 50%) !important; }
.bg-user-leave-1 { color: var(--bs-gray-900); background-color: var(--user-leave-1) !important; }
.bg-user-leave-1.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(193,155,104,1) 50%, rgba(193,155,104,0.5) 50%) !important; }
.bg-user-leave-2 { color: var(--bs-gray-900); background-color: var(--user-leave-2) !important; }
.bg-user-leave-2.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(143,216,237,1) 50%, rgba(143,216,237,0.5) 50%) !important; }
.bg-user-leave-3 { color: var(--bs-gray-900); background-color: var(--user-leave-3) !important; }
.bg-user-leave-3.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(215,242,80,1) 50%, rgba(215,242,80,0.5) 50%) !important; }
.bg-user-leave-4 { color: var(--bs-gray-900); background-color: var(--user-leave-4) !important; }
.bg-user-leave-4.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(188,191,207,1) 50%, rgba(188,191,207,0.5) 50%) !important; }
.bg-user-leave-5 { color: var(--bs-gray-900); background-color: var(--user-leave-5) !important; }
.bg-user-leave-5.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(148,244,183,1) 50%, rgba(148,244,183,0.5) 50%) !important; }
.bg-user-leave-6 { color: var(--bs-gray-900); background-color: var(--user-leave-6) !important; }
.bg-user-leave-6.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(154,172,137,1) 50%, rgba(154,172,137,0.5) 50%) !important; }
.bg-user-leave-7 { color: var(--bs-gray-900); background-color: var(--user-leave-7) !important; }
.bg-user-leave-7.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(243,237,167,1) 50%, rgba(243,237,167,0.5) 50%) !important; }
.bg-user-leave-8 { color: var(--bs-gray-900); background-color: var(--user-leave-8) !important; }
.bg-user-leave-8.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(174,216,214,1) 50%, rgba(174,216,214,0.5) 50%) !important; }
.bg-user-leave-9 { color: var(--bs-gray-900); background-color: var(--user-leave-9) !important; }
.bg-user-leave-9.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(237,154,160,1) 50%, rgba(237,154,160,0.5) 50%) !important; }
.bg-parenting-leave { color: var(--bs-gray-900); background-color: var(--parenting-leave) !important; }
.bg-parenting-leave.part-leave { color: var(--bs-gray-900); background: linear-gradient(135deg, rgba(104,216,69,1) 50%, rgba(104,216,69,0.5) 50%) !important; }

.calendar-key { display: grid; grid-template-columns: auto 1fr; gap: .625rem; border: solid 1px var(--bs-border-color); border-radius: .25rem; padding: .5rem .75rem; font-size: 0.925rem; line-height: 1; }

.calendar-date-settings { display: grid; min-height: 100%; }
.calendar-date-settings > p { margin: 0; }
.calendar-date-settings > hr { margin: 0; }
.calendar-date-settings dl { display: grid; grid-template-columns: 1fr auto; }
.calendar-date-settings dl > dd { text-align: right; font-weight: bold; white-space: nowrap; }
.calendar-date-settings textarea { min-height: 10rem; }
[data-bs-theme=dark] .calendar-date-settings .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); }

.calendar-state-buttons { display: grid; grid-gap: .25rem; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; margin: 1rem 1rem .25rem 1rem; }
.calendar-state-buttons button { position:relative; height:100%; padding: .375rem; font-size: .85rem; line-height: 1; }
.calendar-state-buttons button > i:not(.fa-caret-down) { display: block; font-size: 2rem; margin-bottom: .125rem; }
.calendar-state-buttons .btn-group-vertical .btn.dropdown-toggle { padding: 0; line-height: 1; }
.calendar-state-buttons .dropdown > button { width: 100%; }
.calendar-state-buttons .btn.dropdown-toggle::after { display: none; }

.btn-outline-secondary.toggle-state:hover { color: var(--bs-secondary-color); background-color: var(--bs-secondary-bg); }
.btn-outline-secondary.toggle-state.active, .btn-outline-secondary.toggle-state:active { color: var(--bs-white); }
.btn-outline-secondary.toggle-state.dropdown-toggle.active, .btn-outline-secondary.toggle-state.dropdown-toggle:active { color: var(--bs-secondary-color); }
.btn-outline-secondary.toggle-state.dropdown-toggle.show, .btn-outline-secondary.toggle-state.dropdown-toggle.show { color: var(--bs-secondary-color); background-color: var(--bs-secondary-bg); }
.btn-outline-secondary.toggle-working-day.active, .btn-outline-secondary.toggle-working-day:active { background-color: var(--bs-secondary); }
.btn-outline-secondary.toggle-non-working-day.active, .btn-outline-secondary.toggle-non-working-day:active { background-color: var(--bs-border-emphasis); }
.btn-outline-secondary.toggle-annual-leave.active, .btn-outline-secondary.toggle-annual-leave:active { background-color: var(--annual-leave); }
.btn-outline-secondary.toggle-unpaid-leave.active, .btn-outline-secondary.toggle-unpaid-leave:active { background-color: var(--unpaid-leave); }
.btn-outline-secondary.toggle-absence-leave.active, .btn-outline-secondary.toggle-absence-leave:active { background-color: var(--absence-leave); }
.btn-outline-secondary.toggle-strike-leave.active, .btn-outline-secondary.toggle-strike-leave:active { background-color: var(--strike-leave); }
.btn-outline-secondary.toggle-sick-leave.active, .btn-outline-secondary.toggle-sick-leave:active { background-color: var(--sick-leave); }
.btn-outline-secondary.toggle-parenting-leave.active, .btn-outline-secondary.toggle-parenting-leave:active { background-color: var(--parenting-leave); }
.btn-outline-secondary.toggle-keep-in-touch-day.active, .btn-outline-secondary.toggle-keep-in-touch-day:active { background-color: var(--parenting-leave); }

.user-defined-leave-dropdown-button { font-size: 92.86%; }
.user-defined-leave-dropdown-button::after { display: none; }
.user-defined-leave-dropdown-button > div { display: grid; grid-template-columns: 1fr 1rem; align-items: center; }
.user-defined-leave-dropdown-button > div > *:first-child { text-align: left; }
.user-defined-leave-dropdown-button > div > *:last-child { text-align: center; }
.user-defined-leave-active-button { position:absolute; pointer-events: none; width: calc(100% - 2.5rem); top: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: left; font-size: 92.86%; }
.user-defined-leave-dropdown { padding: .5rem; font-size: 92.86%; }
.user-defined-leave-dropdown button { margin: 0 0 1px 0 !important; padding: .25rem; border-color: transparent; font-size: inherit; text-align: left; color: inherit; }
.user-defined-leave-dropdown hr { margin: .5rem 0 .5rem 0; }
.user-defined-leave-dropdown a { display: block; margin: .25rem .75rem; }

.annual-leave-calculation-steps { margin-top: 1.5rem; border-radius: .25rem; background-color: var(--bs-secondary-bg); }
.annual-leave-calculation-steps table { width: 100%; }
.annual-leave-calculation-steps table tr td { padding: .375rem .75rem; font-size: 92.86%; }
.annual-leave-calculation-steps table tr:not(:first-child) td { border-top: solid 1px var(--bs-body-bg); }
.annual-leave-calculation-steps table tr td:nth-child(2) { text-align: right; white-space: nowrap }
.annual-leave-calculation-steps table tr td:nth-child(3) { white-space: nowrap; font-style: italic; color: var(--bs-info); opacity: .75; }



/* -------- EMPLOYEES > Auto Enrolment -------- */

.ae-status { padding: 1.5rem; text-align: center; }
.ae-status > p:first-of-type { max-width: 800px; margin: 0 auto; }

.ae-status > dl { display: grid; grid-template-columns: 1fr 1fr; margin: 2rem 0 0 0; }
.ae-status > dl > dt { padding: .25rem 1rem; text-align: right; font-style: italic; }
.ae-status > dl > dd { padding: .25rem 1rem; border-left: solid 1px var(--bs-border-color); text-align: left; font-weight: 500; }

.ae-status .options { grid-column: 1; grid-row: 1; position: relative; top: 0; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; opacity: 1; z-index: 2; pointer-events: all; transition: top 250ms, opacity 250ms; transition-timing-function: linear; }
.ae-status .options.hidden { top: -1rem; opacity: 0; z-index: 1; pointer-events: none; }
.ae-status .options > .card { width: 15rem; margin: .5rem; }
.ae-status .options > .card .card-body { display: grid; grid-template-rows: auto 1fr auto; }
.ae-status .options > .card .btn { width: 7rem; margin: 0 auto; }

.ae-status .actions { grid-column: 1; grid-row: 1; position: relative; top: 0; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; opacity: 1; z-index: 2; pointer-events: all; transition: top 250ms, opacity 250ms; transition-timing-function: linear; }
.ae-status .actions.hidden { top: 1rem; opacity: 0; z-index: 1; pointer-events: none; }
.ae-status .actions > .card { max-width: 50rem; margin: .5rem; }
.ae-status .actions > .card label:not(.form-check-label) { white-space: nowrap; }



/* -------- HMRC PAYMENTS -------- */

.hmrc-payment { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 100%; background-image: linear-gradient(transparent calc(3rem - 1px), var(--border-color-list) 1px); background-size: 100% 3rem; background-attachment: local; }
.hmrc-payment > div { border: solid 0 var(--bs-border-color); }
.hmrc-payment > div:nth-child(2) { border-left-width: 1px; border-right-width: 1px; }
.hmrc-payment h3 { height: 3rem; margin: 0; border-bottom: solid 1px var(--bs-border-color); padding: 0 1rem; line-height: 3rem; font-size: 1.125rem; }
.hmrc-payment dl { display: grid; grid-gap: .75rem; grid-template-columns: 1fr auto; height: 3rem; margin: 0 1rem; }
.hmrc-payment dl > dt { line-height: 3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hmrc-payment dl > dd { line-height: 3rem; text-align: right; }
.hmrc-payment dl > dd > .input-group, .hmrc-payment dl > dd > .position-relative {width: 10rem; margin: .375rem -.5rem 0 0;}
.hmrc-payment dl > dd .input-group .input-group-text { padding-top: .25rem; padding-bottom: .25rem; }
.hmrc-payment dl > dd .input-group input { height: calc(1.5em + .5rem + 2px); padding-top: .25rem; padding-bottom: .25rem; text-align: right; }
.hmrc-payment dl.total > dt, .hmrc-payment dl.total > dd { font-weight: bold; }

table.additional-amounts { width: 100%; }
table.additional-amounts thead tr th { font-style: italic; font-weight: normal; }
table.additional-amounts thead tr th,
table.additional-amounts tbody tr td { border-style: solid; border-color: var(--border-color-list); padding: .325rem 1rem; }
table.additional-amounts tbody tr td { border-top-width: 1px; }
table.additional-amounts thead tr th { padding-top: .5rem; padding-bottom: .5rem; }
table.additional-amounts thead tr th:first-child,
table.additional-amounts tbody tr td:first-child { }
table.additional-amounts thead tr th:not(:first-child),
table.additional-amounts tbody tr td:not(:first-child) { border-left-width: 1px; text-align: right; }
table.additional-amounts tbody tr td:last-child,
table.additional-amounts thead tr th:last-child { font-weight: bold; }
table.additional-amounts tbody tr td:nth-child(3) { padding-left: .5rem; padding-right: .5rem; }
table.additional-amounts input { text-align: right; }



/* -------- RTI -------- */

.rti-dropdown-item-content { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; width: 400px; cursor: pointer; }
.rti-dropdown-item-content > i { grid-row-end: span 2; margin-top: .5rem; font-size: 2rem; }
.rti-dropdown-item-content > p { grid-column-start: 2; margin: 0; white-space: normal; }
.rti-dropdown-item-content > p:last-of-type { grid-row-start: 2; opacity: .5; }

.rti-list-group-item-content { display: grid; grid-template-columns: 2.25rem 1fr; grid-template-rows: auto auto auto; column-gap: .75rem; cursor: pointer; }
.rti-list-group-item-content > i { grid-row-end: span 2; margin-top: .25rem; font-size: 2rem; text-align: center; }
.rti-list-group-item-content > p { grid-column-start: 2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rti-list-group-item-content > p:nth-of-type(1) { font-weight: bold; }
.rti-list-group-item-content > p:nth-of-type(2) { grid-row-start: 2; }
.rti-list-group-item-content > p:last-of-type { grid-row-start: 3; opacity: .5; font-style: italic; }

.rti-submission-details { text-align: center; }
.rti-submission-details h1 { font-size: 4rem; }
.rti-submission-details hr { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.rti-submission-details dl { margin: 0; }
.rti-submission-details dl > dt { display: block; font-style: italic; }
.rti-submission-details dl > dd { display: block; font-size: 1.125rem; }
.rti-submission-details dl > dd > * { margin-top: .5rem; }

.create-exb dl { display: grid; grid-template-columns: 2.5fr 1fr; gap: 1rem; margin: 0; }
.create-exb dl label { margin-bottom: .25rem; }
.create-exb dl > dd { text-align: right; }
.create-exb dl > dd input[type=text] { text-align: right; }



/* -------- PENSIONS -------- */

.add-pension-scheme-dropdown { width: 50rem; padding: 1rem; font-size: 92.86%; }
.add-pension-scheme-dropdown h5 { margin: 0 0 .5rem 0; font-weight: normal; }
.add-pension-scheme-dropdown p { margin: 0; opacity: .75; }
.add-pension-scheme-dropdown p.caption { margin: 1rem 0 .5rem 0; font-style:italic; opacity: 1; }
.add-pension-scheme-dropdown button { align-self: stretch; margin: 0 !important; border: solid 1px var(--bs-border-color) !important; padding:.5rem 1rem !important; text-align: center !important; font-size: inherit !important; line-height: 1.25 !important; color: inherit !important; background-color: var(--bs-tertiary-bg) !important; }
.add-pension-scheme-dropdown button:hover { border-color: var(--bs-gray) !important; }
.add-pension-scheme-dropdown button img { max-width: 90%; max-height: 4rem; }
.add-pension-scheme-dropdown hr { margin: 1rem 0; }
.add-pension-scheme-dropdown a { display: block; margin: .5rem 0; text-align: center; }

.add-pension-scheme-dropdown .csv-providers button img { max-height: 2.5rem; }

.pension-scheme-image-container { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: solid 1px var(--bs-border-color); border-radius: .625rem; padding: 3rem 1.5rem; background-color: var(--bs-body-bg); }
.pension-scheme-image-container img { max-width: 70%; max-height: 8.5rem; }



/* -------- SETTINGS -------- */

.edit-page-margins { display: grid; gap: .75rem; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; align-items: center; }
.edit-page-margins .input-group { max-width: 7rem; }
.edit-page-margins > *:nth-child(2) { justify-self:center; }
.edit-page-margins > *:nth-child(4) { justify-self:end; }
.edit-page-margins > *:nth-child(5) { justify-self:center; position: relative; background-color: var(--bs-body-bg); border: solid 1px var(--bs-secondary-subtle); }
.edit-page-margins > *:nth-child(5) > * { position: absolute; border: dotted 1px var(--bs-secondary-subtle); }
.edit-page-margins > *:nth-child(8) { justify-self:center; }



/* -------- TOOLBAR EXPANSION OVERRIDES (if and when CSS supports transitions to width:auto, these can be removed -------- */

.toolbar-expanding-panel.active.expanded-start-organisations { max-width: 103px; }
.toolbar-expanding-panel.active.expanded-start-employers { max-width: 247px; }
.toolbar-expanding-panel.active.expanded-profile-items { max-width: 111px; }
.toolbar-expanding-panel.active.expanded-ae-account { max-width: 272px; }
.toolbar-expanding-panel.active.expanded-ae-scheme { max-width: 114px; }
.toolbar-expanding-panel.active.expanded-pension-scheme { max-width: 114px; }