:root {
    --primary: #0564E5;
    --primary-hover: #055BD0;
    --primary-soft: #E6F0FC;
    --secondary: #6576FF;
    --secondary-hover: #5C6BE8;
    --secondary-soft: #F0F1FF;
    --success: #198754;
    --success-hover: #177B4C;
    --success-soft: #E8F3EE;
    --danger: #DC3545;
    --danger-hover: #C8303F;
    --danger-soft: #FCEBEC;
    --warning: #FFC107;
    --warning-hover: #E8B006;
    --warning-soft: #FFF9E6;
    --info: #0DCAF0;
    --info-hover: #0CB8DA;
    --info-soft: #E7FAFE;


    --text-1: #ffffff;
    --text-2: #f5f5f5;
    --text-3: #ededed;
    --text-4: #e0e0e0;
    --text-5: #c2c2c2;
    --text-6: #9e9e9e;
    --text-7: #757575;
    --text-8: #616161;
    --text-9: #404040;
    --text-10: #0a0a0a;

    --text-soft-primary: #022A60;
    --text-soft-secondary: #2A326B;
    --text-soft-success: #0B3923;
    --text-soft-danger: #5C161D;
    --text-soft-warning: #6B5103;
    --text-soft-info: #055565;
    
}

* {
    font-family: 'Open Sans' !important;
}

/* Common Style */
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
p {
    font-family: 'Open Sans' !important;
    color: var(--text-10) !important;

}

p {
    font-size: 14px !important;
}

