/* ==========================================================================
   SECTION 01: Global Tokens & Base Links — START
   Global CSS variables and the shared link style used across the app.
   ========================================================================== */

:root { --default-space: 2px; --main-color: rgba(220,53,69,1); }

a.link { color: var(--mud-palette-primary); }

    a.link:hover { text-decoration: underline; }

.right-2 { right: .5rem !important; }

/* ============================== SECTION 01: Global Tokens & Base Links — END ============================== */


/* ==========================================================================
   SECTION 02: Layout & Spacing Utilities — START
   Small reusable layout helpers for grids, sizing, sticky positioning, and spacing.
   ========================================================================== */

.mud-container { margin-bottom: 2rem; }

.d-grid { display: grid; }

.cell-wrapper { white-space: normal !important; max-width: 240px }

.resp-7-items { grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); }

.resp-10-items { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.place-items-center { place-items: center; }

.w-100 { width: 100%; }

.min-height-100 { min-height: 100%; }

.min-height-default { min-height: 400px; }

.sticky-top,
.mud-tabs-tabbar.mud-tabs-vertical .mud-tabs-tabbar-inner { position: sticky; top: calc(var(--mud-appbar-height) + 16px); z-index: 101; }

.lg-space { padding: calc(var(--default-space) * 6); }

    .lg-space.hasHover:hover { padding-left: calc(var(--default-space) * 9); }

._2Rows { grid-auto-rows: 155px 1fr; }

/* ============================== SECTION 02: Layout & Spacing Utilities — END ============================== */


/* ==========================================================================
   SECTION 03: Typography & Text Helpers — START
   Reusable text alignment, emphasis, truncation, and one-line text helpers.
   ========================================================================== */

strong,
.text-bold { font-weight: 500 !important; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-italic { font-style: italic; }

.line-height-1 { line-height: 1; }

.list-item-content-summary,
.list-item-content-title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

._1lText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding-inline: 16px; overflow: hidden; }

.bold-underline { font-weight: bold; text-decoration: underline; }

.mud-table .menu-status-custom-001 > .mud-chip-container > .mud-chip { font-weight: 500; padding-left: 18px; }

.mud-table .menu-status-custom-001 > .mud-badge-wrapper > .mud-badge.left { right: calc(100% - 18px); }

.align-content-center { align-content: center; }
/* ============================== SECTION 03: Typography & Text Helpers — END ============================== */
/* ==========================================================================
   SECTION 04: Background, Border & Color Helpers — START
   Reusable color, gradient, border, and background utility classes.
   ========================================================================== */
.mud-bg-transparent { background-color: transparent !important; }

.bg-light,
.mud-switch-container,
.mud-timeline-item-dot .mud-timeline-item-dot-inner.mud-timeline-dot-default,
.list-item:hover,
.custom-paper-01:hover { background-color: var(--mud-palette-action-default-hover); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.bg-info { background-color: var(--mud-palette-info-hover); }

.bg-tertiary { background-color: var(--mud-palette-tertiary-hover); }

.bg-warning { background-color: var(--mud-palette-warning-hover); }

.bg-error { background-color: var(--mud-palette-error-hover); }

.mud-palette-c2 { background-color: var(--mud-palette-gray-lighter); box-shadow: var(--mud-elevation-25); }

.bg-g-g { background: linear-gradient( 180deg, var(--mud-palette-tertiary-hover) 0%, var(--mud-palette-surface) 60% ); border-top: solid 2px rgb(30 200 165 / 25%); }

.bg-g-y { background: linear-gradient( 180deg, var(--mud-palette-warning-hover) 0%, var(--mud-palette-surface) 60% ); border-top: solid 2px rgb(255 152 0 / 25%); }

.bg-g-r { background: linear-gradient( 180deg, var(--mud-palette-primary-hover) 0%, var(--mud-palette-surface) 60% ); border-top: solid 2px rgb(220 53 69 / 25%); }

.bg-g-b { background: linear-gradient( 180deg, var(--mud-palette-info-hover) 0%, var(--mud-palette-surface) 60% ); border-top: solid 2px rgb(33 150 243 / 25%); }

.bg-g-d { background: linear-gradient( 180deg, var(--mud-palette-gray-light) 0%, var(--mud-palette-surface) 60% ); border-top: solid 2px var(--mud-palette-gray-default); }

.bg-g { background-color: var(--mud-palette-tertiary); }

.bg-y { background-color: var(--mud-palette-warning); }

.bg-r { background-color: var(--mud-palette-primary); }

.bg-b { background-color: var(--mud-palette-info); }

.today-date .date-menu,
.bg-primary { background-color: var(--mud-palette-primary); color: #ffffff; }

.border-light { border: solid 1px var(--mud-palette-gray-default); }

.divider-color-light { border-color: var(--mud-palette-gray-default); }

.border-b-d { border-bottom: dashed 2px var(--mud-palette-divider); }

.border-r-s { border-right: solid 1px var(--mud-palette-divider); }

.mud-button-group-filled.mud-button-group-override-styles.mud-button-group-horizontal:not(.mud-button-group-rtl) .mud-button-root:not(:first-child),
.mud-button-group-filled.mud-button-group-override-styles.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root { border-left: 1px solid rgba(var(--mud-palette-divider-light), var(--mud-palette-border-opacity)); }

/* ============================== SECTION 04: Background, Border & Color Helpers — END ============================== */


/* ==========================================================================
   SECTION 05: Breadcrumbs — START
   Rounded breadcrumb styling and breadcrumb item states.
   ========================================================================== */

.breadcrumb { padding: 0.5rem 1rem !important; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px !important; background-color: rgb(0 0 0 / 4%) }

    .breadcrumb a { text-decoration: none; color: var(--bs-heading-color); }

li.breadcrumb-item { font-weight: 500; }

.breadcrumb-item:last-child { color: var(--mud-palette-text-disabled); }

.breadcrumb-item + .breadcrumb-item::before { color: var(--mud-palette-lines-inputs) !important; }

/* ============================== SECTION 05: Breadcrumbs — END ============================== */


/* ==========================================================================
   SECTION 06: Logo, App Bar & Navigation — START
   Header, logo, navigation text, and app bar presentation rules.
   ========================================================================== */

.main-logo { display: flex; align-items: center; margin-left: 5px; padding-left: 5px; }

    .main-logo:after { content: ""; height: 27px; width: 2px; border-right: solid 1px var(--bs-border-color); }

    .main-logo svg { width: 126px; }

.sub-logo { display: flex; }

    .sub-logo svg { width: 72px; height: auto; }

.main-logo,
.sub-logo { display: flex; align-items: center; }

    .main-logo > svg { max-width: 106px; }

    .sub-logo > svg { max-width: 76px; }

.mud-nav-link .mud-nav-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mud-appbar .mud-toolbar-appbar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.mud-appbar .mud-toolbar-appbar { background-color: var(--mud-palette-appbar-background); box-shadow: var(--mud-elevation-25); }

/* ============================== SECTION 06: Logo, App Bar & Navigation — END ============================== */


/* ==========================================================================
   SECTION 07: Cards, Papers & List Items — START
   Shared card, paper, list, chip, avatar, and stacked-card styling.
   ========================================================================== */

.card-group { gap: 1rem; }

.card-title { margin-bottom: 0 !important; font-size: 1rem; }

    .card-title.font-plus1 { font-size: 1.25rem; }

.list-item:hover,
.mud-link-01:hover > .mud-paper-01 { transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }

.mud-paper-01.mud-bg-secondary { background-color: var(--mud-palette-appbar-background); }

.mud-link-01:hover > .mud-paper-01 { background-color: var(--mud-palette-action-default-hover) !important; }

.custom-paper-01:hover { box-shadow: none !important; }

.custom-paper-01 .mud-chip { padding: 8px !important; min-width: 2.5rem; height: 2.5rem; }

.mud-paper-01 .mud-chip { min-width: 3rem; height: 3rem; }

.mud-card-01 .mud-avatar { background-color: transparent; display: flex; }

.list-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: calc(var(--default-space) * 3); border-radius: calc(var(--mud-default-borderradius) / 2); z-index: 12; }

    .list-item:hover { padding-left: calc(var(--default-space) * 6); }

    .list-item:not(:last-child) { border-bottom: dashed 1px var(--mud-palette-divider); }

.mud-card-header { padding-bottom: 4px; }

.mud-custom-MudChip { gap: 12px; border-radius: var(--mud-default-borderradius) !important; padding: calc(var(--default-space) * 16) calc(var(--default-space) * 8) !important; }

.flc-01 { margin-top: auto; padding-top: 8px; border-top: solid 1px var(--mud-palette-divider); }

.card-stack { width: 100%; height: 100%; transform-style: preserve-3d; }

.today-birthday-card { position: absolute; transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; opacity: 0; background-color: var(--mud-palette-gray-lighter); cursor: pointer; box-shadow: var(--mud-elevation-2); }

.prev-btn,
.next-btn { z-index: 9; }

.today-birthday-card.active { opacity: 1; transform: translateX(0) scale(1) translateZ(0); z-index: 10; }

.today-birthday-card.prev { opacity: 0.4; transform: translateX(-40px) scale(0.85) translateZ(-50px) rotateY(5deg); z-index: 5; }

.today-birthday-card.prev-2 { opacity: 0.2; transform: translateX(-70px) scale(0.75) translateZ(-100px) rotateY(10deg); z-index: 4; }

.today-birthday-card.next { opacity: 0.4; transform: translateX(40px) scale(0.85) translateZ(-50px) rotateY(-5deg); z-index: 5; }

.today-birthday-card.next-2 { opacity: 0.2; transform: translateX(70px) scale(0.75) translateZ(-100px) rotateY(-10deg); z-index: 4; }

.today-birthday-card.hidden { opacity: 0; transform: scale(0.5); z-index: 0; pointer-events: none; }

.stk-title { position: absolute; top: 0px; padding-inline: 16px; border-bottom-left-radius: var(--mud-default-borderradius); border-bottom-right-radius: var(--mud-default-borderradius); border-top: solid 2px; z-index: 12; background-color: var(--mud-palette-gray-lighter); }

    .stk-title.stk-title-g { color: var(--mud-palette-tertiary); }

    .stk-title.stk-title-r { color: var(--mud-palette-primary); }

/* ============================== SECTION 07: Cards, Papers & List Items — END ============================== */


/* ==========================================================================
   SECTION 08: Status, Dates, Holidays & Calendar UI — START
   Status pills, date colors, holiday cards, and calendar-day helper styles.
   ========================================================================== */

.date-color { color: #757575; }

.next-upcoming-holiday { background-color: var(--mud-palette-primary-hover) !important; }

    .next-upcoming-holiday .text-primary { color: var(--mud-palette-primary) !important; }

.menu-status { display: flex; flex-wrap: wrap; align-items: center; }

    .menu-status p { padding: 0.125rem 0.75rem 0.125rem 1.5rem; border-radius: 4px; position: relative; }

    .menu-status.status-active p { background-color: var(--mud-palette-tertiary-hover); color: var(--mud-palette-tertiary); }

    .menu-status.status-passive p { background-color: var(--mud-palette-action-default-hover); color: var(--mud-palette-action-default); }

    .menu-status p:before { content: ""; position: absolute; top: 50%; left: 0.75rem; transform: translate(-50%, -50%); width: 0.5rem; height: 0.5rem; border-radius: 50px; }

    .menu-status.status-active p:before { background-color: var(--mud-palette-tertiary); }

    .menu-status.status-passive p:before { background-color: var(--mud-palette-action-default-hover); }

.publish-date { color: #757575; align-self: flex-start; border-radius: 4px; }

    .publish-date._today { color: var(--mud-palette-info); --mud-ripple-color: var(--mud-palette-info) !important; background-color: var(--mud-palette-info-hover); padding-inline: 6px; padding-block: 2px; }

.date-menu { font-weight: 500; }

.date-wrapper { background-color: var(--mud-palette-gray-light); border-bottom: solid 1px var(--mud-palette-divider); }

.date-menu { background-color: var(--mud-palette-surface); line-height: 1; }

.today-date .date-icon { color: var(--mud-palette-primary); }

.holiday-day { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; gap: 4px; padding: 16px; border: dashed 2px var(--mud-palette-divider); }

/* ============================== SECTION 08: Status, Dates, Holidays & Calendar UI — END ============================== */


/* ==========================================================================
   SECTION 09: MudBlazor Component Overrides — START
   Targeted overrides for MudBlazor inputs, dialogs, tabs, alerts, progress bars, pickers, switches, and tables.
   ========================================================================== */

.mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--mud-palette-divider); }

.mud-switch-container { padding: 10.5px 14px; }

.mud-dialog-actions { padding: 24px !important; }

.mud-treeview-item-content,
.mud-list-item-clickable { border-radius: var(--mud-default-borderradius); }

.rest-container .mud-chip-container > .mud-chip { margin-top: -30px !important; }

.mud-progress-linear.mud-progress-linear-color-info:not( .mud-progress-linear-buffer )
.mud-progress-linear-bar,
.mud-progress-linear.mud-progress-linear-color-info:not( .mud-progress-linear-buffer )::before { background-color: var(--mud-palette-primary); }

.mud-custom-divider { margin-block: 6px; box-shadow: 0 1px 1px var(--mud-palette-surface); }

.mud-custom-alert .mud-alert-position { align-items: center; }

.mud-custom-alert .mud-alert-message { flex-grow: 1; }

.alternative-menu .mud-select { flex-grow: 0; }

.mud-toggle-group-outlined { border-color: var(--mud-palette-lines-inputs) !important; }

.mud-picker-popover { overflow: hidden; border-radius: var(--mud-default-borderradius); }

.mud-input-control-input-container > .mud-switch { padding: 6px 14px; border-radius: var(--mud-default-borderradius); border-color: var(--mud-palette-divider); border-width: 1px; border-style: solid; margin-top: 8px; justify-content: space-between }

.custom-switch-01 .mud-input-control-input-container > .mud-switch { margin: 0; }

.mud-input-control-input-container:hover > .mud-switch { border-color: var(--mud-palette-action-default); }

.mud-table-cell.mud-table-child-content { background: var(--mud-palette-gray-light); }

/* ============================== SECTION 09: MudBlazor Component Overrides — END ============================== */


/* ==========================================================================
   SECTION 10: Tables, Data Grids & Tabs — START
   Table responsiveness, data-grid filters, vertical tabs, and payroll tab sticky behavior.
   ========================================================================== */

.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }

.table-responsive { overflow-x: auto; }

    .table-responsive td,
    .table-responsive th { padding: 4px 24px; }

.datagrid-filter-c1 { padding-inline: 16px; padding: 24px 16px 16px; border-bottom: solid 2px var(--mud-palette-action-default-hover); }

.mud-tabs-panels.mud-tabs-vertical { padding-block: 0 !important; padding-left: 12px; }

    .mud-tabs-panels.mud-tabs-vertical .mud-tab-panel { width: 100%; }

.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar { height: auto; padding-block: 8px; padding-inline-end: 16px; }

.mud-tabs-tabbar-wrapper.mud-tabs-vertical .mud-tab { justify-content: start; }

.payroll-tabs-vertical-sticky { overflow: visible !important; }

    .payroll-tabs-vertical-sticky > .mud-tabs-panels { overflow: hidden; }

    .payroll-tabs-vertical-sticky > .mud-tabs-tabbar { position: sticky !important; top: 80px; align-self: flex-start !important; }

.mud-table-dense * .mud-table-row .mud-table-cell { white-space: nowrap; }

.mud-table.custom-inner-table { background-color: var(--mud-palette-background); margin-block: 8px; }

.dg-custom-header-01,
.dg-custom-cell-01 { width: 1%; white-space: nowrap; }

/* ============================== SECTION 10: Tables, Data Grids & Tabs — END ============================== */


/* ==========================================================================
   SECTION 11: Forms, Selects & Field Messages — START
   Form helper blocks, select wrappers, small input adornments, and inline field guidance.
   ========================================================================== */

.msg-box { gap: 4px; padding: 16px; margin-inline: 24px; }

.field-info-section { padding: 16px; padding-right: 36px; position: relative; border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-info-hover); border-left: solid 3px rgb(33 150 243 / 25%); }

    .field-info-section .mud-icon-root.mud-svg-icon { color: var(--mud-palette-info); }

