:root {
  --aksel-layer-table: 20;
  --aksel-layer-dropdown: 2500;
  --aksel-layer-sidebar: 2600;
  --aksel-layer-modal: 2700;
  --aksel-border: #e7edf3;
  --aksel-soft: #f8fafd;
  --aksel-text: #132144;
  --aksel-muted: #6b7b8f;
}

html,
body,
#content.main,
.content.container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

.aksel-table-card {
  max-width: 100%;
  overflow: visible;
}

.aksel-table-card > .card-header {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.aksel-table-scroll,
.table-responsive.datatable-custom,
.datatable-custom.table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #8a9bae #edf2f7;
}

.aksel-table-scroll::-webkit-scrollbar,
.table-responsive.datatable-custom::-webkit-scrollbar {
  height: 10px;
}

.aksel-table-scroll::-webkit-scrollbar-track,
.table-responsive.datatable-custom::-webkit-scrollbar-track {
  background: #edf2f7;
}

.aksel-table-scroll::-webkit-scrollbar-thumb,
.table-responsive.datatable-custom::-webkit-scrollbar-thumb {
  background: #8a9bae;
  border: 2px solid #edf2f7;
  border-radius: 6px;
}

.aksel-table-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.aksel-table-scroll.is-dragging table {
  pointer-events: none;
}

.aksel-table-card .dataTables_wrapper,
.aksel-table-card .datatable-custom {
  width: 100%;
  max-width: 100%;
}

.aksel-table-card table {
  margin-bottom: 0 !important;
}

.aksel-table-card th,
.aksel-table-card td {
  vertical-align: middle;
}

.aksel-table-card .sticky-action-col {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
  box-shadow: -8px 0 10px -10px rgba(22, 44, 74, .45);
}

.aksel-table-card thead .sticky-action-col {
  z-index: 4;
  background: var(--aksel-soft);
}

.aksel-table-card .card-footer,
.aksel-table-footer {
  position: relative;
  z-index: 5;
  overflow: visible !important;
  background: #fff;
}

.aksel-table-footer .pagination,
.aksel-table-card .card-footer .pagination {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.aksel-table-footer select,
.aksel-table-card .card-footer select {
  width: auto !important;
  min-width: 4.75rem;
  max-width: 6rem;
}

.aksel-table-dropdown-portal {
  inset: auto !important;
  top: var(--aksel-dropdown-top, 0) !important;
  left: var(--aksel-dropdown-left, 0) !important;
  right: auto !important;
  bottom: auto !important;
  position: fixed !important;
  display: block !important;
  transform: none !important;
  z-index: var(--aksel-layer-dropdown) !important;
  min-width: 11rem;
  max-height: min(24rem, calc(100vh - 16px));
  overflow-y: auto;
  box-shadow: 0 1rem 2.5rem rgba(19, 33, 68, .18);
}

.aksel-column-dropdown,
#showHideDropdown {
  z-index: 2550 !important;
}

.aksel-filter-sidebar,
#datatableFilterSidebar {
  z-index: var(--aksel-layer-sidebar) !important;
}

.sidebar-overlay,
.hs-unfold-overlay {
  z-index: 2590 !important;
}

.modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.modal .modal-dialog {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.modal .modal-content {
  max-height: calc(100vh - 3.5rem);
  max-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 1.5rem 4rem rgba(19, 33, 68, .2);
}

.modal .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.modal .modal-header,
.modal .modal-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: #fff;
}

.modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

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

.modal .select2-container--default .select2-selection--single {
  height: 2.75rem;
  border-color: #d9e2ec;
  border-radius: .3125rem;
}

.modal .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 2.625rem;
  padding-right: 2.25rem;
  overflow: hidden;
  line-height: 2.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.625rem;
  right: .5rem;
}

.select2-container--open,
.select2-dropdown,
body.modal-open .select2-container--open {
  z-index: 13000 !important;
}

.flatpickr-calendar,
.daterangepicker,
body.modal-open .flatpickr-calendar.open {
  z-index: 13020 !important;
}

.aksel-loading-overlay,
[class$="-loading-overlay"],
[class$="-loading"] {
  pointer-events: none;
}

.navbar-vertical-aside .ecommerce-sidebar-section > .nav-link-toggle:hover::after {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23009999' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E") no-repeat right center / 1rem 1rem !important;
}

@media (max-width: 767.98px) {
  .modal .modal-dialog {
    margin: .75rem;
  }

  .modal .modal-content {
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .aksel-table-card > .card-header .btn {
    max-width: 100%;
  }
}