.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    margin: 0 auto
}

.preloader-animation {
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    position: absolute
}

.preloader-animation svg {
    width: 22rem;
    margin-top: -25%;
}

.preloader-animation p {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
}

@media (max-width: 768px) {
    .preloader-animation svg {
        width: 20rem;
    }

    .preloader-animation p {
        bottom: 27.5%;
    }
}

@-webkit-keyframes preloader-keyframe- {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }

    100% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }
}

@keyframes preloader-keyframe- {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }

    100% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }
}

@-webkit-keyframes preloader-keyframe-1 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }

    100% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }
}

@keyframes preloader-keyframe-1 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }

    100% {
        stroke-dashoffset: 0;
        fill: #24a3f2
    }
}

@-webkit-keyframes preloader-keyframe-2 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #55bdfc
    }

    100% {
        stroke-dashoffset: 0;
        fill: #55bdfc
    }
}

@keyframes preloader-keyframe-2 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #55bdfc
    }

    100% {
        stroke-dashoffset: 0;
        fill: #55bdfc
    }
}

@-webkit-keyframes preloader-keyframe-3 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #afe0ff
    }

    100% {
        stroke-dashoffset: 0;
        fill: #afe0ff
    }
}

@keyframes preloader-keyframe-3 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #afe0ff
    }

    100% {
        stroke-dashoffset: 0;
        fill: #afe0ff
    }
}

@-webkit-keyframes preloader-keyframe-4 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #ffb406
    }

    100% {
        stroke-dashoffset: 0;
        fill: #ffb406
    }
}

@keyframes preloader-keyframe-4 {
    40% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    60% {
        stroke-dashoffset: 0;
        fill: #ffb406
    }

    100% {
        stroke-dashoffset: 0;
        fill: #ffb406
    }
}

#password_login::-ms-reveal,
#password_login::-ms-clear {
    display: none;
}

.bootstrap-table .fixed-table-container {
    position: relative;
}

.bootstrap-table .fixed-table-loading {
    display: block;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    align-content: center;
    position: absolute;
    z-index: 1;
    height: inherit;
}

.bootstrap-table .fixed-table-loading span {
    display: block;
    width: 100%;
    height: 100%;
}

.bootstrap-table .fixed-table-loading svg {
    display: none;
}

.bootstrap-table .fixed-table-loading .fixed-table-loading-content svg {
    display: inline-block;
    margin-right: 15px;
}

.bootstrap-table .fixed-table-loading img[alt="preloader"] {
    width: 50px;
}

.bootstrap-table .fixed-table-loading .fixed-table-loading-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.bootstrap-table table.table-fixed tr.no-records-found td {
    padding-bottom: 15px;
    color: #000000;
}

.bootstrap-table table.table-fixed thead tr th {
    font-size: .875em;
    font-weight: 600;
    color: rgb(107, 114, 128);
}

.bootstrap-table table.table-fixed thead tr .th-inner.sortable {
    cursor: pointer;
}

.bootstrap-table table.table-fixed thead tr .th-inner.sortable.sortable-center {
    padding-right: 25px;
}

.dark .bootstrap-table table.table-fixed tr.no-records-found td,
.dark .bootstrap-table table.table-fixed thead tr th {
    color: white;
}

.bootstrap-table table.table-fixed th {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.bootstrap-table .page-list #showListNumber {
    position: absolute !important;
    bottom: 40px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    border-radius: 5px;
    z-index: 2 !important;
}

.bootstrap-table .page-list .open #showListNumber{
    display: flex !important;
    flex-direction: column-reverse !important;
}

.bootstrap-table .page-list span {
    position: relative;
}

.bootstrap-table .page-list #showListNumber li a {
    width: 100%;
    display: block;
    padding: 5px;
}

.bootstrap-table .fixed-table-toolbar .table-toolbar {
    padding: 0px;
}

.bootstrap-table .fixed-table-toolbar .search {
    position: static;
}

.bootstrap-table .fixed-table-pagination {
    border-radius: 0.5rem;
}

.bootstrap-table .fixed-table-toolbar .dropdown-menu {
    transform: translate(-125px, 45px) !important;
    padding: 0px;
}

.bootstrap-table .fixed-table-toolbar .dropdown-menu li {
    margin-top: 0px;
}

.bootstrap-table .fixed-table-toolbar .dropdown-menu li label {
    display: flex !important;
    align-content: center;
    align-items: center;
    padding: 5px;
}

.bootstrap-table .fixed-table-toolbar .dropdown-menu li label input {
    margin-right: 10px;
}

.bootstrap-table .card-view:first-child {
    margin-top: 15px;
}