.close-field-info { position: absolute; right: 12px; top: 12px; }

.tiny-adornment .mud-input-adornment .mud-icon-button { transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; opacity: 0.25; padding: 4px; margin: 0px; }

    .tiny-adornment .mud-input-adornment .mud-icon-button:hover,
    .tiny-adornment .mud-input-adornment .mud-icon-button:focus,
    .tiny-adornment .mud-input-adornment .mud-icon-button:active { opacity: 1; }

    .tiny-adornment .mud-input-adornment .mud-icon-button .mud-icon-size-medium { font-size: 1.25rem; }

.select-wrapper { width: max-content; min-width: 260px; }

.responsive-select { width: max-content; }

/* ============================== SECTION 11: Forms, Selects & Field Messages — END ============================== */


/* ==========================================================================
   SECTION 12: Login, Modal & Toast Layers — START
   Login screen layout and z-index fixes for modal/backdrop/toast layers.
   ========================================================================== */

.login-background { height: 100vh; display: grid; place-content: center; background-color: var(--mud-palette-background) !important; }

.login-card { width: 420px; padding: 2rem; }

.login-header svg { max-width: 180px; margin-left: -16px; }

.modal { z-index: var(--bb-preload-modal-z-index) !important; }

.modal-backdrop { z-index: var(--bb-preload-modal-backdrop-z-index) !important; }

