body {
    background: #eee;
}

input::-webkit-calendar-picker-indicator {
    display: none;
}

.page-loader.page-loader-logo {
    background: #111;
}

.img-logo {
    text-align: center;
    width: 100%;
}

.input-group-text {
    background-color: #fff;
}

.input-icon .form-control.is-valid, .input-icon .form-control.is-invalid {
    padding-right: 1rem;
}

.modal-xxl {
    width: 100% !important;
    max-width: 100% !important;
}

.modal-xl {
    width: 90% !important;
    max-width: 90% !important;
}

    .modal-xl .container {
        max-width: 100% !important;
    }

.swal-xxl {
    width: 100% !important;
}

.swal-xl {
    width: 75% !important;
}

.swal-lg {
    width: 50% !important;
}

.swal-sm {
    width: 12em !important;
}

table td,
.dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable td {
    padding: 0.5rem;
}

table.table-fit {
    width: auto !important;
    table-layout: auto !important;
}

    table.table-fit thead th, table.table-fit tfoot th {
        width: auto !important;
    }

    table.table-fit tbody td, table.table-fit tfoot td {
        width: auto !important;
    }

.upload {
    opacity: 0;
}

.upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.upload-image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}

    .upload-image-area img {
        z-index: 2;
        position: relative;
    }

.swal-25 .swal2-content {
    max-height: 25vh;
}

    .swal-25 .swal2-content .swal2-html-container {
        max-height: 25vh;
    }

.dt-buttons {
    margin-bottom: 20px;
}

.backdrop-1040 .modal-backdrop {
    z-index: 1040;
}

.backdrop-1042 .modal-backdrop {
    z-index: 1042;
}

.backdrop-1044 .modal-backdrop {
    z-index: 1044;
}

.backdrop-1046 .modal-backdrop {
    z-index: 1046;
}

.backdrop-1048 .modal-backdrop {
    z-index: 1048;
}

.backdrop-1050 .modal-backdrop {
    z-index: 1050;
}

.backdrop-1052 .modal-backdrop {
    z-index: 1052;
}

.backdrop-1054 .modal-backdrop {
    z-index: 1054;
}

.backdrop-1056 .modal-backdrop {
    z-index: 1056;
}

.backdrop-1058 .modal-backdrop {
    z-index: 1058;
}

.select2-container {
    display: block;
}

.select2-container--open {
    z-index: 9999;
}


.text-vertical {
    white-space: nowrap !important;
    position: relative;
    width: 57px;
}

    .text-vertical > strong {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
        text-align: center;
        vertical-align: middle;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }

.dt-buttons.btn-group.flex-wrap {
    float: left;
}

.dataTables_length {
    float: left;
    margin-left: 10px;
    line-height: 40px;
}

.paging_listbox .select2-container {
    width: auto;
    display: inline-block;
}

.table-numbering {
    counter-reset: rowNumber;
}

    .table-numbering thead tr::before {
        display: table-cell;
        content: "No.";
        font-weight: bold;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 0.3rem;
        text-align: left;
    }

    .table-numbering tbody tr::before {
        display: table-cell;
        counter-increment: rowNumber;
        content: counter(rowNumber) ".";
        padding: 0.75rem;
        padding-right: 0.3rem;
        text-align: right;
        border: 1px solid #EBEDF3;
    }

.fv-plugins-icon {
    cursor: text;
}

ul.menu-nav li.menu-item a.menu-link .menu-icon path,
ul.menu-nav li.menu-item a.menu-link .menu-icon circle {
    fill: #494b74;
}

ul.menu-nav li.menu-item a.menu-link:hover .menu-icon path,
ul.menu-nav li.menu-item a.menu-link:hover .menu-icon circle {
    fill: #ffffff;
}


.svg-icon svg g path,
.svg-icon svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #B5B5C3;
}

.svg-icon svg:hover g path,
.svg-icon svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-icon-white svg g path,
.svg-icon.svg-icon-white svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #ffffff !important;
}

.svg-icon.svg-icon-white svg:hover g path,
.svg-icon.svg-icon-white svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-white svg path,
.svg-icon.svg-logo-white svg circle {
    fill: #ffffff !important;
}

.svg-icon.svg-icon-primary svg g path,
.svg-icon.svg-icon-primary svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #3699FF !important;
}

.svg-icon.svg-icon-primary svg:hover g path,
.svg-icon.svg-icon-primary svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-primary svg path,
.svg-icon.svg-logo-primary svg circle {
    fill: #3699FF !important;
}

.svg-icon.svg-icon-secondary svg g path,
.svg-icon.svg-icon-secondary svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #181C32 !important;
}

