.btn-with-loader {
        position: relative;
      }
      
      .btn-with-loader.loading {
        pointer-events: none;
        cursor: not-allowed;
      }
      
      .btn-with-loader.loading span {
        opacity: 0;
      }
      
      .btn-with-loader i.fa-spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -7px;
        margin-left: -7px;
        animation: spin 1.3s linear infinite;
        opacity: 0;
      }
      
      .btn-with-loader.loading i.fa-spinner {
        opacity: 1;
      }
      
      .select2-container--default .select2-selection--single {
        border: 1px solid #ced4da !important;
        height: 38px !important;
      }
      
      .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 0px !important;
      }
      
      .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px !important;
      }
      
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      
      .dashboard-item-1 tr td {
        font-size: 14px;
      }
      
      .dashboard-item-overview .card-body {
        padding: 1.93rem 1.25rem;
      }
      
      i.fa-spinner.animate {
        animation: spin 1.3s linear infinite;
      }
      
      .separator {
        width: 100%;
      }
      
      h1.overview-title {
        display: block;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin-bottom: 15px;
      }
      
      .color-white {
        color: #fff !important;
      }
      
      table#tabel-pembayaran tbody tr.checked {
        background: rgba(0, 0, 0, 0.05);
      }
      
      table#tabel-pembayaran thead th {
        vertical-align: middle;
      }
      
      #button-tanggal-bayar {
        background: #fefefe;
        border-color: #eee;
        color: #000;
        z-index: 2;
        position: relative;
      }
      
      #button-tanggal-bayar:hover {
        background: #eee;
        border-color: #ddd;
      }
      /* #button-tanggal-bayar::before{
  content: "\f0ce";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
} */
      
      #button-tanggal-bayar::after {
        content: "\f0d7";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-left: 5px;
      }
      
      #all-tanggal-bayar {
        position: absolute;
        width: 0px;
        bottom: 100%;
        opacity: 0;
        height: 0px;
        right: 0px;
      }
      
      .input-on-table {
        padding: 6px;
        line-height: 1;
        height: auto;
        font-size: 14px;
      }
      
      .helper-on-table {
        font-size: 11px;
        color: #555;
        font-style: italic;
      }
      
      .arrow-paw {
        position: relative;
        font-size: 10px;
        line-height: 1;
        top: -2px;
        margin: 0px 2px;
      }
      
      #overview-per-tahun {
        height: 326px !important;
      }
      
      @media screen and (max-width: 575px) {
        .margin-mobile-1 {
          margin-bottom: 1rem;
        }
      }
      
      @media screen and (max-width: 360px) {
        .dashboard-item-1 .card-header h3 {
          width: calc(100% - 60px);
        }
      }
      /* ========== image ======= */
      
      .upload-preview-wrapper {
        padding: 5px;
        border: 1px dashed #aaa;
        border-radius: 4px;
        margin-bottom: 5px;
      }
      
      .upload-preview-wrapper img {
        width: 100%;
        object-fit: contain;
        height: 140px;
      }
      
      .upload-preview-wrapper .remove {
        top: -10px;
        position: absolute;
        right: 10px;
        font-size: 12px;
        color: #dd4b39;
        padding: 4px 8px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #aaa;
        display: none;
      }
      
      .upload-preview-wrapper .remove {
        top: -10px;
        position: absolute;
        right: 10px;
        font-size: 12px;
        color: #dd4b39;
        padding: 4px 8px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #aaa;
        display: none;
      }
      
      .upload-btn-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
      }
      
      .upload-btn-wrapper a {
        font-weight: bold;
      }
      
      input[type=file] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
      }
      
      .login-page,
      .register-page {
        background: url('../img/light-grey-abstract-background-hd-cool-7-2.jpg') no-repeat fixed center !important;
      }
      /* Custom tambah produk */
      
      .pick-category ul li:active,
      .pick-category ul li.selected {
        color: #dd4b39;
        font-weight: bold;
      }
      
      .pick-category ul li {
        line-height: 32px;
        padding: 0 16px;
        color: #666;
        display: flex;
        justify-content: space-between;
      }
      
      .modal.in .modal-dialog {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        /* transform: translate(0,0); */
      }
      
      .modal-dialog {
        margin-top: 80px;
      }
      
      @media (min-width: 992px) .modal-lg {
        width: 900px;
      }
      
      @media (min-width: 768px) .modal-dialog {
        width: 600px;
        margin: 30px auto;
      }
      
      .pick-category {
        border-right: solid 1px #EEEDED;
      }
      
      .pick-category ul {
        list-style-type: none;
        padding: 0;
      }
      
      .pick-category ul li {
        line-height: 32px;
        padding: 0 16px;
        color: #666;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
      
      .pick-category ul li:hover {
        background-color: #ffe6e6;
      }
      
      .pick-category ul li i {
        line-height: 32px;
      }
      
      .modal-content {
        /* border-radius: 0px; */
        border: 0;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
      }
      
      .modal-header {
        padding: 15px;
        /* border: none; */
      }
      
      .modal-header {
        min-height: 16.43px;
      }
      
      .modal-header .close {
        position: relative;
        top: 3px;
      }
      
      button.close {
        -webkit-appearance: none;
        padding: 0;
        cursor: pointer;
        background: 0 0;
        border: 0;
      }
      
      .close {
        float: right;
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        filter: alpha(opacity=20);
        opacity: .2;
      }
      
      .modal-body {
        padding: 20px 30px;
        position: relative;
      }
      /* ===Modal cari=== */
      
      .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
      }
      
      .fade.in {
        opacity: 1;
      }
      
      .modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        display: none;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        outline: 0;
      }
      
      .modal-backdrop.in {
        opacity: .4;
      }
      
      .modal-backdrop {
        position: fixed;
        bottom: 0;
      }
      
      .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
      }
      
      .fade {
        transition: opacity .15s linear;
      }
      
      .modal-dialog {
        margin-top: 80px;
      }
      
      @media (min-width: 768px) .modal-dialog {
        width: 600px;
        margin: 30px auto;
      }
      
      .modal-title {
        font-weight: bold;
        margin: 0;
        line-height: 1.42857143;
      }

      /* modal product import */
      .main-file-multiple {
        height: auto;
      }
      .main-file-input {
        position: relative;
        height: 38px;
        line-height: 38px;
        margin-bottom: 9px;
      }
    .main-file-input input[type=file] {
      position: fixed;
      z-index: -2;
      opacity: 0;
    }
    .main-file-multiple label {
      position: relative;
      height: auto;
      border: 1px dashed #aaa;
      border-radius: 4px;
      text-align: center;
    }
    .main-file-input label {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 28px;
      background-color: #fff;
      border: 1px solid #e3e3e3;
      cursor: pointer;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-transition: all .15s;
      -moz-transition: all .15s;
      -o-transition: all .15s;
      transition: all .15s;
    }
    .main-file-multiple label span:last-child {
        border-bottom-width: 0;
        margin-bottom: 1px;
    }
    .main-file-multiple label span:first-child {
        margin-top: 1px;
    }
    .main-file-multiple label span {
    position: relative;
    display: block;
    padding: 0;
    height: auto;
    width: auto;
    max-width: 100%;
    margin: 0 4px;
    border-bottom: 1px solid #DDD;
    text-align: left;
}
.main-file-input label span {
    display: inline-block;
    height: 28px;
    max-width: 80%;
    white-spmain: nowrap;
    overflow: hidden;
    line-height: 28px;
    color: #888;
    font-size: 13px;
    position: static;
    padding-left: 30px;
}
.main-file-multiple label span [class*="fa-"] {
  position: relative;
  display: block;
  text-align: center;
  height: auto;
  line-height: 64px;
  width: auto;
  font-size: 64px;
  color: #d5d5d5;
  margin: 4px 0;
  background-color: transparent;
}
.main-file-input label [class*="fa-"] {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    line-height: 22px;
    width: 22px;
    text-align: center;
    font-size: 13px;
    border: 2px solid #FFF;
    color: #FFF;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
    background-color: #d1d1d1;
}

      /* end */
      
      .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #1f52bb !important;
        border-color: #1f52bb !important;
      }
      
      #btn-add-date {
        z-index: 2;
        position: relative;
      }
      
      #input-add-date {
        position: absolute;
        width: 0px;
        bottom: 100%;
        opacity: 0;
        height: 0px;
        right: 0px;
      }
      /* border btn multiple */
      
      .btn-add-item {
        font-weight: bold;
        padding: 10px;
        background: none;
        border: 1px dashed #ddd;
        text-align: center;
        color: #6a6c6f;
        margin-bottom: 10px;
      }
      
      .btn-block {
        display: block;
        width: 100%;
      }
      
      a {
        cursor: pointer;
      }
      
      .btn-labeled {
        padding-left: 50px;
        text-transform: uppercase;
        font-weight: 600;
      }
      
      .btn-labeled>b {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.15);
        display: block;
        line-height: 1;
        padding: 10px;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
      }
      
      .btn-labeled>b>i {
        top: 0;
        font-style: normal;
        /* font-weight: normal; */
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        min-width: 1em;
        display: inline-block;
        text-align: center;
        font-size: 17px;
        vertical-align: middle;
        position: relative;
        top: -3px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      .btn-labeled.btn-icon-right {
        padding-right: 50px;
        padding-left: 12px;
      }
      
      .btn-labeled.btn-icon-right>b {
        left: initial;
        right: 0px;
      }
      
      .btn-xs.btn-labeled {
        padding-left: 35px;
        text-transform: uppercase;
        font-weight: 600;
        padding-right: 7px;
      }
      
      .btn-xs.btn-labeled>b {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.15);
        display: block;
        line-height: 1;
        padding: 7px;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
      }
      
      .btn-xs.btn-labeled>b>i {
        top: 0;
        font-style: normal;
        /* font-weight: normal; */
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        min-width: 1em;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        position: relative;
        top: -3px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      .legitRipple {
        position: relative;
        overflow: hidden;
        z-index: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      
      .btn-sm.btn-labeled {
        padding-left: 38px;
      }
      
      .btn-sm.btn-labeled.btn-icon-right {
        padding-right: 38px;
        padding-left: 12px;
      }
      
      .btn-sm.btn-labeled>b {
        padding: 7px;
      }
      
      .btn-sm.btn-labeled>b i {
        position: relative;
        top: -1px;
      }
      
      ul.tab-scroll {
        white-space: nowrap;
        overflow-y: hidden;
        flex-wrap: nowrap;
      }
      
      .custom-scroll::-webkit-scrollbar {
        width: 5px;
        height: 3px;
      }
      
      .custom-scroll::-webkit-scrollbar-track {
        background: rgba(241, 241, 241, 0.5);
      }
      
      .custom-scroll::-webkit-scrollbar-thumb {
        background: rgba(31, 82, 187, 0.28) !important;
        transition-duration: 0.3s;
      }
      
      .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: #1f52bb;
      }
      
      .link-red {
        color: #dc3545 !important;
      }
      
      .link-red:hover {
        color: #c82333 !important;
      }
      
      .select2-container--default.select2-container--open {
        z-index: 99999;
      }
      
      .popup-sparepart-left {
        border-right: 1px solid #e9ecef;
      }
      
      .daterangepicker {
        z-index: 9999 !important;
      }
      
      .card.card-tabs:not(.card-outline) .card-header .nav-item:first-child .nav-link {
        margin-left: 0px;
      }
      
      .card-header.bg-navy .nav-tabs .nav-link,
      .card-header.bg-navy .nav-tabs .nav-link,
      .card-header.bg-navy .nav-tabs .nav-link.active,
      .card-header.bg-navy .nav-tabs .nav-link.active {
        border-bottom-color: transparent;
      }
      
      .card-header.bg-navy .nav-tabs .nav-link:focus,
      .card-header.bg-navy .nav-tabs .nav-link:hover {
        border-color: #e9ecef #e9ecef #dee2e6;
        border-bottom-color: transparent;
        background: #fff;
        color: #000 !important;
      }
      
      .btn-warning {
        color: #fff;
      }
      
      .btn-warning:hover {
        color: #fff;
      }
      
      .btn-success:hover {
        background: #20bf44;
        border-color: #20bf44;
      }
      
      .btn-warning:hover {
        background: #eac100;
        border-color: #eac100;
      }
      
      .badge-warning {
        color: #fff;
        background-color: #fccf00;
      }
      
      .bg-warning {
        color: #fff !important;
      }
      
      .bg-warning>a {
        color: #fff !important;
      }
      
      .btn-danger:hover {
        color: #fff;
      }
      
      .modal-title {
        font-size: 1.1rem;
        font-weight: 400;
        margin: 0;
      }
      
      [class*=accent-] a.btn-warning {
        color: #fff;
      }
      
      .btn-warning.disabled,
      .btn-warning:disabled,
      .btn-warning:not(:disabled):not(.disabled).active,
      .btn-warning:not(:disabled):not(.disabled):active,
      .show>.btn-warning.dropdown-toggle,
      [class*=accent-] a.btn-warning:hover,
      [class*=accent-] a.btn-warning:active {
        color: #fff;
      }
      /* .btn-input {
  height: calc(2.25rem + 2px);
}
.btn-input.btn-labeled>b {
  padding: 10px;
}
.btn-input.btn-labeled {
  padding-left: 48px;
} */
      
      label.custom-file-label {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        padding-right: 80px;
      }
      
      .dd {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        /* font-size: 13px; */
        line-height: 20px
      }
      
      .dd-list {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none
      }
      
      .dd-list .dd-list {
        padding-left: 30px
      }
      
      .dd-collapsed .dd-list {
        display: none
      }
      
      .dd-item,
      .dd-empty,
      .dd-placeholder {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        min-height: 20px;
        /* font-size: 13px; */
        line-height: 20px
      }
      
      .dd-handle {
        display: block;
        margin: 5px 0;
        padding: 5px 10px;
        /* color: #333; */
        text-decoration: none;
        border: 1px solid #e4e5e7;
        background: #f7f9fa;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box
      }
      
      .dd-handle>small {
        color: #6a6c6f;
      }
      
      .dd-handle span {
        font-weight: bold
      }
      
      .dd-handle:hover {
        background: #f0f0f0;
        cursor: pointer;
        font-weight: bold
      }
      
      .dd-item>button {
        display: block;
        position: relative;
        cursor: pointer;
        float: left;
        width: 25px;
        height: 20px;
        margin: 5px 0;
        padding: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        border: 0;
        background: transparent;
        font-size: 12px;
        line-height: 1;
        text-align: center;
        font-weight: bold
      }
      
      .dd-item>button:before {
        content: '\f067';
        display: block;
        position: absolute;
        width: 100%;
        text-align: center;
        text-indent: 0;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
      }
      
      .dd-item>button[data-action="collapse"]:before {
        content: '\f068'
      }
      
      .dd-item .item_actions .delete {
        color: #dc3545;
      }
      
      .dd-item .item_actions .delete:hover {
        color: #c82333;
      }
      
      .dd-item .item_actions .edit {
        color: #1f52bb;
      }
      
      .dd-item .item_actions .edit:hover {
        color: #000;
      }
      
      #nestable2 .dd-item>button {
        font-family: FontAwesome;
        height: 34px;
        width: 33px;
        color: #c1c1c1
      }
      
      #nestable2 .dd-item>button:before {
        content: "\f067"
      }
      
      #nestable2 .dd-item>button[data-action="collapse"]:before {
        content: "\f068"
      }
      
      .dd-placeholder,
      .dd-empty {
        margin: 5px 0;
        padding: 0;
        min-height: 30px;
        background: #f2fbff;
        border: 1px dashed #e4e5e7;
        box-sizing: border-box;
        -moz-box-sizing: border-box
      }
      
      .dd-empty {
        border: 1px dashed #bbb;
        min-height: 100px;
        background-color: #e5e5e5;
        background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
        background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
        background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
        background-size: 60px 60px;
        background-position: 0 0, 30px 30px
      }
      
      .dd-dragel {
        position: absolute;
        z-index: 9999;
        pointer-events: none
      }
      
      .dd-dragel>.dd-item .dd-handle {
        margin-top: 0
      }
      
      .dd-dragel .dd-handle {
        -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1)
      }
      
      .nestable-lists {
        display: block;
        clear: both;
        padding: 30px 0;
        width: 100%;
        border: 0;
        border-top: 2px solid #e4e5e7;
        border-bottom: 2px solid #e4e5e7
      }
      
      #nestable-menu {
        padding: 0;
        margin: 10px 0 20px 0
      }
      
      #nestable-output,
      #nestable2-output {
        width: 100%;
        font-size: .75em;
        line-height: 1.333333em;
        font-family: roboto;
        padding: 5px;
        box-sizing: border-box;
        -moz-box-sizing: border-box
      }
      
      #nestable2 .dd-handle {
        color: inherit;
        border: 1px dashed #e4e5e7;
        background: #f7f9fa;
        padding: 10px
      }
      
      #nestable2 span.label {
        margin-right: 10px
      }
      
      #nestable-output,
      #nestable2-output {
        font-size: 12px;
        padding: 25px;
        box-sizing: border-box;
        -moz-box-sizing: border-box
      }
      
      #smartwizard.sw-theme-arrows>ul.step-anchor>li.active>a {
        border-color: #1f52bb !important;
        color: #fff !important;
        background: #1f52bb !important;
      }
      
      #smartwizard.sw-theme-arrows>ul.step-anchor>li.active>a:after {
        border-left: 30px solid #1f52bb !important;
      }
      
      #smartwizard.sw-theme-arrows>ul.step-anchor>li.done>a {
        border-color: #91b0f1 !important;
        color: #fff !important;
        background: #91b0f1 !important;
      }
      
      #smartwizard.sw-theme-arrows>ul.step-anchor>li.done>a:after {
        border-left: 30px solid #91b0f1;
      }
      
      #smartwizard .btn-group>.btn-group:not(:last-child)>.btn,
      #smartwizard .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
      }
      
      #smartwizard .btn-group>.btn-group:not(:first-child)>.btn,
      #smartwizard .btn-group>.btn:not(:first-child) {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
      }

a.disabled{
  opacity: 0.7;
  user-select: none;
  cursor: default;
  position: relative;
}
a.disabled:hover{
  color: #1f52bb;
}
a.link-red.disabled:hover{
  color: #c82333 !important;
}
a.disabled::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 9;
}

a.is-invalid,
button.is-invalid{
  border: 1px solid #f00;
}

.iti{
  width: 100%;
}