label {
    color: var(--text-10) !important;
    font-weight: 400 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

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

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

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

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

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


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


.h-fit-content {
    height: fit-content !important;
}

.w-fit-content {
    height: fit-content !important;
}


.p-20-24 {
    padding: 20px 24px !important;
}

.p-16-24 {
    padding: 16px 24px !important;
}

.p-36-40 {
    padding: 36px 40px !important;
}

.border-none {
    border: none !important;
}

.btn {
    padding: 7px 18px !important;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

.btn-primary {
    border-radius: 4px !important;
    background-color: var(--primary) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

.btn-primary:active,
.btn-outline-primary:active,
.btn-default:active {
    box-shadow: 0 0 2px 2.5px rgba(88, 151, 238, 1) !important;
}

.btn-secondary {
    border-radius: 4px !important;
    background-color: var(--secondary) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

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

.btn-secondary:active,
.btn-outline-secondary:active {
    box-shadow: 0 0 2px 2.5px rgba(152, 163, 255, 1) !important;
}

.btn-success {
    border-radius: 4px !important;
    background-color: var(--success) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.btn-success:hover {
    background-color: var(--success-hover) !important;
}

.btn-success:active,
.btn-outline-success:active {
    box-shadow: 0 0 2px 2.5px rgba(101, 175, 140, 1) !important;
}

.btn-danger {
    border-radius: 4px !important;
    background-color: var(--danger) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.btn-danger:hover {
    background-color: var(--danger-hover) !important;
}

.btn-danger:active,
.btn-outline-danger:active {
    box-shadow: 0 0 2px 2.5px rgba(200, 48, 63, 1) !important;
}

.btn-warning {
    border-radius: 4px !important;
    background-color: var(--warning) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--text-10) !important;
}

.btn-warning:hover {
    background-color: var(--warning-hover) !important;
}

.btn-warning:active,
.btn-outline-warning:active {
    box-shadow: 0 0 2px 2.5px rgba(255, 213, 89, 1) !important;
}

.btn-info {
    border-radius: 4px !important;
    background-color: var(--info) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--text-10);
}

.btn-info:hover {
    background-color: var(--info-hover) !important;
}

.btn-info:active,
.btn-outline-info:active {
    box-shadow: 0 0 2px 2.5px rgba(12, 184, 218, 1) !important;
}

.btn-light {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--primary) !important;
}

.btn-light:hover {
    background-color: var(--text-1-hover) !important;
    border-color: rgba(0, 0, 0, 0.08);
}

.btn-light:active {
    box-shadow: 0 0 2px 2.5px rgba(55, 131, 234, 1);
    /* box-shadow: 0 0 6px rgba(55, 131, 234, 1) */
}

.btn-outline-primary {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--primary) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-default {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--text-10) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-primary:hover {
    color: var(--primary-hover) !important;
}

.btn-default:hover {
    background-color: var(--text-2) !important;
}

.btn-outline-secondary {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--secondary) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-secondary:hover {
    color: var(--secondary-hover) !important;
}

.btn-outline-success {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--success) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-success:hover {
    color: var(--success-hover) !important;
}

.btn-outline-danger {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--danger) !important;
    border: 1px solid var(--danger, #E0E0E0) !important;
}

.btn-outline-danger:hover {
    color: var(--danger-hover) !important;
}

.btn-outline-warning {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--warning) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-warning:hover {
    color: var(--warning-hover) !important;
}

.btn-outline-info {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: var(--info) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-info:hover {
    color: var(--info-hover) !important;
}

.btn-upload {
    background-color: var(--text-2) !important;
    font-weight: 400;
    color: var(--text-10) !important;
}

/* untuk button konfirmasi delete */
.btn:has(.child-btn-hapus){
    background-color: var(--danger) !important;
    border: var(--danger) !important;
    color: #fff !important;
}

.badge-default {
    border-radius: 4px;
    color: var(--text-9);
    line-height: 18px;
    height: 24px;
    gap: 4px;
    font-size: 12px;
    background-color: var(--text-2);
    padding: 4px 8px;
;
}

.badge {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: none !important;
}

.badge-primary {
    background-color: var(--primary-soft) !important;
    color: var(--text-soft-primary) !important;
}

.badge-secondary {
    background-color: var(--secondary-soft) !important;
    color: var(--text-soft-secondary) !important;
}

.badge-success {
    background-color: var(--success-soft) !important;
    color: var(--text-soft-success) !important;
}

.badge-danger {
    background-color: var(--danger-soft) !important;
    color: var(--text-soft-danger) !important;
}

.badge-warning {
    background-color: var(--warning-soft) !important;
    color: var(--text-soft-warning) !important;
}

.badge-info {
    background-color: var(--info-soft) !important;
    color: var(--text-soft-info) !important;
}



form input {
    border: 1px solid var(--text-4);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    font-size: 14px !important;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

form select {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    font-size: 14px !important;

}

form textarea {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    font-size: 14px !important;

}

.has-error > .help-block {
    color: var(--danger);
    font-weight: 400;
}

.control-label {
    margin-bottom: 0.375rem;
}

::placeholder {
    color: var(--text-6, #9E9E9E) !important;
    font-size: 14px;
    font-weight: 400;
}

::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: var(--text-6, #9E9E9E) !important;
    font-size: 14px;
    font-weight: 400;
}


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

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

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

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

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

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

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

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

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

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

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

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

.color-success {
    color: var(--success) !important;
}

.color-danger {
    color: var(--danger) !important;
}

.color-warning {
    color: var(--warning) !important;
}

.color-info {
    color: var(--info) !important;
}

.bg-default {
    background-color: var(--text-5) !important;
}

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

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

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

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

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

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

.bg-primary-dim {
    background-color: var(--primary-soft) !important;
}

.bg-success-dim {
    background-color: var(--success-soft) !important;
}

.bg-secondary-dim {
    background-color: #FCF3E6 !important;
    color: #E58605 !important;
}

.bg-danger-dim {
    background-color: var(--danger-soft) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--text-4, #E0E0E0);
}

.border-right {
    border-right: 1px solid var(--text-4, #E0E0E0);
}

.dashed-line {
    height: 1.5px;
    /* Ketebalan garis putus-putus */
    width: 100%;
    /* Lebar garis putus-putus */
    background-image: repeating-linear-gradient(to right, var(--text-4, #E0E0E0), var(--text-4, #E0E0E0) 8px, transparent 8px, transparent 15px);
    /* Membuat pola garis putus-putus */
}

.text-nowrap {
    text-wrap: nowrap !important;
}

.modal-body {
    border-radius: 5px;
}

.kv-date-picker {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

#ajaxCrudModal .modal-header,  #ajaxCrudModal .modal-footer {
    background-color: var(--text-1);
    border: none;
}

.input-group-text {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    font-size: 14px !important;
}

.circle-blue {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* *** === *** */

/* *** CUSTOM Template *** */

.overline-title {
    letter-spacing: 0px !important;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-7) !important;
}

.nk-sidebar {
    background-color: var(--text-2) !important;
}

.nk-sidebar-head,
.nk-header {
    border-bottom: 1px solid var(--text-4, #E0E0E0);
}

.nk-sidebar.is-light {
    border-right-color: var(--text-4);
}


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

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

.nk-menu-item > a >.icon-material {
    color: #8094ae;
}

.is-light .nk-menu-link:hover,
.is-light .active>.nk-menu-link,
.nk-menu-link:hover .nk-menu-icon,
.nk-menu-item.active>.nk-menu-link .nk-menu-icon,
.nk-menu-item.current-menu>.nk-menu-link .nk-menu-icon,
.nk-menu-item:hover > a >.icon-material,
.nk-menu-item.active > a >.icon-material,
.hover-link:hover {
    color: var(--primary) !important;
}

.is-light .nk-menu-link {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.nk-menu-sub .nk-menu-link {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.nk-wrap {
    background-color: #fff !important;
}

.nk-content {
    padding: 32px 24px;
}

.card {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--text-4, #E0E0E0);
    background-color: #fff;
}

.card-header {
    border-bottom: 1px solid var(--text-4, #E0E0E0);
}

.card-footer {
    border-top: 1px solid var(--text-4, #E0E0E0);
}

.modal-title {
    font-weight: 600 !important;
}

.modal-body,
.modal-header {
    background-color: var(--text-1);
}

.stand-alone-table tr th {
    background-color: #E6F0FC;
    vertical-align: middle;
    color: var(--text-10);
}

/* .step-item:after {
    background-color: var(--primary-soft) !important;
} */

.checkbox-label {
    margin-bottom: 0px !important;
}

.h-fit-content {
    height: fit-content;
}

.shadow-none {
    box-shadow: none !important;
}
/* 
.border-dashed-nilai {
    border: 2px dashed var(--text-7);
    padding: 1rem;
} */

.dashed-border {
    padding: 1rem;
    border: 1px solid transparent;
    border-image: 1 repeating-linear-gradient(45deg, var(--text-5) 0, var(--text-5) 1em, transparent 0, transparent 2em,
                  var(--text-5) 0, var(--text-5) 3em, transparent 0, transparent 4em);
}

/* *** === *** */


/* *** gii style *** */

.index-custom .card {
    --bs-card-border-width: 0.9px;
    --bs-card-cap-bg: rgba(0, 0, 0, 0);

}

.kv-table-header tr th {
    color: var(--Neutral-100, #0A0A0A) !important;
    background: var(--Primary-primary-50, #E6F0FC);
    padding: 12px 16px;
    font-weight: 600 !important;
}

.kv-table-header tr th a {
    color: var(--Neutral-100, #0A0A0A) !important;
    font-weight: 600 !important;
}

.index-custom .card .table tr:first-child td {
    border-top: none;
}

.index-custom .kv-grid-panel .table-bordered>thead.kv-table-header>tr,
.kv-grid-panel .table-bordered>thead.kv-table-header>tr>th,
.kv-grid-panel .table-bordered>thead.kv-table-header>tr>td,
.kv-grid-panel .kv-table-header>tr,
.kv-grid-panel .kv-table-header>tr>th,
.kv-grid-panel .kv-table-header>tr>td {
    border-bottom: 1px solid var(--text-4, #E0E0E0) !important;
}

.index-custom th.kv-align-middle a {
    color: var(--Neutral-100, #0A0A0A);
    font-weight: 600;
}

.index-custom td.kv-align-middle {
    color: var(--Neutral-80, #616161);
}

.kv-grid-table td:first-child {
    padding-left: 16px;
}

.kv-grid-table tbody tr td {
    padding: 12px 16px;
}

.index-custom .card-header .btn-primary {
    display: flex;
    height: 36px;
    padding: 7px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--Primary-primary-500, #0564E5);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    color: var(--Neutral-10, #FFF);
}

.index-custom .card-header .fw-normal {
    color: var(--Neutral-100, #0A0A0A);
    font-size: 16px;
    line-height: 24px;
}

.index-custom .pagination .page-item.active a.page-link {
    background: var(--Primary-primary-500, #0564E5);
}

.index-custom .table td:last-child,
.table th:last-child {
    padding: 12px 16px !important;
}

.index-custom .kv-table-header {
    border: 1px solid var(--text-4, #E0E0E0);
}

.select2-container .select2-selection--single {
    height: calc(2.125rem + 2px);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

input.select2-search__field {
    margin: 0 !important;
    line-height: unset !important;
    padding-top: 6px !important;
}

/* .select2-selection--multiple {
    min-height: 35px !important;
  }
  
.select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 15px !important;
    padding: 9px 12px 6px 12px !important;
    margin-top: 9px !important;
    width: 100% !important;
} */

.select2-selection--multiple ul.select2-selection__rendered {
    white-space: unset !important;
}

.select2-selection--multiple .select2-selection__choice {
    color: var(--text-9) !important;
    font-size: 12px !important;
}

.select2-selection--multiple .select2-selection__choice__remove {
    line-height: unset !important;
    padding-right: 5px !important;
}

.select2-selection--multiple .select2-selection__clear {
    margin-top: 10px !important;
    margin-right: 10px !important;
}

/* *** === *** */

.crm-widget .col {
    border-right: 1px solid var(--text-5);
}

@media (max-width: 767.98px) {
    .crm-widget .col {
        border-right: 0;
        border-bottom: 1px solid var(--text-5);
    }
}

.nav-tabs .nav-link {
    font-weight: 600 !important;
    color: var(--text-8) !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    font-weight: 600 !important;
}
.nav-tabs .nav-link:after {
    height: 2px !important;
    background-color: var(--primary) !important;
}

.alert-fill.alert-primary {
    background: var(--primary) !important;
}