/*	|--------------------------------------------------------------------/*/
/*|special css for "Aplikasi Keuangan" added by Mr.Kei /*/
/*|------------------------------------------------------------------/*/
/*	special root*/
:root {
    --bs-cl-1: #b0e7ee;
    /*base background*/
    --bs-cl-2: #fee50f;
    /*esdm-color*/
    --bs-cl-3: #ffd900;
    /*esdm-active-color*/
    --bs-cl-4: #fff;
    --bs-cl-5: #071437;
    --old-danger: #fd397a;
    --old-danger-active: #fd1361;
    --old-success: #0abb87;
    --old-success-active: #08976dF;
}

.app-wrapper.d-flex {
    background-color: var(--bs-cl-1);
}

.app-header {
    background-color: var(--bs-cl-4) !important;
}

.app-header-menu .menu>.menu-item.here>.menu-link {
    background-color: var(--bs-cl-1);
}

.menu-state-primary .menu-item.here>.menu-link .menu-icon,
.menu-state-primary .menu-item.here>.menu-link .menu-icon .svg-icon,
.menu-state-primary .menu-item.here>.menu-link .menu-icon i {
    color: var(--bs-cl-5);
}

.app-default,
body {
    background-color: var(--bs-cl-1);
}

.bg-modal-custom {
    background-color: var(--bs-cl-1);
    border-radius: 0 0 10px 10px;
}

.no-shadow {
    box-shadow: none !important;
}

.bg-bc-1 {
    background-color: var(--bs-teal);
}

.z-index-1000 {
    z-index: 1000;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #252f4a !important;
    border-color: var(--bs-pagination-active-border-color);
}

.menu-state-primary .menu-item.here>.menu-link .menu-title {
    color: var(--bs-cl-5) !important;
}

.menu-state-primary .menu-item.show>.menu-link .menu-icon,
.menu-state-primary .menu-item.show>.menu-link .menu-icon .svg-icon,
.menu-state-primary .menu-item.show>.menu-link .menu-icon i {
    color: var(--bs-cl-5) !important;
}

.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: var(--bs-cl-5) !important;
}

.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: var(--bs-cl-5) !important;
}

.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after {
    background-color: var(--bs-cl-5) !important;
}

.btn-check:active+.btn.btn-active-color-primary .svg-icon,
.btn-check:active+.btn.btn-active-color-primary i,
.btn-check:checked+.btn.btn-active-color-primary .svg-icon,
.btn-check:checked+.btn.btn-active-color-primary i,
.btn.btn-active-color-primary.active .svg-icon,
.btn.btn-active-color-primary.active i,
.btn.btn-active-color-primary.show .svg-icon,
.btn.btn-active-color-primary.show i,
.btn.btn-active-color-primary:active:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:active:not(.btn-active) i,
.btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:focus:not(.btn-active) i,
.btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:hover:not(.btn-active) i,
.show>.btn.btn-active-color-primary .svg-icon,
.show>.btn.btn-active-color-primary i {
    color: var(--bs-cl-5) !important;
}

.dataTables_scrollHead .dataTables_scrollHeadInner {
    width: 100% !important;
}

.btn.btn-clean {
    color: #B5B5C3;
    background-color: transparent;
}

.btn.btn-clean:hover {
    background-color: #f1f1f1;
}


/*==========================================================================================================================*/
/*New Custom CSS*/
/*==========================================================================================================================*/

.negative-row {
    color: red;
}

.rotate-image {
    animation: spin 2s linear infinite;
}

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

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

.modal-body {
    overflow-x: auto;
}

#dipa_revisi_detail-table {
    width: 100%;
}

.table-container {
    max-height: 650px;
    /* Sesuaikan dengan tinggi yang Anda inginkan */
    overflow: scroll;
    scrollbar-width: thin;
    /* Lebar bilah scroll horizontal */
    scrollbar-color: #0088ff #f0f0f0;
}

.table-container::-webkit-scrollbar {
    width: 12px;
    /* Lebar bilah scroll vertical */
}

.table-container::-webkit-scrollbar-thumb {
    background-color: #0088ff;
    /* Warna bilah scroll */
    border-radius: 6px;
    /* Bentuk ujung bilah scroll */
}

.table-container::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    /* Warna track bilah scroll */
}

.table-container::-webkit-scrollbar-thumb:hover {
    background-color: #0088ff;
    /* Ganti dengan warna yang Anda inginkan saat dihover */
}

#rkkdatatable thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #0088ff;
    color: white;
}

#rkkdatatable th {
    text-align: center;
}

#rkkdatatable tbody {
    max-height: 500px;
    /* Sesuaikan dengan tinggi yang Anda inginkan */
    overflow-y: scroll;
    position: relative;
    /* Diperlukan untuk menggulirkan tbody */
}

.table-container-paket {
    max-height: 650px;
    /* Sesuaikan dengan tinggi yang Anda inginkan */
    overflow: scroll;
    scrollbar-width: thin;
    /* Lebar bilah scroll horizontal */
    scrollbar-color: #808080 #f0f0f0;
}

.table-container-paket::-webkit-scrollbar {
    width: 12px;
    /* Lebar bilah scroll vertical */
}

.table-container-paket::-webkit-scrollbar-thumb {
    background-color: #808080;
    /* Warna bilah scroll */
    border-radius: 6px;
    /* Bentuk ujung bilah scroll */
}

.table-container-paket::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    /* Warna track bilah scroll */
}

