body, .app-default {
    background-color: #F3F4F6 !important;
}
.bg-login {
    color: #111827;
    background: #F3F4F6;
    border-right: 1px solid #E5E7EB;
    box-shadow: 4px 0px 6px -1px rgba(16, 24, 40, 0.1), 2px 0px 4px -2px rgba(16, 24, 40, 0.1);
}
.bg-login h1 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #111827;
}
.bg-login label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}
.btn-primary {
    background: #48186F !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
}
.btn-primary i.bi {
    color: #FFFFFF !important;
}
.el-button.btn-primary {
    background: #48186F !important;
    border-radius: 8px !important;
}
.el-button--primary {
  background: #48186F !important;
  color: #FFFFFF !important;
}
button.btn.btn-sm.btn-primary:hover {
    border-color: #817BE0 !important;
    background-color: #817BE0 !important;
    color: #FFFFFF !important;
}
button.el-button.btn.btn-sm.btn-primary:hover {
    border-color: #817BE0 !important;
    background-color: #817BE0 !important;
    color: #FFFFFF !important;
}
a.link-primary {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #48186F !important;
}
#kt_app_main {
    background: #F3F4F6 !important;
    color: #111827 !important;
}
.card {
    background: #FFFFFF !important;
    box-shadow: 0px 1px 3px rgb(16 24 40 / 10%), 0px 1px 2px -1px rgb(16 24 40 / 10%) !important;
    border-radius: 8px !important;
    color: #374151 !important;
}
.card .card-header {
    color: #374151 !important;
}
.card .card-header .card-title, .card .card-header .card-title .card-label {
    color: #374151 !important;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: #111827 !important;
}
.app-header {
    background-color: #E5E7EB !important;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1) !important;
}
.navbar-user {
    float: right;
    right: 20px;
    top: 15px;
    display: grid;
    position: absolute;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background: #374151 !important;
    border-right: 1px solid #E5E7EB !important;
    box-shadow: 4px 0px 6px -1px rgba(16, 24, 40, 0.1), 2px 0px 4px -2px rgba(16, 24, 40, 0.1) !important;
}
th.el-table__cell {
    text-transform: capitalize !important;
    background: #F9FAFB !important;
    border-width: 1px 0px !important;
    border-style: solid !important;
    border-color: #E5E7EB !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #374151 !important;
}
.breadcrumb .breadcrumb-item:after {
    content: "/";
    color: #A1A5B7 !important;
}
.el-input__wrapper {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgb(16 24 40 / 5%) !important;
    border-radius: 8px !important;
}
.text-form {
    font-weight: 500 !important;
    color: #6B7280 !important;
}
.text-form svg {
    position: absolute;
}
.form-footer {
    position: relative;
    float: right;
}
.form-search {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgb(16 24 40 / 5%) !important;
    border-radius: 8px;
    padding: 10px 12px;
    gap: 12px;
    max-height: 34px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-feature-settings: 'salt' on, 'liga' off;
    color: #9CA3AF;
}
button.btn.btn-primary.btn-edit, a.btn.btn-primary.btn-edit:hover, .btn-edit:active, .btn-edit:focus, .btn.btn-primary.btn-edit:hover:not(.btn-active) {
    padding: 6px 11px !important;
    gap: 4px !important;
    background-color: #E2F4FF !important;
    background: #E2F4FF !important;
    border-radius: 8px !important;
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
    color: #48186F !important;
}
.btn-edit .bi {
    color: #48186F !important;
    padding: 1px;
}
.btn-trash {
    padding: 6px 10px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
    margin: 0 10px;
}
.btn-trash .bi-trash {
    padding: 1px;
}
.btn-outline-danger {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 8px 16px;
    gap: 4px;
    background: #FFFFFF !important;
    border: 1px solid #FCA5A5 !important;
    border-radius: 8px;
    text-align: center;
    color: #EF4444 !important;
}
.btn-outline-danger i.bi-trash {
    color: #EF4444 !important;
}
.btn-link-href {
    cursor: pointer;
    border: unset !important;
    background: unset !important;
    color: #48186F !important;
}
.status .Selesai {
    padding: 2px 12px;
    gap: 10px;
    background: #F3F4F6;
    border-radius: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}