.blazored-toast-container.position-topcenter { z-index: var(--bb-confirm-dialog-backdrop-z-index) !important; }

/* ============================== SECTION 12: Login, Modal & Toast Layers — END ============================== */


/* ==========================================================================
   SECTION 13: Carousel & Media Assets — START
   Simple image sizing for carousel/media content.
   ========================================================================== */

.carousel-img { max-width: 100%; max-height: 100%; }

/* ============================== SECTION 13: Carousel & Media Assets — END ============================== */


/* ==========================================================================
   SECTION 14: Payroll Summary Cards — START
   Payroll dashboard card layout, values, hover colors, and card color variants.
   ========================================================================== */

.payroll-summary-stack { display: flex; flex-wrap: wrap; align-items: stretch; }

.payroll-summary-card { flex: 1 1 calc(20% - 16px); min-width: 220px; position: relative; overflow: hidden; background: var(--mud-palette-surface); }

    .payroll-summary-card .custom-color-hover-001,
    .card-custom-style-001 .custom-color-hover-001,
    .card-custom-style-002 .custom-color-hover-001,
    .card-custom-style-003 .custom-color-hover-001,
    .card-custom-style-004 .custom-color-hover-001,
    .card-custom-style-005 .custom-color-hover-001 { color: var(--mud-palette-text-secondary); }

    .payroll-summary-card:hover .custom-color-hover-001,
    .card-custom-style-001:hover .custom-color-hover-001,
    .card-custom-style-002:hover .custom-color-hover-001,
    .card-custom-style-003:hover .custom-color-hover-001,
    .card-custom-style-004:hover .custom-color-hover-001,
    .card-custom-style-005:hover .custom-color-hover-001 { color: var(--mud-palette-text-primary); }