.bootstrap-table .card-view {
    display: grid;
    grid-template-columns: 175px 1fr;
    grid-gap: 10px;
    margin-bottom: 10px;
}

.bootstrap-table .card-view:last-child {
    margin-bottom: 15px;
}

.bootstrap-table .card-view .title {
    text-align: right !important;
    font-weight: 600;
}

@media (max-width: 640px) {
    .bootstrap-table .fixed-table-loading {
        top: 0;    
    }

    .bootstrap-table .fixed-table-toolbar .bars {
        float: none !important;
        display: block;
    }

    .bootstrap-table .fixed-table-pagination .pull-left.pagination-detail,
    .bootstrap-table .fixed-table-pagination .pull-right.pagination {
        float: none;
    }
    
    .bootstrap-table .fixed-table-pagination .pull-left.pagination-detail {
        text-align: left;
    }
    
    .bootstrap-table .fixed-table-pagination .pull-right.pagination {
        justify-items: left;
    }
}

#main-content {
    min-height: calc(100vh - 65px);
}

.select2-container {
    max-width: 100%;
    font-size: 14px;
}

.select2-search__field {
    border-radius: 5px;
    font-size: 14px;
    padding: 5px 10px !important;
    border-color: rgb(209, 213, 219) !important;
}

.select2-dropdown {
    padding: 0px !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: rgb(30 64 175) !important;
}

.select2-selection__rendered {
    padding: 0px 2.5px !important;
}

.dark .select2-container--default .select2-selection--single {
    color: white;
}

.dark .select2-container {
    background-color: #374151 !important;
    border-color: rgb(75 85 99) !important;
}

.dark .select2-dropdown {
    background-color: #374151 !important;
    border-color: rgb(75 85 99) !important;
}

.dark .select2-results__option {
    color: white;
}

.dark .select2-search__field {
    background-color: #374151;
    border-color: rgb(75 85 99) !important;
    color: white;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #111827;
}

.validate-container.validate-container-error .select2-container {
    border-color: rgb(153, 27, 27) !important;
    background-color: rgb(254 242 242) !important;
}

.validate-container.validate-container-error .select2-container--default .select2-selection--single {
    color: rgb(153, 27, 27) !important;
}

.validate-container.validate-container-valid .select2-container {
    border-color: rgb(21, 128, 61) !important;
    background-color: rgb(240 253 244) !important;
}

.validate-container.validate-container-valid .select2-container--default .select2-selection--single {
    color: rgb(21, 128, 61) !important;
}

.dark .validate-container.validate-container-error .select2-container {
    border-color: rgb(248, 113, 113) !important;
    background-color: rgb(55, 65, 81) !important;
}

.dark .validate-container.validate-container-error .select2-container--default .select2-selection--single {
    color: rgb(248, 113, 113) !important;
}

.dark .validate-container.validate-container-valid .select2-container {
    border-color: rgb(34, 197, 94) !important;
    background-color: rgb(55, 65, 81) !important;
}

.dark .validate-container.validate-container-valid .select2-container--default .select2-selection--single {
    color: rgb(34, 197, 94) !important;
}

.alert-toast-container {
    transform: translateX(125%);
    animation: .5s alert-toast-show forwards;
}

.alert-toast-container .alert-toast {
    cursor: pointer;
}

@keyframes alert-toast-show {
  from {
    transform: translateX(125%);
  }
  to {
    transform: translateX(0%);
  }
}

@media (max-width: 640px) {
    .alert-toast-container {
        transform: translateX(0%) translateY(150%);
    }

    @keyframes alert-toast-show {
      from {
        transform: translateX(0%) translateY(150%);
      }
      to {
        transform: translateX(0%) translateY(0%);
      }
    }
}

.login .modal-backdrop.in {
    background: #000;
    opacity: .5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
}

.table-client .fixed-table-loading {
    display: none !important;
}

.json-viewer .type-number {
    color: #1A56DB;
}

.json-viewer .type-string {
    color: #046C4E;
}

.dark .json-viewer {
    color: #fff;
}

.dark .json-viewer a.list-link {
    color: #fff;
    text-decoration: none;
    position: relative;
}

.dark .json-viewer .type-number {
    color: #3F83F8;
}

.dark .jstree {
    color: white;
}

.jstree-wholerow {
    border-radius: 2px;
}

.jstree-anchor,
.jstree-wholerow {
    transition: 0s !important;
    font-size: .9rem;
}

.dark .jstree-hovered,
.dark .jstree-wholerow-hovered {
    background: rgb(55, 65, 81) !important;
}

.dark .jstree-clicked,
.dark .jstree-wholerow-clicked {
    background: rgb(17, 24, 39) !important;
}