.table-container-paket::-webkit-scrollbar-thumb:hover {
    background-color: #808080;
    /* Ganti dengan warna yang Anda inginkan saat dihover */
}

#matrikpakettable thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #808080;
    color: white;
}

#matrikpakettable th {
    text-align: center;
}

.table-container-akun {
    max-height: 650px;
    /* Sesuaikan dengan tinggi yang Anda inginkan */
    overflow: scroll;
    scrollbar-width: thin;
    /* Lebar bilah scroll horizontal */
    scrollbar-color: #808080 #f0f0f0;
    /* Warna bilah scroll */
}

.table-container-akun::-webkit-scrollbar {
    width: 12px;
    /* Lebar bilah scroll vertical */
}

.table-container-akun::-webkit-scrollbar-thumb {
    background-color: #808080;
    /* Warna bilah scroll */
    border-radius: 6px;
    /* Bentuk ujung bilah scroll */
}

.table-container-akun::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    /* Warna track bilah scroll */
}

.table-container-akun::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Ganti dengan warna yang Anda inginkan saat dihover */
}

#matrikakuntable thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #808080;
    color: white;
}

#matrikakuntable th {
    text-align: center;
}

/* @media (min-width: 992px) {
    .app-content {
        padding-top: 1% !important;
    }
} */

.was-validated .form-select:invalid+.select2 .select2-selection {
    border-color: #dc3545 !important;
}

.was-validated .form-select:valid+.select2 .select2-selection {
    border-color: #28a745 !important;
}

.was-validated .form-date:invalid {
    border-color: #dc3545 !important;
}

.was-validated .form-date:valid {
    border-color: #28a745 !important;
}

*:focus {
    outline: 0px;
}

.v-align-middle {
    vertical-align: middle !important;
}

.v-align-top {
    vertical-align: text-top !important;
}

.bg-color-grey {
    background-color: #808080;
}

#kt_app_root {
    overflow-x: hidden;
}

.card-login {
    right: 105%;
    top: 50%;
    translate: 0% -50%;
    display: none;
    opacity: 0;
    transition: all .3s;
}

.card-login.show {
    display: block;
}

.card-login.active {
    right: 50%;
    top: 50%;
    translate: 50% -50%;
    opacity: 1;
    transition: all .3s;
}

.card-forgot {
    left: 105%;
    top: 50%;
    translate: 0% -50%;
    opacity: 0;
    transition: all .3s;
}

.card-forgot.active {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    opacity: 1;
    transition: all .3s;
}

.login_kt_body {
    /* background-image: url('/assets/global/media/img/bg-1.jpg'); */
    border-top: 30px solid #fee50f;
}

*:focus {
    outline: 0px;
}

.v-align-middle {
    vertical-align: middle !important;
}

.v-align-top {
    vertical-align: text-top !important;
}

.bg-color-grey {
    background-color: #808080;
}

.overflow-auto {
    overflow: auto;
    max-height: 300px;
}

div.dataTables_wrapper div.dataTables_processing {
    background-color: white !important
}

@media (max-width: 600px) {
    .mt-md-10 {
        margin-top: 2.5rem !important;
    }

    .mb-custom-10 {
        margin-bottom: 2.5rem !important;
    }

    .py-custom-10 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    table.dataTable tfoot tr>.dtfc-fixed-left,
    table.dataTable tfoot tr>.dtfc-fixed-right,
    table.dataTable thead tr>.dtfc-fixed-left,
    table.dataTable thead tr>.dtfc-fixed-right {
        left: 0 !important;
    }
}

.form-select.form-select-sm.form-select-solid {
    width: 61px;
}

/* .form-select.form-select-sm.form-select-solid {
    width: 100% !important;
} */

.card-body.custom-login {
    background: #fef2db;
    border-radius: 6px;
    border: 2px solid #ffb824;
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
}

@media (min-width: 992px) {
    .mb-lg-30 {
        margin-bottom: 10rem !important;
    }
}

.pl-20 {
    padding-left: 1% !important;
}

.pl-40 {
    padding-left: 2% !important;
}

.pl-60 {
    padding-left: 3% !important;
}

#row_1_6,
#row_1_6_10,
#row_1_6_11 {
    margin-left: 46% !important;
}

.level-0 .ps-0.pl-0,
.level-1 .ps-0.pl-20,
.level-2 .ps-0.pl-40 {
    font-weight: 700 !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--group .select2-results__group {
    display: block;
    color: var(--bs-gray-800) !important;
    font-weight: 700 !important;
    font-size: 1.15rem;
    padding: 0 1.25rem 0 1.25rem;
    margin: 0 !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--group .select2-results__option {
    padding: 0.75rem 3.25rem !important;
}

strong.select2-results__group::before {
    content: '▶';
    margin-right: 5px;
    transition: transform 0.3s;
}

strong.select2-results__group.rotate-90::before {
    content: '▼';
    transform: rotate(90deg);
}

.dropdown-menu-child {
    margin-left: 20px;
}

.dropdown-parent-item::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-weight: 900;
    float: right;
    color: var(--bs-gray-600);
}

.dropdown-parent-item.expanded::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-weight: 900;
    color: var(--bs-gray-600);
}

.dropdown-toggle::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-weight: 900;
    border: unset;
    float: right;
    color: var(--bs-gray-600);
}

@media (min-width: 768px) {
    .symbol.symbol-md-45px.custom-img>img {
        width: 34px !important;
        height: 45px !important;
    }
}