.payroll-summary-card-content { height: 100%; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }

.payroll-summary-title { color: var(--mud-palette-text-secondary); line-height: 1.35; }

.payroll-summary-value { font-weight: 700; letter-spacing: -0.02em; }

.payroll-summary-card--net { background: linear-gradient( 180deg, rgb(253 126 20 / 4%) 0%, var(--mud-palette-surface) 80% ) !important; border: solid 1px rgb(253 126 20 / 4%); border-top: solid 2px rgb(253 126 20 / 80%); }

    .payroll-summary-card--net:hover { background: linear-gradient( 180deg, rgb(253 126 20 / 16%) 0%, var(--mud-palette-surface) 64% ) !important; border-top: solid 2px rgb(253 126 20 / 100%); }

.card-custom-style-001,
.payroll-summary-card--gross { background: linear-gradient( 180deg, rgb(255 193 7 / 4%) 0%, var(--mud-palette-surface) 80% ) !important; border: solid 1px rgb(255 193 7 / 4%); border-top: solid 2px rgb(255 193 7 / 80%); }

    .card-custom-style-001:hover,
    .payroll-summary-card--gross:hover { background: linear-gradient( 180deg, rgb(255 193 7 / 16%) 0%, var(--mud-palette-surface) 64% ) !important; border-top: solid 2px rgb(255 193 7 / 100%); }

