/*In the latest version of metronic (8.1.7), the CSS variable prefix has been changed from "--kt-" to "--bs-".
    However, this package also supports older CSS variables in case they are used in older versions of metronic (less than 8.1.7).
 */
:root {
  --kt-input-solid-bg: var(--bs-input-solid-bg);
  --kt-input-solid-color: var(--bs-input-solid-color);
  --kt-menu-dropdown-bg-color: var(--bs-menu-dropdown-bg-color);
  --kt-menu-dropdown-box-shadow: var(--bs-menu-dropdown-box-shadow);
  --kt-menu-link-bg-color-active: var(--bs-menu-link-bg-color-active);
  --kt-menu-link-color-active: var(--bs-menu-link-color-active);
}

[data-bs-theme=dark] {
  color-scheme: dark;
  /* Night sky dark theme — navy-purple */
  --bs-body-bg: #17122a;
  --bs-body-bg-rgb: 23, 18, 42;
  --bs-gray-100: #1e1836;
  --bs-gray-100-rgb: 30, 24, 54;
  --bs-gray-200: #272042;
  --bs-gray-200-rgb: 39, 32, 66;
  --bs-gray-300: #332a54;
  --bs-gray-300-rgb: 51, 42, 84;
  --bs-border-color: #272042;
  --bs-docs-aside-bg-color: #0f0a1f;
}

/* Override dark-sidebar hard-coded background */
[data-kt-app-layout=dark-sidebar] .app-sidebar {
  background-color: #0f0a1f;
}

/* Scroll bars. */
/* ::-webkit-scrollbar {
  width: var(--bs-scrollbar-size);
  height: var(--bs-scrollbar-size);
}

  ::-webkit-scrollbar-thumb {
    background-color: var(--bs-scrollbar-color) !important;
  } */

@media (max-width: 991.98px) {
  /* Reduce container padding on tablet and smaller screens to increase content width */
  .app-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* padding-left: 20px !important;
    padding-right: 20px !important; */
  }
}
  
/* Custom styling of jstree. */
/* Context menu. */
.vakata-context li > a {
  /* Remove text shadows. */
  text-shadow: none;
  color: var(--bs-gray-800);
}

/* The node being selected. */
.jstree-anchor.jstree-clicked,
.jstree-anchor:hover {
  /* Changed the background color of the active node to transparent (2023/10/20). */
  background-color: transparent;
  /* background-color: var(--bs-gray-200); */
  color: var(--bs-primary);
}

/* Folder name input field. */
.jstree-rename-input {
  background-color: var(--bs-input-solid-bg) !important;
  border-color: var(--bs-input-solid-bg) !important;
  color: var(--bs-input-solid-color) !important;
}

  .jstree-rename-input:focus,
  .jstree-rename-input:active {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-700) !important;
  }

/* Custom styling of DataTable. */
/* Style of the ColVis drop-down menu for the DataTable. */
div.dt-button-collection {
  border-radius: 0.475rem;
  background-color: var(--bs-menu-dropdown-bg-color);
  box-shadow: var(--bs-menu-dropdown-box-shadow);
}

  div.dt-button-collection .dt-button {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    color: var(--bs-gray-700);
    font-size: 1.075rem;
  }

  div.dt-button-collection .dt-button.active,
  div.dt-button-collection .dt-button:active {
    background-color: var(--bs-menu-link-bg-color-active);
    color: var(--bs-menu-link-color-active);
  }

    div.dt-button-collection .dt-button::before {
      content: "";
      display: inline-block;
      height: 1.25rem;
      width: 1.25rem;
      margin-right: 0.5rem;
    }

    div.dt-button-collection .dt-button.active::before {
      background-color: var(--bs-menu-link-color-active);
      mask-repeat: no-repeat;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3E%3Cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='currentColor'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3E%3Cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='currentColor'/%3E%3C/svg%3E");
      mask-size: 100%;
      -webkit-mask-size: 100%;
      vertical-align: middle;
    }

/* Custom drop zone styling. */
.dropzone .dz-progress {
  display: none;
}

.dropzone .dz-preview .dz-details {
  /* Details (file name and size) should be centered. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

  /* .dropzone .dz-preview .dz-details .dz-filename span,
  .dropzone .dz-preview .dz-details .dz-size span {
    background-color: transparent;
    color: var(--bs-gray-800);
  } */

  .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    /* The selected file name is displayed without abbreviation. */
    overflow: visible;
    text-overflow: clip;
  }

  .dropzone .dz-preview .dz-details .dz-filename:hover span {
    /* The background color is not changed when the file name is hovered. */
    background-color: transparent;
    border: 0;
  }

