/*
 * Tema korporat khusus untuk modul Urus Gaji.
 * Semua pemilih dikurung dalam .payroll-corporate-root supaya paparan Profil
 * dan modul-modul lain tidak menerima perubahan gaya ini.
 */

.payroll-corporate-root {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    box-sizing: border-box;
    color: #303a43;
    font-family: Arial, Helvetica, sans-serif;
}

.payroll-corporate-root > .col-md-12 {
    width: 100%;
    padding-right: 3px !important;
    padding-left: 3px !important;
}

/* Kepala halaman */
.payroll-corporate-root > .col-md-12:first-child > .row:first-child,
.payroll-corporate-root > .payroll-page-heading {
    min-height: 58px;
    margin: 0 0 10px !important;
    padding: 9px 13px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #d4dbe0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06);
}

.payroll-corporate-root > .col-md-12:first-child > .row:first-child::before,
.payroll-corporate-root > .payroll-page-heading::before {
    content: "";
    height: 3px;
    position: absolute;
    inset: -1px -1px auto;
    border-radius: 10px 10px 0 0;
    background: #a7193f;
}

.payroll-corporate-root > .col-md-12:first-child > .row:first-child > h4,
.payroll-corporate-root > .payroll-page-heading > h4 {
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    color: #2f3942 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.payroll-corporate-root > .col-md-12:first-child > .row:first-child > h4 > span,
.payroll-corporate-root > .payroll-page-heading > h4 > span {
    width: 36px;
    height: 36px;
    margin: 0 8px 0 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4cbd2;
    border-radius: 9px;
    background: #fbf0f3;
    color: #a7193f !important;
    font-size: 23px !important;
}

.payroll-corporate-root > .col-md-12:first-child > div[style*="border-bottom"],
.payroll-corporate-root > .payroll-page-divider {
    display: none !important;
}

.payroll-corporate-root .pull-right > a > button.payroll-home-icon,
.payroll-corporate-root .payroll-home-button {
    min-height: 32px;
    padding: 6px 12px !important;
    border: 1px solid #8e1535 !important;
    border-radius: 5px !important;
    background: #a7193f !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none !important;
}

.payroll-corporate-root .pull-right > a > button.payroll-home-icon {
    width: 34px !important;
    min-width: 34px !important;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

.payroll-corporate-root .payroll-home-icon > .fa-home {
    margin: 0 !important;
    line-height: 1;
}

.payroll-corporate-root .payroll-title-context {
    margin-left: 8px;
    padding: 4px 8px;
    display: inline-block;
    border: 1px solid #e4cbd2;
    border-radius: 12px;
    background: #fbf0f3;
    color: #a7193f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.profile-corporate-root.payroll-profile-context .payroll-title-context {
    margin-left: 8px;
    padding: 4px 8px;
    display: inline-block;
    border: 1px solid #e4cbd2;
    border-radius: 12px;
    background: #fbf0f3;
    color: #a7193f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* Kad dan panel */
.payroll-corporate-root .panel {
    margin-bottom: 12px !important;
    overflow: hidden;
    border: 1px solid #d5dce1 !important;
    border-radius: 8px !important;
    background: #fff;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

.payroll-corporate-root .panel > .panel-heading,
.payroll-corporate-root .panel > .panel-heading.bg-gradient-dark-blue-light {
    min-height: 42px;
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #d9dfe3 !important;
    background: #f5f6f7 !important;
    color: #303a43 !important;
    box-shadow: inset 3px 0 0 #a7193f;
}

.payroll-corporate-root .panel > .panel-heading .panel-title {
    color: #303a43 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px;
    text-shadow: none !important;
}

.payroll-corporate-root .panel > .panel-body {
    padding: 14px !important;
    background: #fff !important;
    color: #303a43 !important;
}

.payroll-corporate-root > .col-md-12 > .panel-body {
    margin-bottom: 10px;
    padding: 10px 14px !important;
    border: 1px solid #d5dce1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .05);
}

/* Borang */
.payroll-corporate-root .form-group {
    margin-bottom: 12px;
}

.payroll-corporate-root label,
.payroll-corporate-root .control-label {
    color: #45515b;
    font-size: 11px;
    font-weight: 700;
}

.payroll-corporate-root .form-control,
.payroll-corporate-root .bootstrap-select > .btn {
    min-height: 34px;
    border: 1px solid #cbd3d9 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #35404a !important;
    font-size: 12px;
    box-shadow: none !important;
}

.payroll-corporate-root .form-control:focus,
.payroll-corporate-root .bootstrap-select.open > .btn {
    border-color: #b65d75 !important;
    box-shadow: 0 0 0 2px rgba(167, 25, 63, .10) !important;
}

.payroll-corporate-root h5 .fa-search,
.payroll-corporate-root h5 .ion-search {
    color: #a7193f !important;
}

/* Butang */
.payroll-corporate-root .btn {
    border-radius: 5px !important;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none !important;
}

.payroll-corporate-root .btn-danger {
    border-color: #8e1535 !important;
    background: #a7193f !important;
}

.payroll-corporate-root .btn-primary,
.payroll-corporate-root .btn-info {
    border-color: #41515f !important;
    background: #526574 !important;
    color: #fff !important;
}

.payroll-corporate-root .btn-success {
    border-color: #2f7358 !important;
    background: #3b8b6b !important;
}

.payroll-corporate-root .btn-warning {
    border-color: #bd7a18 !important;
    background: #d58c22 !important;
    color: #fff !important;
}

.payroll-corporate-root .btn:hover,
.payroll-corporate-root .btn:focus {
    filter: brightness(.94);
}

/* Jadual */
.payroll-corporate-root .table-responsive {
    margin: 5px 0 0;
    overflow-x: auto;
    border: 1px solid #d7dde1;
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
}

.payroll-corporate-root .table {
    width: 100%;
    margin-bottom: 0 !important;
    background: #fff;
    color: #333d46;
    font-size: 11px;
}

.payroll-corporate-root .table-urusgaji {
    table-layout: fixed;
}

.payroll-corporate-root .table-urusgaji th,
.payroll-corporate-root .table-urusgaji td {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.payroll-corporate-root .table > thead > tr > th,
.payroll-corporate-root .table > thead > tr.active > th {
    padding: 9px 8px !important;
    border: 0 !important;
    border-right: 1px solid #d7dde1 !important;
    border-bottom: 2px solid #a7193f !important;
    background: #eceff1 !important;
    color: #303a43 !important;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
}

.payroll-corporate-root .table > tbody > tr > td {
    padding: 8px !important;
    border-color: #e2e6e9 !important;
    vertical-align: middle;
}

.payroll-corporate-root .table-striped > tbody > tr:nth-of-type(odd),
.payroll-corporate-root .table > tbody > tr:nth-of-type(even) {
    background: #fafbfb;
}

.payroll-corporate-root .table-hover > tbody > tr:hover > td {
    background: #fff6f8 !important;
}

.payroll-corporate-root .label-success {
    background: #3b8b6b !important;
}

.payroll-corporate-root .pagination > li > a,
.payroll-corporate-root .pagination > li > span {
    border-color: #d7dde1 !important;
    color: #56616b !important;
    font-size: 10.5px;
}

.payroll-corporate-root .pagination > .active > a,
.payroll-corporate-root .pagination > .active > span {
    border-color: #a7193f !important;
    background: #a7193f !important;
    color: #fff !important;
}

.payroll-corporate-root .btn-edit-urusgaji {
    padding: 5px 9px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

/* Tab */
.payroll-corporate-root .nav-tabs {
    padding: 5px 6px 0;
    border: 1px solid #d7dde1 !important;
    border-bottom-color: #c8d0d6 !important;
    border-radius: 6px 6px 0 0;
    background: #f2f4f5 !important;
}

.payroll-corporate-root .nav-tabs > li > a {
    margin-right: 3px;
    border: 0 !important;
    border-radius: 5px 5px 0 0 !important;
    color: #56616b !important;
    font-size: 11px;
}

.payroll-corporate-root .nav-tabs > li.active > a,
.payroll-corporate-root .nav-tabs > li.active > a:hover,
.payroll-corporate-root .nav-tabs > li.active > a:focus {
    background: #fff !important;
    color: #a7193f !important;
    box-shadow: inset 0 3px 0 #a7193f;
}

.payroll-corporate-root .tab-content {
    padding: 12px !important;
    border: 1px solid #d7dde1;
    border-top: 0;
    background: #fff !important;
}

/* Menu staf di kiri */
.payroll-corporate-root .vertical-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.payroll-corporate-root .vertical-box-column.width-250 {
    width: 250px !important;
    min-width: 250px;
    overflow: hidden;
    border: 1px solid #d5dce1;
    border-radius: 8px;
    background: #f7f8f9 !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06);
}

.payroll-corporate-root .vertical-box-column.width-250 > .wrapper {
    padding: 9px !important;
}

.payroll-corporate-root .vertical-box-column.width-250 .panel {
    margin-bottom: 8px !important;
    border-color: #e1c8cf !important;
}

.payroll-corporate-root .vertical-box-column.width-250 .panel-body {
    min-height: 78px;
    padding: 9px !important;
    background: #fbf0f3 !important;
    color: #303a43 !important;
    font-size: 11px;
    font-weight: 700 !important;
}

.payroll-corporate-root .vertical-box-column.width-250 .panel-body img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 1px #d6aab6;
}

.payroll-corporate-root .vertical-box-column.width-250 h5 {
    margin: 10px 0 5px !important;
    color: #5a6670;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .25px;
    line-height: 1.35;
    text-transform: uppercase;
}

.payroll-corporate-root .vertical-box-column.width-250 .nav > li > a,
.payroll-corporate-root .vertical-box-column.width-250 h5 > a {
    margin-bottom: 3px;
    padding: 8px 9px !important;
    display: block;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #46525c !important;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
}

.payroll-corporate-root .vertical-box-column.width-250 .nav > li > a:hover,
.payroll-corporate-root .vertical-box-column.width-250 h5 > a:hover {
    border-color: #ead3d9;
    background: #fff6f8;
    color: #a7193f !important;
}

.payroll-corporate-root .vertical-box-column.width-250 .nav > li.active > a,
.payroll-corporate-root .vertical-box-column.width-250 h5 > a.menuurusgaji {
    border-color: #a7193f;
    background: #a7193f !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(167, 25, 63, .16);
}

.payroll-corporate-root .vertical-box > .vertical-box-column.bg-white {
    min-width: 0;
    flex: 1 1 auto;
    border-radius: 8px;
}

/* Struktur menu yang sama seperti Profil, khusus untuk halaman Urus Gaji. */
.payroll-corporate-root .payroll-profile-sidebar-column {
    padding: 0 !important;
    background: transparent !important;
}

.payroll-corporate-root .payroll-profile-sidebar {
    width: 100%;
    overflow: hidden;
    border: 1px solid #d5dce1;
    border-radius: 7px;
    background: #fff;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-sidebar-header {
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid #dce2e6;
    background: #f3f5f6;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-passport-photo {
    width: 82px;
    height: 98px;
    overflow: hidden;
    border: 1px solid #c7cfd5;
    border-radius: 5px;
    background: #eef1f3;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-passport-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-staff-info {
    width: 100%;
    text-align: center;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-staff-name {
    color: #303a43;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-staff-number {
    margin-top: 2px;
    color: #a7193f;
    font-size: 10px;
    font-weight: 700;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-staff-status {
    margin-top: 5px;
    padding: 3px 7px;
    display: inline-block;
    border-radius: 10px;
    background: #f8d7da;
    color: #721c24;
    font-size: 9px;
    font-weight: 700;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-tab-list {
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.payroll-corporate-root .payroll-profile-sidebar .payroll-menu-group {
    overflow: hidden;
    border: 1px solid #e0e5e8;
    border-radius: 6px;
    background: #fff;
}

.payroll-corporate-root .payroll-profile-sidebar .payroll-menu-group-title {
    min-height: 36px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e6eaed;
    background: #f3f5f6;
    color: #38444e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.payroll-corporate-root .payroll-profile-sidebar .payroll-menu-group.is-active .payroll-menu-group-title {
    background: #fbf0f3;
    color: #a7193f;
}

.payroll-corporate-root .payroll-profile-sidebar .payroll-menu-group-items {
    padding: 3px;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-tab-item {
    min-height: 38px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #59656f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.payroll-corporate-root .payroll-profile-sidebar .payroll-menu-subitem {
    min-height: 34px;
    padding: 7px 8px 7px 11px;
    border-radius: 4px;
    font-size: 10.5px;
}

.payroll-corporate-root .payroll-profile-sidebar .payroll-menu-standalone {
    min-height: 36px;
    border-color: transparent;
    background: transparent;
}

/* Menu ini turut digunakan dalam fail Profil apabila dibuka dari Urus Gaji. */
.payroll-profile-sidebar .prof-tab-list {
    gap: 0 !important;
}

.payroll-profile-sidebar .payroll-menu-group {
    margin: 0 !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.payroll-profile-sidebar .payroll-menu-group-items {
    padding: 0 !important;
}

.payroll-profile-sidebar .payroll-menu-standalone:not(.menuprofail) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-tab-item:hover {
    border-color: #ead3d9;
    background: #fff6f8;
    color: #a7193f;
    text-decoration: none;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-tab-item.menuprofail {
    border-color: #a7193f;
    background: #a7193f;
    color: #fff;
}

.payroll-corporate-root .payroll-profile-sidebar .prof-tab-icon {
    width: 17px;
    flex: 0 0 17px;
    text-align: center;
}

.payroll-corporate-root .payroll-profile-top-tabs {
    width: 100%;
    margin: 0 0 9px;
    padding: 0;
    display: flex;
    overflow-x: auto;
    border: 1px solid #d5dce1;
    border-radius: 6px;
    background: #fff;
}

.payroll-corporate-root .payroll-profile-top-tabs .prof-top-tab1 {
    min-height: 41px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 0;
    border-right: 1px solid #e2e6e9;
    background: #fff;
    color: #59646e;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.payroll-corporate-root .payroll-profile-top-tabs .prof-top-tab1:hover {
    background: #f7f8f9;
    color: #a7193f;
    text-decoration: none;
}

.payroll-corporate-root .payroll-profile-top-tabs .prof-top-tab1.active {
    background: #f8eef1;
    color: #a7193f;
    box-shadow: inset 0 -3px 0 #a7193f;
}

/* Halaman carian utama */
.payroll-corporate-root .payroll-search-card .panel-body {
    padding: 18px 20px 8px !important;
}

.payroll-corporate-root .payroll-search-title {
    margin: 0 0 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e7ea;
    color: #303a43;
    font-size: 13px;
    font-weight: 700;
}

.payroll-corporate-root .payroll-search-title i {
    width: 28px;
    height: 28px;
    margin-right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fbf0f3;
    color: #a7193f !important;
}

.payroll-corporate-root .payroll-search-card .form-group {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
}

/* Halaman utama carian: latar putih dan gaya kad seperti Profil staf. */
.payroll-corporate-root#divUrusGajiUtama {
    min-height: calc(100vh - 8px);
    padding: 8px 20px 24px !important;
    background: #fff !important;
}

.payroll-corporate-root#divUrusGajiUtama > .col-md-12 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-page-heading {
    margin-bottom: 14px !important;
    border-left: 4px solid #a7193f !important;
    border-color: #d6dde2;
    border-left-color: #a7193f !important;
    border-radius: 10px;
    background:
        linear-gradient(120deg, #f1f4f5 0%, #fff8fa 54%, #fff 100%),
        linear-gradient(130deg, rgba(167, 25, 63, .035), transparent 38%),
        repeating-linear-gradient(135deg, transparent 0 24px, rgba(167, 25, 63, .018) 24px 25px),
        #f6f8f8;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06);
}

.payroll-corporate-root#divUrusGajiUtama .payroll-heading-copy {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-heading-copy h4 {
    margin: 0 !important;
    display: flex;
    align-items: center;
    color: #303a43 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-heading-copy h4 > span {
    width: 36px;
    height: 36px;
    margin: 0 9px 0 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4cbd2;
    border-radius: 9px;
    background: #fbf0f3;
    color: #a7193f !important;
    font-size: 22px !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-heading-subtitle {
    margin: 0 0 0 45px;
    color: #7a8791;
    font-size: 11px;
    line-height: 1.3;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card {
    margin-bottom: 14px !important;
    border-left: 4px solid #a7193f !important;
    border-color: #d5dce1 !important;
    border-left-color: #a7193f !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card > .panel-body {
    padding: 18px 20px 14px !important;
    background: linear-gradient(180deg, #fff 0%, #fff9fb 100%) !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card > .panel-heading,
.payroll-corporate-root#divUrusGajiUtama .payroll-result-panel > .panel-heading {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, #edf1f2 0%, #fff7f9 72%, #f7f8f8 100%),
        linear-gradient(110deg, rgba(167, 25, 63, .035), transparent 50%),
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(167, 25, 63, .018) 22px 23px),
        #edf1f2 !important;
    color: #303a43 !important;
    box-shadow: none !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card > .panel-heading::after,
.payroll-corporate-root#divUrusGajiUtama .payroll-result-panel > .panel-heading::after {
    width: 34%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .35;
    background: repeating-linear-gradient(145deg, transparent 0 18px, rgba(167, 25, 63, .06) 18px 19px);
    content: "";
    pointer-events: none;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card > .panel-heading .panel-title,
.payroll-corporate-root#divUrusGajiUtama .payroll-result-panel > .panel-heading .panel-title {
    position: relative;
    z-index: 1;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card .form-group {
    max-width: 700px;
    margin-bottom: 12px;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-search-card .form-control {
    background: #fff !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-main-search-button {
    min-height: 34px;
    padding: 7px 14px !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-main-search-button .fa {
    margin-right: 4px;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-result-panel {
    border-left: 4px solid #a7193f !important;
    border-color: #d5dce1 !important;
    border-left-color: #a7193f !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

.payroll-corporate-root#divUrusGajiUtama .payroll-result-panel > .panel-body {
    background: linear-gradient(180deg, #fff 0%, #fff9fb 100%) !important;
}

.payroll-corporate-root .payroll-empty-state {
    padding: 28px 15px !important;
    color: #77838e;
    text-align: center;
}

@media (max-width: 991px) {
    .payroll-corporate-root {
        padding: 0 !important;
    }

    .payroll-corporate-root .vertical-box {
        display: block;
    }

    .payroll-corporate-root .vertical-box-column.width-250 {
        width: 100% !important;
        min-width: 0;
        margin-bottom: 10px;
    }

    .payroll-corporate-root .vertical-box > .vertical-box-column.bg-white {
        width: 100%;
        display: block;
    }
}

/* Paparan Elaun dan Sejarah Elaun */
.payroll-corporate-root .payroll-allowance-panel > .panel-body.payroll-allowance-body {
    padding: 14px !important;
}

.payroll-corporate-root .payroll-allowance-summary {
    width: 100%;
    margin: 0 0 14px;
    padding: 0 !important;
    float: none;
    overflow: hidden;
    border: 1px solid #dbe1e5;
    border-radius: 7px;
    background: #fff;
}

.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row {
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 22% 30% 18% 30%;
    border-bottom: 1px solid #e3e7ea;
}

.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row::before,
.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row::after {
    display: none !important;
    content: none !important;
}

.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row:last-child {
    grid-template-columns: 22% 78%;
    border-bottom: 0;
}

.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row > label,
.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row > div {
    width: auto !important;
    min-height: 44px;
    padding: 10px 12px !important;
    float: none !important;
    display: flex;
    align-items: center;
    line-height: 1.35;
}

.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row > label {
    margin: 0;
    border-right: 1px solid #dfe4e7;
    background: #f3f5f6;
    color: #4b5760;
}

.payroll-corporate-root .payroll-allowance-summary .payroll-summary-row > div {
    border-right: 1px solid #e4e8eb;
    color: #2f3942;
    font-size: 12px;
    font-weight: 600;
}

.payroll-corporate-root .payroll-allowance-workspace {
    width: 100%;
    padding: 0 !important;
    float: none;
    clear: both;
    overflow: hidden;
    border: 1px solid #d6dde2;
    border-radius: 8px;
    background: #fff;
}

.payroll-corporate-root .payroll-allowance-tabs {
    min-height: 48px;
    margin: 0 !important;
    padding: 7px 10px 0 !important;
    display: flex;
    gap: 5px;
    border: 0 !important;
    border-bottom: 1px solid #d8dee2 !important;
    background: #f4f6f7 !important;
}

.payroll-corporate-root .payroll-allowance-tabs > li {
    margin: 0 !important;
    float: none !important;
}

.payroll-corporate-root .payroll-allowance-tabs > li > a {
    min-height: 40px;
    margin: 0 !important;
    padding: 11px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    background: transparent !important;
    color: #59656f !important;
    font-size: 11.5px;
}

.payroll-corporate-root .payroll-allowance-tabs > li.active > a,
.payroll-corporate-root .payroll-allowance-tabs > li.active > a:hover,
.payroll-corporate-root .payroll-allowance-tabs > li.active > a:focus {
    border-color: #d8dee2 #d8dee2 #fff !important;
    background: #fff !important;
    color: #a7193f !important;
    box-shadow: inset 0 3px 0 #a7193f;
}

.payroll-corporate-root .payroll-allowance-tabs > li:not(.active) > a:hover {
    background: #fff7f9 !important;
    color: #a7193f !important;
}

.payroll-corporate-root .payroll-allowance-tab-content {
    min-height: 160px;
    padding: 14px !important;
    border: 0 !important;
    background: #fff !important;
}

.payroll-corporate-root .payroll-allowance-pane::before,
.payroll-corporate-root .payroll-allowance-pane::after,
.payroll-corporate-root .payroll-mode-control::after {
    display: table;
    clear: both;
    content: "";
}

.payroll-corporate-root .payroll-allowance-mode {
    width: 100%;
    margin: 0 0 12px;
    padding: 0 !important;
    float: none;
    border: 1px solid #e0e5e8;
    border-radius: 7px;
    background: #f8f9fa;
}

.payroll-corporate-root .payroll-mode-control {
    margin: 0 !important;
    padding: 9px 12px;
    display: flex;
    align-items: center;
}

.payroll-corporate-root .payroll-mode-control > label {
    width: auto !important;
    min-width: 110px;
    padding: 0 !important;
    float: none !important;
}

.payroll-corporate-root .payroll-mode-options {
    width: auto !important;
    padding: 0 !important;
    float: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payroll-corporate-root .payroll-mode-options .radio-inline {
    min-width: 92px;
    margin: 0 !important;
    padding: 7px 12px 7px 31px !important;
    border: 1px solid #d6dde2;
    border-radius: 18px;
    background: #fff;
    color: #4a5660;
    cursor: pointer;
}

.payroll-corporate-root .payroll-mode-options .radio-inline:has(input:checked) {
    border-color: #c98396;
    background: #fff4f6;
    color: #a7193f;
}

.payroll-corporate-root .payroll-allowance-actions {
    width: 100%;
    margin: 0 0 10px !important;
    padding: 0 !important;
    float: none !important;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.payroll-corporate-root .payroll-allowance-actions .btn {
    min-height: 34px;
    padding: 7px 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.payroll-corporate-root .payroll-print-button {
    border: 1px solid #c9d1d7 !important;
    background: #fff !important;
    color: #46535d !important;
}

.payroll-corporate-root .payroll-print-button:hover,
.payroll-corporate-root .payroll-print-button:focus {
    border-color: #a7193f !important;
    background: #fff7f9 !important;
    color: #a7193f !important;
}

.payroll-corporate-root .payroll-allowance-list {
    width: 100%;
    padding: 0 !important;
    float: none;
    clear: both;
}

.payroll-corporate-root .payroll-allowance-table-wrap {
    margin-top: 0;
    overflow-x: hidden;
    border-color: #d6dde2;
    border-radius: 7px;
}

.payroll-corporate-root .payroll-allowance-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}

.payroll-corporate-root .payroll-history-table {
    min-width: 0 !important;
}

.payroll-corporate-root .payroll-allowance-table > thead > tr > th,
.payroll-corporate-root .payroll-allowance-table > tbody > tr > td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.payroll-corporate-root .payroll-allowance-table > thead > tr > th {
    padding: 8px 6px !important;
    font-size: 10px;
}

.payroll-corporate-root .payroll-allowance-table > tbody > tr > td {
    padding: 7px 6px !important;
    font-size: 10.5px;
}

.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(1) { width: 4%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(2) { width: 7%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(3) { width: 17%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(4) { width: 8%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(5) { width: 9%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(6) { width: 10%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(7) { width: 10%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(8) { width: 10%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(9) { width: 10%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(10) { width: 9%; }
.payroll-corporate-root .payroll-allowance-table > thead > tr > th:nth-child(11) { width: 6%; }

.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(1) { width: 4%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(2) { width: 7%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(3) { width: 7%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(4) { width: 17%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(5) { width: 8%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(6) { width: 9%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(7) { width: 9%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(8) { width: 9%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(9) { width: 10%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(10) { width: 10%; }
.payroll-corporate-root .payroll-history-table > thead > tr > th:nth-child(11) { width: 10%; }

/* Lebar jadual Potongan: kekal muat dalam ruang tanpa scroll mendatar. */
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(1) { width: 4%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(2) { width: 12%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(3) { width: 12%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(4) { width: 7%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(5) { width: 8%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(6) { width: 8%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(7) { width: 8%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(8) { width: 10%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(9) { width: 6%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(10) { width: 8%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(11) { width: 9%; }
.payroll-corporate-root .payroll-deduction-table > thead > tr > th:nth-child(12) { width: 8%; }

.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(1) { width: 4%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(2) { width: 7%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(3) { width: 18%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(4) { width: 12%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(5) { width: 8%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(6) { width: 9%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(7) { width: 9%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(8) { width: 9%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(9) { width: 10%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(10) { width: 7%; }
.payroll-corporate-root .payroll-deduction-history-table > thead > tr > th:nth-child(11) { width: 7%; }

/* Pengecualian PCB */
.payroll-corporate-root .payroll-pcb-summary .payroll-summary-row:last-child {
    grid-template-columns: 22% 30% 18% 30%;
}

.payroll-corporate-root .payroll-pcb-workspace {
    padding: 14px !important;
    overflow: visible;
}

.payroll-corporate-root .payroll-pcb-panel,
.payroll-corporate-root .payroll-pcb-list,
.payroll-corporate-root .payroll-pcb-table-wrap {
    overflow: visible !important;
}

.payroll-corporate-root .payroll-pcb-actions {
    margin-bottom: 12px !important;
}

.payroll-corporate-root .payroll-pcb-list > .row,
.payroll-corporate-root .payroll-pcb-list > [class*="pagination"],
.payroll-corporate-root .payroll-pcb-list > [class*="paging"] {
    margin-bottom: 10px;
}

.payroll-corporate-root .payroll-pcb-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 10px;
}

.payroll-corporate-root .payroll-pcb-table > thead > tr > th:nth-child(1) { width: 5% !important; }
.payroll-corporate-root .payroll-pcb-table > thead > tr > th:nth-child(2) { width: 25% !important; }
.payroll-corporate-root .payroll-pcb-table > thead > tr > th:nth-child(3) { width: 25% !important; }
.payroll-corporate-root .payroll-pcb-table > thead > tr > th:nth-child(4) { width: 35% !important; }
.payroll-corporate-root .payroll-pcb-table > thead > tr > th:nth-child(5) { width: 10% !important; }

.payroll-corporate-root .payroll-pcb-table > thead > tr > th {
    font-size: 9.5px !important;
}

.payroll-corporate-root .payroll-pcb-table > thead > tr > th:first-child {
    white-space: nowrap !important;
    word-break: normal !important;
}

.payroll-corporate-root .payroll-pcb-list > :not(.payroll-pcb-table-wrap) .btn-primary,
.payroll-corporate-root .payroll-pcb-list > :not(.payroll-pcb-table-wrap) .btn-info {
    border-color: #8e1535 !important;
    background: #a7193f !important;
    color: #fff !important;
}

.payroll-corporate-root .payroll-pcb-table > tbody > tr > td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.payroll-corporate-root .payroll-pcb-editor-row > td {
    padding: 9px 6px !important;
    background: #fff9fa !important;
    vertical-align: top !important;
}

.payroll-corporate-root .payroll-pcb-editor-row .form-control,
.payroll-corporate-root .payroll-pcb-editor-row .bootstrap-select,
.payroll-corporate-root .payroll-pcb-editor-row .selectpicker {
    width: 100% !important;
    min-width: 0 !important;
}

.payroll-corporate-root .payroll-pcb-editor-row .bootstrap-select.dropup .dropdown-menu,
.payroll-corporate-root .payroll-pcb-editor-row .dropup > .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}

.payroll-corporate-root .payroll-pcb-editor-row .bootstrap-select .dropdown-menu {
    z-index: 1060 !important;
}

.payroll-corporate-root .payroll-pcb-editor-row textarea.form-control {
    min-height: 58px;
    resize: vertical;
}

@media (max-width: 900px) {
    .payroll-corporate-root .payroll-pcb-summary .payroll-summary-row:last-child {
        grid-template-columns: 38% 62%;
    }
}

.payroll-corporate-root .payroll-allowance-table > tbody > tr:hover > td {
    background: #fff8fa !important;
}

.payroll-corporate-root .payroll-table-actions {
    min-width: 82px;
    white-space: nowrap;
    text-align: center;
}

.payroll-corporate-root .payroll-table-actions .btn {
    width: 30px;
    height: 30px;
    margin: 1px;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
}

.payroll-corporate-root .payroll-empty-state {
    height: 90px;
    color: #7a858e;
    text-align: center !important;
    font-style: normal;
}

.payroll-corporate-root .payroll-empty-state .fa {
    margin-right: 5px;
    color: #aab3ba;
}

.payroll-corporate-root .payroll-allowance-note {
    margin-top: 9px;
    padding: 8px 10px;
    display: block;
    border: 1px solid #e3e7ea;
    border-radius: 5px;
    background: #f8f9fa;
    color: #65717a;
    font-size: 10.5px;
}

.payroll-corporate-root .payroll-history-search {
    width: 100%;
    margin: 0 0 12px;
    padding: 13px !important;
    float: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    border: 1px solid #dce2e6;
    border-radius: 7px;
    background: #f8f9fa;
}

.payroll-corporate-root .payroll-history-search > .row {
    margin: 0 0 2px !important;
    padding: 0 0 10px;
    grid-column: 1 / -1;
    border-bottom: 1px solid #e1e6e9;
}

.payroll-corporate-root .payroll-section-title {
    margin: 0 0 2px !important;
    color: #36414a;
    font-size: 12px;
    font-weight: 700;
}

.payroll-corporate-root .payroll-section-title .fa {
    color: #a7193f !important;
}

.payroll-corporate-root .payroll-history-search > .col-md-12,
.payroll-corporate-root .payroll-history-search > .col-md-12 > .col-md-8 {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}

.payroll-corporate-root .payroll-history-search > .col-md-12:not(.payroll-history-search-action) {
    padding: 10px 12px !important;
    border: 1px solid #e0e5e8;
    border-radius: 6px;
    background: #fff;
}

.payroll-corporate-root .payroll-history-search .form-group {
    margin: 0 !important;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.payroll-corporate-root .payroll-history-search .form-group::before,
.payroll-corporate-root .payroll-history-search .form-group::after {
    display: none !important;
    content: none !important;
}

.payroll-corporate-root .payroll-history-search .form-group > label,
.payroll-corporate-root .payroll-history-search .form-group > div {
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

.payroll-corporate-root .payroll-history-search .form-group > label {
    margin: 0;
    color: #4a5660;
    font-size: 10.5px;
    text-align: left;
}

.payroll-corporate-root .payroll-history-search .form-group > div {
    width: 100% !important;
}

.payroll-corporate-root .payroll-history-search .form-group .form-control,
.payroll-corporate-root .payroll-history-search .form-group .bootstrap-select,
.payroll-corporate-root .payroll-history-search .form-group .select2-container {
    width: 100% !important;
}

.payroll-corporate-root .payroll-history-search-action {
    grid-column: 1 / -1;
}

.payroll-corporate-root .payroll-history-search-action .form-group {
    padding-top: 2px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.payroll-corporate-root .payroll-history-search-action .form-group > label {
    display: none;
}

.payroll-corporate-root .payroll-history-search-action .form-group > div {
    width: auto !important;
}

.payroll-corporate-root .payroll-search-button {
    min-height: 34px;
    padding: 7px 13px !important;
}

.payroll-corporate-root .payroll-history-table > tbody > tr > td[colspan] {
    padding: 13px !important;
    background: #fbfcfc;
}

.payroll-corporate-root .payroll-history-table > tbody > tr > td[colspan] h6 {
    margin: 3px 0 10px !important;
    color: #39454e;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px;
}

.payroll-corporate-root .payroll-allowance-editor {
    margin: 2px 0 14px !important;
    padding: 0 !important;
    border-color: #d7dee2 !important;
    box-shadow: none !important;
}

.payroll-corporate-root .payroll-allowance-editor > .panel-heading {
    background: #f3f5f6 !important;
}

.payroll-corporate-root .payroll-allowance-editor > .panel-body {
    padding: 14px 14px 8px !important;
}

.payroll-corporate-root .payroll-allowance-form > .form-group {
    margin-right: 0;
    margin-left: 0;
    padding: 9px 4px;
    border-bottom: 1px solid #edf0f2;
}

.payroll-corporate-root .payroll-allowance-form > .form-group:last-child {
    border-bottom: 0;
}

.payroll-corporate-root .payroll-allowance-form > .form-group > label {
    padding-top: 8px;
}

.payroll-corporate-root .payroll-allowance-form .input-group-addon {
    border-color: #cbd3d9;
    background: #f3f5f6;
    color: #a7193f;
}

.payroll-corporate-root .payroll-form-actions {
    margin: 4px 0 0;
    padding: 11px 0 3px !important;
    float: none;
    clear: both;
    border-top: 1px solid #e2e7ea;
    text-align: right;
}

.payroll-corporate-root .payroll-form-actions .btn {
    min-width: 82px;
    min-height: 32px;
    margin-left: 4px;
    padding: 6px 12px !important;
}

@media (max-width: 900px) {
    .payroll-corporate-root .payroll-allowance-summary .payroll-summary-row,
    .payroll-corporate-root .payroll-allowance-summary .payroll-summary-row:last-child {
        grid-template-columns: 38% 62%;
    }

    .payroll-corporate-root .payroll-history-search {
        grid-template-columns: 1fr;
    }

    .payroll-corporate-root .payroll-history-search-action,
    .payroll-corporate-root .payroll-history-search > .row {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .payroll-corporate-root .payroll-allowance-tab-content {
        padding: 10px !important;
    }

    .payroll-corporate-root .payroll-allowance-tabs {
        padding: 6px !important;
    }

    .payroll-corporate-root .payroll-allowance-tabs > li {
        flex: 1 1 50%;
    }

    .payroll-corporate-root .payroll-allowance-tabs > li > a {
        padding: 10px 7px !important;
        text-align: center;
    }

    .payroll-corporate-root .payroll-mode-control {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .payroll-corporate-root .payroll-mode-options {
        width: 100% !important;
        flex-wrap: wrap;
    }

    .payroll-corporate-root .payroll-history-search .form-group {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* Keutamaan khusus diperlukan kerana paparan Perkhidmatan lama mempunyai
 * beberapa peraturan berasaskan ID dan !important di dalam fail view. */
#divProKerjaKhidmat.payroll-profile-context .profile-detail-heading {
    min-height: 62px !important;
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    border: 1px solid #d4dbe0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-detail-heading::before {
    width: 4px !important;
    height: auto !important;
    inset: -1px auto -1px -1px !important;
    border-radius: 9px 0 0 9px !important;
    background: #a7193f !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-detail-heading::after {
    display: none !important;
    content: none !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-detail-layout {
    gap: 12px !important;
    align-items: flex-start !important;
    background: transparent !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-detail-layout > .vertical-box-column.width-250 {
    width: 258px !important;
    min-width: 258px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    border: 1px solid #d5dce1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-detail-content,
#divProKerjaKhidmat.payroll-profile-context .profile-detail-content > .tab-content,
#divProKerjaKhidmat.payroll-profile-context .profile-detail-content > .tab-content > .col-md-12 {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    border: 0 !important;
    background: transparent !important;
}

@media (max-width: 991px) {
    #divProKerjaKhidmat.payroll-profile-context .profile-detail-layout {
        display: block !important;
    }

    #divProKerjaKhidmat.payroll-profile-context .profile-detail-layout > .vertical-box-column.width-250 {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 767px) {
    .payroll-corporate-root > .col-md-12:first-child > .row:first-child,
    .payroll-corporate-root > .payroll-page-heading {
        min-height: 52px;
        padding: 8px 10px !important;
    }

    .payroll-corporate-root .panel > .panel-body,
    .payroll-corporate-root .tab-content {
        padding: 10px !important;
    }

    .payroll-corporate-root .table {
        font-size: 10px;
    }
}

/*
 * Paparan Profil yang dibuka daripada Urus Gaji.
 * Pemilih ini hanya aktif apabila pembalut menerima .payroll-profile-context;
 * paparan Profil biasa kekal menggunakan temanya sendiri.
 */
.profile-corporate-root.payroll-profile-context {
    padding: 3px !important;
    background: #fff;
}

.profile-corporate-root.payroll-profile-context .profile-detail-heading {
    min-height: 62px !important;
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    border: 1px solid #d4dbe0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-heading::before {
    width: 4px !important;
    height: auto !important;
    inset: -1px auto -1px -1px !important;
    border-radius: 9px 0 0 9px !important;
    background: #a7193f !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-heading::after {
    display: none !important;
    content: none !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-heading .payroll-page-title {
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    color: #303a43 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-heading .payroll-page-title > span {
    width: 36px;
    height: 36px;
    margin: 0 9px 0 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4cbd2;
    border-radius: 8px;
    background: #fbf0f3;
    color: #a7193f !important;
    font-size: 21px !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-header-actions,
.profile-corporate-root.payroll-profile-context .profile-detail-heading > .pull-right {
    margin: 0 0 0 auto !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-layout {
    gap: 12px !important;
    align-items: flex-start !important;
    background: transparent !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-layout > .vertical-box-column.width-250,
.profile-corporate-root.payroll-profile-context .payroll-side-menu {
    width: 258px !important;
    min-width: 258px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    overflow: hidden;
    border: 1px solid #d5dce1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

.profile-corporate-root.payroll-profile-context .payroll-side-menu > .wrapper {
    padding: 10px !important;
    background: #fff !important;
}

.profile-corporate-root.payroll-profile-context .payroll-staff-card {
    margin: 0 0 10px !important;
    overflow: hidden;
    border: 1px solid #e1d0d5 !important;
    border-radius: 7px !important;
    background: #fbf6f7 !important;
    box-shadow: none !important;
}

.profile-corporate-root.payroll-profile-context .payroll-staff-card > .panel-body {
    min-height: 80px !important;
    padding: 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fbf6f7 !important;
    color: #303a43 !important;
}

.profile-corporate-root.payroll-profile-context .payroll-staff-photo {
    width: 62px !important;
    padding: 0 !important;
    flex: 0 0 62px;
    float: none !important;
}

.profile-corporate-root.payroll-profile-context .payroll-staff-photo img {
    width: 58px !important;
    height: 68px !important;
    object-fit: cover;
    border: 2px solid #fff !important;
    border-radius: 7px !important;
    background: #eceff1;
    box-shadow: 0 0 0 1px #c9aeb6;
}

.profile-corporate-root.payroll-profile-context .payroll-staff-info {
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    flex: 1 1 auto;
    float: none !important;
    color: #a7193f;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.profile-corporate-root.payroll-profile-context .payroll-staff-info strong {
    display: inline-block;
    margin-top: 3px;
    color: #303a43;
    font-size: 11.5px;
}

.profile-corporate-root.payroll-profile-context .payroll-side-menu h5 {
    margin: 11px 3px 5px !important;
    color: #64707a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.profile-corporate-root.payroll-profile-context .payroll-side-menu .nav > li > a,
.profile-corporate-root.payroll-profile-context .payroll-side-menu h5 > a {
    margin: 0 0 3px;
    padding: 8px 9px !important;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #54616b !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    text-transform: none;
}

.profile-corporate-root.payroll-profile-context .payroll-side-menu .nav > li.active > a,
.profile-corporate-root.payroll-profile-context .payroll-side-menu h5 > a.menuurusgaji {
    border-color: #a7193f !important;
    background: #a7193f !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(167, 25, 63, .14) !important;
}

.profile-corporate-root.payroll-profile-context .payroll-side-menu .nav > li:not(.active) > a:hover,
.profile-corporate-root.payroll-profile-context .payroll-side-menu h5 > a:not(.menuurusgaji):hover {
    border-color: #ead3d9 !important;
    background: #fff6f8 !important;
    color: #a7193f !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-content {
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    align-self: flex-start !important;
    border: 0 !important;
    background: transparent !important;
}

.profile-corporate-root.payroll-profile-context .profile-detail-content > .tab-content,
.profile-corporate-root.payroll-profile-context .profile-detail-content > .tab-content > .col-md-12 {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-panel {
    min-height: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    overflow: hidden;
    border: 1px solid #d5dce1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(37, 42, 46, .06) !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-panel::before {
    display: none !important;
    content: none !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-panel > .panel-heading,
#divProKerjaKhidmat.payroll-profile-context .profile-service-panel > .panel-heading.bg-gradient-dark-blue-light {
    min-height: 44px !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #d9dfe3 !important;
    background: #f3f5f6 !important;
    color: #303a43 !important;
    box-shadow: inset 4px 0 0 #a7193f !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-panel > .panel-heading .panel-title {
    color: #303a43 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-panel > .panel-body {
    padding: 12px !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-grid {
    border: 1px solid #dce2e6 !important;
    border-radius: 6px !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-grid > .form-group {
    min-height: 40px !important;
    border-bottom-color: #e2e7ea !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-grid > .form-group > label,
#divProKerjaKhidmat.payroll-profile-context .profile-service-grid > .form-group > div {
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-grid > .form-group > label {
    background: #f3f5f6 !important;
    color: #4c5862 !important;
}

#divProKerjaKhidmat.payroll-profile-context .profile-service-grid > .form-group > div {
    background: #fff !important;
    color: #303a43 !important;
}

@media (max-width: 991px) {
    .profile-corporate-root.payroll-profile-context .profile-detail-layout {
        display: block !important;
    }

    .profile-corporate-root.payroll-profile-context .profile-detail-layout > .vertical-box-column.width-250,
    .profile-corporate-root.payroll-profile-context .payroll-side-menu {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 10px;
    }
}