.card-custom-style-002,
.payroll-summary-card--tax { background: linear-gradient( 180deg, rgb(220 53 69 / 4%) 0%, var(--mud-palette-surface) 80% ) !important; border: solid 1px rgb(220 53 69 / 4%); border-top: solid 2px rgb(220 53 69 / 80%); }

    .card-custom-style-002:hover,
    .payroll-summary-card--tax:hover { background: linear-gradient( 180deg, rgb(220 53 69 / 16%) 0%, var(--mud-palette-surface) 64% ) !important; border-top: solid 2px rgb(220 53 69 / 100%); }

.card-custom-style-003 { background: linear-gradient( 180deg, rgb(32 201 151 / 4%) 0%, var(--mud-palette-surface) 80% ) !important; border: solid 1px rgb(32 201 151 / 4%); border-top: solid 2px rgb(32 201 151 / 80%); }

    .card-custom-style-003:hover { background: linear-gradient( 180deg, rgb(32 201 151 / 16%) 0%, var(--mud-palette-surface) 64% ) !important; border-top: solid 2px rgb(32 201 151 / 100%); }

.card-custom-style-004,
.payroll-summary-card--fund { background: linear-gradient( 180deg, rgb(13 202 240 / 4%) 0%, var(--mud-palette-surface) 80% ) !important; border: solid 1px rgb(13 202 240 / 4%); border-top: solid 2px rgb(13 202 240 / 80%); }

    .card-custom-style-004:hover,
    .payroll-summary-card--fund:hover { background: linear-gradient( 180deg, rgb(13 202 240 / 16%) 0%, var(--mud-palette-surface) 64% ) !important; border-top: solid 2px rgb(13 202 240 / 100%); }

