#list-loadercont{
  position: absolute;
  top: 50%;
  right: 40px; 
  transform: translate(-50%,-50%);
}

.clearcont {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(-50%,-50%);

}

.clearbutton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.clearbutton svg {
  fill: #888;
  width: 24px;
  height: 24px;
}

.clearbutton:focus {
  outline: none;
}

.clearbutton:hover svg {
  fill: #000;
}

.search-loader{
  display: none;
}

.filter-search-button {
  min-width: 104px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  vertical-align: middle;
}

.filter-search-button__loader {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

/* Set the width and color of the scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}


#myBtn {
  width: 52px;
  height: 52px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#myBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Move to final position */
}

#myBtn:hover {
  background-color: #e4dffd !important;
}

.theme-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-button {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: .35rem .5rem !important;
}

.theme-icon svg,
#myBtn svg {
  flex: 0 0 auto;
}


.download-popover{
  --bs-popover-border-color: #edbeb4 !important;
  --bs-popover-header-bg: #edbeb4 !important;
}

#installButton{
    left: 0; 
    align-items: center; 
    justify-content: center;
    padding: 13px 20px 13px 25px;
    border-radius: 0 25px 25px 0;
}




.clearbutton {
    position: absolute;
    right: 10px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    padding: 0;
}

.clearbutton svg {
    width: 20px;
    height: 20px;
}

.clearable-input {
    padding-right: 35px;
}






       .circle-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 20px;
        }

        .progress-circle {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            position: relative;
            background: conic-gradient(#1374B8 calc(var(--percent) * 3.6deg), #DCE0E9 0deg);
        }

        .progress-circle::before {
            content: "";
            width: 130px;
            height: 130px;
            background: var(--bs-gray-500);
            border-radius: 50%;
            position: absolute;
        }

        .progress-circle div {
            position: relative;
            z-index: 1;
        }

        /* Colors for different progress bars */
        .progress-circle.blue { background: conic-gradient(#1374B8 calc(var(--percent) * 3.6deg), #DCE0E9 0deg); }
        .progress-circle.yellow { background: conic-gradient(#EFB917 calc(var(--percent) * 3.6deg), #DCE0E9 0deg); }
        .progress-circle.dark-blue { background: conic-gradient(#5378A4 calc(var(--percent) * 3.6deg), #DCE0E9 0deg); }
        .progress-circle.navy { background: conic-gradient(#004789 calc(var(--percent) * 3.6deg), #DCE0E9 0deg); }

        .circle-txt {
            font-size: 16px;
        }

/*------------------- KADS TreeSelect ------------------*/
/* apply only when inside .treeselect-dark */
.treeselect-dark .treeselect-input {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

.treeselect-dark .treeselect-input__tags-element {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

.treeselect-dark .treeselect-input__edit,
.treeselect-dark .treeselect-input__edit.form-control,
[data-bs-theme="dark"] .treeselect-input__edit,
[data-bs-theme="dark"] .treeselect-input__edit.form-control {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
    caret-color: var(--bs-body-color) !important;
}

.treeselect-dark .treeselect-input__edit::placeholder,
[data-bs-theme="dark"] .treeselect-input__edit::placeholder {
    color: var(--bs-secondary-color) !important;
    opacity: 1 !important;
}

.treeselect-dark .treeselect-input svg {
    stroke: currentColor !important;
}


/* MAIN INPUT BOX */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--bs-body-bg) !important;
}

/* RENDERED TEXT */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--bs-body-color) !important;
}

/* SEARCH BOX INSIDE MULTIPLE */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    background: transparent !important;
    color: var(--bs-body-color) !important;
}

/* TAG PILL */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove:hover {
    color: var(--bs-danger) !important;
}

/* DROPDOWN */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* OPTION ITEMS */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option:hover,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--bs-primary-rgb), .15) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected="true"] {
    background-color: rgba(var(--bs-primary-rgb), .35) !important;
    color: var(--bs-emphasis-color) !important;
}


/* Make internal input follow Bootstrap form-control style */
.treeselect-input__edit.form-control {
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* Ensure the container matches Bootstrap input style */
.treeselect__control {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

.treeselect__control--open {
    border-color: var(--bs-primary);
}

/* Tags look correct in dark mode */
.treeselect__tag {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Dropdown menu colors */
.treeselect__menu {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.treeselect__option {
    color: var(--bs-body-color);
}

.treeselect__option--highlighted {
    background-color: rgba(var(--bs-primary-rgb), .15);
}



/* LIST CONTAINER (the dropdown) */
[data-bs-theme="dark"] .treeselect-list {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: var(--bs-box-shadow-lg) !important;
}

/* EACH ROW */
[data-bs-theme="dark"] .treeselect-list__item {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

/* LABEL TEXT */
[data-bs-theme="dark"] .treeselect-list__item-label {
    color: inherit !important;
}

/* HOVER / FOCUSED ITEM */
[data-bs-theme="dark"] .treeselect-list__item:hover,
[data-bs-theme="dark"] .treeselect-list__item--focused,
[data-bs-theme="dark"] .treeselect-list__item.treeselect-list__item--focused,
[data-bs-theme="dark"] .treeselect-list__item--focused:hover {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-emphasis-color) !important;
}

/* GROUP ROWS (optional subtle background) */
[data-bs-theme="dark"] .treeselect-list__item--group {
    background-color: var(--bs-dark-bg-subtle) !important;
}

/* CHECKED ITEMS (if you want them highlighted a bit) */
[data-bs-theme="dark"] .treeselect-list__item--checked {
    background-color: rgba(var(--bs-primary-rgb), .1) !important;
}

[data-bs-theme="dark"] .treeselect-list__item--disabled,
[data-bs-theme="dark"] .treeselect-list__item--disabled:hover,
[data-bs-theme="dark"] .treeselect-list__item--disabled.treeselect-list__item--focused {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
}

/* *** CRITICAL: FIX ALL ICONS INSIDE THE LIST *** */
[data-bs-theme="dark"] .treeselect-list svg {
    stroke: currentColor !important;
}
/* End KADS TreeSelect styles */

.select2-selection--multiple
  .select2-search--inline
  .select2-search__field {
    min-width: 100%;
}