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-sm.btn-primary {
    padding: 10px 20px !important;
    gap: 4px !important;
    background: #3CA038 !important;
    border-radius: 8px !important;
}
.btn-check:checked + .btn.btn-lg.btn-sm.btn-primary, .btn-check:active + .btn.btn-lg.btn-sm.btn-primary, .btn.btn-lg.btn-sm.btn-primary:focus:not(.btn-active), .btn.btn-lg.btn-sm.btn-primary:hover:not(.btn-active), .btn.btn-lg.btn-sm.btn-primary:active:not(.btn-active), .btn.btn-lg.btn-sm.btn-primary.active, .btn.btn-lg.btn-sm.btn-primary.show, .show > .btn.btn-lg.btn-sm.btn-primary {
    background: #248021 !important;
}
a.link-primary {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #3CA038 !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: #F5FBF4 !important;
}
.card .card-header {
    color: #F5FBF4 !important;
}
.card .card-header .card-title, .card .card-header .card-title .card-label {
    color: #F5FBF4 !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: #ffffff !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;
}
.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 {
    display: flex !important;
    height: 32px;
    padding: 8px 12px !important;
    align-items: center;
    gap: 8px;
    border-radius: 8px !important;
    border: 1px solid var(--Color-Grey-Grey-200, #E5E7EB) !important;
    background: var(--Color-Generic-White, #FFF);
    box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06) !important;
}
.lbl-bank {
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 4px;
    border: 1px solid var(--Primary-60-borders, #B0DFAC);
    background: var(--Primary-20-background, #F5FBF4);
    color: var(--Primary-110-acc-text, #248021) !important;
    font-family: 'Rubik';
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 120% */
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover {
    transition: color 0.2s ease;
    background-color: #E5E7EB;
    color: #248021;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link span.menu-title {
    color: var(--Color-Grey-Grey-700, #374151);
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here), [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color 0.2s ease;
    background-color: #E5E7EB !important;
    color: #248021 !important;
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link {
    transition: color 0.2s ease;
    background-color: #E5E7EB;
    color: #248021;
}
.menu-sub.menu-sub-accordion a.active.router-link-exact-active.menu-link{
    background-color: unset !important;
}
.menu-sub.menu-sub-accordion a.active.router-link-exact-active.menu-link span{
    color: #3CA038 !important;
}

.menu-sub.menu-sub-accordion a.active.router-link-exact-active.menu-link .menu-bullet .bullet.bullet-dot{
    background-color: #3CA038 !important;
}
.menu-sub.menu-sub-accordion a.menu-link:hover {
    background-color: unset !important;
}
.menu-sub.menu-sub-accordion a.menu-link:hover span {
    color: #3CA038 !important;
}
.menu-sub.menu-sub-accordion a.menu-link:hover .menu-bullet .bullet.bullet-dot{
    background-color: #3CA038 !important;
}

.txt-teman-kebaikan {
    color: #00517F !important;
}

.eye-pwd-login {
    position: relative;
    top: 43px;
    right: 12px;
}
.eye-pwd-login i.bi{
    font-size: 1.2rem;
}
.el-button {
    height: auto !important;
}

.btn-check:checked + .btn.btn-sm.btn-primary, .btn-check:active + .btn.btn-sm.btn-primary, .btn.btn-sm.btn-primary:focus:not(.btn-active), .btn.btn-sm.btn-primary:hover:not(.btn-active), .btn.btn-sm.btn-primary:active:not(.btn-active), .btn.btn-sm.btn-primary.active, .btn.btn-sm.btn-primary.show, .show > .btn.btn-sm.btn-primary {
    background: #3CA038 !important;
}
.btn-primary {
    background: #248021 !important;
}
.btn-check:checked + .btn.btn-lg.btn-primary, .btn-check:active + .btn.btn-lg.btn-primary, .btn.btn-lg.btn-primary:focus:not(.btn-active), .btn.btn-lg.btn-primary:hover:not(.btn-active), .btn.btn-lg.btn-primary:active:not(.btn-active), .btn.btn-lg.btn-primary.active, .btn.btn-lg.btn-primary.show, .show > .btn.btn-lg.btn-primary {
    background: #3CA038 !important;
}

.image-input .image-input-wrapper {
  width: 220px !important;
  height: 121px !important;
}

.modal-category .modal-content {
  overflow: auto;
}

.form-control:disabled, .form-control[readonly] {
    color: #5e6278 !important;
}

.preview-label {
    border-radius: 16px;
    border-style: none;
    border: 1px solid rgba(245,251,244,0.64);
    background: rgba(245,251,244,0.64);
    color: #248021;
    border-width: 1px;
    min-width: 65px;
    padding: 2px var(--spacing-xs, 8px);
    border-radius: var(--radius-999, 999px);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    color: var(--Color-Grey-Grey-700, #374151);
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    transition: color 0.2s ease;
    background-color: var(--Color-Grey-Grey-50, #F9FAFB) !important;
    color: var(--Primary-110-acc-text, #248021) !important;
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
    color: var(--Primary-110-acc-text, #248021) !important;
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-title, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: var(--Primary-110-acc-text, #248021) !important;
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-arrow:after {
    background-color: #111827 !important;
    mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.5%206C1.5%205.6825%201.733%205.425%202.02%205.425H9.98C10.267%205.425%2010.5%205.6825%2010.5%206C10.5%206.3175%2010.267%206.575%209.98%206.575H2.02C1.7325%206.575%201.5%206.3175%201.5%206Z%22%20fill%3D%22%23111827%22%2F%3E%3Cpath%20d%3D%22M5.99999%2010.5C5.68249%2010.5%205.42499%2010.267%205.42499%209.98V2.02C5.42499%201.7325%205.68249%201.5%205.99999%201.5C6.31749%201.5%206.57499%201.733%206.57499%202.02V9.98C6.57499%2010.2675%206.31749%2010.5%205.99999%2010.5Z%22%20fill%3D%22%23111827%22%2F%3E%3C%2Fsvg%3E') !important;
    transform: unset !important
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after {
    background-color: #111827 !important;
    mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.625%205.99999C1.625%205.68249%201.8515%205.42499%202.1305%205.42499H9.869C10.148%205.42499%2010.3745%205.68249%2010.3745%205.99999C10.3745%206.31749%2010.148%206.57499%209.869%206.57499H2.1305C1.851%206.57499%201.625%206.31749%201.625%205.99999Z%22%20fill%3D%22%23111827%22%2F%3E%3C%2Fsvg%3E') !important;
    transform: unset !important
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-title {
    color: var(--Primary-110-acc-text, #248021) !important;
    font-family: 'Rubik';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.btn-download {
  display: flex;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--Primary-50-components, #C7EAC3);
  background: var(--Primary-30-components, #E8F7E6);
  box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06);
  color: var(--primary-90-brand-main, #3CA038);
  font-family: 'Rubik';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 114.286% */
}

.btn-approve {
  display: flex;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-90-brand-main, #3CA038);
  box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06);
  color: var(--Color-Generic-White, #FFF);
  font-family: 'Rubik';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  border: unset;
}

.btn-outline-cancel {
  display: flex;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--Color-Grey-Grey-200, #E5E7EB) !important;
  background: var(--Color-Generic-White, #FFF);
  box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06);
  color: var(--Color-Grey-Grey-700, #374151);
  font-family: 'Rubik';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom: unset !important;
  border-right: 1px solid var(--Color-Grey-Grey-200, #E5E7EB) !important;
}

.el-table th.el-table__cell {
  background: var(--Color-Grey-Grey-100, #F3F4F6) !important;
}

.btn-filter {
  display: flex;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--Primary-50-components, #C7EAC3);
  background: var(--Primary-30-components, #E8F7E6);
  box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06);
  color: var(--primary-90-brand-main, #3CA038);
  font-family: 'Rubik';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 114.286% */
}
.el-select__wrapper {
  display: flex !important;
  height: 32px;
  padding: 8px 12px !important;
  justify-content: center;
  align-items: center !important;
  gap: 8px;
  border-radius: 8px !important;
  border: 1px solid var(--Color-Grey-Grey-200, #E5E7EB);
  background: var(--Color-Generic-White, #FFF);
  box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06) !important;
}

.el-select__placeholder, .el-select__tags-text {
  color: var(--Color-Grey-Grey-700, #374151) !important;
  font-family: 'Rubik' !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 16px !important; /* 114.286% */
}

.el-table--border {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--radius-sm, 8px) !important;
  border: 1px solid var(--Color-Grey-Grey-200, #E5E7EB) !important;
  box-shadow: 0px 2px 6px 0px rgba(17, 24, 39, 0.06) !important;
}

.el-pager li {
  background: unset !important;
}

.el-pager li.is-active, .el-pager li:hover {
  color: var(--Color-Grey-Grey-400, #9CA3AF) !important;
  text-align: center;
  font-family: Rubik;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 16px; /* 114.286% */
  border-radius: 8px;
  background: var(--Color-Grey-Grey-200, #E5E7EB) !important;
}
.el-pagination button {
  background-color: unset !important;
  color: #374151 !important;
}
.el-pagination button.is-disabled, .el-pagination button:disabled {
  background-color: unset !important;
  color: #9CA3AF !important;
}
.breadcrumb .breadcrumb-item a {
  color: var(--color-grey-grey-500-main, #6B7280) !important;
  font-family: 'Rubik';
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.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;
}