.card-custom-style-005,
.payroll-summary-card--sgk { background: linear-gradient( 180deg, rgb(111 66 193 / 4%) 0%, var(--mud-palette-surface) 80% ) !important; border: solid 1px rgb(111 66 193 / 4%); border-top: solid 2px rgb(111 66 193 / 80%); }

    .card-custom-style-005:hover,
    .payroll-summary-card--sgk:hover { background: linear-gradient( 180deg, rgb(111 66 193 / 16%) 0%, var(--mud-palette-surface) 64% ) !important; border-top: solid 2px rgb(111 66 193 / 100%); }

/* ============================== SECTION 14: Payroll Summary Cards — END ============================== */


/* ==========================================================================
   SECTION 15: Dividers — START
   Centered divider text with horizontal separator lines.
   ========================================================================== */

.divider { display: block; text-align: center; margin: 2rem 0 1rem; overflow: hidden; white-space: nowrap; }

    .divider .divider-text { position: relative; display: inline-block; text-transform: uppercase; font-size: 0.8125rem; padding: 0rem 1rem; }

        .divider .divider-text:before { right: 100%; }

        .divider .divider-text:before,
        .divider .divider-text:after { content: ""; position: absolute; top: 50%; width: 100vw; border-top: 1px solid var(--bs-border-color); }

        .divider .divider-text:after { left: 100%; }