.svg-icon.svg-icon-secondary svg:hover g path,
.svg-icon.svg-icon-secondary svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-secondary svg path,
.svg-icon.svg-logo-secondary svg circle {
    fill: #181C32 !important;
}

.svg-icon.svg-icon-success svg g path,
.svg-icon.svg-icon-success svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #1BC5BD !important;
}

.svg-icon.svg-icon-success svg:hover g path,
.svg-icon.svg-icon-success svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-success svg path,
.svg-icon.svg-logo-success svg circle {
    fill: #1BC5BD !important;
}

.svg-icon.svg-icon-info svg g path,
.svg-icon.svg-icon-info svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #8950FC !important;
}

.svg-icon.svg-icon-info svg:hover g path,
.svg-icon.svg-icon-info svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-info svg path,
.svg-icon.svg-logo-info svg circle {
    fill: #8950FC !important;
}

.svg-icon.svg-icon-warning svg g path,
.svg-icon.svg-icon-warning svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #FFA800 !important;
}

.svg-icon.svg-icon-warning svg:hover g path,
.svg-icon.svg-icon-warning svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-warning svg path,
.svg-icon.svg-logo-warning svg circle {
    fill: #FFA800 !important;
}

.svg-icon.svg-icon-danger svg g path,
.svg-icon.svg-icon-danger svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #F64E60 !important;
}

.svg-icon.svg-icon-danger svg:hover g path,
.svg-icon.svg-icon-danger svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-danger svg path,
.svg-icon.svg-logo-danger svg circle {
    fill: #F64E60 !important;
}

.svg-icon.svg-icon-light svg g path,
.svg-icon.svg-icon-light svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #F3F6F9 !important;
}

.svg-icon.svg-icon-light svg:hover g path,
.svg-icon.svg-icon-light svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-light svg path,
.svg-icon.svg-logo-light svg circle {
    fill: #F3F6F9 !important;
}

.svg-icon.svg-icon-dark svg g path,
.svg-icon.svg-icon-dark svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #181C32 !important;
}

.svg-icon.svg-icon-dark svg:hover g path,
.svg-icon.svg-icon-dark svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-dark svg path,
.svg-icon.svg-logo-dark svg circle {
    fill: #181C32 !important;
}

.svg-icon.svg-icon-dark-75 svg g path,
.svg-icon.svg-icon-dark-75 svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #3F4254 !important;
}

.svg-icon.svg-icon-dark-75 svg:hover g path,
.svg-icon.svg-icon-dark-75 svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-dark-75 svg path,
.svg-icon.svg-logo-dark-75 svg circle {
    fill: #3F4254 !important;
}

.svg-icon.svg-icon-dark-65 svg g path,
.svg-icon.svg-icon-dark-65 svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #5E6278 !important;
}

.svg-icon.svg-icon-dark-65 svg:hover g path,
.svg-icon.svg-icon-dark-65 svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-dark-65 svg path,
.svg-icon.svg-logo-dark-65 svg circle {
    fill: #5E6278 !important;
}

.svg-icon.svg-icon-dark-50 svg g path,
.svg-icon.svg-icon-dark-50 svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #7E8299 !important;
}

.svg-icon.svg-icon-dark-50 svg:hover g path,
.svg-icon.svg-icon-dark-50 svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-dark-50 svg path,
.svg-icon.svg-logo-dark-50 svg circle {
    fill: #7E8299 !important;
}

.svg-icon.svg-icon-dark-25 svg g path,
.svg-icon.svg-icon-dark-25 svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #D1D3E0 !important;
}

.svg-icon.svg-icon-dark-25 svg:hover g path,
.svg-icon.svg-icon-dark-25 svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.svg-icon.svg-logo-dark-25 svg path,
.svg-icon.svg-logo-dark-25 svg circle {
    fill: #D1D3E0 !important;
}

.svg-icon.svg-icon-muted svg g path,
.svg-icon.svg-icon-muted svg g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #B5B5C3 !important;
}

.svg-icon.svg-icon-muted svg:hover g path,
.svg-icon.svg-icon-muted svg:hover g circle {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.alert.alert-custom {
    display:block !important;
}

.table-foto {
    width: 150px;
    min-width: 120px; /* Lebar minimum agar tidak terlalu kecil di layar sempit */
    vertical-align: middle !important;
}

    .table-foto img {
        width: 100%;
        height: auto;
        border-radius: 8px; /* Sudut sedikit melengkung agar lebih modern */
        object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi */
    }