/*loading page*/
#app {
    height: 100vh;
}

#loader-block {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    height: 100vh; /* Full viewport height */
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    position: relative; /* Needed for absolute positioning of the footer */
    padding: 20px;
}

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

.content-wrapper {
    flex-grow: 1; /* Takes up available space, pushing footer down */
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    border: 8px solid #B3D9FF; /* Biru muda untuk bagian background */
    border-top: 8px solid #217EC1; /* Biru tua untuk bagian yang berputar */
    border-radius: 50%;
    width: 124px; /* Set the desired size */
    height: 124px; /* Set the desired size */
    animation: spin 1s linear infinite;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 45px;
}

.nav-powered-loader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    box-sizing: border-box;
    position: absolute; /* Position it relative to #loader-block */
    bottom: 0;
    left: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.load-img > img {
    width: auto;
    margin-bottom: 30px;
}
.load-title > h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
.load-subtitle > span {
    font-size: 18px;
    margin-bottom: 50px;
}

/*login page*/
.login-main-content {
    padding-top: 0;
    text-align: center;
}

.login-grid {
    align-items: center;
    height: 100vh;
}

.login-form {
    min-width: 450px;
    border-radius: 20px;
    padding-top: 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.login-form-auth {
    min-width: 450px;
    max-width : 450px;
    border-radius: 20px;
    padding-top: 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.notification-message {
    max-width :500px;
    overflow-y: auto;
}

.login-title {
    font-size: 36px;
    color: #000;
    text-transform: uppercase;
}

.login-subtitle {
    font-size: 24px;
    color: #217EC1;
    position: relative;
    text-transform: capitalize;
}

.login-sub-subtitle {
    font-size: 20px;
    margin-bottom: 30px;
    color: #217EC1;
    position: relative;
}

.login-header-block {
    margin-bottom: 30px;
}

.login-subheader-block {
    position: relative;
}
.login-subheader-authorizer {
    /*margin-bottom: 40px;*/
    position: relative;
}

.login-sub-subtitle > label {
    background: #fff;
    z-index: 1;
    position: relative;
    width: 20%;
    text-transform: uppercase;
}

.login-sub-subtitle-otp > label {
    width: 50% !important;
}

.login-sub-subtitle > div {
    border-bottom: 7px solid;
    position: absolute;
    z-index: 0;
    display: block;
    top: 40%;
    width: 100%;
}

.login-form-element {
    margin-bottom: 30px;
}

.login-btn {
    margin-top: 20px;
    background-color: #135691;
    color: #fff;
    width: 30%;
}

.otp-login-btn {
    width: 40% !important;
}

.verify-login-btn {
    width: 60% !important;
}

.login-btn > span > p {
    text-transform: capitalize;
}

.login-btn:hover {
    background-color: #fff;
    border: 2px solid #135691;
    color: #135691;
}


.back-to-home-btn {
    margin-top: 20px;
    background-color: #F1F1F1;
    color: #000;
    width: 100%;
}

.back-to-home-btn:hover {
    background-color: #fff;
    border: 2px solid #656565;
    color: #656565;
}

.login-form-footer {
    padding-left: 0;
    padding-right: 0;
    background: #166DB3;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.login-form-footer > span {
    color: #fff;
    margin-right: 10px;
    vertical-align: middle;
}

span.footer-img {
    vertical-align: middle;
    height: fit-content;
    display: inline-block;
}

.footer-login-logo {
    height: 40px;
    width: auto;
    filter: brightness(10000%);
    filter: contrast(-200%);
}

.my-input {
    margin-bottom: 15px;
}

.loader-processing {
    height: 10px !important;
    width: 10px !important;
    color: #fff;
}

.loader-processing-dark {
    color: #135691;
}

.highlight-btn .loader-text {
    color: inherit !important;
}

.loader-text {
    color: #fff;
}

.loader-text-dark {
    color: #135691;
}

/*home*/
.home-title {
    color: #000;
    font-size: 36px;
    text-transform:uppercase;
}

.home-subtitle {
    color: #217EC1;
    font-size: 24px;
    text-transform: uppercase;
}

.title-block {
    width: 50%;
    display: inline-block;
}

.subtitle-block {
    width: 100%;
    display: inline-block;
    /*margin-top: 5px;*/
    margin-bottom: 40px;
}

.breadcrumbs-block {
    width: 50%;
    display: inline-block;
    text-align: right;
    float: right;
    text-transform: capitalize;
    padding-right: 0;
    padding-left: 0;
}

.breadcrumbs-block > li {
    text-align: right;
    float: right;
}

.mud-breadcrumbs li a {
    font-weight: bold;
    color: #135691;
}

.mud-breadcrumbs .mud-breadcrumb-separator > span {
    font-weight: bold;
    color: #135691 !important;
}

.mud-breadcrumb-separator {
    padding: 0 8px;
}

.mud-breadcrumbs li:first-child > a {
    color: #B0B0B0 !important;
    text-decoration: none;
    font-weight: 300;
    cursor: text;
}

.btn-module {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: #d3d3d3;
    border: 9px solid #000;
    border-radius: 30px;
    font-size: 24px;
    padding: 10px 0;
    -webkit-box-shadow: 15px 11px 15px -17px rgba(66, 68, 90, 1);
    -moz-box-shadow: 15px 11px 15px -17px rgba(66, 68, 90, 1);
    box-shadow: 15px 11px 15px -17px rgba(66, 68, 90, 1);
    text-transform:capitalize;
}

.btn-module-unit-registry {
    background: #E3EEFB;
    border: 9px solid #4BA5E5;
    color: #4BA5E5;
}

.btn-module-unit-registry:hover {
    background: #4BA5E5;
    border: 9px solid #fff;
}

.btn-module:hover > i, .btn-module:hover > label, .btn-module:hover > svg {
    color: #FFF;
}

.btn-module-fixed-income {
    background: #F7EECA;
    border: 9px solid #DFA730;
    color: #DFA730;
}

.btn-module-fixed-income:hover {
    background: #DFA730;
    border: 9px solid #fff;
}

.btn-module > i, .btn-module > svg {
    font-size: 65px;
    position: absolute;
    bottom: -15px;
    left: -12px;
    transform: rotate(40deg);
}


.btn-module > label {
    width: 60%;
    margin-left: 30%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
}

.btn-module-fixed-income > label {
    color: #DFA730;
}


.fixed-income-icon {
    color: #DFA730;
    bottom: 4px !important;
    left: 4px !important;
}

.mud-popover {
    min-width: 150px;
}

.mud-badge.mud-badge-top.right {
    inset: auto auto calc(100% - 20px) calc(100% - 20px) !important;
}

.module-no-access {
    background-color: #d3d3d3;
    border-color: #888888;
    cursor: auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset
}

.module-no-access:hover {
    background-color: #d3d3d3;
    border-color: #888888;
}

.module-no-access > i {
    color: #888888;
}

.module-no-access > label {
    color: #888888;
}

.module-no-access:hover > i {
    color: #888888;
}

.module-no-access:hover > label {
    color: #888888;
}
.footer {
    position: fixed;
    bottom: 0;
    text-align: right;
    padding: 0 30px;
    display: flex !important;
    align-items: center;
    right: 0;
    width: 100%;
    background: #fff;
    float: right;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

.footer > span {
    vertical-align: middle;
    margin-left: auto;
}

.footer-logo {
    max-height: 50px !important;
    box-shadow: none;
}

.my-table {
    width: 100%;
    /*border-collapse: collapse;
    white-space: nowrap;*/
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
}

.my-table th:hover {
    cursor: pointer;
    color: #4BA5E5 !important;
}

.my-table .mud-ripple-checkbox {
    padding: 0 !important;
}

.no-header-table {
    padding: 8px;
    border-top-left-radius: 10px;
    width: 2%;
    border-bottom: 4px #F0F0F0 solid;
    text-align: left;
}

tbody > tr {
    /*border-bottom: 4px #F0F0F0 solid;*/
}

tbody > tr > td {
    padding: 5px 10px;
    border-bottom: 1px #F0F0F0 solid;
}

.action-header-table {
    padding: 12px 8px;
    border-bottom: 4px #F0F0F0 solid;
    margin: 0;
    text-align: center;
    width: 110px;
    text-transform: capitalize;
    width: auto; /* Hapus fixed width */
    min-width: fit-content; /* Tambahan jika butuh fallback */
}

.data-header-table {
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 4px #F0F0F0 solid;
    margin: 0;
    text-align: left;
    text-transform:capitalize;
}

.my-table tbody tr > td:nth-last-child(2), .my-table tr > th:nth-last-child(2) {
    padding-right: 22px;
}

.sort-btn {
    float: right;
    float: right;
    margin-right: 5px;
}

.edit-btn {
    color: #FFFFFF;
    background-color: #D8C200;
}

.delete-btn {
    color: #FFFFFF;
    background-color: #D80000;
    /*min-width: 19%;*/
}

    .delete-btn:hover {
        color: #D80000;
    }

.edit-btn:hover {
    color: #D8C200;
}

/*.id-view-hyp {
    color: #4BA5E5 !important;
    width: 100%;
    cursor: pointer;
    position: relative;
    display: block;
}*/

.id-view-hyp {
    color: #4BA5E5 !important;
    width: 100%;
    cursor: pointer;
    position: relative;
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.holidaydate-tbl-body .id-view-hyp {
    min-width: 195px;
}

.view-btn {
    float: right;
    display: inline-block;
    right: 0;
    color: #4BA5E5;
}

.highlight-btn {
    color: #FFFFFF;
    width: fit-content !important;
    padding: 4px 20px;
    height: fit-content;
    top: 20%;
}
.dialog-highlight-btn > span > p {
    text-transform: uppercase;
}

.highlight-btn > span > p {
    text-transform: uppercase;
}

.highlight-specific-search {
    background-color: #0F2842;
}

    .highlight-specific-search:hover {
        color: #0F2842;
    }

.highlight-pending-list {
    background-color: #5D00A6;
}

    .highlight-pending-list:hover {
        color: #5D00A6;
    }

.highlight-add {
    background-color: #4BA5E5;
    width: 20%;
}

    .highlight-add:hover {
        color: #4BA5E5;
    }

.highlight-grid {
    padding: 3px 8px;
    height: 53px;
    flex-wrap: nowrap;
}

.highlight-grid-form {
    padding: 4px 5px;
}

.highlight-btn-grid {
    justify-content: flex-end;
    flex-wrap: wrap;
    height: 45px;
    flex: 0 0 auto;
}

.highlight-btn-grid-form {
    justify-content: flex-end;
}

.highlight-filter-grid {
    align-items: center;
    height: 45px;
}
.highlight-filter-grid-form {
    padding-right: 10px;
    align-items: center;
}

.info-btn {
    color: #135691;
    min-width: unset;
    padding: 0;
    height: fit-content;
    vertical-align: middle;
}

    .info-btn:hover {
        background-color: unset !important;
        color: #4BA5E5;
    }

.global-search-input {
    flex: 1 1 auto;
    padding-left: 10px;
}

.action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 4px 0;
}

.action-btn {
    margin-left: 5px; /* Menambahkan jarak di antara tombol */
    margin-right: 5px;
}

.action-btn > span > svg {
    font-size: 1.2rem !important;
}

.table-paper {
    max-height: calc(100vh - 265px);
    overflow: auto;
    padding: 0;
}

table {
    height: 100%;
}

.page-limit-block {
    text-align: right;
}

.title-page-block {
    margin-bottom: 35px !important;
    padding-left: 0;
    padding-right: 0;
}

div:has(> .page-limit-select) {
    display: inline-block;
    width: 10%;
    margin-right: 20px;
    margin-left: 10px;
}

.paging-container {
    padding-left: 0;
    padding-right: 0;
}

.data-not-found-row {
    text-align: center;
    padding: 8px;
}

.infoDialog {
    padding: 25px 0;
    text-align:center;
}

div:has(> .infoDialog) {
    min-width: 60% !important;
}

.sorting-default {
    color: #c7c7c7;
}

.SearchingInfoContainer {
    margin-bottom: 13px;
    display: flex;
}

.mb-extra {
    margin-top: 15px; /* Atau angka lain sesuai kebutuhan tambahan */
}

.KeywordOngoing:before, .KeywordOngoing:after {
    content: "\"";
}

.KeywordOngoing {
    font-weight: bold;
    color: #135691;
    margin-left: 5px;
}

.clear-search-filter {
    float: right;
    font-size: 14px;
    align-items: center;
    display: flex;
    margin-left: auto;
    font-weight: bold;
    color: #D80000 !important;
}

.clear-search-filter {
    float: right;
    font-size: 14px;
    align-items: center;
    display: flex;
    margin-left: auto;
    font-weight: bold;
    color: #D80000 !important;
}

    .clear-search-filter:before {
        content: "x";
        margin-right: 10px;
    }

    .clear-search-filter:hover {
        color: #ff9595 !important;
    }

/*navigation*/
.default-bar {
    background-color: rgba(22, 109, 179, 1);
}
.nav-header-profile {
}

    .nav-header-profile > img {
        display: block;
        max-height: 30px !important;
    }

.nav-custom-drawer-header {
    display: flex;
    align-items: center;
    height: var(--mud-appbar-height) !important;
}

    .nav-custom-drawer-header > .mud-drawer-content {
        justify-content: center;
    }

.nav-custom-drawer {
    height: calc(100% - var(--mud-appbar-height) - 120px) !important;
    /*height: calc(100% - var(--mud-appbar-height)) !important;*/
    top: var(--mud-appbar-height) !important;
}

.nav-custom-drawer-footer {
    height: 120px !important;
    /*height: 20% !important;*/
    bottom: 0;
}

.nav-user-box {
    padding: 0 5px 5px 5px;
}

.nav-user-subbox {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(73, 190, 255, 0.5);
    padding: 5px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.nav-user-subbox > .mud-avatar {
    margin-right: 12px;
}

.nav-name {
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}

.nav-username {
    color: #5a6a85;
}

.logout-icon {
    color: #D80000;
}

.nav-powered > img {
    max-height: 30px;
}

.nav-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.nav-powered > span {
    font-size: 12px;
}

.nav-powered > img {
    max-height: 40px;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled), .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    color: rgba(36, 138, 211,100%);
    background-color: rgba(36, 138, 211,30%);
    border-radius: 20px;
}

a.mud-nav-link.active:hover > .mud-icon-default {
    color: #166DB3 !important;
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-inline-start: 10px;
}

.mud-navmenu {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.mud-nav-link {
    padding: 10px 20px;
    font-weight: bold;
    font-size: 15px;
    color: #166db3;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #fff;
    background-color: rgba(36, 138, 211,85%);
    border-radius: 20px;
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: #166DB3;
}

a.mud-nav-link.active > .mud-icon-default {
    color: #fff !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled), .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    color: #166db3;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    color: rgba(36, 138, 211,100%);
    background-color: rgba(36, 138, 211,30%);
    border-radius: 20px;
}

.mud-nav-link:hover > .mud-nav-link-icon.mud-nav-link-icon-default {
    color: rgba(36, 138, 211,100%);
}

.mud-nav-link:focus:not(.mud-nav-link-disabled) {
    background-color: rgba(36, 138, 211,30%);
    border-radius: 20px;
}

.mud-nav-link {
    border-radius: 20px;
}

.mud-nav-item, .mud-nav-group {
    margin-bottom: 3px;
    margin-top: 2px;
}

.mud-nav-link-text {
    font-weight: bold !important;
    font-size: 15px;
    text-transform:capitalize;
}

/*general*/
.clean-layout {
    padding-top: 0;
    text-align: center;
}
/*.me-auto:after {
    content: " !";
}*/
.mud-list-item-text > p{
    text-transform:capitalize;
}

/*dialog*/
.dialog-info{
    padding:24px 24px;
}
.mud-dialog-title {
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.confirmation-dialog > .mud-dialog-title {
    background: #D80000;
}
.view-only-dialog > .mud-dialog-title {
    background: #4BA5E5 !important;
}
.mud-dialog-title > h6 {
    text-transform: capitalize;
}
.mud-dialog-title > button {
    color: #fff;
}
.confirmation-dialog > .outline-none > .mud-dialog-content {
    padding: 24px 24px 0.5px 24px;
}


.dialog-separator {
    height: 5px;
    background: -webkit-linear-gradient(70deg, #b12424 30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #e64d4d 60%, #fbcdcd 60%);
    width: 100%;
    position: relative;
    left: 0;
}
.mud-dialog .container-button-dialog-action, .mud-dialog .mud-dialog-actions {
    padding-left: 0px !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    text-transform: capitalize;
    font-weight: bold;
}
.view-only-dialog .dialog-separator {
    background: -webkit-linear-gradient(70deg, #135691 30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #248ad3 60%, #c1def6 60%) !important;
}


.fullscreen-btn {
    color: white;
    margin-right: 30px;
}

    .fullscreen-btn.hidden {
        display: none;
    }

.full-screen-dialog.mud-dialog {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.mud-dialog.full-screen-dialog .mud-dialog-content {
    max-height: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
}

.mud-dialog.full-screen-dialog .mud-dialog-title {
    width: 100% !important;
}

.mud-dialog.full-screen-dialog .container-button-dialog-action {
    position: sticky !important;
    bottom: 0 !important;
    background-color: white !important;
    padding: 10px 0 !important;
}



/*form*/
.highlight-btn-form{
    top:0 !important;
}
.highlight-save {
    background: #135691;
}
.highlight-cancel{
    color:#000;
}
.highlight-save:hover {
    color: #135691;
}
.form-container {
    padding: 20px 40px 20px 40px;
    padding-bottom: 15px;
}
.form-group-title {
    text-transform: uppercase;
    padding-top: 20px;
    margin-bottom: 0.5rem;
}
.form-group-title-50 {
    text-transform: uppercase;
    padding-top: 10px;
    width: 50%;
    display:inline-block;
}
.data-status {
    width: fit-content;
    display: inline-block;
    padding: 5px 35px;
    float: right;
    margin-top: 20px;
    border-radius: 20px;
    text-transform: capitalize;
    color: #fff;
}
.data-status-reject {
    background: #D80000;
}
.data-status-approve {
    background: var(--mud-palette-success);
}

.mud-input-error {
    text-transform: capitalize;
}
.data-status-new {
    background: #D8C200;
}
.fixed-highlight-btn {
    position: sticky;
    top: 60px;
    width: 100%;
    z-index: 1000;
    background: #fff;
    padding-top: 32px;
    margin-top: -32px;
}
.form-container-block{
    padding-bottom:35px;
}
.paper-form {
    border-bottom: 10px solid rgba(22, 109, 179, 1);
}

.mud-alert-message {
    text-transform: capitalize;
}
.highlight-save > span > p {
    text-transform: uppercase;
}
.grid-form{
    padding: 0 12px;
}
.pending-container {
    max-height: unset !important;
}
.pending-auth-form{
    padding-bottom:8px;
}
.pending-parent-container{
    padding-bottom:10px;
}
.checked-header-element {
    width: 5%;
    padding-left: 10px;
    border-bottom: 4px #F0F0F0 solid;
}
.pending-container > table > thead > tr > th.data-header-table {
    min-width: 175px !important;
}

/* Special style for closingdate-header */
.pending-container > table > thead > tr > th.role-name-pending-header {
    min-width: 270px !important; /* Atur ukuran khusus untuk assetaccount-pending-header */
}

.pending-container > .my-table{
    position:relative;
}

table > thead > tr > th.data-header-table {
    min-width: 175px !important;
}

.rejected-row {
    background: #ffc1c1;
}

.input-with-ref > .mud-input-control-helper-container > .mud-input-helper-text > .d-flex > .me-auto:after {
    content: "" !important;
}
.input-with-ref > .mud-input-control > .mud-input-control-helper-container > .mud-input-helper-text > .d-flex > .me-auto:after {
    content: "" !important;
}

/*
    .input-with-ref > .mud-input-control-helper-container > .mud-input-helper-text > .d-flex > .me-auto:before {
        content: "existing : ";
    }
*/

.multi-line-reason{
    margin-left:20px;
}
.info-section-dialog > .mud-dialog-title {
    display: none;
}
td.remarks-tbl-body, td.approvalremarks-tbl-body {
    max-width: 120px;
    white-space: break-spaces;
}
.confirmation-dialog > div > .mud-dialog-content {
    max-height: calc(100vh - 150px);
    overflow-y: scroll;
}

/*.form-tab > .mud-tabs.mud-tabs-rounded .mud-tabs-tabbar {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: rgba(22, 109, 179, 1);
}*/

/* Container untuk tab bar */
.form-tab > .mud-tabs-tabbar {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: white !important;
    border-bottom: 1px solid #e0e0e0;
}

/* Style untuk semua tab */
.form-tab .mud-tab {
    color: #666666 !important;
    font-weight: bold !important;
    text-transform: none !important;
    border-top: 3px solid transparent;
    transition: all 0.3s ease;
}

    /* Style untuk tab yang aktif */
    .form-tab .mud-tab.mud-tab-active {
        color: #166DB3 !important; /* Primary blue */
        border-top: 3px solid #166DB3 !important;
        background: white !important;
        font-weight: bold !important;
    }

    /* Style untuk tab yang tidak aktif (hover effect) */
    .form-tab .mud-tab:not(.mud-tab-active):hover {
        color: #4C8DC4 !important;
        background: #f0f8ff !important; /* Light blue background */
    }

/* Content panel styling */
.form-content-tab {
    border-bottom: 10px solid #166DB3 !important;
    background: white !important;
}

/* Badge styling untuk tab header */
.tab-header-data > .mud-tab-badge {
    margin-left: 25px;
    top: -10px;
}

/* Pastikan text dalam tab tidak ter-override oleh style lain */
.form-tab .mud-tab .mud-tab-text {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Remove default MudBlazor tab styling yang mungkin mengganggu */
.form-tab .mud-tabs-tabbar .mud-tab {
    min-height: 48px;
    padding: 12px 16px;
}

/* Styling untuk tab indicator (garis bawah default MudBlazor) - hilangkan */
.form-tab .mud-tabs-tabbar .mud-tab-slider {
    display: none !important;
}



.custom-tabbar .mud-tabs-tabbar {
    background-color: #166DB3;
    border-radius: var(--mud-default-borderradius);
    color: white;
}

.mud-tabs.mud-tabs-rounded .mud-tabs-tabbar {
    border-radius: var(--mud-default-borderradius);
    background-color: #166DB3;
    color: white; /* Tambahkan jika ingin teksnya berwarna putih */
}


.form-content-tab {
    border-bottom: 10px solid rgba(22, 109, 179, 1);
}

.bold-label{
    font-weight:bold;
}

.tab-header-data > .mud-tab-badge {
    margin-left: 25px;
    top: -10px;
    /*
    position: absolute;
    top: 10px;
    left: 30px;
    */
}
.infoDialog > hr {
    border-bottom: 1px solid #d3d3d3;
    margin-top: 10px;
    margin-bottom: 10px;
}

.detail-grid {
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    padding: 10px 10px;
}

.grid-add-row-data-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.add-row-data-btn{
    width:100% !important;
}

/* Roles */
/* Sticky header adjustments */
.roles-sticky {
    position: relative;
    top: 0;
    margin: 0;
    width: 100%;
    height: auto;
    padding-left: 20px;
}


/* Target the specific table with all those classes */
.mud-table.mud-sm-table.mud-table-hover.mud-elevation-1.menu-list-group {
    box-shadow: none !important;
    border: none !important;
}

/* Also target any element with mud-elevation-1 class within the menu-list-group */
.menu-list-group .mud-elevation-1 {
    box-shadow: none !important;
}

.access-title-container {
    position: sticky;
    top: 180px;
    z-index: 20;
    background-color: #fff;
    padding: 10px 0;
}

.menu-list-group > div > table {
    border-radius: 8px;
    border-bottom: none;
    border: none;
}

.menu-list-group > div {
    border-radius: 8px;
    border: none;
}

/* Sticky Header Styles - Update z-index and positioning */
.menu-list-group .mud-table-container {
    overflow: visible !important; /* Keep this to prevent clipping of sticky elements */
}

/* Sticky Header Styles */
.menu-list-group > div > table > thead {
    position: sticky;
    z-index: 10;
}

    .menu-list-group > div > table > thead > tr:first-child {
        position: sticky;
        top: 243px;  /*Adjusted down */
        z-index: 11;
        background: rgba(22, 109, 179, 1);
    }

    .menu-list-group > div > table > thead > tr.select-header {
        position: sticky;
        top: 283px;  /*45px (first header top) + 53px (first header height) */
        z-index: 10;
        background-color: #E3EEFB;
    }

    .menu-list-group > div > table > tbody > tr.section-row {
        position: sticky;
        top: 356px; /*98px (second header top) + 53px (second header height) */
        z-index: 9;
        background-color: #A4A4A4 !important;
    }

/* Remove borders from cells */
.menu-list-group > div > table > thead > tr > th,
.menu-list-group > div > table > tbody > tr > td {
    border: none !important;
}

/*.menu-list-group > div > table > thead {
    background: rgba(22, 109, 179, 1);
}*/
    /* Rule for the select-header row background */
    .menu-list-group > div > table > thead > tr.select-header {
        background-color: #E3EEFB;
    }

    .menu-list-group > div > table > thead > tr > th {
        color: #fff !important;
    }

    .menu-list-group > div > table > thead > tr.select-header > th {
        color: #676767 !important;
    }

    .menu-list-group > div > table > thead > tr > .menu {
        width: 40%;
    }

    .menu-list-group > div > table > thead > tr.select-header > .menu .mud-typography {
        font-weight: 400;
    }

    .menu-list-group > div > table > thead > tr > .activity {
        width: 10%;
        text-align: center;
    }
        /* Center the MudCheckBox components inside header cells */
        .menu-list-group > div > table > thead > tr > .activity > div,
        .menu-list-group > div > table > thead > tr > .selected-header-table > div {
            justify-content: center;
            display: flex;
            align-items: center;
        }

.menu-list-group > div > table > tbody > tr > .activity > div > div > label {
    justify-content: center;
}

.menu-list-group > div > table > tbody > tr > .mud-table-loading {
    padding: 0;
}
/* Added these classes to the menu-list-group CSS as requested */
.menu-list-group > div > table > thead > tr > .no-header-table {
    padding: 8px;
    border-top-left-radius: 10px;
    width: 2%;
    text-align: center;
}

.menu-list-group > div > table > thead > tr > .selected-header-table {
    padding: 8px;
    width: 2%;
    text-align: center;
}
/* Style for checkbox with label layout */
.checkbox-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.checkbox-label {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: #676767 !important;
    font-weight: normal;
    line-height: 1.2;
}
/* Update to center the checkbox itself */
.menu-list-group > div > table > thead > tr > .activity > .checkbox-with-label > div:first-child {
    justify-content: center;
    display: flex;
}
/* Menu hierarchy styling */
/* Section styling (parentId = null) */
.menu-list-group > div > table > tbody > tr.section-row > td {
    font-weight: bold;
    color: #fff;
}
/* Subsection styling (parentId != null && childNumber > 0) */
.menu-list-group > div > table > tbody > tr.subsection-row {
    background-color: #E7E7E7;
}

    .menu-list-group > div > table > tbody > tr.subsection-row > td:nth-child(2) {
        font-style: italic;
        font-weight: 500;
    }

.menu-item-level-0 {
    padding-left: 0;
}

.menu-item-level-1 {
    padding-left: 54px;
}

.menu-item-level-2 {
    padding-left: 150px;
}
/* Set menu items to white background */
.menu-list-group > div > table > tbody > tr.menu-item-row {
    background-color: #ffffff;
}

/* End Roles */

.highlight-clean{
    min-height:57px;
}

.direct-action-highlight {
    position:relative;
    top: 20%;
    width:16%;
    height:fit-content;
    padding:0;
}
.mud-disabled > svg {
    background-color: #d3d3d3;
    border-radius: 3px;
}

.header-module {
    padding: 10px 40px 5px;
    align-items: center;
    display: flex;
}

.content-module {
    padding: 10px 40px;
    align-items: center;
    display: flex;
}

.paper-form-auth {
    box-shadow: 0px 3px 20px -4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 10px;
}

.employee-form {
    align-items: center;
    display: flex;
    padding-top: 20px;
    padding-left: 20px;
}

.module-name {
    font-size: 18px;
}

.downline-item {
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    padding: 20px 20px;
    margin-bottom: 20px;
    margin-top: 5px;
    display: flex;
    margin-left: 20px !important;
    justify-content: center;
}

/* employee */
.div-employee {
    padding-bottom: 35px;
    padding-top: 35px;
}

.tab-panel {
    background-color: #166DB3;
}

.btn-zipcode-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-zipcode {
    height: 80%;
}

.btn-zipcode-icon {
    display: flex;
}

/* Mengatur pointer events menjadi none agar tombol tidak dapat diklik */
.no-click {
    pointer-events: none; /* Menonaktifkan klik pada elemen */
    opacity: 0.6; /* Menambahkan efek visual agar terlihat disabled */
}

.floating-table-action {
    position: sticky;
    right: 0;
    overflow: hidden;
    background: white;
    background: #f2f2f2;
    border-bottom: 4px solid #d3d3d3;
    transition: box-shadow 0.3s ease-in-out; /* Transisi halus */
    width: 10px; /* Lebar mengikuti isi */
    min-width: fit-content; /* Minimum lebar mengikuti isi */
    z-index: 1; /* Pastikan tetap di atas saat scroll */
    padding: 0 2px; /* Tambahkan padding samping */
}

.with-shadow {
    box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.12);
}

.float-window-remarks-delete {
    /*margin-top: 0.5rem;
    border-bottom-right-radius: 5px;*/
    position: sticky;
    /*bottom: 0;
    right: 0;*/
    overflow: hidden;
    background: white;
    /*border-bottom-left-radius: 5px;
    padding-bottom: 0.5rem;*/
    padding-top: 0.4rem;
    /*border: 1px solid #b4b4b4;*/
    /* box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.12); */
}

.float-window-remarks-delete-shadow {
    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.12);
}

.float-window-remarks-delete .item-remarks-delete {
    padding: 0 12px 12px 12px;
}

/* button dialog */
.container-button-dialog-action {
    flex: 0 0 auto;
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: flex-end;
}


/* tecnical page */
.full-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #0071BC;
}

.content-container {
    text-align: center;
    color: #FFD700;
    max-width: 400px;
    width: 100%;
}

.title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1rem;
}

.divider {
    width: 100%;
    height: 2px;
    background-color: #FFD700;
    margin: 1rem 0;
}

.message {
    font-size: 16px;
    margin-bottom: 1.5rem;
}

/* Hides spin buttons in number input */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


/* installation page */
.install-main-content {
    padding-top: 0;
    text-align: center;
}

.install-grid {
    align-items: center;
    height: 100vh;
}

.install-form {
    width: 450px; /* Tetapkan lebar tetap */
    min-width: 450px; /* Pastikan lebar minimum tetap 450px */
    max-width: 450px; /* Pastikan lebar maksimum juga tetap 450px */
    border-radius: 20px;
    padding-top: 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.install-title {
    font-size: 36px;
    color: #000;
    text-transform: uppercase;
}

.install-subtitle {
    font-size: 18px;
    color: #217EC1;
    position: relative;
    text-transform: capitalize;
}

.install-sub-subtitle {
    font-size: 20px;
    margin-bottom: 30px;
    position: relative;
}

.install-header-block {
    margin-bottom: 30px;
}

.install-subheader-block {
    position: relative;
}

.install-sub-subtitle > label {
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 0px 10px;
    text-transform: uppercase;
}

.install-sub-subtitle > div {
    border-bottom: 7px solid;
    position: absolute;
    z-index: 0;
    display: block;
    top: 40%;
    width: 100%;
}

.install-form-element {
    margin-bottom: 30px;
}

.install-btn {
    margin-top: 20px;
    background-color: #135691;
    color: #fff;
    width: 40%;
}

    .install-btn > span > p {
        text-transform: uppercase;
        font-size: 20px;
    }

    .install-btn:hover {
        background-color: #fff;
        border: 2px solid #135691;
        color: #135691;
    }

.notification-container
{
    margin-bottom : 25px;
}

.change-password-container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    text-align: center;
    margin-top : 20px;
}

.change-password-paper {
    padding: 40px;
}

.change-password-title {
    font-size: 24px;
    font-weight: bold;
    color: #000; /* Adjust as needed */
    margin-bottom: 20px;
}

.change-password-divider {
    margin: 30px 0;
    background-color: #0078d7; /* Adjust as needed */
    height: 2px;
}

.change-password-input-item {
    margin-bottom: 20px;
}

.change-password-input {
    width: 100%;
}

.change-password-actions {
    text-align: center;
}

.change-password-button {
    width: 100%;
    max-width: 110px;
    margin: 7px auto;
}
    .change-password-button.ml-2 {
        background-color : #F0F0F0;
        color:#000;
    }
        .change-password-button.ml-2:hover {
            background-color: whitesmoke;
        }
    
/*Specification Dialog*/
.spesificsearch-container-dialog .spesificsearch-item {
    min-height: 78px;
}

.spesificsearch-container-dialog.mud-grid-spacing-xs-2 > .mud-grid-item {
    padding: 0 8px 0 8px !important;
}

.spesificsearch-container-dialog .connector-item .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}

.spesificsearch-container-dialog .connector-item {
    margin-bottom: 0.8rem;
}

.autocomplete-disabled-item {
    padding: 14px 16px;
}

.custom-refresh-icon-appbar {
    color: #ffff;
}

    .custom-refresh-icon-appbar.disabled {
        cursor: not-allowed;
        opacity: 0.5;
        pointer-events: none;
    }

.dialog-employee-table .mud-table-empty-row div {
    font-size: 12px;
}

.dialog-employee-table .number-field {
    max-width: 0.5%;
}

.detail-grid-container .mud-grid-item {
    padidng: 0 !important;
}


.license-container-item {
    padding-top: 0 !important;
}

.detail-license-container {
    padding-top: 20px;
}

.detail-license-container .mud-input-control {
    padding-left: 5%;
}

.container-from-loading {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

    .container-from-loading .form-loading {
        height: 85px;
        width: 85px;
        color: rgba(22, 109, 179, 1) !important;
    }

.height-form-input {
    min-height: 91px;
}

.height-form-input .mud-input-control-input-container {
    max-width: 95px;
}

    .toggle-standardvalue-container {
        padding-top: 0px !important;
    }

@media (min-width: 600px) and (max-width: 1200px) {

    .content-block .mud-grid-item-md-4 {
        flex-grow: 0 !important;
        max-width: calc(100% / 12 * 6) !important;
        flex-basis: calc(100% / 12 * 6) !important;
    }
}

.specificsearch-dialog.mud-dialog {
    overflow-y: visible !important;
    max-height: unset;
}

.pending-container > table > thead > tr > th.dataname-tbl-header {
    min-width: 190px !important;
}

.cache-down-banner {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 6px 12px;
    border-radius: 4px;
    height: 57px;
}

.cache-icon {
    color: yellow;
    font-size: 28px;
    margin-right: 8px;
}

.cache-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.cache-title {
    font-weight: bold;
    color: yellow;
    font-size: 16px;
}

.cache-divider {
    border: none;
    border-top: 2px solid yellow;
    width: 100%;
}

.clickable-text {
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}

.text-white {
    color: white !important;
}
}

.whats-new {
    font-style: italic;
    text-decoration: underline;
    color: #555;
    margin: 24px 0 12px 0;
    font-size: 0.9rem;
}

    .whats-new,
    .whats-new:visited,
    .whats-new:hover,
    .whats-new:active,
    .whats-new:focus {
        color: #555 !important;
        text-decoration: underline;
        font-style: italic;
    }

.form-group-title-version {
    padding-top: 20px;
    margin-bottom: 0.5rem;
}

.rounded-button {
    min-width: 60px;
    border-radius: 20px;
    text-transform: none;
    box-shadow: #A4A4A4;
}

.view-only-dialog-version > .mud-dialog-title {
    background: #6e6e6f !important;
}

.confirmation-dialog-version > .mud-dialog-title {
    background: #6e6e6f;
}

.dialog-separator-version {
    height: 5px;
    background: -webkit-linear-gradient(70deg, #6e6e6f 30%, rgba(0, 0, 0, 0) 30%), -webkit-linear-gradient(30deg, #9c9c9c 60%, #dbdbdb 60%);
    width: 100%;
}

.custom-logout-text {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 5px;
    font-weight: 500;
}

.dialog-container-contain {
    padding-top: 20px !important;
}

.dialog-detail-title {
    padding-bottom: 0 !important;
}

.pa-4 {
    padding: 2px !important;
}

.mud-pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 3px;
}

.mud-grid-spacing-xs-6 > .mud-grid-item {
    padding-left: 16px;
    padding-top: 10px;
}

.custom-padding-table .mud-table-cell {
    padding: 8px 28px !important;
}

.card-last-sync {
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.gap-last-sync{
    gap: 0px;
    margin-left: 12px;
}

/* Gaya tombol dan ikon */
.btn-last-sync .mud-icon-root {
    font-size: 65px;
    fill: #166DB3;
}

/* Gaya animasi spin */
.btn-spin-last-sync .mud-icon-root {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.mud-card-content.custom-card {
    flex-grow: 1;
    padding: 0px;
}

.form-container .mud-grid-item {
    padding-left: 16px;
    padding-top: 5px;
}

/* ============ Styling Form ========= */
.custom-form-styling {
    --label-width: 70px;
}

    /* Default styling */
    .custom-form-styling .mud-input-helper-text:not(.mud-input-error) .me-auto {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 11px;
        background: #ebebeb;
        padding: 0 10px;
        left: auto;
        animation: slideFromLeft 0.3s ease-out;
    }

    /* Error styling  */
    .custom-form-styling .mud-input-helper-text.mud-input-error .me-auto {
        position: absolute;
        top: 0px;
        left: var(--label-width, 70px);
        font-size: 10px;
        right: auto;
        animation: slideFromRight 0.3s ease-out;
    }

.report-field .mud-input-helper-text.mud-input-error .me-auto {
    position: absolute;
    top: -8px !important;
    background-color: white !important;
    padding: 0 5px !important;
    left: var(--label-width, 70px);
    font-size: 10px;
    right: auto;
    animation: slideFromRight 0.3s ease-out;
}

/* Keyframes untuk animasi */
@keyframes slideFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Alternatif jika struktur HTML berbeda - mud-input-error di parent yang lebih tinggi */
.custom-form-styling .mud-input-error .mud-input-control-helper-container .me-auto {
    position: absolute;
    top: 0px;
    margin-left: var(--label-width, 70px);
    font-size: 10px;
    right: auto;
}

.custom-form-styling .mud-input-control-helper-container .mud-input-helper-text .ms-auto:only-child,
.custom-form-stylin .mud-input-control-helper-container .mud-input-helper-text > .ms-auto:first-child:last-child {
    background: white;
    padding: 0 0.2rem;
    position: absolute;
    right: 16px;
    bottom: -7px;
}

/* Styling untuk .ms-auto ketika ada 2 elemen di dalam container */
.custom-form-styling .mud-input-control-helper-container .mud-input-helper-text .ms-auto:not(:only-child) {
    background: white;
    padding: 0 0.2rem;
    position: absolute;
    right: 16px;
    bottom: -7.5px;
}

.custom-form-styling .mud-input-label::first-letter {
    text-transform: uppercase;
}

.mud-grid-item.mud-grid-item-xs-12.mud-grid-item-sm-12.mud-grid-item-md-12.custom-item-role {
    padding-left: 0px;
}

.mud-grid-item.mud-grid-item-xs-12.mud-grid-item-sm-12.mud-grid-item-md-12.access-title-container.custom-title-role {
    padding-left: 0px;
}

.custom-table-cell td {
    padding: 0px !important;
    padding-left: 25px !important;
}

.custom-warning-icon {
    color: #ee1;
}

.pagination-buttons {
    flex-direction: row;
    display: flex;
}

.btn-prev, .btn-next {
    display: flex;
    height: 40px;
    background-color: white;
    border: 1px solid #e0e0e0;
}

.btn-prev {
    border-radius: 8px 5px 5px 8px;
    cursor: pointer;
    margin-right: 4px;
    max-width: 50%;
}

.btn-next {
    border-radius: 5px 8px 8px 5px;
    cursor: pointer;
    max-width: 50%;
}

.arrow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    color: white;
}

.btn-prev .arrow-box {
    background-color: #D4AF37 !important; /* Gold color */
    border-radius: 8px 0 0 8px;
}

.btn-next .arrow-box {
    background-color: #4682B4 !important; /* Blue color */
    border-radius: 0 8px 8px 0;
}

.text-box {
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-weight: bold;
    width: 100%;
}

.btn-prev .text-box span {
    color: #D4AF37 !important;
}

.btn-next .text-box span {
    color: #4682B4 !important;
}

.btn-next:hover .text-box span {
    color: #0058CB !important;
}

.btn-next:hover .arrow-box {
    background-color: #0058CB !important;
}

.btn-prev:hover .text-box span {
    color: #927000 !important;
}

.btn-prev:hover .arrow-box {
    background-color: #927000 !important;
}

.arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.btn-prev.disabled, .btn-next.disabled {
    cursor: not-allowed;
}

    .btn-prev.disabled .arrow-box {
        background-color: #e0e0e0 !important;
    }

    .btn-next.disabled .arrow-box {
        background-color: #e0e0e0 !important;
    }

    .btn-prev.disabled .text-box span {
        color: #9e9e9e !important;
    }

    .btn-next.disabled .text-box span {
        color: #9e9e9e !important;
    }

@keyframes blinkIcon {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.custom-styling-password .mud-input-helper-text {
    position: absolute;
    bottom: -6px; 
    right: 40px;
    font-size: 11px;
    padding: 0;
    margin: 0;
    background: #FFF;
    color: #888; 
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
}

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

.custom-bullet {
    list-style: none;
    padding-left: 20px;
}

.custom-bullet li::before {
    content: "●";
    margin-right: 10px;
    font-size: 17px;
    line-height: 1;
    margin-left: -20px;
}

.character-counter {
    position: absolute;
    bottom: -2px;
    right: 40px;
    font-size: 11px;
    padding: 0 5px;
    margin: 0;
    background: #FFF;
    color: #888;
    white-space: nowrap;
    z-index: 10;
}

.form-container-body-report {
    position: relative;
}


.form-container-report .mud-grid-item {
    padding-top: 5px;
}

.form-container-body-report {
    position: relative;
}

.filter-button-container {
    display: flex;
    justify-content: flex-end; /* tombol di kanan */
    align-items: center; /* posisi vertikal tengah */
}

.button-filter {
    position: absolute;
    top: 0.2em; /* lebih rapat ke atas */
    right: 1em;
    background-color: #B90000;
    color: #FFFFFF;
    padding: 0.2em 0.6em; /* kecilkan padding biar tombol ramping */
    font-size: 0.75rem; /* kecilkan teks */
    min-height: 28px; /* buat tombol lebih pendek */
    line-height: 1.2;
    border-radius: 4px;
}

    .button-filter:hover {
        color: #B90000;
        background-color: #FFFFFF;
        border: 1px solid #B90000;
    }

.button-filter-icon {
    font-size: 1rem; /* kecilkan ikon */
    margin-right: 0.3rem; /* rapatkan jarak ke teks */
    vertical-align: middle;
}

.until-text {
    color: #666;
    font-size: 0.875rem;
    margin: 0 3px;
    white-space: nowrap;
}

/* Sembunyikan bintang required di dalam container yang punya class hide-required-star */
.hide-required-star .mud-input-label::after {
    content: "" !important;
    display: none !important;
}

/* Fallback untuk versi MudBlazor yang pakai elemen span asterisk */
.hide-required-star .mud-input-asterisk {
    display: none !important;
}

.custom-auto-complete .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
    padding-inline-start: 10px;
}

.custom-text-checkbox .mud-typography {
    padding-left: 6px;
}

.custom-icon-checkbox .mud-icon-button {
    margin-left: 15px;
    padding: 0;
}

.dense-check {
    align-self: flex-start; 
    width: fit-content;
}

    .dense-check .mud-checkbox-label {
        font-size: .80rem;
        text-align: right; 
        margin-left: .35rem;
    }

    .dense-check .mud-button-root {
        padding: 0;
    }

    .dense-check .mud-input-control {
        margin: 0;
    }

    .dense-check .mud-checkbox .mud-typography {
        margin-left: 5px; /* Atur jarak teks dari checkbox */
    }
    .dense-check .mud-checkbox svg {
        color: #4B00C5 !important;
        fill: #4B00C5 !important;
    }


/* ========== CUSTOM BUTTON BASE ========== */
.custom-button {
    width: 100%;
    min-height: 100px;
    border-radius: 0 !important;
    padding: 8px 16px;
    color: #FFFFFF;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}

.custom-button-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.custom-button .mud-button-label {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-button .mud-icon-root {
    font-size: 2rem;
    color: currentColor !important;
}

.custom-button .mud-typography {
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
}

/* Ikon ikut currentColor */
.mud-icon-root,
.mud-svg-icon,
.mud-icon {
    color: inherit !important;
}

    .mud-svg-icon svg {
        fill: currentColor !important;
        stroke: currentColor !important;
    }

        .mud-svg-icon svg path,
        .mud-svg-icon svg use {
            fill: currentColor !important;
            stroke: currentColor !important;
        }

/* ========== TOPBAR HEIGHT CONTROL ========== */
.form-topbar {
    --form-topbar-h: 75px;
    min-height: var(--form-topbar-h);
}

/* ========== ACTION TILES ========== */
.action-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--form-topbar-h);
    transition: background .25s ease;
}

.action-item-pdf {
    background: #DAACAC;
}

.action-item-excel {
    background: #82D799;
}

.action-item-preview {
    background: #CCE0EE;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Hover tile → lebih terang */
.action-item-pdf:hover {
    background: #F8D9D9;
}
/* lebih terang dari sebelumnya */
.action-item-excel:hover {
    background: #C0EBC9;
}

.action-item-preview:hover {
    background: #E6F5FF;
}

/* ========== BUTTON DI DALAM TILE ========== */
.action-button--compact {
    height: auto;
    padding: 0 14px;
    border-radius: 6px;
    line-height: 1.1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.action-button--flatlabel .mud-button-label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.action-button--flatlabel .btn-label {
    display: inline-block;
    font-size: .75rem;
    white-space: nowrap;
    color: inherit;
}

/* Warna tombol default */
.btn-pdf {
    background: #621616;
    color: #FFFFFF;
}

.btn-excel {
    background: #0F421D;
    color: #FFFFFF;
}

.btn-preview {
    background: #4BA5E5;
    color: #FFFFFF;
}

/* Hover → background tombol agak transparan lebih terang, teks & ikon brand color */
.action-item-pdf:hover .btn-pdf {
    background: rgba(98, 22, 22, 0.35) !important;
    color: #621616 !important;
}

.action-item-excel:hover .btn-excel {
    background: rgba(15, 66, 29, 0.35) !important;
    color: #0F421D !important;
}

.action-item-preview:hover .btn-preview {
    background: rgba(75, 165, 229, 0.35) !important;
    color: #4BA5E5 !important;
}

/* Optional efek kecil */
.action-item:hover .custom-button {
    transform: translateY(-1px);
}

/* atur lebar tile aksi sekali saja di sini */
:root {
    --action-tile-w: 110px;
}

/* Form body: biar mengisi semua sisa ruang */
.form-container-body-report.mud-grid-item {
    flex: 1 1 0 !important;
    max-width: 100% !important;
    min-width: 0; /* hindari overflow teks */
    margin-left: 10px;
}

/* Tiga tile aksi: lebar fix, tidak ikut melebar */
.action-item.mud-grid-item {
    flex: 0 0 var(--action-tile-w) !important;
    max-width: var(--action-tile-w) !important;
}

/* (opsional) saat layar kecil, biar rapi tile-nya boleh jadi 100% / wrap */
@media (max-width: 768px) {
    .action-item.mud-grid-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}


/* ========== FORM LAYOUT UTILITIES ========== */
.pl-4 {
    padding-left: 16px !important;
}

.pr-2 {
    padding-right: 8px !important;
}

.pr-4 {
    padding-right: 16px !important;
}

.form-container-body-report .px-4 {
    padding-left: 0 !important;
}

.form-container-body-report .MudItem {
    margin-bottom: 0;
}

/* float window */

.fixed-buttons {
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 300px;
    min-width: 250px;
    transition: transform 0.3s ease;
}

.fixed-buttons-header-tc {
    position: relative;
    top: 0 !important;
    z-index: 99;
}

.fixed-buttons-header {
    position: sticky;
    top: 130px;
    z-index: 1000;
}


.custom-justify-content-center .mud-alert-position {
    justify-content: center !important;
}

.loader-float-window-status {
    font-size: 10px;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-indent: -9999em;
    animation: mulShdSpin 1.1s infinite ease;
    transform: translateZ(0);
}

.float-window-text-status {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

.btn-float-export-pdf {
    background: #621616 !important;
    border-radius: 0px !important;
}

.btn-float-export-excel {
    background: #0F421D !important;
    border-radius: 0px !important;
}

.btn-float-preview {
    background: #A3A3A3 !important;
    border-top-right-radius: 5px !important;
}

.btn-float {
    width: 100%;
    min-height: 53px; /* Reduced from 80px */
    color: #FFFFFF;
    background-color: #0F421D;
    height: 100%;
    display: block;
}

    .btn-float .mud-button-label {
        display: flex;
        align-items: center;
        gap: 0.1rem; /* Reduced from 0.2rem */
        flex-direction: column;
    }

    .btn-float .mud-icon-root {
        font-size: 1.4rem; /* Reduced from 1.9rem */
    }

    .btn-float p {
        font-size: 11px; /* Reduced from 13px */
        line-height: 1.2;
        font-weight: bold;
        margin: 0; /* Added to remove default paragraph margin */
    }

button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.square-icon-button {
    background: #594ae2 !important;
    color: white !important;
    border-radius: 6px;
    padding: 6px;
}

.rotate-icon .mud-icon-root {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.custom-expansion-panel {
    border-radius: 8px;
}

    .custom-expansion-panel .mud-expand-panel-header {
        border-radius: 8px;
        transition: border-radius 0.3s ease;
        padding: 8px 15px !important;
    }

    .custom-expansion-panel.mud-panel-expanded .mud-expand-panel-header {
        border-radius: 5px 5px 0 0;
    }

    .custom-expansion-panel .mud-expand-panel-content {
        border-radius: 0 0 5px 5px !important;
    }

    .custom-expansion-panel .mud-expand-panel-text {
        padding: 0;
    }

    .custom-expansion-panel .mud-icon-root {
        transition: transform 0.3s ease;
    }

    .custom-expansion-panel.mud-panel-expanded .mud-expand-panel-header .mud-expand-panel-icon.mud-transform {
        transform: rotate(0deg);
    }

    .custom-expansion-panel.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon {
        transform: rotate(-90deg);
        font-size: 2.3rem;
    }

    .custom-expansion-panel .mud-icon-root {
        font-size: 24px;
    }

.sharesactivity-sticky-header {
    position: sticky;
    top: 130px;
    background-color: white;
    z-index: 100;
    width: 100%;
}

.sharesactivity-panel {
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fafafa;
}

    .sharesactivity-panel.content-header .mud-expand-panel-header {
        min-height: 0px !important;
        padding: 2px 24px !important;
        position: sticky;
        top: 313px;
        z-index: 20;
        background-color: inherit;
    }

.no-gutter-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0 !important;
    margin: 0 !important;
}

.mud-expand-panel.mud-panel-expanded {
    border-bottom: 1px solid #ccc !important;
}

.sharesactivity-page .main-content-container {
    padding-bottom: 25px;
    padding-top: 25px;
}

.sharesactivity-page .main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* == Info Header == */
.sharesactivity-page .header-info-grid {
    padding-left: 8px !important;
}

.sharesactivity-page .header-info-item {
    padding-top: 0 !important;
}

/* Info header kustom (menggantikan <td>) */
.sharesactivity-page .info-table {
    width: 100%;
    border: none;
    border-collapse: collapse;
}

    .sharesactivity-page .info-table tr {
        line-height: 1.2;
    }

    .sharesactivity-page .info-table td {
        vertical-align: top;
        padding: 2px 3px 0;
        border: none;
    }

.sharesactivity-page .info-label-narrow {
    width: 80px;
}

.sharesactivity-page .info-label-wide {
    width: 120px;
}

.sharesactivity-page .info-separator {
    width: 10px;
    text-align: right;
    padding: 2px 9px 2px 0;
}

.sharesactivity-page .info-value {
    word-break: break-word;
}

/* Info print di header */
.sharesactivity-page .print-info-grid {
    display: inline-grid;
    grid-template-columns: max-content max-content auto;
    row-gap: 4px;
    text-align: left;
    height: fit-content;
}

.sharesactivity-page .print-info-separator {
    margin: 0 6px;
}

/* == Expansion Panel == */
.sharesactivity-page .custom-expansion-panel {
    border-radius: 10px !important;
    background: #EDEDED;
}

.sharesactivity-page .expansion-title-content {
    gap: 70px;
}

.sharesactivity-page .expansion-child-content {
    background: white;
    padding: 0 16px 16px;
    border-radius: 10px !important;
}

/* == Tabel Data == */
.sharesactivity-page .gainloss-table {
    width: 100%;
}

.sharesactivity-page .no-gainloss-table {
    border-bottom: 1px solid #e0e0e0;
}

.gainloss-table.mud-table-dense .mud-table-row .mud-table-cell {
    padding-inline: 10px;
}

/* == Kelas Utilitas (Reusable) == */
.sharesactivity-page .align-left {
    text-align: left;
}

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

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

.sharesactivity-page .bg-lightgrey {
    background-color: #E9E9E9;
}

.sharesactivity-page .bg-darkgrey {
    background-color: #CECECE;
}

.sharesactivity-page .bottom-border {
    border-bottom: 1px solid #B3B3B3;
}

.refresh-btn {
    color: #000000 !important;
    background-color: #F1F1F1;
}

    .refresh-btn:hover {
        background-color: #cbcbcb !important;
    }

.loader-processing-black {
    height: 13px !important;
    width: 13px !important;
    margin-right: 5px !important;
    color: #000;
}

.select-account-multiple .mud-input-adornment.mud-input-adornment-end.mud-select-input {
    position: absolute;
    height: 100px;
    width: 100%;
}

    .select-account-multiple .mud-input-adornment.mud-input-adornment-end.mud-select-input svg {
        position: absolute;
        right: 8px;
    }

.select-account-multiple .mud-icon-button-size-small.mud-icon-button-edge-end {
    margin-inline-end: 1em;
    z-index: 2;
}

.select-account-hidden-selected {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.searhbox-account {
    display: none;
}

.mud-popover .searhbox-account {
    display: block;
    padding: 0.3rem 0.4rem;
}

.searchbox-text {
    display: none;
}

.mud-popover .searchbox-text {
    display: block;
    padding-left: 0.4rem
}

.cash-position-table .mud-table-head tr th {
    background-color: #EDEDED !important;
    border: none !important;
    box-shadow: none !important;
}

.cash-position-table .mud-table-head tr {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}

    .cash-position-table .mud-table-head tr th:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        overflow: hidden;
    }

    .cash-position-table .mud-table-head tr th:last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;
    }

.cash-position-table .mud-table-container {
    overflow-y: unset;
}

.cash-position-table .mud-table-head {
    position: sticky;
    top: 300px;
    z-index: 100;
}

.cash-position-summary {
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Ini adalah class untuk kotak-kotak putih di kanan */
.summary-gray-box {
    background-color: #F0F0F0 !important;
    height: 100%; /* Memastikan semua kotak sama tinggi di barisnya */
}

/* Ini untuk garis di atas "Total Cash Position" */
.summary-total-border {
    border-top: 1px solid var(--mud-palette-lines-default);
}


/* =========================================================
   Customer Transaction - Header (inside Paper)
   ========================================================= */

/* Sticky header info (yang di atas tabel) */
.customertransaction-sticky-header {
    position: sticky;
    top: 130px; /* sesuaikan dgn tinggi AppBar desktop */
    background: #fff;
    z-index: 90;
    width: 100%;
}

/* Spasi halaman */
.customertransaction-page .main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.customertransaction-page .main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* Grid baris header */
.customertransaction-page .header-info-grid {
    padding-left: 8px !important;
}

.customertransaction-page .header-info-item {
    padding-top: 0 !important;
}

/* Tabel info (kiri) */
.info-table {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

    .info-table .info-row {
        line-height: 1.2;
    }

    .info-table td {
        vertical-align: top;
        padding: 2px 3px 0;
        border: none;
    }

.info-label-narrow {
    width: 80px;
    white-space: nowrap;
    font-weight: 600;
}

.info-label-wide {
    width: 120px;
}

.info-separator {
    width: 10px;
    text-align: right;
    padding: 2px 9px 2px 0;
    color: #555;
}

.info-value {
    word-break: break-word;
}

/* Info cetak (kanan) */
.print-info-grid {
    display: inline-grid;
    grid-template-columns: max-content max-content auto; /* label : ":" : value */
    row-gap: 4px;
    column-gap: 0;
    text-align: left;
    height: fit-content;
}

.print-info-separator {
    margin: 0 6px;
}

/* Responsif */
@media (max-width: 768px) {
    .customertransaction-sticky-header {
        top: 56px; /* AppBar mobile */
    }

    .info-label-narrow {
        width: 72px;
    }

    .info-label-wide {
        width: 110px;
    }
}

/* =========================================================
   Tabel Customer Transaction (Compact)
   ========================================================= */

.customer-transaction-table {
    width: 100%;
}

    /* Body padding compact */
    .customer-transaction-table .mud-table-row .mud-table-cell {
        padding: 4px 8px;
    }

    /* Header padding compact */
    .customer-transaction-table thead th,
    .customer-transaction-table .mud-table-head th {
        padding: 6px 8px;
        line-height: 1.1;
    }

    /* Zebra rows */
    .customer-transaction-table .mud-table-body tr:nth-child(odd) {
        background: #FFFFFF;
    }

    .customer-transaction-table .mud-table-body tr:nth-child(even) {
        background: #E8E8E8;
    }

/* Summary box */
.customer-transaction-summary .summary-gray-box {
    background: #f7f7f7;
    border: 1px solid #eee;
}

.customer-transaction-summary .summary-total-border {
    border-top: 2px solid #e0e0e0;
}

/* Footer "Grand Total" */
.customer-transaction-table tfoot tr,
.customer-transaction-table .mud-table-foot tr,
.customer-transaction-table .mud-table-footer tr {
    background: #C8C8C8;
}

.customer-transaction-table tfoot td,
.customer-transaction-table .mud-table-foot td,
.customer-transaction-table .mud-table-footer td {
    font-weight: 700;
}

/* =========================================================
   MATIKAN sticky thead bawaan MudTable (biar pakai clone)
   ========================================================= */
.customer-transaction-table .mud-table-container {
    overflow-y: unset;
}

.customer-transaction-table .mud-table-head {
    position: static !important;
    top: auto !important;
}

/* =========================================================
   Utilities (global)
   ========================================================= */
.nowrap {
    white-space: nowrap;
}

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

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

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

.tight-right {
    padding-right: 4px !important;
}

.tight-left {
    padding-left: 4px !important;
}

/* Customer wrap + hanging indent */

/* =========================================================
   Customer Transaction - Sticky Header Clone + Single Scroller (FULL)
   - Sticky header clone (separate table)
   - Single horizontal scroller source of truth = .ct-body-scroll
   - Header scroll allowed but synced by JS (ctSync)
   - Ctrl+Drag pan support (ctPan) via classes:
     ct-pan-ready, ct-pan-armed, ct-pan-dragging, ct-has-xscroll
   ========================================================= */

/* ====== config ====== */
:root {
    --ct-sticky-top: 300px;
    --ct-table-minw: 1490px; /* TOTAL lebar kolom (wajib px) */
    --ct-head-bg: gainsboro;
    --ct-head-border: #cfcfcf;
    --ct-zebra-even: #e8e8e8;
    --ct-zebra-odd: #ffffff;
    --ct-foot-bg: #c8c8c8;
}

/* =========================================================
   AREA WRAPPER
   ========================================================= */
.ct-table-area {
    width: 100%;
    position: relative;
}

/* =========================================================
   STICKY HEADER CLONE WRAPPER
   ========================================================= */
.ct-sticky-head {
    position: sticky;
    top: var(--ct-sticky-top);
    z-index: 200;
    background: #fff;
}

/* =========================================================
   SCROLL WRAPPERS (HEADER + BODY)
   ========================================================= */
.ct-head-scroll,
.ct-body-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* header: vertical hidden + hide scrollbar */
.ct-head-scroll {
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge lama */
}

    .ct-head-scroll::-webkit-scrollbar {
        height: 0 !important; /* Chrome/Safari */
    }

/* body: vertical visible (karena MudTable punya tinggi sendiri) */
.ct-body-scroll {
    overflow-y: visible;
}

    /* matikan double scroll bawaan MudTable container */
    .ct-body-scroll .mud-table-container {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

/* hide native horizontal scrollbar on body (use sticky bar instead) */
.customertransaction-page .ct-body-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.customertransaction-page .ct-body-scroll::-webkit-scrollbar {
    height: 0 !important;
}

.customerdividend-page .ct-body-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.customerdividend-page .ct-body-scroll::-webkit-scrollbar {
    height: 0 !important;
}

.customerranking-page .cr-body-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.customerranking-page .cr-body-scroll::-webkit-scrollbar {
    height: 0 !important;
}

/* =========================================================
   STICKY BOTTOM HORIZONTAL SCROLLBAR
   ========================================================= */
.ct-sticky-foot {
    position: sticky;
    bottom: 0;
    z-index: 190;
    background: #fff;
    padding-top: 2px;
}

.ct-foot-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    scrollbar-width: thin;
}

    .ct-foot-scroll::-webkit-scrollbar {
        height: 12px;
    }

.ct-foot-spacer {
    width: max(100%, var(--ct-table-minw, var(--cr-table-minw, 1200px)));
    height: 1px;
}

/* =========================================================
   TABLE LOCK
   - Pakai width: max(100%, minw) agar:
     desktop lebar => fit 100% (semua kolom kelihatan)
     layar kecil   => minw -> overflow -> bisa scroll/pan
   ========================================================= */

/* header clone table */
.ct-head-table {
    width: max(100%, var(--ct-table-minw)) !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    border-spacing: 0;
}

/* MudTable root/body (yang benar-benar dipakai) */
.ct-body-scroll .mud-table-root,
.ct-body-table .mud-table-root,
.ct-body-table table {
    width: max(100%, var(--ct-table-minw)) !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    border-spacing: 0;
}

/* hide thead bawaan MudTable (karena pakai clone) */
.ct-body-table thead {
    display: none !important;
}

/* =========================================================
   BOX-SIZING (WAJIB supaya width col presisi)
   ========================================================= */
.ct-head-table th,
.ct-body-table .mud-table-cell,
.ct-body-table .mud-table-head th,
.ct-body-table .mud-table-footer td {
    box-sizing: border-box;
}

/* =========================================================
   HEADER STYLE (CLONE)
   ========================================================= */
.ct-head-table th {
    padding: 6px 8px;
    background: var(--ct-head-bg);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--ct-head-border);
}

    /* align helper untuk header clone */
    .ct-head-table th.align-right {
        text-align: right;
    }

    .ct-head-table th.align-left {
        text-align: left;
    }

    .ct-head-table th.align-center {
        text-align: center;
    }

/* =========================================================
   BODY CELLS
   ========================================================= */
.ct-body-table .mud-table-cell {
    padding: 4px 8px;
}

/* zebra */
.ct-body-table .zebra-odd {
    background: var(--ct-zebra-odd);
}

.ct-body-table .zebra-even {
    background: var(--ct-zebra-even);
}

/* footer */
.ct-body-table tfoot tr,
.ct-body-table .mud-table-foot tr,
.ct-body-table .mud-table-footer tr {
    background: var(--ct-foot-bg);
}

.ct-body-table tfoot td,
.ct-body-table .mud-table-foot td,
.ct-body-table .mud-table-footer td {
    font-weight: 700;
}

/* =========================================================
   RATA KIRI: kolom 1-5
   - Header clone: th
   - Body: .mud-table-cell
   ========================================================= */
.ct-head-table thead th:nth-child(-n+5) {
    text-align: left !important;
}

.ct-body-table .mud-table-body .mud-table-cell:nth-child(-n+5) {
    text-align: left !important;
}

.ct-body-table tfoot td:nth-child(-n+5),
.ct-body-table .mud-table-foot td:nth-child(-n+5),
.ct-body-table .mud-table-footer td:nth-child(-n+5) {
    text-align: left !important;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.nowrap {
    white-space: nowrap;
}

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

.align-left {
    text-align: left !important;
}

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

.tight-right {
    padding-right: 4px !important;
}

.tight-left {
    padding-left: 4px !important;
}

/* customer wrap + hanging indent */


/* =========================================================
   ctPan cursor rules
   ========================================================= */
/* default: kalau tidak overflow, cursor normal */
.ct-body-scroll:not(.ct-has-xscroll),
.ct-head-scroll:not(.ct-has-xscroll) {
    cursor: default !important;
}

/* kalau overflow + siap pan + Ctrl ditekan */
.ct-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed,
.ct-head-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed {
    cursor: grab;
}

/* sedang dragging */
.ct-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging,
.ct-head-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging {
    cursor: grabbing;
}

/* =========================================================
   PRINTING
   ========================================================= */
@media print {
    .ct-sticky-head {
        position: static;
        top: auto;
    }

    .ct-head-scroll,
    .ct-body-scroll {
        overflow: visible !important;
    }

    .ct-sticky-foot {
        display: none;
    }
}

/* ======================================================================= */
/* CUSTOMER TRANSACTION - FORCE CELL CONTENT ALIGN TOP                      */
/* Scope: .customertransaction-page                                         */
/* ======================================================================= */

/* Semua td (MudTd) di body & footer: align top */
.customertransaction-page .ct-body-table .mud-table-body .mud-table-cell,
.customertransaction-page .ct-body-table tfoot .mud-table-cell,
.customertransaction-page .ct-body-table .mud-table-foot .mud-table-cell,
.customertransaction-page .ct-body-table .mud-table-footer .mud-table-cell {
    vertical-align: top !important;
}

    /* Jika ada td yang punya display:flex dari util/class lain, paksa start */
    .customertransaction-page .ct-body-table .mud-table-body .mud-table-cell.d-flex,
    .customertransaction-page .ct-body-table .mud-table-body .mud-table-cell[class*="d-flex"] {
        align-items: flex-start !important;
    }

/* Customer cell: pastikan bloknya juga align top */
.customertransaction-page .ct-body-table .customer-cell {
    vertical-align: top !important;
}

/* Kalau kamu pakai wrapper flex di customer (cust-flex), pastikan start */
.customertransaction-page .ct-body-table .cust-flex {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}

/* Jika ada line-height terlalu besar yang bikin terlihat "tengah", rapikan */
.customertransaction-page .ct-body-table .mud-table-body .mud-table-cell {
    line-height: 1.2;
}

/* ===========================
   CUSTOMER RANKING - Header
   =========================== */

.customerranking-page .cr-sticky-header {
    position: sticky;
    top: 130px;
    background: #fff;
    z-index: 100;
    width: 100%;
}

.customerranking-page .main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.customerranking-page .main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* Grid baris header */
.customerranking-page .cr-header-info-grid {
    padding-left: 8px !important;
}

.customerranking-page .cr-header-info-item {
    padding-top: 0 !important;
}

/* === 3 kolom header === */
.customerranking-page .cr-header-params {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1.05fr;
    column-gap: 40px;
    align-items: start;
}

    .customerranking-page .cr-header-params > .mud-grid-item {
        padding-top: 0 !important;
        min-width: 0;
    }

/* kanan nempel kanan pakai grid-native */
.customerranking-page .cr-header-right {
    display: block;
    justify-self: end;
    min-width: 0;
}

.customerranking-page .cr-header-left,
.customerranking-page .cr-header-mid {
    justify-self: stretch;
    min-width: 0;
}

/* KV GRID (dipakai kiri/tengah/kanan) */
.customerranking-page .cr-kv-grid {
    display: grid;
    grid-template-columns: 110px 14px 1fr; /* label | ":" | value */
    row-gap: 0;
    column-gap: 0;
    align-items: start;
    text-align: left;
    min-width: 0;
}

    .customerranking-page .cr-kv-grid > div {
        min-width: 0;
        padding: 2px 3px 0;
        line-height: 1.2;
    }

.customerranking-page .cr-kv-sep {
    width: 14px;
    text-align: right;
    padding: 2px 9px 2px 0;
    margin: 0;
    color: #555;
}

/* Responsif */
@media (max-width: 1200px) {
    .customerranking-page .cr-header-params {
        column-gap: 24px;
    }

    .customerranking-page .cr-kv-grid {
        grid-template-columns: 96px 14px 1fr;
    }
}

@media (max-width: 768px) {
    .customerranking-page .cr-sticky-header {
        top: 56px;
    }

    .customerranking-page .cr-header-params {
        display: block !important;
    }

    .customerranking-page .cr-header-right {
        justify-self: start;
        margin-top: 8px;
    }

    .customerranking-page .cr-kv-grid {
        grid-template-columns: 88px 14px 1fr;
    }
}


/* ===========================
   CUSTOMER RANKING - Entity Cell
   Customer / Marketing Officer / Account Officer
   (match Razor: .cr-entity-*)
   =========================== */

.customerranking-page .cr-entity-cell {
    white-space: normal !important;
}

/* grid untuk code + name (default kalau lupa pasang variant) */
.customerranking-page .cr-entity-grid {
    display: grid;
    grid-template-columns: 56px 1fr; /* default rapat */
    column-gap: 2px;
    align-items: start;
    min-width: 0;
}

/* code tidak wrap */
.customerranking-page .cr-entity-code {
    white-space: nowrap;
}

/* CustomerNo biasanya 5 digit (00000) -> butuh lebih lebar agar start name konsisten */
.customerranking-page .cr-entity-grid.cr-code-cust {
    grid-template-columns: 66px 1fr;
    column-gap: 4px;
}

/* OfficerNo biasanya 1-3 digit (143/370) -> cukup lebih kecil tapi tetap rata */
.customerranking-page .cr-entity-grid.cr-code-officer {
    grid-template-columns: 44px 1fr;
    column-gap: 4px;
}

/* penting: hormati \n agar "(RB)" turun baris; tetap wrap di kolom name */
.customerranking-page .cr-entity-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

.customerranking-page .cr-entity-subtext {
    display: block;
    font-size: 0.85em;
    color: #5f5f5f;
    white-space: normal;
}

/* kalau kode memang lebih panjang dari normal (manual override) */
.customerranking-page .cr-entity-grid.cr-code-wide {
    grid-template-columns: 90px 1fr;
}

/* Mobile */
@media (max-width: 768px) {
    .customerranking-page .cr-entity-grid {
        grid-template-columns: 52px 1fr;
        column-gap: 2px;
    }

        .customerranking-page .cr-entity-grid.cr-code-cust {
            grid-template-columns: 62px 1fr;
            column-gap: 3px;
        }

        .customerranking-page .cr-entity-grid.cr-code-officer {
            grid-template-columns: 40px 1fr;
            column-gap: 3px;
        }

        .customerranking-page .cr-entity-grid.cr-code-wide {
            grid-template-columns: 72px 1fr;
        }
}


/* ===========================
   CUSTOMER RANKING - Table basic
   =========================== */

.customerranking-page .cr-position-table .col-no,
.customerranking-page .cr-position-table th.col-no {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: right !important;
}

/* ===========================
   CUSTOMER RANKING - Sticky Header Clone + Single Scroller
   + FORCE TOP ALIGN (body + footer + entity cell)
   =========================== */

/* Custom properties khusus halaman Customer Ranking */
.customerranking-page {
    --cr-sticky-top: 310px; /* posisi header table clone (di bawah header info) */
    --cr-table-minw: 1540px; /* total lebar kolom (px), mode ALL */
    --cr-head-bg: gainsboro;
    --cr-head-border: #cfcfcf;
    --cr-zebra-even: #e8e8e8;
    --cr-zebra-odd: #ffffff;
    --cr-foot-bg: #c8c8c8;
}

    /* AREA WRAPPER */
    .customerranking-page .cr-table-area {
        width: 100%;
        position: relative;
    }

    /* STICKY HEADER CLONE WRAPPER (table header copy) */
    .customerranking-page .cr-sticky-head-table {
        position: sticky;
        top: var(--cr-sticky-top);
        z-index: 200;
        background: #fff;
    }

    /* SCROLL WRAPPERS */
    .customerranking-page .cr-head-scroll,
    .customerranking-page .cr-body-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden; /* vertikal di-hide di wrapper, biar ikut page scroll */
        -webkit-overflow-scrolling: touch;
    }

    /* header: hide scrollbar */
    .customerranking-page .cr-head-scroll {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge lama */
    }

        .customerranking-page .cr-head-scroll::-webkit-scrollbar {
            height: 0 !important; /* Chrome/Safari */
        }

    /* body: jangan bikin scroll sendiri, biar tinggi table ikut konten */
    .customerranking-page .cr-body-scroll .mud-table-container {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* TABLE LOCK: table header clone */
    .customerranking-page .cr-head-table {
        width: max(100%, var(--cr-table-minw)) !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* MudTable root/body (yang dipakai) */
    .customerranking-page .cr-body-table .mud-table-root,
    .customerranking-page .cr-body-table table {
        width: max(100%, var(--cr-table-minw)) !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* hide thead bawaan MudTable (karena pakai clone di atas) */
    .customerranking-page .cr-body-table thead {
        display: none !important;
    }

    /* BOX-SIZING */
    .customerranking-page .cr-head-table th,
    .customerranking-page .cr-body-table .mud-table-cell,
    .customerranking-page .cr-body-table .mud-table-head th,
    .customerranking-page .cr-body-table .mud-table-footer td {
        box-sizing: border-box;
    }

    /* HEADER STYLE (CLONE) */
    .customerranking-page .cr-head-table th {
        padding: 6px 8px;
        background: var(--cr-head-bg);
        font-weight: 600;
        white-space: nowrap;
        border-bottom: 1px solid var(--cr-head-border);
        vertical-align: top !important;
    }

    /* BODY CELLS */
    .customerranking-page .cr-body-table .mud-table-cell {
        padding: 4px 8px;
        vertical-align: top !important;
    }

    /* Ensure native td also aligns top */
    .customerranking-page .cr-body-table tbody td {
        vertical-align: top !important;
    }

    /* ZEBRA via RowClassFunc (zebra-odd/even) */
    .customerranking-page .cr-body-table .zebra-odd {
        background: var(--cr-zebra-odd);
    }

    .customerranking-page .cr-body-table .zebra-even {
        background: var(--cr-zebra-even);
    }

    /* FOOTER background */
    .customerranking-page .cr-body-table tfoot tr,
    .customerranking-page .cr-body-table .mud-table-foot tr,
    .customerranking-page .cr-body-table .mud-table-footer tr {
        background: var(--cr-foot-bg);
    }

    /* footer cell align top */
    .customerranking-page .cr-body-table tfoot td,
    .customerranking-page .cr-body-table .mud-table-foot td,
    .customerranking-page .cr-body-table .mud-table-footer td {
        vertical-align: top !important;
    }

    /* FINAL ALIGNMENT (header, body, footer) */
    .customerranking-page .cr-head-table th.align-right,
    .customerranking-page .cr-body-table .mud-table-body .mud-table-cell.align-right {
        text-align: right !important;
    }

    .customerranking-page .cr-body-table tfoot td.align-right,
    .customerranking-page .cr-body-table .mud-table-foot td.align-right,
    .customerranking-page .cr-body-table .mud-table-footer td.align-right {
        text-align: right !important;
    }

    /* Cursor rules untuk ctPan (drag horizontal) */
    .customerranking-page .cr-body-scroll:not(.ct-has-xscroll),
    .customerranking-page .cr-head-scroll:not(.ct-has-xscroll) {
        cursor: default !important;
    }

    .customerranking-page .cr-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed,
    .customerranking-page .cr-head-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed {
        cursor: grab;
    }

    .customerranking-page .cr-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging,
    .customerranking-page .cr-head-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging {
        cursor: grabbing;
    }

    /* ===========================
   OPTIONAL: sticky horizontal scrollbar footer (kalau dipakai)
   =========================== */
    .customerranking-page .ct-sticky-foot {
        position: sticky;
        bottom: 0;
        z-index: 150;
        background: #fff;
    }

    .customerranking-page .ct-foot-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .customerranking-page .ct-foot-spacer {
        width: max(100%, var(--cr-table-minw));
        height: 1px;
    }

    /* ===========================
   FORCE TOP ALIGN (ISI TABLE)
   - pastikan semua konten MudTd / td / footer benar-benar nempel atas
   - kurangi efek line-height bawaan typography MudBlazor
   =========================== */

    /* 1) Paksa align-content top untuk semua cell table */
    .customerranking-page .cr-body-table .mud-table-cell,
    .customerranking-page .cr-body-table tbody td,
    .customerranking-page .cr-body-table tfoot td,
    .customerranking-page .cr-body-table .mud-table-footer td {
        vertical-align: top !important;
    }

        /* 2) MudBlazor sering bungkus isi cell dengan div/span internal.
      Paksa wrapper itu juga align top dan tidak center */
        .customerranking-page .cr-body-table .mud-table-cell > div,
        .customerranking-page .cr-body-table .mud-table-cell > span,
        .customerranking-page .cr-body-table .mud-table-cell .mud-typography,
        .customerranking-page .cr-body-table .mud-table-cell .mud-typography-body1,
        .customerranking-page .cr-body-table .mud-table-cell .mud-typography-body2,
        .customerranking-page .cr-body-table .mud-table-cell .mud-typography-caption {
            vertical-align: top !important;
            align-self: flex-start !important;
        }

    /* 3) Jika ada wrapper display:flex dari MudTable cell, paksa start */
    .customerranking-page .cr-body-table .mud-table-cell {
        align-items: flex-start !important;
    }

    /* 4) Pastikan entity grid juga nempel atas (Customer / Officer) */
    .customerranking-page .cr-entity-cell,
    .customerranking-page .cr-entity-grid {
        vertical-align: top !important;
        align-items: flex-start !important;
    }

    /* 5) Kurangi spacing default typography supaya tidak terlihat "tengah" */
    .customerranking-page .cr-body-table .mud-table-cell,
    .customerranking-page .cr-body-table tbody td,
    .customerranking-page .cr-body-table tfoot td {
        line-height: 1.2 !important;
    }

/* PRINTING */
@media print {
    .customerranking-page .cr-sticky-head-table {
        position: static;
        top: auto;
    }

    .customerranking-page .cr-head-scroll,
    .customerranking-page .cr-body-scroll {
        overflow: visible !important;
    }

    .customerranking-page .ct-sticky-foot {
        display: none !important;
    }
}


/* ===== Coming Soon Page ===== */
.comingsoon-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-inline: 16px;
}

.comingsoon-title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.comingsoon-title {
    margin-bottom: .5rem; /* mb-2 */
    color: #000;
    font-family: 'sans-serif' !important; /* keep font family */
}

.comingsoon-title-line {
    width: 100%;
    height: 3px;
    background-color: #000;
    margin-top: 5px;
}

.comingsoon-subtitle {
    margin-top: 10px;
    margin-bottom: 1rem; /* mb-4 */
    color: #217EC1;
}

.comingsoon-subtext {
    font-family: 'sans-serif' !important; /* keep font family */
    letter-spacing: .3px;
    font-weight: bold;
}

.comingsoon-btn {
    margin-left: .5rem; /* ml-2 */
}

.comingsoon-btn-content {
    display: inline-flex;
    align-items: center;
}

.comingsoon-btn-label {
    margin-left: .5rem; /* ml-2 */
}

/* Powered by (kanan bawah) */
.comingsoon-powered {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.comingsoon-powered-text {
    font-size: .9rem;
    opacity: .85;
}

.comingsoon-powered-logo {
    height: 40px;
    margin-left: 5px;
}

/* Responsiveness (opsional) */
@media (max-width: 480px) {
    .comingsoon-title-line {
        height: 2px;
    }

    .comingsoon-powered {
        right: 8px;
        bottom: 8px;
    }
}

.custom-radio-group .mud-textfield-label, .custom-checkbox-group .mud-textfield-label, .custom-mudswitch-group .mud-textfield-label {
    font-size: 0.80rem;
    color: rgba(66, 66, 66, 1);
    margin-bottom: 5px;
    display: block;
    font-weight: 600;
}

.custom-mudswitch-group .mud-textfield-label {
    margin-bottom: 0px;
}

.custom-radio-group .mud-radio-group, .custom-checkbox-group .mud-checkbox, .custom-mudswitch-group .mud-input-control {
    display: flex;
    max-height: 2em;
    white-space: nowrap;
    font-size: 0.9em;
}

.mud-input-adornment .mud-info-text {
    color: #727272 !important;
    padding-bottom: 3px !important;
}

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

.text-white {
    color: white !important;
}

.text-dark {
    color: black !important;
}

.shares-balance-table .mud-table-container {
    overflow-y: unset;
}

.shares-balance-table .mud-table-head {
    position: sticky;
    top: 313px;
    z-index: 20;
}

.shares-balance-table .mud-table-head tr th {
    background-color: #EDEDED !important;
    border: none !important;
    box-shadow: none !important;
}

.shares-balance-table .mud-table-head tr {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}

/* Footer Total: #F0F0F0 */
.shares-table-footer {
    background-color: #F0F0F0 !important;
    font-weight: bold;
    border-top: 1px solid #ccc;
}

.footer-sep {
    border-right: 5px solid white !important; /* Ini triknya: border putih tebal */
}


.shares-balance-detail-table .mud-table-container {
    overflow-y: unset;
}

.shares-balance-detail-table .mud-table-head {
    position: sticky;
    top: 355px;
    z-index: 20;
}

    .shares-balance-detail-table .mud-table-head tr th {
        background-color: #EDEDED !important;
        border: none !important;
        box-shadow: none !important;
    }

    .shares-balance-detail-table .mud-table-head tr {
        box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 2;
    }

    .shares-balance-detail-table .mud-table-head .mud-table-cell {
        line-height: 1;
    }

/* Teks Shares Sebelah Kiri (Detail View): #B9B9B9 */
.detail-share-label {
    margin-right: 8px;
    color: #000;
    font-weight: bold;
}

/* Styling Container Detail Group */
.detail-group-container {
    margin-bottom: 0px !important;
    background-color: white;
    border-radius: 4px;
}

.detail-share-header-box {
    border: 1px solid #e0e0e0;
    border-left: 10px solid #B9B9B9;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-block;
    background-color: white;
    font-weight: bold;
    min-width: 20%;
}

.custom-bg-shares-detail {
    background: white;
    padding-bottom: 10px;
    position: sticky;
    top: 313px;
    z-index: 20;
}

.detail-share-value {
    color: #000;
    font-weight: bold;
}

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

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

/* Sentinel untuk Lazy Load */
.sentinel {
    height: 20px;
    width: 100%;
}

/* ======================================================================= */
/* STOCK POSITION - FULL CSS (Header align + Table + Summary)              */
/* Scope: .stockposition-page                                              */
/* ======================================================================= */

/* =========== PAGE WRAPPER =============== */
.stockposition-page .main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.stockposition-page .main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* =========== STICKY HEADER WRAPPER =============== */
.stockposition-sticky-header {
    position: sticky;
    top: 130px; /* sesuaikan dgn tinggi AppBar desktop */
    background: #fff;
    z-index: 90;
    width: 100%;
}

/* mobile appbar */
@media (max-width: 768px) {
    .stockposition-sticky-header {
        top: 56px;
    }
}

/* =========== HEADER INFO GRID (3 columns) =============== */
/* MudGrid item padding bawaan -> rapikan */
.stockposition-page .header-info-grid {
    padding-left: 8px !important;
}

.stockposition-page .header-info-item {
    padding-top: 0 !important;
}

/* ======================================================================= */
/* HEADER INFO - MAKE ALL THREE COLUMNS EXACTLY SAME (like date/time/print) */
/* Pattern: label | ":" | value                                            */
/* ======================================================================= */

.stockposition-page .print-info-grid {
    width: 100%;
    display: grid;
    grid-template-columns: var(--sp-hdr-label-w, 130px) var(--sp-hdr-sep-w, 14px) 1fr;
    row-gap: 4px;
    column-gap: 0;
    align-items: start;
}

/* ":" column */
.stockposition-page .print-info-separator {
    text-align: center;
    white-space: nowrap;
}

/* value column - allow wrap, keep ":" fixed */
.stockposition-page .print-info-grid > div:nth-child(3n) {
    overflow-wrap: anywhere;
}

/* optional: if you want right align ONLY for values in the 3rd column block */
/*
.stockposition-page .header-info-item:last-child .print-info-grid > div:nth-child(3n) {
    text-align: right;
}
*/

/* responsive: shrink label column */
@media (max-width: 768px) {
    .stockposition-page {
        --sp-hdr-label-w: 95px;
        --sp-hdr-sep-w: 14px;
    }
}

/* ======================================================================= */
/* TABLE - GLOBAL STICKY (BIARKAN)                                          */
/* ======================================================================= */

/* Dipakai tabel lain: jangan dihapus */
.sp-table .mud-table-container {
    overflow-y: unset;
}

/* sesuaikan offset dengan tinggi header lengket di atasnya */
.sp-table .mud-table-head {
    position: sticky;
    top: 300px; /* samakan pola dengan halaman lain */
    z-index: 100;
    background: gainsboro;
}

.sp-table thead th {
    background: gainsboro;
}

/* kalau mau hilangkan garis bawah di row kosong (untuk tabel yg pakai sp-mudtable) */
.sp-mudtable .mud-table-empty-row {
    border-bottom: none;
    background: #ffffff;
}

/* ======================================================================= */
/* STOCK POSITION TABLE (class: stock-position-table)                       */
/* ======================================================================= */

.stock-position-table {
    width: 100%;
}

    /* HEADER: warna & feel */
    .stock-position-table .mud-table-head tr th {
        background-color: #EDEDED !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px 12px;
        line-height: 1.2;
        font-weight: 600;
        color: #1f2937;
    }

    /* shadow baris header + layering di atas body */
    .stock-position-table .mud-table-head tr {
        box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 2;
    }

        /* rounded kiri-kanan */
        .stock-position-table .mud-table-head tr th:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            overflow: hidden;
        }

        .stock-position-table .mud-table-head tr th:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            overflow: hidden;
        }

    /* container table */
    .stock-position-table .mud-table-container {
        overflow-y: unset;
    }

    /* sticky head (override if needed) */
    .stock-position-table .mud-table-head {
        position: sticky;
        top: 300px;
        z-index: 100;
    }

    /* align util */
    .stock-position-table .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .stock-position-table .center {
        text-align: center;
    }

    .stock-position-table .align-left {
        text-align: left;
    }

    /* row kosong jangan kena zebra / garis bawah */
    .stock-position-table .mud-table-empty-row {
        border-bottom: none;
        background-color: #FFFFFF;
    }

    /* ===== Body compact & zebra (opsional, aman) ===== */
    .stock-position-table .mud-table-body .mud-table-row .mud-table-cell {
        padding: 6px 12px;
        line-height: 1.15;
        font-size: .82rem;
        border-bottom: 1px solid #E1E4EA;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    .stock-position-table .mud-table-body tr:nth-child(odd) {
        background: #FFFFFF;
    }

    .stock-position-table .mud-table-body tr:nth-child(even) {
        background: #F3F5F8;
    }

    /* ===== Footer ===== */
    .stock-position-table tfoot.mud-table-foot .mud-table-row .mud-table-cell {
        padding: 10px 12px;
        line-height: 1.2;
        font-size: 0.80rem;
        height: auto;
        min-height: 0;
        background: #EDEDED;
        color: #1f2937;
        border-top: 1px solid #CFD4DA;
        vertical-align: middle;
    }

    /* Footnote kiri */
    .stock-position-table tfoot.mud-table-foot td.ft-note {
        font-weight: 400;
        white-space: normal;
    }

    /* label "Total" & nilai total */
    .stock-position-table tfoot.mud-table-foot td.ft-total-label,
    .stock-position-table tfoot.mud-table-foot td.ft-total-val {
        font-weight: 700;
    }

    /* Label "Total" rata kanan + separator kecil */
    .stock-position-table tfoot.mud-table-foot td.ft-total-label {
        text-align: right;
        border-right: 6px solid #fff;
    }

    /* Kolom angka di footer selalu kanan */
    .stock-position-table tfoot.mud-table-foot td.num {
        text-align: right;
    }

    /* Angka pertama setelah label: garis kiri tipis */
    .stock-position-table tfoot.mud-table-foot td.ft-total-first {
        border-left: 1px solid #CFD4DA;
    }

    /* ===== Padding khusus row terakhir body & footer ===== */
    .stock-position-table .mud-table-root > .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell,
    .stock-position-table .mud-table-root > .mud-table-foot:last-child > .mud-table-row:last-child > .mud-table-cell {
        padding: 6px 24px 6px 16px;
    }

    /* ===== NoRecordsContent ===== */
    .stock-position-table .mud-table-empty-row,
    .stock-position-table .mud-table-empty-row > td {
        background: #fff !important;
    }

        .stock-position-table .mud-table-empty-row > td {
            text-align: center !important;
            padding: 16px 8px !important;
            border-bottom: none !important;
        }

    .stock-position-table .no-stock-cell {
        width: 100%;
        font-weight: 600;
        opacity: .8;
    }

/* ======================================================================= */
/* STOCK POSITION (SUPER-COMPACT) – untuk tabel lain yang masih pakai       */
/* ======================================================================= */

.sp-mudtable {
    width: 100%;
}

    /* Nonaktifkan sticky per-<th> */
    .sp-mudtable thead.mud-table-head th.mud-table-cell {
        position: static !important;
        top: auto !important;
        padding: 4px 8px;
        line-height: 1.05;
        font-weight: 600;
        background: #E9EAED;
        color: #1f2937;
        border-bottom: 1px solid #CFD4DA;
    }

    /* BODY compact */
    .sp-mudtable .mud-table-body .mud-table-row .mud-table-cell {
        padding: 2px 8px;
        line-height: 1.0;
        font-size: .78rem;
        border-bottom: 1px solid #E1E4EA;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    /* Zebra */
    .sp-mudtable .mud-table-body tr:nth-child(odd) {
        background: #FFFFFF;
    }

    .sp-mudtable .mud-table-body tr:nth-child(even) {
        background: #F3F5F8;
    }

    /* Util */
    .sp-mudtable .num {
        text-align: right;
    }

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

    /* Footer compact */
    .sp-mudtable tfoot.mud-table-foot .mud-table-row .mud-table-cell {
        padding: 2px 6px !important;
        line-height: 1 !important;
        font-size: .78rem !important;
        height: auto;
        min-height: 0;
        background: #E9EAED;
        color: #1f2937;
        border-top: 1px solid #CFD4DA;
        vertical-align: middle;
    }

    .sp-mudtable tfoot.mud-table-foot td.ft-note {
        font-weight: 400 !important;
        white-space: normal;
    }

    .sp-mudtable tfoot.mud-table-foot td.ft-total-label,
    .sp-mudtable tfoot.mud-table-foot td.ft-total-val {
        font-weight: 700 !important;
    }

    .sp-mudtable tfoot.mud-table-foot td.ft-total-label {
        text-align: right !important;
        border-right: 6px solid #fff;
    }

    .sp-mudtable tfoot.mud-table-foot td.num {
        text-align: right !important;
    }

    .sp-mudtable tfoot.mud-table-foot td.ft-total-first {
        border-left: 1px solid #CFD4DA;
    }

/* ======================================================================= */
/* SUMMARY (dua kolom, divider tengah)                                      */
/* ======================================================================= */

.sp-summary-grid {
    margin-top: 8px;
    padding: 8px 0;
    background: #fff;
    border-top: 1px solid #d7dbe0;
    border-bottom: 1px solid #d7dbe0;
    font-size: .80rem;
    line-height: 1.12;
    color: #1f2937;
}

    /* divider tengah */
    .sp-summary-grid .pr-col {
        padding-right: 12px;
        position: relative;
    }

        .sp-summary-grid .pr-col::after {
            content: "";
            position: absolute;
            top: -8px;
            bottom: -8px;
            right: 0;
            width: 1px;
            background: #d7dbe0;
        }

    .sp-summary-grid .pl-col {
        padding-left: 12px;
    }

        /* K : ":" : V — lebar label sama di kiri & kanan */
        .sp-summary-grid .pr-col .kv,
        .sp-summary-grid .pl-col .kv {
            display: grid;
            align-items: center;
            gap: 6px;
            margin: 3px 0;
            grid-template-columns: 230px 14px 1fr;
        }

    /* teks & perataan */
    .sp-summary-grid .kv .k {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sp-summary-grid .kv .c {
        text-align: center;
        color: #6b7280;
    }

    .sp-summary-grid .kv .v {
        text-align: right;
        font-variant-numeric: tabular-nums;
        padding-bottom: 2px;
    }

    /* garis nilai summary */
    .sp-summary-grid .pr-col .kv .v {
        border-bottom: 1px solid #d7dbe0;
    }

    .sp-summary-grid .pr-col .kv.kv-spacer .v {
        border-bottom: none;
    }

    .sp-summary-grid .pl-col .kv .v {
        border-bottom: 1px solid #d7dbe0;
    }

    /* indent sub-item */
    .sp-summary-grid .kv.indent .k {
        padding-left: 18px;
    }

    /* spacer */
    .sp-summary-grid .kv.kv-spacer {
        grid-template-columns: 1fr;
        height: 10px;
        margin: 6px 0;
    }

        .sp-summary-grid .kv.kv-spacer .k,
        .sp-summary-grid .kv.kv-spacer .c,
        .sp-summary-grid .kv.kv-spacer .v {
            display: none;
        }

/* responsive */
@media (max-width: 900px) {
    .sp-summary-grid .pr-col::after {
        display: none;
    }

    .sp-summary-grid .pr-col {
        padding-right: 0;
    }

    .sp-summary-grid .pl-col {
        padding-left: 0;
    }
}

.report-error .mud-input-helper-text.mud-input-error {
    visibility: hidden;
    font-size: 0 !important;
    white-space: pre-wrap;
}

.logout-btn-container {
    position: fixed;
    left: 0;
    top: 0;
}

.logout-btn-container svg {
    fill: #d75c77 !important;
}

.logout-btn-container p {
    color: #d75c77 !important;
}

#qrCodeContainer img {
    margin: 0 auto;
}

/* OTP Input Styling */
.otp-input input {
    text-align: center;
    letter-spacing: 15px;
    font-size: 24px;
    font-family: monospace;
}

/* Remove Arrows/Spinners from number input */
.otp-input input[type=number]::-webkit-inner-spin-button,
.otp-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.otp-input input[type=number] {
    -moz-appearance: textfield;
}

.back-otp-login {
    margin-top: 20px;
    padding: 8px 11px;
    margin-right: 15px;
}


/* ===========================
   ACTIVITY LOG REPORT - Header (scoped .al-)
   =========================== */

/* Header lengket di dalam Paper */
.al-sticky-header {
    position: sticky;
    top: 130px; /* sesuaikan dgn tinggi AppBar desktop */
    background: #fff;
    z-index: 200;
    width: 100%;
}

/* Spasi halaman */
.al-page .al-main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.al-page .al-main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* Grid baris header */
.al-header-info-grid {
    padding-left: 8px !important;
}

.al-header-info-item {
    padding-top: 0 !important;
}

/* Tabel info */
.al-info-table {
    width: 100%;
    border: none;
    border-collapse: collapse;
}

    .al-info-table .al-info-row {
        line-height: 1.2;
    }

    .al-info-table td {
        vertical-align: top;
        padding: 2px 3px 0;
        border: none;
    }

.al-info-label-narrow {
    width: 110px;
    white-space: nowrap;
    font-weight: 600;
}

.al-info-separator {
    width: 14px;
    text-align: right;
    padding: 2px 9px 2px 0;
    color: #555;
}

.al-info-value {
    word-break: break-word;
}

/* Info print di kanan */
.al-print-info-grid {
    display: inline-grid;
    grid-template-columns: max-content max-content auto;
    row-gap: 6px;
    column-gap: 0;
    text-align: left;
    height: fit-content;
}

.al-print-info-separator {
    margin: 0 6px;
}

/* Override padding bawah header Activity Log */
.al-header-padding {
    padding-bottom: 5px !important;
}


/* Responsif */
@media (max-width: 1200px) {
    .al-info-label-narrow {
        width: 96px;
    }
}

@media (max-width: 768px) {
    .al-sticky-header {
        top: 56px; /* untuk AppBar mobile */
    }

    .al-info-label-narrow {
        width: 88px;
    }
}

/* ===================================================================
   ROOT CONTAINER ACTIVITY LOG PAGE
   =================================================================== */

.activitylog-page.main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* ===================================================================
   EXPANSION PANEL PER TANGGAL (mirip SharesActivity)
   =================================================================== */

.activitylog-panel {
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fafafa;
}

    /* Header panel sticky di bawah header utama (ikut height header report-mu) */
    .activitylog-panel.content-header .mud-expand-panel-header {
        min-height: 0px !important;
        padding: 2px 24px !important;
        position: sticky;
        top: 313px; /* sesuaikan kalau header utama berubah tinggi */
        z-index: 20;
        background-color: inherit;
        border-bottom: 1px solid #dddddd;
    }

/* Panel style sama seperti SharesActivity */
.activitylog-page .custom-expansion-panel {
    border-radius: 10px !important;
    background: #EDEDED;
}

/* Title content (Date + count) */
.activitylog-page .expansion-title-content {
    align-items: center;
    justify-content: space-between;
}

.activitylog-page .activitylog-count-text {
    font-size: 0.9rem;
    color: #666;
}

/* Child content (body putih di dalam kartu abu-abu) */
.activitylog-page .expansion-child-content {
    background: white;
    padding: 0 16px 16px;
    border-radius: 10px !important;
}

/* Hilangkan padding default MudExpansionPanel content */
.no-gutter-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0 !important;
    margin: 0 !important;
}

/* Kalau panel expanded, kasih border bawah (opsional, sama spt SharesActivity) */
.mud-expand-panel.mud-panel-expanded {
    border-bottom: 1px solid #ccc !important;
}

/* ===================================================================
   TABEL ACTIVITY LOG (pola sama SharesActivity no-gainloss-table)
   =================================================================== */

.activitylog-page .activitylog-table {
    width: 100%;
    border-collapse: collapse;
}

    .activitylog-page .activitylog-table .mud-table-head {
      /*  background-color: gainsboro;*/
    }

    .activitylog-page .activitylog-table .mud-table-row .mud-table-cell {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    /* Header cell */
    .activitylog-page .activitylog-table thead .mud-table-cell {
        font-weight: 600;
    }

/* Border bawah seperti no-gainloss-table */
.activitylog-page .activitylog-table {
    border-bottom: 1px solid #e0e0e0;
}

/* Zebra row (kalau mau dipakai, tinggal tambahkan class di <tr>) */
.activitylog-page .zebra-odd {
    background-color: #ffffff;
}

.activitylog-page .zebra-even {
    background-color: #E8E8E8; /* ✅ warna baris genap */
}

/*.activitylog-page .activitylog-table td:first-child,
.activitylog-page .activitylog-table th:first-child {
    text-align: right;
    padding-right: 8px;
}
*/

/* Align utilitas (reuse saja seperti SharesActivity) */
.activitylog-page .align-left {
    text-align: left;
}

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

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

/* Wrap teks panjang di kolom param / notes */
.activitylog-page .wrap-normal-break {
    white-space: normal;
    word-break: break-word;
}

/* preserve newline, tetap wrap */
.activitylog-page .wrap-preline {
    white-space: pre-line;
    word-break: break-word;
}

/* Untuk SessionId biar putus di mana saja */
.activitylog-page .wrap-break-all {
    white-space: normal;
    word-break: break-all;
}

/* ===================================================================
   SENTINEL (INFINITE SCROLL)
   =================================================================== */

.activitylog-page .sentinel-container {
    width: 100%;
}

.activitylog-page .sentinel {
    width: 100%;
    height: 1px;
}

.locked-action {
    color: #228722;
    text-align: center;
}

/* =========================================================
   ACTIVITY LOG - Table content vertical align TOP
   ========================================================= */

/* Target semua cell di tabel (header + body) */
.activitylog-page .activitylog-table th,
.activitylog-page .activitylog-table td,
.activitylog-page .activitylog-table .mud-table-cell {
    vertical-align: top !important;
}

/* Optional: rapikan line-height biar konsisten saat multiline */
.activitylog-page .activitylog-table .mud-table-cell {
    line-height: 1.2;
}

.tradingsummary-page .main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.tradingsummary-page .main-content-padding {
    padding: 0 16px 0 16px !important;
}

/* Grid baris header */
.tradingsummary-page .header-info-grid {
    padding-left: 3px !important;
}

.tradingsummary-pagee .header-info-item {
    padding-top: 0 !important;
}

.tradingsummary-panel {
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    background-color: #fafafa;
    margin-bottom: 0;
}

.tradingsummary-panel.content-header .mud-expand-panel-header {
    min-height: 0px !important;
    padding: 2px 24px !important;
    position: sticky;
    border-radius: 8px 8px 0 0;
    top: 295px;
    z-index: 20;
    background: #e6e6e6;
}

.tradingsummary-container .mud-expand-panel.mud-panel-expanded {
    margin-bottom: 0;
}

.tradingsummary-container .mud-simple-table table * tr > td, .mud-simple-table table * tr th, .tradingsummary-container .tradingsummary-total table * tr > td, .tradingsummary-total table * tr th {
    display: table-cell;
    padding: 6px 24px 6px 16px;
    padding-inline-start: 16px;
    text-align: right;
    padding-inline-end: 24px;
    font-weight: 900;
}

.tradingsummary-container .mud-simple-table table * tr > td:last-child, .tradingsummary-container .tradingsummary-total table * tr > td:last-child {
    padding-right: 16px;
}

.tradingsummary-container .mud-simple-table table * tr > td:first-child, .tradingsummary-container .tradingsummary-total table * tr > td:first-child {
    text-align: left;
}

.tradingsummary-total {
    padding: 0 26px;
    background: #f6f6f6;
}

.tradingsummary-total td {
    font-weight: bold;
}

.tradingsummary-sticky-header {
    position: sticky;
    top: 130px; /* sesuaikan dgn tinggi AppBar desktop */
    background: #fff;
    z-index: 90;
    width: 100%;
}

.tradingsummary-sticky-header .mud-grid-item {
    padding: 20px 20px 0 20px !important;
}

.tradingsummary-container .expansion-child-content {
    padding: 8px 11px;
    background: white;
}

.tradingsummary-subtotal {
    padding: 0 11px;
    background: #f6f6f6;
}


.tradingsummary-container .mud-table-root > .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}


.tradingsummary-panel.content-header .mud-expand-panel-header {
    min-height: 0px !important;
    padding: 5px 0 0 0 !important;
    position: sticky;
    border-radius: 8px 8px 0 0;
    top: 295px;
    z-index: 20;
    background: #e6e6e6;
}

.tradingsummary-panel.content-header .mud-expand-panel-header .d-flex {
    padding: 5px 20px 5px 24px;
}

.tradingsummary-panel.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon {
    transform: rotate(-90deg);
    position: absolute;
    font-size: 2.3rem;
    right: 0;
    top: 0;
}

.tradingsummary-header-panel .mud-simple-table {
    background: #F6F6F6;
    padding: 4px 24px;
    width: 100%;
    /*margin-top: -5px;*/
}

.trading-summary-subtotoal-content {
    width: 120px;
    display: inline-block;
}

/* =========================================================
   Customer Dividend - Header (inside Paper)
   ========================================================= */
    /* Sticky header info (yang di atas tabel) */
    .customerdividend-sticky-header {
    position: sticky;
    top: 110px; /* sesuaikan dgn tinggi AppBar desktop */
    background: #fff;
    z-index: 80;
    width: 100%;
}

/* Spasi halaman */
.customerdividend-page .main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.customerdividend-page .main-content-padding {
    padding: 0 16px 16px 16px !important;
}

/* Grid baris header */
.customerdividend-page .header-info-grid {
    padding-left: 8px !important;
}

.customerdividend-page .header-info-item {
    padding-top: 0 !important;
}

/* Tabel info (kiri & kanan) */
.customerdividend-page .info-table {
    border: none;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 15px;
}

.customerdividend-page .info-table .info-row {
    line-height: 1.2;
}

.customerdividend-page .info-table td {
    vertical-align: top;
    padding: 2px 3px 0;
    border: none;
}

.info-label-narrow {
    width: 80px;
    white-space: nowrap;
    font-weight: 600;
}

.info-label-wide {
    width: 120px;
}

.info-separator {
    width: 10px;
    text-align: right;
    padding: 2px 9px 2px 0;
    color: #555;
}

.info-value {
    word-break: break-word;
}

/* Info cetak (kanan) */
.print-info-grid {
    display: inline-grid;
    grid-template-columns: max-content max-content auto; /* label : ":" : value */
    row-gap: 4px;
    column-gap: 0;
    text-align: left;
    height: fit-content;
}

    .print-info-grid.mt-4 {
        margin-top: 12px;
    }

.print-info-separator {
    margin: 0 6px;
}

/* Responsif header */
@media (max-width: 768px) {
    .customerdividend-sticky-header {
        top: 56px; /* AppBar mobile */
    }

    .info-label-narrow {
        width: 72px;
    }

    .info-label-wide {
        width: 110px;
    }
}

/* =========================================================
   Tabel Customer Dividend (Compact)
   ========================================================= */

.customer-dividend-table {
    width: 100%;
}

    /* Body padding compact */
    .customer-dividend-table .mud-table-row .mud-table-cell {
        padding: 4px 8px;
    }

    /* Header padding compact */
    .customer-dividend-table thead th,
    .customer-dividend-table .mud-table-head th {
        padding: 6px 8px;
        line-height: 1.1;
    }

    /* Zebra rows */
    .customer-dividend-table .mud-table-body tr:nth-child(odd) {
        background: #FFFFFF;
    }

    .customer-dividend-table .mud-table-body tr:nth-child(even) {
        background: #E8E8E8;
    }

    /* Footer "Total" background & weight */
    .customer-dividend-table tfoot tr,
    .customer-dividend-table .mud-table-foot tr,
    .customer-dividend-table .mud-table-footer tr {
        background: #C8C8C8;
    }

    .customer-dividend-table tfoot td,
    .customer-dividend-table .mud-table-foot td,
    .customer-dividend-table .mud-table-footer td {
        font-weight: 700;
    }

    /* Matikan sticky thead bawaan MudTable (biar pakai clone) */
    .customer-dividend-table .mud-table-container {
        overflow-y: unset;
    }

    .customer-dividend-table .mud-table-head {
        position: static !important;
        top: auto !important;
    }

/* =========================================================
   Utilities (dipakai di Razor)
   ========================================================= */
.nowrap {
    white-space: nowrap;
}

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

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

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

.tight-right {
    padding-right: 4px !important;
}

.tight-left {
    padding-left: 4px !important;
}

/* Customer wrap + hanging indent */
.customer-cell {
    white-space: normal !important;
    box-sizing: border-box;
}

    .customer-cell .cust-flex {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        min-width: 0;
    }

    .customer-cell .cust-code {
        flex: 0 0 auto;
        min-width: 56px;
        white-space: nowrap;
    }

    .customer-cell .cust-name {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }


/* =========================================================
   Customer Dividend - Sticky Header Clone + Single Scroller
   ========================================================= */

/* Custom properties khusus halaman ini */
.customerdividend-page {
    --ct-sticky-top: 290px; /* posisi header table clone */
    --ct-table-minw: 1400px; /* total lebar kolom (px), paksa overflow */
    --ct-head-bg: gainsboro;
    --ct-head-border: #cfcfcf;
    --ct-zebra-even: #e8e8e8;
    --ct-zebra-odd: #ffffff;
    --ct-foot-bg: #c8c8c8;
}

    /* AREA WRAPPER */
    .customerdividend-page .ct-table-area {
        width: 100%;
        position: relative;
    }

    /* STICKY HEADER CLONE WRAPPER */
    .customerdividend-page .ct-sticky-head {
        position: sticky;
        top: var(--ct-sticky-top);
        z-index: 200;
        background: #fff;
    }

    /* SCROLL WRAPPERS */
    .customerdividend-page .ct-head-scroll,
    .customerdividend-page .ct-body-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden; /* ⬅️ vertikal di-HIDE untuk kedua wrapper */
        -webkit-overflow-scrolling: touch;
    }

    /* header: hide scrollbar */
    .customerdividend-page .ct-head-scroll {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge lama */
    }

        .customerdividend-page .ct-head-scroll::-webkit-scrollbar {
            height: 0 !important; /* Chrome/Safari */
        }

    /* body: jangan bikin scroll sendiri, biar ikut page scroll */
    .customerdividend-page .ct-body-scroll {
        /* overflow-y: hidden sudah di atas */
    }

        /* matikan double scroll bawaan MudTable container */
        .customerdividend-page .ct-body-scroll .mud-table-container {
            overflow-x: visible !important;
            overflow-y: visible !important; /* ⬅️ biar tinggi table ikut konten, bukan bikin scroll sendiri */
        }

    /* TABLE LOCK: table header clone */
    .customerdividend-page .ct-head-table {
        width: max(100%, var(--ct-table-minw)) !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* MudTable root/body (yang dipakai) */
    .customerdividend-page .ct-body-table .mud-table-root,
    .customerdividend-page .ct-body-table table {
        width: max(100%, var(--ct-table-minw)) !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* hide thead bawaan MudTable (karena pakai clone) */
    .customerdividend-page .ct-body-table thead {
        display: none !important;
    }

    /* BOX-SIZING */
    .customerdividend-page .ct-head-table th,
    .customerdividend-page .ct-body-table .mud-table-cell,
    .customerdividend-page .ct-body-table .mud-table-head th,
    .customerdividend-page .ct-body-table .mud-table-footer td {
        box-sizing: border-box;
    }

    /* HEADER STYLE (CLONE) */
    .customerdividend-page .ct-head-table th {
        padding: 6px 8px;
        background: var(--ct-head-bg);
        font-weight: 600;
        white-space: nowrap;
        border-bottom: 1px solid var(--ct-head-border);
    }

    /* BODY CELLS */
    .customerdividend-page .ct-body-table .mud-table-cell {
        padding: 4px 8px;
    }

    /* zebra pakai class RowClassFunc */
    .customerdividend-page .ct-body-table .zebra-odd {
        background: var(--ct-zebra-odd);
    }

    .customerdividend-page .ct-body-table .zebra-even {
        background: var(--ct-zebra-even);
    }

    /* footer background (font-weight sudah di atas) */
    .customerdividend-page .ct-body-table tfoot tr,
    .customerdividend-page .ct-body-table .mud-table-foot tr,
    .customerdividend-page .ct-body-table .mud-table-footer tr {
        background: var(--ct-foot-bg);
    }

    /* =========================================================
   FINAL ALIGNMENT (header, body, footer)
   ========================================================= */

    /* HEADER – rata kiri: 1 Pay, 2 Cum, 3 Ex, 5 Customer, 6 Shares, 12 Acc Status */
    .customerdividend-page .ct-head-table th:nth-child(1),
    .customerdividend-page .ct-head-table th:nth-child(2),
    .customerdividend-page .ct-head-table th:nth-child(3),
    .customerdividend-page .ct-head-table th:nth-child(5),
    .customerdividend-page .ct-head-table th:nth-child(6),
    .customerdividend-page .ct-head-table th:nth-child(12) {
        text-align: left !important;
    }

    /* HEADER – left: 7 I/A */
    .customerdividend-page .ct-head-table th:nth-child(7) {
        text-align: left !important;
    }

    /* HEADER – right: 4 Dividend, 8 ExistingVol, 9 Div, 10 Tax, 11 NetDiv */
    .customerdividend-page .ct-head-table th:nth-child(4),
    .customerdividend-page .ct-head-table th:nth-child(8),
    .customerdividend-page .ct-head-table th:nth-child(9),
    .customerdividend-page .ct-head-table th:nth-child(10),
    .customerdividend-page .ct-head-table th:nth-child(11) {
        text-align: right !important;
    }

    /* BODY – ikut header align */

    /* Left: 1,2,3,5,6,12 */
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(1),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(2),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(3),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(5),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(6),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(12) {
        text-align: left !important;
    }

    /* Left: 7 */
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(7) {
        text-align: left !important;
    }

    /* Right: 4,8,9,10,11 */
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(4),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(8),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(9),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(10),
    .customerdividend-page .ct-body-table .mud-table-body .mud-table-cell:nth-child(11) {
        text-align: right !important;
    }

    /* FOOTER – kolom 6 "Total" rata kiri, kolom 9–11 angka rata kanan */
    .customerdividend-page .ct-body-table tfoot td:nth-child(6),
    .customerdividend-page .ct-body-table .mud-table-foot td:nth-child(6),
    .customerdividend-page .ct-body-table .mud-table-footer td:nth-child(6) {
        text-align: left !important;
    }

    .customerdividend-page .ct-body-table tfoot td:nth-child(9),
    .customerdividend-page .ct-body-table tfoot td:nth-child(10),
    .customerdividend-page .ct-body-table tfoot td:nth-child(11),
    .customerdividend-page .ct-body-table .mud-table-foot td:nth-child(9),
    .customerdividend-page .ct-body-table .mud-table-foot td:nth-child(10),
    .customerdividend-page .ct-body-table .mud-table-foot td:nth-child(11),
    .customerdividend-page .ct-body-table .mud-table-footer td:nth-child(9),
    .customerdividend-page .ct-body-table .mud-table-footer td:nth-child(10),
    .customerdividend-page .ct-body-table .mud-table-footer td:nth-child(11) {
        text-align: right !important;
    }

    /* Pastikan sel footer yang punya class .align-right benar-benar rata kanan */
    .customerdividend-page .ct-body-table tfoot td.align-right,
    .customerdividend-page .ct-body-table .mud-table-foot td.align-right,
    .customerdividend-page .ct-body-table .mud-table-footer td.align-right {
        text-align: right !important;
    }

    /* ctPan cursor rules (drag horizontal) */
    .customerdividend-page .ct-body-scroll:not(.ct-has-xscroll),
    .customerdividend-page .ct-head-scroll:not(.ct-has-xscroll) {
        cursor: default !important;
    }

    .customerdividend-page .ct-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed,
    .customerdividend-page .ct-head-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed {
        cursor: grab;
    }

    .customerdividend-page .ct-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging,
    .customerdividend-page .ct-head-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging {
        cursor: grabbing;
    }

/* PRINTING */
@media print {
    .customerdividend-page .ct-sticky-head {
        position: static;
        top: auto;
    }

    .customerdividend-page .ct-head-scroll,
    .customerdividend-page .ct-body-scroll {
        overflow: visible !important;
    }
}

/* ======================================================================= */
/* CUSTOMER (Dividend) - Hanging indent like screenshot                     */
/* Scope: .customerdividend-page                                            */
/* ======================================================================= */

.customerdividend-page .ct-body-table .customer-cell {
    white-space: normal !important; /* boleh wrap */
    vertical-align: top !important; /* nempel atas */
    box-sizing: border-box;
}

    /* container: 2 kolom (code | name) tapi tetap satu cell */
    .customerdividend-page .ct-body-table .customer-cell .cust-flex {
        display: flex;
        align-items: flex-start; /* baris mulai dari atas */
        gap: 10px;
        min-width: 0; /* allow wrap */
    }

    /* nomor: fixed width agar nama selalu mulai di posisi sama */
    .customerdividend-page .ct-body-table .customer-cell .cust-code {
        flex: 0 0 52px; /* sesuaikan sampai mirip screenshot */
        width: 52px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* nama: wrap, baris ke-2 tetap sejajar awal nama (hanging) */
    .customerdividend-page .ct-body-table .customer-cell .cust-name {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.15;
    }

/* kalau ada class zebra yang bikin align middle via util lain */
.customerdividend-page .ct-body-table .mud-table-body .mud-table-cell {
    vertical-align: top !important;
}



/*AOMO PERFORMANCE*/
.aomoreferrerperformance-page .main-content-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

.aomoreferrerperformance-page .main-content-padding {
    padding: 0 16px 0 16px !important;
}

/* Grid baris header */
.aomoreferrerperformance-page .header-info-grid {
    padding-left: 3px !important;
}

.aomoreferrerperformance-pagee .header-info-item {
    padding-top: 0 !important;
}

.aomoreferrerperformance-panel {
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    background-color: #fafafa;
    margin-bottom: 0;
}

    .aomoreferrerperformance-panel.content-header .mud-expand-panel-header {
        min-height: 0px !important;
        padding: 2px 24px !important;
        position: sticky;
        border-radius: 8px 8px 0 0;
        top: 268px;
        z-index: 20;
        background: #e6e6e6;
    }

.aomoreferrerperformance-container .mud-expand-panel.mud-panel-expanded {
    margin-bottom: 0;
}

.aomoreferrerperformance-container .mud-simple-table table * tr > td, .mud-simple-table table * tr th, .aomoreferrerperformance-container .aomoreferrerperformance-total table * tr > td, .aomoreferrerperformance-total table * tr th {
    display: table-cell;
    padding: 4px 12px 4px 12px;
    padding-inline-start: 16px;
    text-align: left;
}

    .aomoreferrerperformance-container .mud-simple-table table * tr > td:last-child, .aomoreferrerperformance-container .aomoreferrerperformance-total table * tr > td:last-child {
        padding-right: 16px !important;
    }

    .aomoreferrerperformance-container .mud-simple-table table * tr > td:first-child, .aomoreferrerperformance-container .aomoreferrerperformance-total table * tr > td:first-child {
        text-align: left;
    }

.aomoreferrerperformance-total {
    padding: 0 26px;
    background: #f6f6f6;
}

    .aomoreferrerperformance-total td {
        font-weight: bold;
    }

.aomoreferrerperformance-sticky-header {
    position: sticky;
    top: 130px; /* sesuaikan dgn tinggi AppBar desktop */
    background: #fff;
    z-index: 90;
    width: 100%;
}

.aomoreferrerperformance-table-sticky {
    position: sticky;
    top: 296px;
}

.aomoreferrerperformance-sticky-header .mud-grid-item {
    padding: 20px 20px 0 20px !important;
}

.aomoreferrerperformance-container .expansion-child-content {
    padding: 8px 11px;
    background: white;
}

.aomoreferrerperformance-subtotal {
    margin-bottom: 10px;
    padding: 0 11px;
    background: #f6f6f6;
}


.aomoreferrerperformance-container .mud-table-root > .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.aomoreferrerperformance-table thead {
    background: #EDEDED;
}

.aomoreferrerperformance-sticky-header .info-label-narrow {
    width: 90px !important;
    white-space: nowrap;
    font-weight: 600;
}

/* 1. Header Styling */
.ao-performance-table thead th {
    background-color: #EEEEEE !important; /* Abu-abu terang persis gambar */
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 0.85rem;
    border-bottom: 2px solid #ccc;
    padding: 12px 8px !important;
    vertical-align: middle;
}

/* 2. Body Styling */
.ao-performance-table tbody td {
    padding: 8px 12px !important;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.85rem;
    color: #333;
}

/* 3. Footer Styling - GLOBAL */
.ao-performance-table tfoot td {
    padding: 8px 12px !important;
    font-size: 0.85rem;
    border-right: 1px solid #fff; /* GARIS PUTIH PEMISAH KOLOM */
}
.ao-performance-table tfoot td:last-child {
    border-right: none;
}

/* 4. Footer Row 1: TOTAL (Abu-abu Terang) */
.footer-row-total {
    background-color: #EEEEEE !important;
    font-weight: 700;
    color: #000;
}

/* 5. Footer Row 2: Iuran OJK (Abu-abu Sedang) */
.footer-row-ojk {
    background-color: #D6D6D6 !important; /* Lebih gelap sedikit */
    font-weight: 700;
    color: #000;
}

/* 6. Footer Row 3: Grand Total (Abu-abu Gelap) */
.footer-row-grand {
    background-color: #BDBDBD !important; /* Paling gelap */
    font-weight: 800;
    color: #000;
}

/* Utility Alignment */
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.font-weight-bold { font-weight: 700; }

.aomoreferrerperformance-table td.combine-code-column {
    display: flex !important;
}

.aomoreferrerperformance-table td.combine-code-column span:first-child {
    min-width: 52px;
    display: block;
}

.aomoreferrerperformance-container td.combine-code-column-customer {
    display: flex !important;
}

.aomoreferrerperformance-container td.combine-code-column-customer span:first-child {
    min-width: 55px;
    display: block;
}

.aomoperformance-panel.content-header .mud-expand-panel-header {
    min-height: 0px !important;
    padding: 5px 0 0 0 !important;
    position: sticky;
    border-radius: 8px 8px 0 0;
    top: 293px;
    z-index: 20;
    background: #e6e6e6;
}

.aomoperformance-panel.content-header .mud-expand-panel-header .d-flex {
    padding: 5px 20px 5px 24px;
}

.aomoperformance-panel.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon {
    transform: rotate(-90deg);
    position: absolute;
    font-size: 2.3rem;
    right: 0;
    top: 0;
}
.aomoperformance-header-panel .mud-simple-table {
    background: #F6F6F6;
    padding: 4px 24px;
    width: 100%;
    /*margin-top: -5px;*/
}
/* Update CSS khusus untuk Passive Customer agar sinkron dengan variabel CR */
.passive-customer-page {
    --cr-sticky-top: 300px; /* Sesuaikan dengan tinggi header info PC */
    --cr-table-minw: 1550px; /* Total lebar dari colgroup di atas */
    --cr-head-bg: #f5f5f5;
    --cr-head-border: #e0e0e0;
    --cr-zebra-even: #f9f9f9;
    --cr-zebra-odd: #ffffff;
}
/* Matikan header default MudTable */
.passive-customer-table thead {
    display: none !important;
}

/* =========================================================
       FORCE ALIGNMENT: KIRI & ATAS (Override CR Style)
       Menargetkan Kolom 1, 2, 3, 7, dan 8
       ========================================================= */

/* Force Header & Body ke KIRI dan ATAS */
.customerranking-page.passive-customer-page .cr-head-table th,
.customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell {
    vertical-align: top !important; /* Rata Atas */
}

    /* Spesifik KIRI untuk Kolom 1, 2, 3, 7, dan 8 (Termasuk Account Officer) */
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(1),
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(2),
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(3),
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(7),
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(8),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(1),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(2),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(3),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(7),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(8) {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    /* FORCE KANAN untuk Kolom 4, 5, 6 (Numeric) */
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(4),
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(5),
    .customerranking-page.passive-customer-page .cr-head-table th:nth-child(6),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(4),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(5),
    .customerranking-page.passive-customer-page .cr-body-table .mud-table-body .mud-table-cell:nth-child(6) {
        text-align: right !important;
        justify-content: flex-end !important;
    }

/* =========================================================
       CONTACT STACK (TUMPUKAN BARIS)
       ========================================================= */
.pc-contact-stack {
    display: block !important;
    text-align: left !important;
    line-height: 1.3;
}

.pc-stack-row {
    display: block !important; /* Memaksa pindah baris */
    width: 100%;
    word-break: break-all;
    color: inherit !important;
}

.pc-phone-dim {
    font-size: 0.85rem;
}

/* =========================================================
       CUSTOMER NO LAYOUT (Rata Kiri & Atas)
       ========================================================= */
.pc-customer-grid {
    display: flex;
    flex-direction: column; /* Pastikan nomor dan nama bertumpuk jika diperlukan */
    align-items: flex-start !important; /* Rata Kiri */
    text-align: left !important;
    gap: 2px;
}

.pc-customer-no {
    min-width: 50px;
    text-align: left !important;
}

.pc-customer-inline {
    display: flex !important;
    flex-direction: row !important; /* Memaksa ke samping */
    gap: 10px;
    text-align: left !important;
}

/* Cursor & Print Rules */
.passive-customer-page .cr-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-armed {
    cursor: grab;
}

.passive-customer-page .cr-body-scroll.ct-has-xscroll.ct-pan-ready.ct-pan-dragging {
    cursor: grabbing;
}

@media print {
    .passive-customer-page .cr-sticky-head-table {
        position: static;
        top: auto;
    }

    .passive-customer-page .cr-head-scroll, .passive-customer-page .cr-body-scroll {
        overflow: visible !important;
    }
}

.aomoreferrerperformance-table-detail-sticky {
    width: 100%;
    position: sticky;
    top: 328px;
}

.tradingsummary-summary-subheader {
    position: sticky;
    top: 329px
}

.tradingsummary-detail-subheader {
    position: sticky;
    top: 329px;
}

.aomoreferrerperformance-sticky-header .info-table td, .tradingsummary-sticky-header .info-table td {
    padding: 4.5px 3px 0 0;
}
.aomoreferrerperformance-subtotal table td {
    padding: 6px 24px 6px 16px !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 24px !important;
}


.aomoreferrerperformance-container .aomo-table-content.mud-table table tbody tr:nth-of-type(odd) {
    background-color: white !important;
}

.aomoreferrerperformance-container .aomo-table-content.mud-table table tbody tr:nth-of-type(even) {
    background-color: var(--mud-palette-table-striped); /* Menggunakan variabel warna standar MudBlazor */
}

.tradingsummary-container .tradingsummary-table-content.mud-table table tbody tr:nth-of-type(odd) {
    background-color: white !important;
}

.tradingsummary-container .tradingsummary-table-content.mud-table table tbody tr:nth-of-type(even) {
    background-color: var(--mud-palette-table-striped); /* Menggunakan variabel warna standar MudBlazor */
}

.commission-tbl-header.align-right .table-header-label,
.netcomm-tbl-header.align-right .table-header-label,
.onlinecomm-tbl-header.align-right .table-header-label,
.netonlinecomm-tbl-header.align-right .table-header-label {
    margin-right: 8px;
}