/* ============================== SECTION 15: Dividers — END ============================== */


/* ==========================================================================
   SECTION 16: Animation Trigger Classes — START
   Classes that apply transitions or animations to visible UI elements.
   ========================================================================== */

.isItem { opacity: 0; transition: opacity 400ms ease-in-out; }

    .isItem.show { opacity: 1; }

.fadeIn { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; animation: fadeIn 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }

.flashit { -webkit-animation: flash 1s cubic-bezier(0.4, 0, 0.2, 1) 0ms infinite; animation: flash 1s cubic-bezier(0.4, 0, 0.2, 1) 0ms infinite; }

.start-calc-button:hover .mud-button-icon-end { animation: gear-spin-hold 2.4s ease-in-out infinite; transform-origin: center; }

.start-calc-button.has-errors .mud-button-icon-start { animation: error-icon-pulse 1s ease-in-out infinite; transform-origin: center; }

/* ============================== SECTION 16: Animation Trigger Classes — END ============================== */


/* ==========================================================================
   SECTION 17: Keyframes — START
   Animation timelines used by the trigger classes above.
   ========================================================================== */

@keyframes fadeIn {
    0% { transform: translateY(8%); opacity: 0; }

    100% { transform: translateY(0%); opacity: 1; }
}

@-webkit-keyframes flash {
    0% { opacity: 1; }

    50% { opacity: 0.1; }

    75% { opacity: 100%; }

    100% { opacity: 1; }
}

@keyframes flash {
    0% { opacity: 1; }

    50% { opacity: 0.1; }

    75% { opacity: 100%; }

    100% { opacity: 1; }
}

@keyframes gear-spin-hold {

    0% { transform: rotate(0deg); }

    30% { transform: rotate(360deg); }

    60% { transform: rotate(720deg); }

    100% { transform: rotate(720deg); }
}

@keyframes error-icon-pulse {
    0% { transform: scale(1); opacity: 0.8; }

    50% { transform: scale(1.18); opacity: 1; }

    100% { transform: scale(1); opacity: 0.8; }
}

/* ============================== SECTION 17: Keyframes — END ============================== */


/* ==========================================================================
   SECTION 18: Responsive & Accessibility Media Queries — START
   Screen-size adjustments and reduced-motion accessibility overrides. Kept at the end so responsive rules can override base styles cleanly.
   ========================================================================== */

@media screen and (min-width: 958px) {
    .mud-appbar .mud-toolbar-appbar { margin: 0 calc(2rem + -1px); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border-top-right-radius: 0; border-top-left-radius: 0; padding-inline: 12px; }
}

@media screen and (max-width: 958px) {
    .mud-swipearea.mud-carousel-swipe { min-height: 350px; }
}

@media (max-width: 600px) {
    .select-wrapper { width: 100%; }

    .responsive-select { width: 100%; }
    .login-card { width: 100%; padding: 1rem; }

    .dg-custom-header-01,
    .dg-custom-cell-01 { width: auto; }
}

@media (max-width: 1200px) {
    .payroll-summary-card { flex-basis: calc(33.333% - 16px); }
}

@media (max-width: 768px) {
    .payroll-summary-card { flex-basis: calc(50% - 16px); }
}

@media (max-width: 576px) {
    .payroll-summary-card { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .start-calc-button.has-errors .mud-button-icon-start { animation: none; }
}

/* ============================== SECTION 18: Responsive & Accessibility Media Queries — END ============================== */