.color-header {
    width: 100%;
    height: 29px;

    font-family: "Inter";
    font-style: italic;
    font-weight: 700;
    font-size: 24px;
    line-height: 21px;
    /* identical to box height, or 87% */

    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #003e87 0%, #0076ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.form-upload-file {
    min-height: auto;
    padding: 1.5rem 1.75rem;
    text-align: center;
    cursor: pointer;
    border: 1px dashed var(--bs-primary);
    background-color: var(--bs-primary-light);
    border-radius: 0.75rem !important;
}

.badge-custom-belum-lengkap {
    padding: 8px 12px;
    color: #f1416c;
    background-color: #f5f8fa;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

.badge-custom-menunggu-supervisor {
    padding: 8px 12px;
    color: #a1a5b7;
    background-color: #fff5f8;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

.badge-custom-verif-supervisor {
    padding: 8px 12px;
    color: #50cd89;
    background-color: #e8fff3;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

.badge-custom-perlu-diperbaiki {
    padding: 8px 12px;
    color: #8950fc;
    background-color: #eee5ff;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

.badge-custom-disetujui {
    padding: 8px 12px;
    color: #1bc5bd;
    background-color: #c9f7f5;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

.badge-custom-ditolak {
    padding: 8px 12px;
    color: #f1416c;
    background-color: #fff5f8;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

.badge-custom-perubahan-data {
    padding: 8px 12px;
    color: #ffc700;
    background-color: #fff8dd;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 600;
}

div.dataTables_scrollBody {
    border-left: none !important;
}

table.dataTable.table-striped > tbody > tr.odd > * {
    box-shadow: none !important;
}

div.dataTables_scrollBody {
    border-left: none !important;
}

.btn-custom {
    height: calc(3.75rem + 2px);
    line-height: 1.25;
    align-items: center;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    width: 85px;
    /* background-color: #003E87; */
}

.custom-height-foto {
    height: 190px;
}

.custom-border {
    border: 2px solid #00afaf !important;
    border-radius: 8px !important;
}

.sm-shadow-custom {
    box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
}

.btn-color-gray-600.active {
    background: #003e87 !important;
    border-bottom: 5px solid #ffc700 !important;
    border-radius: 8px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    color: #fff !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
}

.border-menu-custom {
    border: 2px solid #b5b5c3 !important;
    border-radius: 8px !important;
}

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

.custom-border-accordion {
    border-radius: 8px !important;
}

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

.text-separator-custom {
    color: #a1a5b7 !important;
}

.text-nama-custom {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: linear-gradient(90deg, #003e87 0%, #0076ff 100%) !important;
}

.bg-custom-404 {
    background: #fef9f7 !important;
}

.text-white-custom {
    color: #fff !important;
}

.text-404-custom {
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 32px !important;
    line-height: 44px !important;
    color: #00a34a !important;
}

.text-404-shadow {
    color: #00a34a !important;
}

.menu-item.active {
    background-color: #000 !important;
}

.bottom-wa {
    top: 10% !important;
    right: 120px !important;
}

@media (max-width: 991.98px) {
    .bottom-wa {
        top: 10% !important;
        right: 10% !important;
    }
}
.floating-info-custom {
    z-index: 1000 !important;
    top: -5% !important;
    right: 35% !important;
}

@media (max-width: 991.98px) {
    .floating-info-custom {
        top: 10% !important;
        right: 10% !important;
    }
}

.toast-custom {
    width: 100% !important;
}

.border-input-solid-custom {
    border: 1px solid var(--bs-gray-300) !important;
}
.scroll-x-custom::-webkit-scrollbar {
    height: 13px !important;
    background-color: #f4f4f4 !important;
    border-radius: 50rem !important;
}

div .scroll-x-custom::-webkit-scrollbar-thumb {
    background-color: #e4e6ef !important;
    border-radius: 50rem !important;
}

.btn.btn-info {
    border-color: #003e87 !important;
    background-color: #003e87 !important;
}

.form-control.form-control-solid {
    background-color: #f9f9f9 !important;
}

.bg-solid {
    background-color: #f9f9f9 !important;
}

.btn-check:checked + .btn.btn-active-info,
.btn-check:active + .btn.btn-active-info,
.btn.btn-active-info:focus:not(.btn-active),
.btn.btn-active-info:hover:not(.btn-active),
.btn.btn-active-info:active:not(.btn-active),
.btn.btn-active-info.active,
.btn.btn-active-info.show,
.show > .btn.btn-active-info {
    background-color: #003e87 !important;
}

.btn-verif {
    --bs-btn-color: #000000 !important;
    --bs-btn-bg: #04c8c8 !important;
    --bs-btn-border-color: #04c8c8 !important;
    --bs-btn-hover-color: #000000 !important;
    --bs-btn-hover-bg: #04c8c8 !important;
    --bs-btn-hover-border-color: #04c8c8 !important;
    --bs-btn-focus-shadow-rgb: 217, 169, 0 !important;
    --bs-btn-active-color: #000000 !important;
    --bs-btn-active-bg: #04c8c8 !important;
    --bs-btn-active-border-color: #ffcd1a !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #000000 !important;
    --bs-btn-disabled-bg: #04c8c8 !important;
    --bs-btn-disabled-border-color: #04c8c8 !important;
}

.border-2px-dashed-custom {
    border: 2px dashed !important;
}

.bg-detail-landing {
    background-color: #fff5f8;
}

.bg-landing-detail {
    background-color: #fff;
}

.select2-container--bootstrap5.select2-container--disabled .form-select {
    background-color: #f9f9f9 !important;
    border-color: #e1e3ea;
}

.geocoder-control-input.leaflet-bar {
    display: none !important;
}

.form-select.form-select-solid {
    border-color: #f9f9f9;
}

select[readonly] {
    pointer-events: none;
}

.dotmap {
    border-radius: 10px;
    background: #a5dfff;
}

.custom-popup .leaflet-popup-content-wrapper {
    /* background: #2c3e50; */
    /* color: #fff; */
    font-size: 16px;
    line-height: 24px;
    border-radius: 0px;
}
.custom-popup .leaflet-popup-content-wrapper a {
    color: rgba(255, 255, 255, 0.1);
}
.custom-popup .leaflet-popup-tip-container {
    width: 60px;
    height: 30px;
}
.custom-popup .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
}

.leaflet-popup-content {
    margin: 0px;
    line-height: 1.4;
}

.leaflet-container a.leaflet-popup-close-button {
    padding: 8px 28px 0 0 !important;
}

.ph-picture {
    background-color: #ced4da;
    height: 120px;
    width: 100%;
}

.accordion-border-custom {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #D3C0FF !important;
    border-radius: 0px !important;
}