.dark .jstree-container-ul .jstree-anchor {
    color: white !important;
}

.dark .json-viewer .type-string {
    color: #0E9F6E;
}

.select2-container--default .select2-selection--multiple {
    background: transparent;
    border: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid rgb(209, 213, 219);
    background: white;
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: white;
    background: #111827;
    border: 1px solid #111827;
}

.select2-selection__choice__remove {
    padding-right:5px;
    display: inline-block;
}

.dark .select2-selection__clear {
    color: white;
}

tr.no-records-found td {
    color: rgb(17, 24, 39);
    padding-bottom: 15px;
}

.dark tr.no-records-found td {
    color: white;
}

#picker [role="document"] .picker-container {
    padding: 0px;
    margin-bottom: 0px !important;
}

#picker [role="document"] {
    width: 1024px;
    max-width: 100%;
}

#picker [role="document"] .picker-container table tr td:first-child {
    width: 50px;
}

.comment th,
.default th {
    font-size: 1em !important;
}

.radio-look:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: .55em .55em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
}

.dark .radio-look:checked,.radio-look:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
    background-size: 1em 1em
}

.radio-look {
    border-radius: 100%;
}

.dark .chosen-container-multi .chosen-choices {
    background: rgb(55, 65, 81);
    border-color: rgb(75, 85, 99);
}

.dark .chosen-container-active .chosen-choices li.search-field input[type=text] {
    color: white !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
    box-shadow: none;
}

.dark .chosen-container-multi .chosen-choices li.search-choice {
    color: white;
    background: rgb(17 24 39);
    border: 1px solid rgb(75, 85, 99);
}

.dark .chosen-container .chosen-results {
    color: white;
}

.chosen-container .chosen-drop {
    box-shadow: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.dark .chosen-container .chosen-drop {
    background: rgb(55, 65, 81);
    border: 1px solid rgb(75, 85, 99);
}

.dark .chosen-container .chosen-results li.no-results {
    background: rgb(55, 65, 81);
}

.dataTable thead td {
    font-weight: 600;
    text-transform: none;
    font-size: inherit;
}

.dataTable tbody td {
    font-size: inherit;
}

.dark .dataTable thead td {
    color: white;
}

.dark .dataTable tbody td {
    background: rgb(31, 41, 55);
}

.dark .dataTable thead,
.dark .dataTable thead tr,
.dark .dataTable tbody tr {
    border-color: rgb(75 85 99);
}

.dataTables_processing {
    color: transparent;
    background-color: white;
    font-size: .9em;
}

.dataTables_processing:before {
    content: 'Sedang Memuat. Mohon Tunggu.';
    display: block;
    font-weight: 600;
}

.dark .dataTables_processing {
    background-color: rgb(31, 41, 55);
}

.dark .dataTables_processing:before {
    color: white;
}

table thead tr th.item-column {
    max-width: 300px !important;
}

.dark .dark\:bg-blue-1000 {
    background-color: rgb(0, 40, 78);
}

.flatpickr-day[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    background: #111827;
    color: #fff;
    padding: 5px 10px;
    top: -45px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.flatpickr-day[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 23px; 
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
    z-index: 1000;
  }

.flatpickr-day[data-tooltip] {
    position: relative;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
}

.flatpickr-calendar{
    background-color: #FFFFFF;
    color:#000000;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
}

.dark .flatpickr-calendar{
    background-color: #374151;
}

.flatpickr-prev-month{
    color: #000000 !important;
    fill: #000000 !important;
}

.dark .flatpickr-prev-month{
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.flatpickr-next-month{
    color: #000000 !important;
    fill: #000000 !important;
}

.dark .flatpickr-next-month{
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.flatpickr-month{
    color: #000000 !important;
}

.dark .flatpickr-month{
    color: #FFFFFF !important;
}

.flatpickr-day{
    color: #000000;
}

.flatpickr-day:hover{
    color: #FFFFFF;
}

.dark .flatpickr-day{
    color: #FFFFFF;
}

.dark .dayContainer .prevMonthDay{
    color: #9ca3af;
}

.dark .dayContainer .nextMonthDay{
    color: #9ca3af;
}

.dark .dayContainer .flatpickr-disabled{
    color: #9ca3af !important;
}

.dayContainer .flatpickr-disabled{
    color: #9ca3af !important;
}

.flatpickr-calendar, 
.flatpickr-innerContainer, 
.flatpickr-days {
    overflow: visible !important;
}

.flatpickr-day.prevMonthDay[back-date] {
    color: #9ca3af !important; // ubah warna tanggal merah jika prevMonthDay dan memiliki minDate
}