.status .Belum {
    padding: 2px 12px;
    gap: 10px;
    background: #FEF3C7;
    border-radius: 4px;
    border-radius: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #F59E0B;
}
.status .Aktif {
    padding: 2px 12px;
    gap: 10px;
    background: #DCFCE7;
    border-radius: 4px;
    border-radius: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #22C55E;
}
.hidden {
    display: none;
}
.info-penyaluran {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
    margin-top: 8px;
}
.txt-white {
    color: #FFFFFF;
}
.txt-metode {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #6B7280;
    margin: unset;
}
.card-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 17px 0px;
    gap: 60px;
}
.card-color h5 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;
    color: #FFFFFF !important;
}
.card-color p {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #FFFFFF !important;
}
.card-color div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 12px 0 12px;
}
.card-color img {
    opacity: 0.25;
    margin: -10px 0 0 0;
}
.card-green {
    display: flex;
    align-items: center;
    padding: 0px;
    background: #22C55E;
    border-radius: 8px;
    color: #FFFFFF;
}
.card-yellow {
    display: flex;
    align-items: center;
    padding: 0px;
    background: #F59E0B;
    border-radius: 8px;
    color: #FFFFFF;
}
.card-blue {
    display: flex;
    align-items: center;
    padding: 0px;
    background: #48186F;
    border-radius: 8px;
    color: #FFFFFF;
}
.card-red {
    display: flex;
    align-items: center;
    padding: 0px;
    background: #EF4444;
    border-radius: 8px;
    color: #FFFFFF;
}
.card-purple {
    display: flex;
    align-items: center;
    padding: 0px;
    background: #8A2BE2;
    border-radius: 8px;
    color: #FFFFFF;
}
.card-navy {
    display: flex;
    align-items: center;
    padding: 0px;
    background: #3E4491;
    border-radius: 8px;
    color: #FFFFFF;
}
.card-filter {
    display: block !important;
    padding: 14px 16px !important;
}
h1.page-heading {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700 !important;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #111827;
}
.el-switch {
    --el-switch-on-color: #48186F !important;
}
.el-switch.is-checked .el-switch__core {
    background-color: #48186F !important;
}
.el-checkbox__label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #9CA3AF;
}
.form-periode.el-input.is-disabled .el-input__inner{
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
}
.box-anggota-penagihan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    max-width: 282px;
    background: #F0F5FF;
    border-radius: 8px;
}
.box-anggota-penagihan section {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.box-anggota-penagihan section label{
    flex: 1 0 0;
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.box-anggota-penagihan section p{
    flex: 1 0 0;
    text-align: right;
    margin: unset;
}
.box-anggota-penagihan .txt-nominal {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.box-anggota-penagihan .el-checkbox__input.is-checked+.el-checkbox__label {
    flex: 1 0 0;
    color: var(--neutral-n-700, #374151) !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}
.el-checkbox__inner {
    border-radius: 4px !important;
    width: 20px !important;
    height: 20px !important;
    left: -2px !important;
    border: 2px solid #D1D5DB !important;
}
.el-checkbox__inner::after {
    box-sizing: content-box !important;
    content: "" !important;
    border: 2px solid var(--el-checkbox-checked-icon-color) !important;
    border-left: 0 !important;
    border-top: 0 !important;
    height: 9px !important;
    left: 6px !important;
    position: absolute !important;
    top: 1px !important;
    transform: rotate(44deg) scaleY(1) !important;
    width: 3px !important;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
    background: #48186F !important;
    border-color: #48186F !important;
}
.is_check_label .el-checkbox__label{
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #374151 !important;
}
.txt-total-setoran {
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #48186F !important;
}
.el-checkbox__label {
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #6B7280 !important;
    padding-left: 4px !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #6B7280 !important;
    padding-left: 4px !important;
}
.box-anggota-penagihan .txt-hidden {
    color: #F0F5FF !important;
    padding: unset;
    margin: -30px 0 0 0;
}
.box-arisan {
    display: block;
    border-top: 1px solid #E5E7EB;
    padding-top: 12px;
    padding-bottom: 0;
}
.box-arisan .el-checkbox__label {
    font-size: 13px !important;
}
.img-foto {
    border: 1px solid #F3F4F6;
    background: #fff;
    border-radius: 4px;
    width: 64px;
    height: 64px !important;
    object-fit: cover;
    object-position: center;
    position: absolute;
}
.txt-link {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-decoration-line: underline;
    color: #48186F;
    cursor: pointer !important;
}

.modal .form .row-modal {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex: 1 1 auto;
    padding: 0px 23px;
    border-bottom: 1px solid var(--kt-modal-header-border-color);
}
.modal .form .row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex: 1 1 auto;
    padding: 0px 23px;
}
.modal .form .badge {
    display: table;
}
.modal .form .form-label.text-form {
    color: var(--neutral-n-400, #9CA3AF);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
.modal .form p {
    color: var(--neutral-n-700, #374151);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.modal .form .badge-light-danger {
    color: var(--kt-danger);
    background-color: var(--kt-danger-light);
}
.modal .form .badge.badge-sm {
    min-width: 1.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: normal;
}
.modal .modal-footer-center {
    background-color: var(--kt-modal-footer-bg);
    margin: 0 auto;
    display: table;
}
.modal hr {
    border-top: 1px solid #bbbfc9;
    margin: 0.3rem 0;
}
.modal-kocokan {
    min-width: 360px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.modal-footer-justify {
    position: relative;
    display: flex;
    padding: 20px;
}

.modal-footer-right {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
}

.txt-congrats-arisan {
    color: #000;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.txt-title-search {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.card .card-body {
    padding: 0 2.25rem 2rem 2.25rem !important;
}
.box-timeline {
    margin-top: 17px !important;
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
    background: var(--neutral-n-100, #F3F4F6);
}
.box-timeline .txt-time {
    color: var(--neutral-n-400, #9CA3AF);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    padding-bottom: 8px;
}
.summary-anggota p {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
.summary-anggota h5 {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}
.summary-data-bisnis p {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    margin: unset;
}
.summary-data-bisnis h5 {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}
.summary-data-bisnis h6 {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
.text-hover-primary {
    cursor: pointer;
}
.table-custom thead th {
    padding: 8px 16px;
    border-width: 0 !important;
}
.table-custom thead th div.cell{
    color: var(--neutral-n-700, #374151);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}
.table-custom tbody td {
    padding: 18px 16px;
    width: 100%;

}
tr.el-table__row.fw-semibold.tr-footer td {
    border-bottom: 1px solid var(--neutral-n-200, #E5E7EB);
    background: var(--neutral-n-50, #F9FAFB);
}
.el-popover__title {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.box-popover {
    max-width: 195px;
    border-radius: 6px;
    border: 1px solid var(--neutral-n-200, #E5E7EB);
    background: var(--generic-white, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.box-popover .box {
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
span.el-popper__arrow {
    position: absolute;
    right: 40px !important;
}
.el-table.tbl-noheader thead {
    display: none;
}
.tbl-nobody .el-table__body-wrapper {
    display: none;
}

.el-table.tbl-head-only tbody tr{
    border-top: var(--el-table-border);
}
.el-table.table-noheader thead {
    display: none;
}

.el-table.table-noheader tbody .cell span{
    color: var(--neutral-n-700, #374151);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}

.el-table.table-noheader tr:first-child td.el-table__cell, .el-table.table-noheader tr:first-child th.el-table__cell.is-leaf {
    border-top: var(--el-table-border);
}

.el-table.table-bold tbody .cell span{
    color: var(--neutral-n-700, #374151);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}

.el-table.table-bold thead .cell{
    color: var(--neutral-n-700, #374151);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}

.btn.btn-icon i {
    padding: unset;
}

.el-collapse.accordion-tagihan {
    --el-collapse-header-height: unset;
}

.el-collapse.accordion-tagihan .el-collapse-item {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--generic-white, #FFF);
    margin: unset;
}

.el-collapse.accordion-tagihan .el-collapse-item__header {
    border: unset;
}

.el-collapse.accordion-tagihan .notif-number {
    display: flex;
    padding: 1.3%;
    margin-right: 7px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: var(--negative-r-500, #EF4444);
    width: 20px;
    height: 20px;
}

.el-collapse.accordion-tagihan .notif-number p{
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: unset;
}
button.btn.btn-action {
    margin: 0 4px 0 0;
}
button.btn-view.btn-action {
    border-radius: 4px;
    border: 1px solid #E5E7EB !important;
    background: #fff !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    padding: 6px 12px !important;
    width: 44px;
}
button.btn-view.btn-action i {
    color: #6B7280 !important;
}
button.btn-approved.btn-action {
    border-radius: 4px;
    border: 1px solid var(--success-g-500, #22C55E) !important;
    background: var(--success-g-50, #F0FDF4) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    padding: 6px 12px !important;
    width: 44px;
}
button.btn-approved.btn-action i {
    color: #22C55E !important;
}
button.btn-approved.btn-action.btn-text {
    color: var(--success-g-500, #22C55E) !important;
    font-family: Inter !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    border-radius: 4px;
    border: 1px solid var(--success-g-500, #22C55E);
    background: var(--success-g-50, #F0FDF4);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    width: auto !important;
}
button.btn-rejected.btn-action {
    border-radius: 4px;
    border: 1px solid var(--negative-r-500, #EF4444) !important;
    background: var(--negative-r-50, #FEF2F2) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    padding: 6px 12px !important;
    width: 44px;
}
button.btn-rejected.btn-action i {
    color: #EF4444 !important;
}
button.btn-open-accordion {
    display: flex;
    padding: 6px 25px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: var(--neutral-n-100, #F3F4F6);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: unset;
}
.btn-open-accordion span {
    margin: 0 0 0 -15px;
}
.el-collapse-item__header button.btn-open-accordion {
    position: absolute;
    float: right;
    right: 20px;
}
span.checklist-item {
    margin: 0 0 4px 0;
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    background: var(--neutral-n-100, #F3F4F6);
}
span.unchecklist-item {
    margin: 0 0 4px 0;
    color: var(--negative-r-500, #EF4444);
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    background: var(--negative-r-100, #FEE2E2);
}
.box-tabungan-modal {
    display: flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 6px;
    background: var(--neutral-n-100, #F3F4F6);
}
.box-tabungan-modal hr {
    border-top: 1px solid #cdd0d5;
    width: 100%;
}
.box-tabungan-modal .box-tabungan {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.box-tabungan-modal .txt-nominal {
    color: var(--neutral-n-700, #374151);
    text-align: right;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    flex: 1 0 0;
}
.modal-footer-tabungan {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
.box-checklist-modal {
    margin-top: 12px;
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 6px;
    background: var(--primary-p-50, #F0F5FF);
}
.box-checklist-modal .box-checklist {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.box-checklist-modal .box-checklist span.el-checkbox__label {
    color: var(--neutral-n-700, #374151) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    margin-left: 10px;
    padding: unset !important;
}
.btn-close-tabungan {
    display: flex;
    padding: 14px 24px;
    align-items: flex-start;
    gap: 4px;
    text-decoration: underline;
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-decoration-line: underline;
    background: #fff !important;

}
tr.el-table__row.fw-semibold.danger-row {
    border-bottom: 1px solid var(--neutral-n-200, #E5E7EB);
    background: var(--negative-r-200, #FECACA);
}
tr.el-table__row.fw-semibold.danger-row:hover>td.el-table__cell {
    border-bottom: 1px solid var(--neutral-n-200, #E5E7EB) !important;
    background: var(--negative-r-200, #FECACA) !important;
}
.action-approval .btn-rejected {
    color: var(--negative-r-500, #EF4444) !important;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    border: 1px solid var(--negative-r-300, #FCA5A5) !important;
    background: var(--generic-white, #FFF) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;

}
.action-approval .btn-approved {
    color: var(--generic-white, #FFF) !important;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    background: var(--success-g-500, #22C55E) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.txt-nominal-blue {
    color: var(--primary-p-500, #48186F) !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.txt-center {
    text-align: center !important;
}
.txt-title {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: unset;
}
.el-collapse.accordion-profile {
    border: unset !important;
}
.el-collapse.accordion-profile .el-collapse-item__header {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.el-collapse.accordion-profile .el-collapse-item__wrap {
    border-top: 1px solid #E5E7EB;
    border-top-style: dashed;
    border-bottom: unset;
    padding-top: 12px;
}
.card-secondary {
    border-radius: 8px !important;
    background: var(--primary-p-100, #E0EBFF) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.el-popper.popakses-cepat {
    width: 61% !important;
}
button.btn-view-action {
    display: inline-flex;
    padding: 6px !important;
    align-items: flex-start;
    gap: 4px;
    border-radius: 4px;
    background: var(--neutral-n-100, #F3F4F6);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: unset;
}
button.btn-view-action i.bi {
    width: 20px;
}
button.btn-edit-action {
    display: inline-flex;
    padding: 6px !important;
    align-items: flex-start;
    gap: 4px;
    border-radius: 4px;
    background: var(--primary-p-100, #E0EBFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: unset;
}
button.btn-edit-action i.bi {
    color: #48186F !important;
    width: 20px;
}
button.btn-delete-action {
    display: inline-flex;
    padding: 6px !important;
    align-items: flex-start;
    gap: 4px;
    border-radius: 4px;
    background: var(--negative-r-100, #FEE2E2);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: unset;
}
button.btn-delete-action i.bi {
    color: #EF4444 !important;
    width: 20px;
}
.txt-blue-summary {
    color: var(--primary-p-500, #48186F) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration-line: underline;
}
.el-collapse.accordion-kehadiran {
    --el-collapse-header-height: unset;
    border-bottom: unset;
}
.el-collapse.accordion-kehadiran .el-collapse-item__header {
    border: unset;
    border-radius: 4px;
    background: var(--neutral-n-100, #F3F4F6);
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
.el-collapse.accordion-kehadiran .el-collapse-item__wrap {
    border-bottom: unset !important;
}
.form-kehadiran {
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 4px;
    background: var(--primary-p-50, #F0F5FF);
}
.txt-anggota {
    color: var(--primary-p-500, #48186F) !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.img-anggota {
    border-radius: 100px;
    border: 1px solid var(--neutral-n-100, #F3F4F6);
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    margin: 0 12px 0 0;
}
.btn-primary-second {
    color: var(--primary-p-500, #48186F) !important;
    font-family: Inter !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 16px !important; /* 133.333% */
    border-radius: 8px !important;
    background: var(--primary-p-100, #E0EBFF) !important;
    border: var(--primary-p-100, #E0EBFF) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.box-anggota-tagihan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    background: #F0F5FF;
    border-radius: 8px;
}
.box-anggota-tagihan .txt-hidden {
    color: #F0F5FF !important;
    padding: unset;
    margin: -30px 0 0 0;
}
.box-anggota-tagihan section {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.box-anggota-tagihan section label{
    flex: 1 0 0;
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.box-anggota-tagihan section p{
    flex: 1 0 0;
    text-align: right;
    margin: unset;
}
.box-anggota-tagihan .el-checkbox__input.is-checked+.el-checkbox__label {
    flex: 1 0 0;
    color: var(--neutral-n-700, #374151) !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}
.card-header .txt-officer {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
.alert-info-form {
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 6px;
    background: var(--primary-p-100, #E0EBFF);
}
.alert-info-form span {
    color: var(--primary-p-500, #48186F);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.pengajuan-tabs .el-tabs__header {
    border: unset !important;
}
.pengajuan-tabs .el-tabs__nav-scroll {
    overflow: auto;
}
.pengajuan-tabs.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border-radius: 8px;
    border: 1px solid var(--neutral-n-200, #E5E7EB);
}
.pengajuan-tabs .el-tabs__item {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
.pengajuan-tabs .el-tabs__item:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.pengajuan-tabs .el-tabs__item:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.pengajuan-tabs .el-tabs__item.is-active {
    border-bottom: unset !important;
    border-right: 1px solid var(--neutral-n-200, #E5E7EB);
    background: var(--primary-p-500, #48186F);
    color: var(--generic-white, #FFF) !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--el-radio-button-checked-text-color,var(--el-color-white));
    background-color: var(--primary-p-500, #48186F) !important;
    border-color: var(--primary-p-500, #48186F) !important;
    box-shadow: -1px 0 0 0 var(--primary-p-500, #48186F) !important;
}
.modal-tagihan-detail {
    width: 500px !important;
    border-radius: 8px !important;
    padding: 2px;

}
.modal-tagihan-detail .card-tagihan {
    background: #F9FAFB !important;
    border-radius: 8px;
    padding: 20px;
}
.modal-tagihan-detail .img-profile {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    border: 1px solid var(--neutral-n-100, #F3F4F6);
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
}
.modal-tagihan-detail h6 {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    margin: unset;
}
.modal-tagihan-detail p {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.modal-tagihan-detail span.text {
    color: var(--neutral-n-400, #9CA3AF);
    font-family: Inter !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 16px !important; /* 133.333% */
}
.modal-tagihan-detail .txt-nominal {
    color: var(--neutral-n-700, #374151);
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px; /* 142.857% */
}
.modal-tagihan-detail .form-label {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important; /* 142.857% */
    margin: unset;
}
.modal-tagihan-detail .modal-header {
    padding: 0 20px 20px 20px;
}
.modal-tagihan-detail .modal-footer {
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 0.475rem;
    border-top-right-radius: 0.475rem;
    border-bottom: 1px solid var(--kt-modal-header-border-color);
    padding: 20px;
}
.modal-tagihan-detail .el-dialog__body {
    padding: unset;
}
.modal-tagihan-detail button.el-dialog__headerbtn {
    display: none;
}
.txt-right {
    text-align: right;
    display: block;
}
.txt-red {
    color: var(--negative-r-500, #EF4444) !important;
}
table.el-table__footer tr td .cell {
    font-weight: 600 !important;
}
.form-label.fw-600 {
    font-weight: 600 !important;
}
.fw-600 {
    font-weight: 600 !important;
}
.btn-row-remove {
    display: flex !important;
    padding: 8px !important;
    align-items: center !important;
    gap: 8px !important;
}
.el-button.btn-row-add {
    color: #374151 !important;
    font-size: 12px !important;
    background: unset !important;
    border: unset !important;
    box-shadow: unset !important;
}
.page-title-keuangan {
    text-align: center;
}
.page-title-keuangan .txt-title {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.page-title-keuangan h5 {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}
.page-title-keuangan .txt-date {
    color: var(--neutral-n-500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.tbl-transaksi-harian-penerimaan tr th.el-table__cell:not(:first-child) .cell {
    display: none;
}
.tbl-transaksi-harian-penerimaan tr th.el-table__cell:nth-child(2) .cell {
    display: block;
}
.tbl-transaksi-harian-penerimaan tr th.el-table__cell:last-child .cell {
    display: block;
}
h4.txt-main-title {
    color: var(--neutral-n-700, #374151);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}
.col-md-4.col-12 span p {
    padding: unset;
    margin: unset;
}
.mt-dash-petugas {
    margin-top: -420px !important;
}
.img-profil-petugas {
    width: 48px !important;
    height: 48px !important;
    border-radius: 48px !important;
    border: 2px solid var(--neutral-n-300, #D1D5DB);
    object-fit: contain;
}
.img-profil-user {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 2px unset;
    object-fit: contain;
    object-position: center;
}
.txt-green {
    color: var(--success-g-500, #22C55E);
    text-align: right;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
.txt-time {
    color: var(--neutral-n-700, #374151);
    text-align: right;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
.img-foto-profil {
    object-fit: contain;
    width: 90px !important;
    height: 90px !important;
    border: 1px solid #ccc;
    border-radius: 8px !important;;
}
.btn.btn-action-password {
    color: var(--primary-p-500, #48186F) !important;
    text-align: center !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    display: flex !important;
    padding: 10px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 6px !important;
    background: var(--primary-p-100, #E0EBFF) !important;
}
.form-input-number .el-input__inner{
    color: var(--kt-input-color);
    background-color: var(--kt-input-bg);
    border: unset;
    box-shadow: none !important;
    padding: unset;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}
.btn-reset-close {
    display: contents !important;
}
.btn-reload-tagihan-hari-ini {
    border-radius: 6px !important;
    border: 1px solid var(--neutral-n-200, #E5E7EB) !important;
    background: var(--generic-white, #FFF) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    width: 34px !important;
    height: 30px !important;
    margin: 5px 0 0 0;
}
.content-tagihan-hari-ini {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0 1rem;
}
.content-tagihan-hari-ini div:first-child {
    display: flex;
    align-items: center;
    margin: 0.5rem;
    margin-left: 0;
}
.content-tagihan-hari-ini div:last-child {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}
.el-collapse.accordion-tagihan-hari-ini {
    border: unset;
}
.el-collapse.accordion-tagihan-hari-ini .el-collapse-item__header {
    border-bottom: unset;
    padding: 35px 0;
}
.el-collapse.accordion-tagihan-hari-ini-anggota .el-collapse-item__header {
    padding: 16px 0;
}
.el-collapse.accordion-tagihan-hari-ini .el-collapse-item__wrap {
    border: unset;
}
.accordion-tagihan-hari-ini .el-collapse-item__arrow {
    margin: 24px 16px 0 auto;
    transition: transform var(--el-transition-duration);
    font-weight: 300;
}
.el-collapse.accordion-tagihan-hari-ini-kelompok {
    border: unset;
}
.accordion-tagihan-hari-ini-kelompok .el-collapse-item__arrow {
    margin: 24px 24px 0 auto;
    transition: transform var(--el-transition-duration);
    font-weight: 300;
}
.accordion-tagihan-hari-ini-anggota .el-collapse-item__arrow {
    margin: 0 15px 0 auto;
    transition: transform var(--el-transition-duration);
    font-weight: 300;
}
.accordion-tagihan-hari-ini-kelompok .el-collapse-item__header {
    background: var(--neutral-n-50, #F9FAFB);
}
.accordion-tagihan-hari-ini-anggota .el-collapse-item__header {
    background: var(--primary-p-50, #F0F5FF);
}
.accordion-tagihan-hari-ini-kelompok .el-collapse-item__header button.btn-open-accordion {
    position: absolute;
    float: right;
    right: 40px;
}
.accordion-tagihan-hari-ini-anggota .el-collapse-item__header button.btn-open-accordion {
    position: absolute;
    float: right;
    right: 55px;
}
.accordion-tagihan-hari-ini button.btn-open-accordion {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--neutral-n-100, #F3F4F6);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: unset;
    width: 36px;
    height: 24px;
    border-radius: 100px;
    padding: 2px 8px
}
.accordion-tagihan-hari-ini .txt-nominal {
    color: var(--neutral-n-700, #374151);
    text-align: right;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    position: absolute;
    float: right;
    right: 65px;
}
.btn-action-img {
    padding: unset !important;
}
.sec-tagihan-hari-ini-iuran {
    padding: 2px 12px;
    border-bottom: 1px solid var(--neutral-n-200, #E5E7EB);
    background: var(--neutral-n-50, #F9FAFB);
}
.sec-tagihan-hari-ini-iuran .accordion-tagihan-hari-ini .el-collapse-item__header {
    background: var(--neutral-n-50, #F9FAFB);
}
.sec-tagihan-hari-ini-iuran .accordion-tagihan-hari-ini .el-collapse-item__content {
    background: var(--primary-p-50, #F0F5FF);
    padding-bottom: unset;
}
.sec-tagihan-hari-ini-iuran .accordion-tagihan-hari-ini-kelompok .el-collapse-item__content {
    padding-bottom: unset;
}
.sec-tagihan-hari-ini-iuran .accordion-tagihan-hari-ini  .el-collapse.accordion-tagihan-hari-ini-anggota .el-collapse-item__header {
    background: var(--primary-p-50, #F0F5FF);
    padding: 16px 12px;
}
.sec-tagihan-hari-ini-iuran .el-collapse.accordion-tagihan-hari-ini-anggota {
    background: var(--primary-p-50, #F0F5FF);
    padding: 0px 24px;
}
.sec-tagihan-hari-ini-iuran .btn-action {
    float: right;
}
.sec-tagihan-hari-ini-iuran  .txt-nominal {
    right: 100px;
}
.sec-tagihan-hari-ini-iuran .el-collapse.accordion-tagihan-hari-ini-kelompok .txt-nominal {
    right: 95px;
}
.tbl-anggota-tagihan-hari-ini td.is-right.el-table__cell {
    padding-right: 10px;
}
.accordion-tagihan-hari-ini .status-tagihan {
    text-align: right;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    position: absolute;
    float: right;
    right: 20px;
    margin: -25px 0 0 0;
}
.accordion-tagihan-hari-ini .status-tagihan .diterima {
    display: flex;
    padding: 2px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--success-g-100, #DCFCE7);
    color: var(--success-g-500, #22C55E);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1px;
    text-transform: uppercase;
}
.accordion-tagihan-hari-ini .status-tagihan .tunggu {
    display: flex;
    padding: 2px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--warning-w-100, #FEF3C7);
    color: var(--warning-w-500, #F59E0B);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.accordion-tagihan-hari-ini-kelompok .status-tagihan {
    text-align: right;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    position: absolute;
    float: right;
    right: 40px;
    margin: -25px 0 0 0;
}

.sec-tagihan-hari-ini-iuran .status-tagihan {
    text-align: right;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    position: absolute;
    float: right;
    right: 40px;
    margin: -25px 0 0 0;
}
.el-avatar--square {
    border-radius: 20px !important;
    width: 32px !important;
    height: 32px !important;
}
.el-avatar--square img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: unset;
    object-fit: contain !important;
    object-position: center;
}
.notif-badge-alert {
    margin: 12px 0 0 6px;
}
.el-button {
    border-radius: 8px !important;
}
.el-button:active, .el-button:focus, .el-button:hover {
    color: #FFFFFF;
    border-color: #48186F;
    background-color: #48186F;
    outline: 0;
}
.badge-user {
    display: flex;
    padding: 2.5px 10px !important;
    align-items: flex-start;
    gap: 10px;
    color: var(--Primary-P500, #48186F);
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 32px;
    background: var(--Primary-P100, #E0DEF7);
    margin-top: 5px;
    margin-bottom: 12px;
    margin-left: 8px;
}
.card-date-dashboard {
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 4px;
    padding-right: 24px;
}
.card-date-dashboard p {
    color: var(--Neutral-N500, #6B7280);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    margin: unset;
}
.menu-link:hover svg path, .menu-link:active svg path {
    fill: #48186F;
}
.badge {
    font-family: Inter !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 16px !important; /* 133.333% */
    border-radius: 6px !important;
    padding: 4px 12px !important;;
}
.badge-warning {
    color: var(--Warning-W500, #F59E0B) !important;
    background: var(--Warning-W100, #FEF3C7) !important;
}
.badge-success {
    color: var(--Warning-W500, #22C55E) !important;
    background: var(--Success-G100, #DCFCE7) !important;
}
.badge-danger {
    color: var(--Warning-W500, #EF4444) !important;
    background: var(--Negative-R100, #FEE2E2) !important;
}
.badge-secondary {
    color: var(--Warning-W500, #9CA3AF) !important;
    background: var(--Neutral-N200, #E5E7EB) !important;
}
.el-button.btn-detail {
    color: var(--Primary-P500, #48186F) !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important; /* 142.857% */
    border-radius: 6px !important;
    background: var(--Primary-P100, #E0DEF7) !important;
    border: unset !important;
}
.el-button.btn-action {
    color: var(--Primary-P500, #48186F) !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important; /* 142.857% */
    border-radius: 6px !important;
    background: var(--Primary-P100, #E0DEF7) !important;
    border: unset !important;
    padding: 4px !important;
}
.el-button.btn-action img {
    width: 24px;
    height: 24px;
}
.el-button.btn-action.delete {
    background: var(--Negative-R100, #FEE2E2) !important;
}
body {
    color: var(--Neutral-N700, #374151) !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important; /* 142.857% */
}
.el-table thead tr {
    background-color: unset;
    border-bottom: 1px solid var(--Neutral-N200, #E5E7EB);
}
.el-table th.el-table__cell {
    border-width: 0px 0px 1px 0px !important;
}
.el-table th.el-table__cell {
    background: unset !important;
}
.el-table thead tr th .cell {
    color: var(--Primary-P300, #A19CE8);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #625AE1 !important;
    border-color: #48186F !important;
}
.btn-back {
    border-radius: 6px !important;
    border: 1px solid var(--Neutral-N200, #E5E7EB) !important;
    background: var(--Generic-White, #FFF) !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.demo-tabs .card-body {
    padding-left: unset !important;
    padding-right: unset !important;
    margin: 10px;
}
.box-timeline ul.el-timeline {
    padding: 8px;
}
.el-tabs__item {
    color: var(--Neutral-N500, #6B7280) !important;
    text-align: center !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important; /* 142.857% */
}
.el-tabs__item.is-active {
    color: var(--Primary-P500, #48186F) !important;
    text-align: center !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}
.el-tabs__active-bar {
    background-color: #48186F !important;
}
.app-header-menu .menu .menu-item .menu-link.active svg path{
    fill: var(--kt-primary);
}
.el-step__head.is-finish {
    border-color: #48186F !important;
}
.el-step__icon {
    width: 32px !important;
    height: 32px !important;
}
.el-step__head.is-finish .el-step__icon.is-text {
    color: var(--Generic-White, #FFF);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    border-radius: 100px;
    background: var(--Primary-P500, #48186F);
    border: 1px solid #48186F;
    box-shadow: 0px 1px 2px -1px rgba(16, 24, 40, 0.10), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}
.el-step__icon.is-text {
    border-radius: 50%;
    border: unset !important;
    border-color: inherit;
    color: var(--Generic-White, #FFF);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    border-radius: 100px;
    background: var(--Neutral-N300, #D1D5DB);
    box-shadow: 0px 1px 2px -1px rgba(16, 24, 40, 0.10), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}
.el-step__title {
    color: var(--Neutral-N500, #6B7280) !important;
    text-align: center !important;
    font-family: Inter !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    margin-top: 14px;
}
.mw-1024px {
    max-width: 1024px !important;
}
.btn-choose-step {
    display: flex !important;
    padding: 12px !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 0 0 !important;
    border-radius: 8px !important;
    background: var(--Primary-P100, #E0DEF7) !important;
    border: 1.5px solid #E0DEF7 !important;
}
.btn-choose-step:hover, .btn-choose-step.active {
    border: 1.5px solid #48186F !important;
}
.btn-choose-step h6 {
    color: var(--Primary-P500, #48186F) !important;
    font-family: Inter !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important; /* 150% */
}
.btn-choose-step p.txt-desc {
    color: var(--Neutral-N500, #6B7280) !important;
    font-family: Inter !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important; /* 142.857% */
}
.svg-icon-step {
    display: flex;
    padding: 6px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    background: var(--Primary-P200, #C0BDEF);
}
.svg-icon-step span {
    width: 32px;
    height: 32px;
    padding: 3px 0 0px 0px;
}
h6.txt-title {
    color: var(--Neutral-N700, #374151);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}
p.txt-desc {
    color: var(--Neutral-N500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.el-button {
    border-radius: 6px !important;
    border: 1px solid var(--Neutral-N200, #E5E7EB) !important;
    background: var(--Generic-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    height: auto !important;
    padding: 11px 13px !important;
}
.btn {
    padding: 10px 12px 8px 12px !important;
}
.btn.btn-lg {
    padding: 10px 24px !important;
}
.btn-outline-secondary {
    border-radius: 8px !important;
    border: 1px solid var(--Neutral-N200, #E5E7EB) !important;
    background: var(--Generic-White, #FFF) !important;
}
.txt-name-file {
    color: var(--Neutral-N500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 12px;
}
.pic-employee {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    object-position: top;
}
.btn-link i.fas.fa-pencil-alt.text-right {
    font-size: 18px;
}
.modal-import .modal-body h6 {
    font-weight: 500;
}
.modal-import .modal-body a {
    color: #3f4254 !important;
}
.modal-import .form h6 {
    font-weight: 500;
}
.modal-import .modal-body p {
    font-weight: 400;
}
.modal-import .modal-body ul li {
    font-weight: 400;
}
.f-right {
    float: right;
}
.el-button {
    font-weight: 500;
}
.el-menu {
    border-right: unset !important;
}
.demo-tabs h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    line-height: unset !important;
}
.el-menu-item.is-active {
    border-radius: 8px;
    color: #6259D8 !important;
    background: #F3F4F6;
}
.el-sub-menu.is-active .el-sub-menu__title {
    border-radius: 8px;
    color: #6259D8 !important;
    background: #F3F4F6;
}
.el-sub-menu .el-menu-item.is-active {
    border-radius: 8px;
    color: #6259D8 !important;
    background: unset !important;
}
.el-menu-item.is-active svg path {
    fill:  #6259D8 !important;
}
.img-profile-pict {
    display: flex;
    width: 96px;
    height: 96px !important;
    justify-content: center;
    align-items: center;
    border-radius: 96px;
    border: 1px solid var(--Neutral-N200, #E5E7EB);
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
    object-fit: cover;
}
.thead-bg {
    background:#E5E7EB !important;
    border-top-left-radius: 75px;
}
.el-table  .thead-bg th.el-table__cell:first-child {
    border-top-left-radius: 8px;
}
.el-table  .thead-bg th.el-table__cell:last-child {
    border-top-right-radius: 8px;
}
.el-table  .thead-bg th.el-table__cell {
    height: 48px;
}
.el-table thead tr.thead-bg th .cell{
    color: #374151 !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    text-transform: capitalize;
}
.el-table tr.tbl-body {
    height: 56px;
}
.accordion-approval {
    background: var(--neutral-n-100, #F3F4F6) !important;
    border: unset !important;
    border-radius: 8px;
}
.accordion-approval .el-collapse-item__header {
    background: var(--neutral-n-100, #F3F4F6) !important;
    color: #374151 !important;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.accordion-approval .el-collapse-item__wrap {
    background: var(--neutral-n-100, #F3F4F6) !important;
}
.txt-label {
    color: var(--Neutral-N500, #6B7280);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
}
.el-radio__input.is-checked .el-radio__inner {
    background: #fff !important;
    border: 2px solid #48186F !important;
}
.el-radio__inner::after {
    background: #48186F !important;
    border: 2px solid #48186F !important;
    width: 10px !important;
    height: 10px !important;
}
.el-radio__inner {
    width: 18px !important;
    height: 18px !important;
}
.el-radio__input.is-checked+.el-radio__label {
    color: #48186F !important;
}
.image-input.image-input-outline .image-input-wrapper {
    border: unset !important;
    border-radius: 50%;
}
i.bi, i[class^=fonticon-], i[class*=" fonticon-"], i[class^=fa-], i[class*=" fa-"], i[class^=la-], i[class*=" la-"] {
    font-size: 19.8px !important;
}
.card-toolbar a.btn {
    font-size: 14px;
}
.card-toolbar button {
    font-size: 14px;
    color: #374151;
    font-weight: 600;
}
.btn.btn-sm {
    font-weight: 600 !important;
    font-size: 14px !important;
}
.modal-shift {
    border-radius: 12px !important;
}
.modal-shift .modal-header {
    border-bottom: unset !important;
}
.modal-shift .modal-title {
    color: var(--Neutral-N700, #374151) !important;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px !important;
    letter-spacing: -0.4px;
    position: relative;
    top: -25px;
}
.dotted-divider {
    display: inline-block;
    margin: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: black;
}
.pict-shift {
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.24);
}
p.txt-employee {
    color: var(--Neutral-N700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin: unset;
}
.txt-office {
    color: var(--Neutral-N700, #374151);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    margin: unset;
}
.txt-entity {
    color: var(--Neutral-N400, #9CA3AF);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin: unset;
}
.infinite-list {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 250px !important;
    display: block;
}
.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}
.loading {
  position: relative;
  top: 12px;
  left: 12px;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
}
.pointer {
    cursor: pointer;
}
.el-steps--horizontal {
  white-space: nowrap;
  margin: 25px 0 0 35px;
}
.el-step.is-center .el-step__line {
  left: 65% !important;
  right: -35% !important;
}
.el-step.is-horizontal .el-step__line {
  top: 16px !important;
  height: 1px !important;
  color: #E5E7EB !important;
}
.eye-pwd-login {
    position: relative;
    top: 43px;
    right: 12px;
}
.eye-pwd-login i.bi{
    font-size: 1.2rem;
}
.el-tabs.demo-tabs {
    display: unset;
}
.el-tabs--top.demo-tabs {
    flex-direction: unset;
}
.el-tag {
    background: #48186F !important;
    color: #FFFFFF !important;
    border: 1px solid #48186F;
}
.el-tabs__nav-scroll {
    overflow-x: auto !important;
}
.el-steps--horizontal.step-program .el-step.is-horizontal.is-center:first-child {
  flex-basis: 60% !important;
  left: 96px !important;
}
.el-steps--horizontal.step-program .el-step.is-horizontal.is-center:last-child {
  flex-basis: 0 !important;
  max-width: 50% !important;
}
.step-program .el-step.is-center .el-step__line {
  left: 55% !important;
  right: 15% !important;
}
.image-cover {
  width: 255px !important;
  background-size: cover;
  height: 250px !important;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.image-logo {
  width: 100px !important;
  background-size: contain;
  height: 110px !important;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
}
.img-cover-banner {
  position: relative;
  max-width: 100vw;
  width: 680px;
  object-fit: fill;
  object-position: top;
  min-height: 240px;
  border-radius: 12px
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.card-container .card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 135px;
    max-width: 420px;
    padding: 10px;
    gap: 10px;
    position: relative;
}

.card-container .card .thumbnail {
  width: 100%;
  position: relative;
  border-radius: 10px;
  object-fit: contain;
}

.card-container .el-icon {
  font-size: 16px;
  cursor: pointer;
}

.carousel-container .card-icons {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.carousel-container .card-icons i {
    margin-left: 8px;
    color: gray;
    cursor: pointer;
}

.carousel-container .nav-arrow {
    font-size: 24px;
    cursor: pointer;
    color: purple;
}

.card-actions {
  position: absolute;
  bottom: 10px;
  right: 20px;
  display: flex;
  gap: 0;
}
.img-icon {
    background: unset;
    border: unset;
}
.menu-item {
  margin-bottom: 20px;
}
.trainer-aktif {
  color: #48186F
}
.trainer-nonaktif {
  color: #6B7280
}
.txt-menu {
  color: #48186F;
  font-size: 14px;
  font-weight: 600;
}
.custom-quill-editor {
    min-height: 200px;
}
.avatars {
    display: flex;
    margin-right: 0.5rem;
}
.avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    object-fit: cover;
    object-position: top;
}
.rating {
    color: #EAB308;
}
.rating span {
    font-size: 12px;
    color: #0F172A;
}
.voucher-item {
    display: flex;
    border-radius: 10px;
}	
.voucher-content {
    display: block;
    padding: 6px 0 0 10px;
    max-height: 60px;
}
.voucher-content h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #FFFFFF !important;
}

.voucher-content p {
    font-size: 9px;
    color: #FFFFFF;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@media (max-width: 815px) {
    .el-popper.popakses-cepat {
        width: 100% !important;
    }
    .mt-dash-petugas {
        margin-top: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
        padding-left: unset !important;
    }
}
@media (max-width: 400px) {
    .card-summary {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        padding: 17px 0px;
        gap: unset;
    }
    .el-pagination__rightwrapper {
        display: inline-grid !important;
    }
    .el-checkbox__label {
        font-size: 12px !important;
    }
}