:root {
    --neutral-10: #FFFFFF;
    --neutral-20: #F5F5F5;
    --neutral-30: #EDEDED;
    --neutral-40: #E0E0E0;
    --neutral-50: #C2C2C2;
    --neutral-60: #9E9E9E;
    --neutral-70: #757575;
    --neutral-80: #616161;
    --neutral-90: #404040;
    --neutral-100: #0A0A0A;

    --bs-app-header-base-bg-color: #0A0A0A;

    --primary-50: #E6E6F2;
    --primary-100: #B0B0D8;
    --primary-200: #8A8AC5;
    --primary-300: #5454AA;
    --primary-400: #333399;
    --primary-500: #000080;
    --primary-600: #000074;
    --primary-700: #00005B;
    --primary-800: #000046;
    --primary-900: #000036;

    --secondary-50: #FCF2E6;
    --secondary-100: #F5D8B3;
    --secondary-200: #F1C58E;
    --secondary-300: #EAAB5A;
    --secondary-400: #E69A3A;
    --secondary-500: #E08109;
    --secondary-600: #CC7508;
    --secondary-700: #9F5C06;
    --secondary-800: #7B4705;
    --secondary-900: #5E3604;

    --success-50: #E8F3EE;
    --success-100: #B8DACA;
    --success-200: #95C8B0;
    --success-300: #65AF8C;
    --success-400: #479F76;
    --success-500: #198754;
    --success-600: #177B4C;
    --success-700: #12603C;
    --success-800: #0E4A2E;
    --success-900: #0B3923;

    --danger-50: #FCEBEC;
    --danger-100: #F4C0C5;
    --danger-200: #F4C0C5;
    --danger-300: #E87882;
    --danger-400: #E35D6A;
    --danger-500: #DC3545;
    --danger-600: #C8303F;
    --danger-700: #9C2631;
    --danger-800: #791D26;
    --danger-900: #5C161D;

    --warning-50: #FFF9E6;
    --warning-100: #FFECB2;
    --warning-200: #FFE28D;
    --warning-300: #FFD559;
    --warning-400: #FFCD39;
    --warning-500: #FFC107;
    --warning-600: #E8B006;
    --warning-700: #B58905;
    --warning-800: #8C6A04;
    --warning-900: #6B5103;

    --info-50: #E7FAFE;
    --info-100: #B4EFFA;
    --info-200: #90E7F8;
    --info-300: #5DDBF5;
    --info-400: #3DD5F3;
    --info-500: #0DCAF0;
    --info-600: #0CB8DA;
    --info-700: #098FAA;
    --info-800: #076F84;
    --info-900: #055565;

}

* {
    --bs-primary: var(--primary-500);
    --bs-text-primary: var(--primary-500);
    --bs-primary-active: var(--primary-600);
    --bs-primary-light: var(--primary-50);

    --bs-secondary: var(--secondary-500);
    --bs-text-secondary: var(--secondary-500);
    --bs-secondary-active: var(--secondary-600);
    --bs-secondary-light: var(--secondary-50);

    --bs-success: var(--success-500);
    --bs-text-success: var(--success-500);
    --bs-success-active: var(--success-600);
    --bs-success-light: var(--success-50);

    --bs-danger: var(--danger-500);
    --bs-text-danger: var(--danger-500);
    --bs-danger-active: var(--danger-600);
    --bs-danger-light: var(--danger-50);

    --bs-info: var(--info-500);
    --bs-text-info: var(--info-500);
    --bs-info-active: var(--info-600);
    --bs-info-light: var(--info-50);

    --bs-warning: var(--warning-500);
    --bs-text-warning: var(--warning-500);
    --bs-warning-active: var(--warning-600);
    --bs-warning-light: var(--warning-50);

    --bs-border-dashed-color: var(--neutral-40);
}


@font-face {
    font-family: 'Material Symbol';
    src: url('/fonts/Material Symbols Variable.ttf') format('truetype');
}


.required::after {
    content: unset !important;
}

.form-control:disabled {
    color: var(--neutral-70);
    background-color: var(--neutral-30);
    border-color: var(--neutral-40);
    opacity: 1;
}

#kt_app_header {
    color: var(--neutral-10) !important;
}

.app-header .app-header-menu .menu>.menu-item>.menu-link .menu-title {
    color: var(--neutral-60);
    font-weight: 400;
}

.app-header .app-header-menu .menu>.menu-item.here>.menu-link {
    color: var(--neutral-100) !important;
    background-color: var(--neutral-10);
}

.here>.menu-link>.menu-title {
    color: var(--neutral-100) !important;
}