/* Custom styling of DataTable. */
/* Large SVGs are applied for the DataTable sorting icons. */
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  position: relative;
  opacity: 1;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-bottom: -.25rem;
  content: " ";
  bottom: auto;
  right: auto;
  left: auto;
  margin-left: .5rem;
}

table.dataTable > thead .sorting_desc:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' fill='hsl(210deg 100%25 61%25)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.42111 5.93537C4.22088 6.03839 3.9637 6.0191 3.78597 5.87137L0.177181 2.87153C-0.046034 2.68598 -0.060261 2.36951 0.145404 2.16468C0.351069 1.95985 0.698744 1.94422 0.921959 2.12977L4.14137 4.80594L7.06417 2.15586C7.27904 1.96104 7.62686 1.96165 7.84105 2.15722C8.05524 2.35279 8.05469 2.66927 7.83982 2.86409L4.54449 5.85194C4.50704 5.8859 4.46541 5.91371 4.42111 5.93537Z'/%3E%3C/svg%3E");
}

table.dataTable > thead .sorting_asc:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' fill='hsl(210deg 100%25 61%25)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.42111 2.06463C4.22088 1.96161 3.9637 1.9809 3.78597 2.12863L0.177181 5.12847C-0.046034 5.31402 -0.0602611 5.63049 0.145404 5.83532C0.351069 6.04015 0.698744 6.05578 0.921959 5.87023L4.14137 3.19406L7.06417 5.84414C7.27904 6.03896 7.62686 6.03835 7.84105 5.84278C8.05524 5.64721 8.05469 5.33073 7.83982 5.13591L4.54449 2.14806C4.50704 2.1141 4.46541 2.08629 4.42111 2.06463Z'/%3E%3C/svg%3E");
}

/* Page links in DataTable should always be right-aligned, independent of window size. */
@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-end !important;
  }
}

/* Prevent unnecessary margin below the input field in Tagify's single select mode (mode: 'select'). */
.tagify.tagify--select {
  gap: 0 !important;
}

  /* Increase the opacity of the toggle button in Tagify's single select mode (mode: 'select') for better visibility. */
  .tagify--select::after {
    opacity: 1;
  }

    /* Make the background of the remove button for selected tags transparent in Tagify's single select mode (mode: 'select'). */
    .tagify.tagify--select .tagify__tag {
      background-color: transparent;
    }

      /* Darken the color of the tag removal button in Tagify for better visibility. */
      .tagify .tagify__tag .tagify__tag__removeBtn {
        background-color: var(--bs-gray-800);
      }

/* Darkened the text color within read-only Quill editor bodies for better readability. */
.ql-editor[contenteditable="false"] {
  color: var(--bs-text-gray-900);
}

/* Custom styling of SweetAlert2 (Dialog component). */
.swal2-popup {
  background-color: var(--bs-body-bg);
  padding: 2rem;
  border-radius: 0.475rem;
}

  .swal2-popup .swal2-title {
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--bs-dark);
  }

  .swal2-popup .swal2-html-container,
  .swal2-popup .swal2-content {
    font-weight: normal;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    color: var(--bs-gray-800);
  }

  .swal2-popup .btn {
    margin: 15px 5px 0;
  }

  .swal2-popup .swal2-styled:focus {
    box-shadow: none;
  }

  .swal2-popup .swal2-actions {
    margin: 1.5rem auto 1rem auto;
  }

.swal2-container {
  overflow-y: hidden !important;
}

  .swal2-container.swal2-shown {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .swal2-container .swal2-html-container {
    max-height: 200px;
    overflow: auto;
  }

body.swal2-height-auto {
  height: 100% !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--bs-warning);
  color: var(--bs-warning);
}

.swal2-icon.swal2-error {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

  .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: rgba(var(--bs-danger-rgb), 0.75);
  }

.swal2-icon.swal2-success {
  border-color: var(--bs-success);
  color: var(--bs-success);
}

  .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--bs-success);
  }

  .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(var(--bs-success-rgb), 0.3);
  }

.swal2-icon.swal2-info {
  border-color: var(--bs-info);
  color: var(--bs-info);
}

.swal2-icon.swal2-question {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}