.icon {
    font-family: 'Material Symbol' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px !important;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.color-text-1 {
    color: var(--neutral-10) !important;
}

.color-text-2 {
    color: var(--neutral-20) !important;
}

.color-text-3 {
    color: var(--neutral-30) !important;
}

.color-text-4 {
    color: var(--neutral-40) !important;
}

.color-text-5 {
    color: var(--neutral-50) !important;
}

.color-text-6 {
    color: var(--neutral-60) !important;
}

.color-text-7 {
    color: var(--neutral-70) !important;
}

.color-text-8 {
    color: var(--neutral-80) !important;
}

.color-text-9 {
    color: var(--neutral-90) !important;
}

.color-text-10 {
    color: var(--neutral-100) !important;
}

.text-primary-50 {
    color: var(--primary-50);
}

.text-primary-100 {
    color: var(--primary-100);
}

.text-primary-500 {
    color: var(--primary-500);
}

.text-warning-700 {
    color: var(--warning-700);
}

.fs-32 {
    font-size: 32px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-12 {
    font-size: 12px !important;
}

/* sidebar */
#kt_app_sidebar_menu {
    background-color: #0F1013;
    margin-left: 0px !important;
}

/* end sidebar */

/* button */
.btn-secondary,
.btn.btn-secondary i,
.btn.btn-warning i,
.btn.btn-info i,
.btn.btn-warning,
.btn.btn-info {
    color: var(--neutral-100) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
}

/* end button */


/* badge */
.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

.badge.badge-warning,
.badge.badge-info {
    color: var(--neutral-100);
}

.badge-light-primary {
    color: var(--primary-800);
}

.badge-light-danger {
    color: var(--danger-800);
}

.badge-light-success {
    color: var(--success-800);
}

.badge-light-warning {
    color: var(--warning-800);
}

.badge-light-info {
    color: var(--info-800);
}

/* end badge */

/* end breadcrumb */
.breadcrumb {
    --bs-breadcrumb-item-active-color: var(--neutral-70) !important;
}

.breadcrumb a {
    color: var(--primary-500) !important;
}

/* end breadcrumb */


/* kartik gridview */
.kv-grid-container {
    border-left: 1px solid var(--neutral-40) !important;
    border-top: 1px solid var(--neutral-40) !important;
    border-right: 1px solid var(--neutral-40) !important;
    border-radius: 8px;
    border-bottom: 1px solid var(--neutral-40) !important;
}

.kv-grid-container .kv-grid-table tr:not(:last-child) td,
.kv-grid-container .kv-grid-table tr:not(:last-child) th {
    border-bottom: 1px solid var(--neutral-40) !important;
}

.table:not(.table-bordered) td:first-child,
.table:not(.table-bordered) th:first-child,
.table:not(.table-bordered) tr:first-child {
    padding-left: 12px;
}

.kv-table-header tr th {
    background-color: var(--neutral-10) !important;
    padding: 16px 12px;
    vertical-align: middle !important;
    color: var(--neutral-100) !important;
    font-size: 14px;
    font-weight: 500 !important;
}

.kv-grid-table tr td {
    padding: 12px !important;
}

.kv-table-header tr th a {
    color: var(--neutral-100) !important;
    font-size: 14px;
    font-weight: 500;
}

#kv-grid-table .kv-table-header tr {
    border-color: var(--neutral-40);
}

#kv-grid-table .kv-table-header tr {
    border-color: var(--neutral-40);
}

.kv-grid-table tbody tr {
    border-color: var(--neutral-40);
}


.kv-grid-table tbody tr {
    border-color: var(--neutral-40);
}

.kv-table-header {
    border-bottom: 1px solid var(--neutral-40) !important;
}

.pagination {
    --bs-pagination-hover-color: var(--primary-500);
    --bs-pagination-hover-bg: transparent;
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-active-bg: var(--primary-500);
    --bs-pagination-active-border-color: transparent;
}

.pagination>.page-item .active a {
    background-color: var(--primary) !important;
    color: var(--neutral-10) !important;
}

.card {
    border: 1px solid var(--neutral-40) !important;
}

.card-header,
.modal-header {
    border-bottom-color: var(--neutral-40) !important;
}

.card-footer,
.modal-footer {
    border-top-color: var(--neutral-40) !important;
}

.border-0 {
    border-width: 0 !important;
}

#crud-datatable-border-0>.card {
    border: 0 !important;
    box-shadow: unset !important;
    -webkit-box-shadow: unset !important;
    margin-bottom: 0px !important;
}

#crud-datatable-border-0>.card>.panel>.card-footer {
    padding: 16px 0px 0px 0px !important;
    border: 0 !important;
}

/* end gridview */

.select2-search__field {
    padding-left: 10px !important;
}

/* background */
.bg-default {
    background-color: transparent !important;
    border: 1px solid var(--neutral-40);
}

.bg-primary-300 {
    background-color: var(--primary-300);
}

.bg-warning-300 {
    background-color: var(--warning-300);
}

.bg-danger-300 {
    background-color: var(--danger-300);
}

.bg-danger-50 {
    background-color: var(--danger-50);
}

.bg-info-300 {
    background-color: var(--info-300);
}

.bg-info-50 {
    background-color: var(--info-50);
}

.bg-success-300 {
    background-color: var(--success-300);
}

/* end background */

/* card */
.card.border-0 {
    box-shadow: unset !important;
}

/* end background */

.nav.nav-pills.nav-pills-custom .show>.nav-link.active .nav-text,
.nav.nav-pills.nav-pills-custom .nav-link.active .nav-text {
    color: var(--primary-500) !important;
}

.form-select, .select2-selection, input[type=text]:not(#passwordField):not(#ulangPasswordField):not(#nilai):not(#temp_no_usulan):not(#tkdn):not(#indeks_penyesuaian):not(.krajee-datepicker):not([inputmode=numeric]) {
    padding: 8px 12px !important;
    height: 34px !important;
    border-radius: 8px !important;
}

/* input[inputmode=numeric]  {
    height: unset !important;
    border-r
} */

.select2-selection__clear {
    margin-right: 15px;
}

.form-select {
    width: 65px;
}
.bg-hover-primary:hover {
    color: var(--neutral-10) !important;
}
.card-dashed {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    border: 1px #E0E0E0 dashed;
}

.form-check-custom input[type="checkbox"] {
    background-color: var(--success-500);
    cursor: pointer;
}