/*
diskover-web
https://diskoverdata.com

Copyright 2017-2023 Diskover Data, Inc.
"Community" portion of Diskover made available under the Apache 2.0 License found here:
https://www.diskoverdata.com/apache-license/
 
All other content is subject to the Diskover Data, Inc. end user license agreement found at:
https://www.diskoverdata.com/eula-subscriptions/
  
Diskover Data products and features for all versions found here:
https://www.diskoverdata.com/solutions/

*/

/* diskover style sheet */

/* Global dark scrollbar styling for entire page */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: #2D313A;
    border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #23262D;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.2);
}

/* Firefox scrollbar styling */

html {
    scrollbar-width: thin;
    scrollbar-color: #2D313A rgba(0, 0, 0, 0.2);
}

.tagdropdown {
    opacity: 1 !important;
}

.tagdropdown a:link {
    text-decoration: none !important;
}

.tagdropdown a:visited {
    text-decoration: none !important;
}

.path {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.pathdark {
    color: lightgray !important;
}

.pathdark:hover {
    color: lightgray !important;
}

.pathdropdown a:link {
    color: lightgray !important;
    text-decoration: none !important;
}

.pathdropdown a:visited {
    color: lightgray !important;
    text-decoration: none !important;
}

/* Table container wrapper for horizontal scrolling */
.table-container-wrapper {
    border-radius: 12px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Dark scrollbar styling for table container wrapper */
.table-container-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.table-container-wrapper::-webkit-scrollbar-thumb {
    background: #2D313A;
    border-radius: 4px;
}

.table-container-wrapper::-webkit-scrollbar-thumb:hover {
    background: #23262D;
}

.table-container-wrapper::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.2);
}

/* Firefox scrollbar styling for table container */
.table-container-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #2D313A rgba(0, 0, 0, 0.2);
}

/* Sticky horizontal scrollbar used for wide tables */
.sticky-x-scrollbar {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 20;
    background: rgba(30, 33, 36, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sticky-x-scrollbar-inner {
    height: 1px;
}

.sticky-x-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sticky-x-scrollbar::-webkit-scrollbar-thumb {
    background: #2D313A;
    border-radius: 4px;
}

.sticky-x-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #34363b;
}


/* Keep wrapper scroll behavior but hide its horizontal bar when sticky bar is enabled */
.sticky-x-scroll-enabled .table-container-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sticky-x-scroll-enabled .table-container-wrapper::-webkit-scrollbar {
    height: 0;
}


.results {
    word-wrap: normal;
    word-break: normal;
    font-weight: 400;
    border-radius: 12px;
    overflow: visible;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: #1e2124;
    min-width: 100%;
    width: max-content;
}

/* Modern table header styling */
.results thead,
.results.dataTable thead  {
    background: linear-gradient(180deg, #25282c 0%, #1e2124 100%);
    border-bottom: 2px solid #33A0D4;
}

.results thead th,
.results.dataTable thead th  {
    padding: 14px 12px !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e0e0e0;
    border-bottom: 2px solid #33A0D4 !important;
    position: sticky;
    top: 0;
    z-index: 2;
    transition: background-color 0.2s ease;
    background: linear-gradient(180deg, #25282c 0%, #1e2124 100%);
    white-space: nowrap;
}

/* Make sortable header cells accommodate inline sort icons */
.results.dataTable thead th.sorting,
.results.dataTable thead th.sorting_asc,
.results.dataTable thead th.sorting_desc {
    /* Ensure cell can contain inline content */
    position: relative;
    padding-right: 12px;
}

.results thead th:hover {
    background-color: rgba(51, 160, 212, 0.1);
}

/* Override DataTables absolute positioning - make icon flow inline after text */
.results.dataTable thead th.sorting:after,
.results.dataTable thead th.sorting_asc:after,
.results.dataTable thead th.sorting_desc:after {
    position: static !important;
    right: auto;
    bottom: auto;
    top: auto;
    display: inline-block !important;
    margin-left: 6px;
    vertical-align: middle;
    font-family: "Glyphicons Halflings";
}

/* Hide inactive sort icons in results table by default */
.results.dataTable thead th.sorting:after {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show inactive sort icons when hovering over header cell */
.results.dataTable thead th.sorting:hover:after {
    opacity: 0.5;
}

/* Always show active sort icons and highlight in blue */
.results.dataTable thead th.sorting_asc:after,
.results.dataTable thead th.sorting_desc:after {
    opacity: 1 !important;
    color: #33A0D4 !important;
}
.table-container-wrapper .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}
/* Make DataTables length control inline - dropdown and "items" text on same line */
.datatables-controls-top .dataTables_length label,
.datatables-controls-top .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: normal;
}

.datatables-controls-top .dataTables_length label select {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
}

/* Dark background for default table rows */
.results tbody tr {
    background-color: #1e2124;
    border-color: #25282c;
    border-bottom: 1px solid rgba(37, 40, 44, 0.5);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.results tbody tr td {
    border-color: #25282c;
    padding: 12px !important;
    vertical-align: top;
    color: #d0d0d0;
    font-size: 13px;
}

/* Keep left border on first header column */
.results thead th:first-child {
    border-top-left-radius: 12px;
}

.table > thead > tr > th {
    vertical-align: baseline;
}

/* Keep right border on last header column */
.results thead th:last-child {
    border-right: 1px solid #25282c !important;
    border-top-right-radius: 12px;
}


/* Modern alternating row colors for better readability */
.results.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1e2124;
}

.results.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #232629;
}

/* Enhanced hover effect with smooth transition */
.results tbody tr:hover {
    background-color: #2a2d32 !important;
}

.results tbody tr:hover td {
    border-color: #3a3d42;
    color: #ffffff;
}

/* Override Bootstrap table-hover */
.results.table-hover > tbody > tr:hover {
    background-color: #2a2d32 !important;
}
/* Make thead and tfoot bold - more specific selectors to override Bootstrap */
.results thead th {
    font-weight: 600 !important;
    border: none !important;
}


.results tr[visible='false'],
.no-result {
    display: none;
}

.results tr[visible='true'] {
    display: table-row;
}

.counter {
    padding: 8px;
    color: lightgray;
}

thead,
tfoot {
    font-weight: bold;
}

.button-tagfiles {
    color: red;
}

.sortarrow-container {
    position: relative;
    top: 0;
    left: 0;
}

.sortarrow-asc {
    position: relative;
    top: -2px;
    left: 4px;
    color: gray;
    font-size: 16px;
    font-weight: bold;
}

.sortarrow-desc {
    position: absolute;
    top: 3px;
    left: 4px;
    color: gray;
    font-size: 16px;
    font-weight: bold;
}

/* Hide inactive sort arrows in results table, show on hover */
.results thead th .sortarrow-asc:not(.sortarrow-asc-active),
.results thead th .sortarrow-desc:not(.sortarrow-desc-active) {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.results thead th:hover .sortarrow-asc:not(.sortarrow-asc-active),
.results thead th:hover .sortarrow-desc:not(.sortarrow-desc-active) {
    opacity: 1;
}

/* Always show active sort arrows */
.results thead th .sortarrow-asc-active,
.results thead th .sortarrow-desc-active {
    opacity: 1 !important;
}

/* Hide inactive sortarrow2 in results table, show on hover */
.results thead th .sortarrow2-asc:not(.sortarrow2-asc-active),
.results thead th .sortarrow2-desc:not(.sortarrow2-desc-active) {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show inactive sortarrow2 arrows when hovering over header cell */
.results thead th:hover .sortarrow2-asc:not(.sortarrow2-asc-active),
.results thead th:hover .sortarrow2-desc:not(.sortarrow2-desc-active) {
    opacity: 1;
}

/* Always show active sortarrow2 */
.results thead th .sortarrow2-asc-active,
.results thead th .sortarrow2-desc-active {
    opacity: 1 !important;
}

.sortarrow-asc:hover {
    color: #ffffff;
    font-weight: bold;
}

.sortarrow-desc:hover {
    color: #ffffff;
    font-weight: bold;
}

.sortarrow-asc-active {
    color: #33A0D4;
    font-weight: bold;
}

.sortarrow-desc-active {
    color: #33A0D4;
    font-weight: bold;
}

.sortarrow2-asc:hover {
    color: #ffffff;
    font-weight: bold;
}

.sortarrow2-desc:hover {
    color: #ffffff;
    font-weight: bold;
}

.sortarrow2-asc-active {
    color: #00C100;
    font-weight: bold;
}

.sortarrow2-desc-active {
    color: #00C100;
    font-weight: bold;
}

.customtag {
    width: 200px;
}


tbody a {
    text-decoration: none !important;
}

tbody a:hover {
    text-decoration: underline !important;
}

.chartbox a {
    text-decoration: none !important;
}

.chartbox a:hover {
    text-decoration: underline !important;
}

.delete {
    color: #F69327;
}

.archive {
    color: #65C165;
}

.keep {
    color: #52A3BB;
}

.untagged {
    color: #666666;
}

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.5;
    background-color: #000;
    z-index: 99;
    text-align: center;
    display: none;
}

#loading-image {
    position: absolute;
    top: 49%;
    left: 49%;
    z-index: 100;
}

#loading-text {
    position: absolute;
    top: 54%;
    width: 100%;
    height: 100%;
    left: 0;
    text-align: center;
    z-index: 100;
    color: white;
    font-weight: bold;
}

#errormsg-container {
    display: none;
    position: fixed;
    width: 500px;
    left: 50px;
    bottom: 20px;
    z-index: 2;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #000;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.essearchreply {
    display: none;
    position: absolute;
    max-height: 448px;
    z-index: 99;
    background-color: #202225;
    opacity: .98;
    overflow: hidden;
    margin-top: 1px;
    border: 1px solid #303338;
    border-radius: 12px;
}

.essearchreply-text {
    display: block;
    position: relative;
    padding: 15px;
    font-size: 13px;
    text-align: left;
    line-height: 1.6em;
    max-height: 448px;
    width: 100%;
    overflow: hidden;
    color: gray;
    font-weight: normal;
    word-wrap: break-word;
    word-break: break-all;
}

.essearchreply-text a {
    color: lightgray !important;
}

.searchpath {
    color: lightgray !important;
    font-size: 13px;
    line-height: 0.1em !important;
}

.searchpath a {
    color: lightgray !important;
    font-size: 13px;
    line-height: 0.1em !important;
}

.percent {
    background-color: #D20915;
    opacity: .9;
    border: 1px solid black;
    display: inline-block;
    height: 14px;
    left: 0px;
    bottom: -2px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.rating {
    color: darkgray;
    font-weight: normal;
    letter-spacing: -2px;
}

#pathselect {
    background-color: black;
    font-weight: bold;
    color: #75C06D;
}

.navsearchbox {
    color: #ffffff;
    background-color: #202225;
    font-size: 14px !important;
}

.searchbar {
    background-color: #202225;
    border: 1px solid #2F3338;
}

.filetypechart a:link {
    color: lightgray;
    text-decoration: none;
    font-size: 12px;
}

.filetypechart a:visited {
    color: lightgray;
    text-decoration: none;
    font-size: 12px;
}

.filetypechart a:hover {
    color: lightgray;
    text-decoration: none;
    font-size: 12px;
}

/* Multi-column layout for File type  extensions and Tags filter checkboxes */
.filter-checkbox-multicolumn {
    display: inline-block;
    margin-left: 10px;
    width: calc(100% - 120px);
    column-count: 3;
    column-gap: 15px;
    column-fill: balance;
}

.filter-checkbox-multicolumn label {
    display: block;
    margin-bottom: 5px;
    margin-right: 0;
    font-weight: normal;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Responsive: reduce columns on smaller screens */
@media (max-width: 1200px) {
    .filter-checkbox-multicolumn {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .filter-checkbox-multicolumn {
        column-count: 1;
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}

#tree-container-toppaths {
    position: relative;
    left: -10px;
    top: -10px;
    margin-bottom: -10px;
}

/* Modern searchtree-toppath styling - overridden by #toppath-tree rules above */
.searchtree-toppath a:link {
    color: #67C266;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.searchtree-toppath a:visited {
    color: #67C266;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.searchtree-toppath a:hover {
    color: #33A0D4;
    text-decoration: none;
    font-size: 13px;
}

input,
select,
textarea {
    background-color: #1e2124 !important;
    background-color: #1e2124 !important;
    color: lightgray !important;
}

input:active,
select:active,
textarea:active {
    background-color: #1e2124 !important;
    color: lightgray !important;
}

.nav-switch {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 14px;
}

.nav-switch input {
    display: none;
}

.nav-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    -webkit-transition: .4s;
    transition: .4s;
}

.nav-slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.nav-slider {
    background-color: #33A0D4;
}

input:focus+.nav-slider {
    box-shadow: 0 0 1px #33A0D4;
}

input:checked+.nav-slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

.nav-slider.round {
    border-radius: 14px;
}

.nav-slider.round:before {
    border-radius: 50%;
}

.scrollable-menu {
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.extrafields {
    font-size: small;
    word-wrap: normal;
    word-break: normal;
    padding-top: 4px;
    padding-bottom: 4px;
}

.extrafields-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.statustext {
    font-size: 11px;
    color: gray;
    font-weight: bold;
    padding: 4px;
}

/* Start collapsible tree search results - Modern Design */

/* Remove default bullets */
#toppath-tree ul {
    list-style-type: none;
    margin-left: 8px;
    padding-left: 8px;
    margin-bottom: 8px;
}

/* Remove margins and padding from the parent ul */
#toppath-tree {
    margin: 0;
    padding: 0;
}

/* Modern caret/arrow styling */
.toppath-caret {
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    color: #d0d0d0;
}

.toppath-caret:hover {
    background: rgba(51, 160, 212, 0.1);
    color: #33A0D4;
}

/* Font Awesome chevron icon for caret */
.toppath-caret-icon {
    color: #6E7681;
    display: inline-block;
    margin-right: 10px;
    font-size: 10px;
    font-weight: 900;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

/* Add spacing between icon and label in toppath-caret */
.toppath-caret i:not(.toppath-caret-icon) {
    margin-right: 8px;
    flex-shrink: 0;
}

.toppath-caret:hover .toppath-caret-icon {
    color: #33A0D4;
}

/* Rotate the caret/arrow icon when clicked */
.toppath-caret-down .toppath-caret-icon {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
    animation: fadeIn 0.2s ease-in;
}

/* Show the nested list when active */
.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modern toppath item styling */
#toppath-tree li {
    margin: 4px 0;
}

#toppath-tree .searchtree-toppath {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

#toppath-tree .searchtree-toppath:hover {
    background: rgba(51, 160, 212, 0.08);
    transform: translateX(2px);
}

#toppath-tree .searchtree-toppath a {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #c7ced6;
    text-decoration: none;
    transition: color 0.2s ease;
}

#toppath-tree .searchtree-toppath a:hover {
    color: #33A0D4;
}

#toppath-tree .searchtree-toppath a i {
    margin-right: 8px;
    font-size: 14px;
    color: #6E7681;
    transition: color 0.2s ease;
}

#toppath-tree .searchtree-toppath:hover a i {
    color: #33A0D4;
}

/* Modern progress bar styling for toppath */
#toppath-tree .progress {
    margin-top: 6px;
    height: 4px;
    background-color: rgba(18, 20, 24, 0.6);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

#toppath-tree .progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 0 8px rgba(70, 129, 71, 0.4);
}

/* End collapsible tree search results */

/* Progress bar styles in results table */
.results .progress {
    background-color: #121416;
    border-radius: 4px;
}

.results .progress-bar {
    background-color: #33A0D4;
}

.results .progress-bar.progress-bar-info {
    background-color: #33A0D4;
}

/* Custom checkbox styling for results table */
.results input[type="checkbox"].tagcheck {
    width: 14px;
    height: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #2a2d32;
    border: 2px solid #3a3d42;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
    margin: 0;
}

.results input[type="checkbox"].tagcheck:hover {
    border-color: #4a4d52;
    background-color: #323539;
}

.results input[type="checkbox"].tagcheck:checked {
    background-color: #33A0D4;
    border-color: #33A0D4;
}

.results input[type="checkbox"].tagcheck:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.results input[type="checkbox"].tagcheck:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 160, 212, 0.3);
}

/* Action buttons container inline to the right of file/directory name */
.results .file-action-buttons {
    display: inline-block;
    margin-left: 2px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    vertical-align: middle;
}

/* Show buttons on row hover */
.results tbody tr:hover .file-action-buttons {
    opacity: 1;
}

/* Path dropdown buttons - hide by default, show on row hover */
.results .pathdropdown {
    opacity: 0;
    transition: opacity 0.3s ease;
    float: none !important;
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

.results tbody tr:hover .pathdropdown {
    opacity: 1;
}

/* Shared button styling for action buttons and path dropdown */
.results .file-action-buttons .btn,
.results .pathdropdown .btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 4px;
    font-size: 11px;
    margin-right: 3px;
}

.results .file-action-buttons .btn:hover,
.results .pathdropdown .btn:hover {
   background: #121212 !important;
}

/* Minimal custom tooltip using data-tooltip */
.results .file-action-buttons .btn[data-tooltip],
.results .pathdropdown .btn[data-tooltip] {
    position: relative;
}

/* Tooltip bubble */
.results .file-action-buttons .btn[data-tooltip]::after,
.results .pathdropdown .btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    background: rgba(18, 20, 24, 0.95);
    color: #f5f5f5;
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 999;
}

/* Tooltip arrow */
.results .file-action-buttons .btn[data-tooltip]::before,
.results .pathdropdown .btn[data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(18, 20, 24, 0.95);
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 999;
}

/* Show tooltip on hover/focus */
.results .file-action-buttons .btn[data-tooltip]:hover::after,
.results .file-action-buttons .btn[data-tooltip]:focus::after,
.results .file-action-buttons .btn[data-tooltip]:hover::before,
.results .file-action-buttons .btn[data-tooltip]:focus::before,
.results .pathdropdown .btn[data-tooltip]:hover::after,
.results .pathdropdown .btn[data-tooltip]:focus::after,
.results .pathdropdown .btn[data-tooltip]:hover::before,
.results .pathdropdown .btn[data-tooltip]:focus::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Hide tooltips when dropdown is open */
.results .dropdown.open .btn[data-tooltip]::after,
.results .dropdown.open .btn[data-tooltip]::before,
.results .btn[data-tooltip][aria-expanded="true"]::after,
.results .btn[data-tooltip][aria-expanded="true"]::before {
    opacity: 0 !important;
    pointer-events: none;
}

/* Modern dropdown menu styling - reusable class */
.dropdown-menu-style {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 6px 0;
    margin-top: 4px;
    min-width: 200px;
    background: rgba(30, 32, 36, 0.98);
    backdrop-filter: blur(10px);
    animation: fadeInDown 0.2s ease-out;
}
 /* Keyframes for dropdown menu animation */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu-style li {
    margin: 0;
}

.dropdown-menu-style li a {
    display: flex;
    align-items: center;
    color: #e0e0e0;
    font-size: 13px;
    transition: all 0.15s ease;
    text-decoration: none !important;
    line-height: 1.4;
}

.dropdown-menu-style .dropdown-submenu > a {
    justify-content: flex-start;
}

.dropdown-menu-style .dropdown-submenu > a::after {
    margin-left: auto;
    float: none;
    flex-shrink: 0;
}

.dropdown-menu-style li a i {
    width: 18px;
    margin-right: 12px;
    text-align: center;
    font-size: 14px;
    color: #9ca3af;
    transition: color 0.15s ease;
}

.dropdown-menu-style li a:hover {
    background: rgba(107, 114, 128, 0.1);  
    /* background: rgba(59, 130, 246, 0.15); */
    color: #ffffff;
    padding-left: 18px;
}

.dropdown-menu-style li a:hover i {
    color: #60a5fa;
}

.dropdown-menu-style li.small a {
    font-size: 12px;
    color: #9ca3af;
}

.dropdown-menu-style li.small a:hover {
    background: rgba(107, 114, 128, 0.1);
    color: #d1d5db;
}
/* End dropdown menu styling */

/* Toggle buttons in table headers - remove border and background */
.results thead th .btn.btn-default.btn-xs {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.results thead th .btn.btn-default.btn-xs:hover {
    background: transparent !important;
}


.results thead th .btn.btn-default.btn-xs i {
    color: gray !important;
}

.results thead th .btn.btn-default.btn-xs:hover i {
    color: inherit !important;
}

/* Compact button styling for control buttons */
.search-charts-panel,
.btn-group .btn.btn-default.btn-sm,
.btn-compact {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
}

/* Remove borders from navbar buttons and input group elements */
.navbar .btn.btn-default.btn-sm {
    border: none;
}

.navbar .input-group,
.navbar .input-group-addon,
.navbar .input-group .form-control {
    border: none;
}

/* Clear button inside search input */
#searchnavinput + button[title="clear search"] {
    display: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#searchnavinput + button[title="clear search"]:hover {
    opacity: 1;
}

.search-nav-btn:hover {
    background: #121212 !important;
    border-radius:100px;
}

.search-nav-btn:hover span,
.search-nav-btn:hover span i {
    color: #fff !important;
}

.search-nav-btn:focus,
.search-nav-btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Alert styles */
.alert-success {
    color: #ffffff;
    background-color: #2E7D32;
    border-color: #2E7D32;
}

.alert {
    padding-top: 12px;
    padding-bottom: 12px;
}

.alert .close {
    color: #ffffff;
    opacity: 0.8;
}

.alert .close:hover {
    opacity: 1;
}

.alert-sm {
    font-size: 12px;
}

/* Tooltip styles */
.tooltip-inner {
    text-transform: capitalize;
    font-size: 10px !important;
}

/* Modern Search Filters Modal */
#searchFilterModal .modal-content {
    background: #23262D;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

#searchFilterModal .modal-header {
    background:#1e2124;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
    padding: 18px 24px;
}

#searchFilterModal .modal-header .modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

#searchFilterModal .modal-header .close {
    color: #9ca3af;
    opacity: 0.8;
    font-size: 24px;
    text-shadow: none;
}

#searchFilterModal .modal-header .close:hover {
    color: #fff;
    opacity: 1;
}

#searchFilterModal .modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #272b30;
}


#searchFilterModal .well {
    background: #1e2124;
    border: 0px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

#searchFilterModal .form-control {
    background: #1e2124;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

#searchFilterModal .form-control:focus {
    background: #23262D;
    border-color: #008CBA;
    box-shadow: 0 0 0 3px rgba(0, 140, 186, 0.2);
    outline: none;
}

#searchFilterModal .form-control::placeholder {
    color: #9ca3af;
}

#searchFilterModal select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    /* Font Awesome 5 chevron-down icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23ffffff' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 12px;
}

#searchFilterModal label {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

#searchFilterModal .form-group {
    margin-bottom: 18px;
}

#searchFilterModal input[type="checkbox"] {
    accent-color: #008CBA;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    cursor: pointer;
}

#searchFilterModal .text-primary {
    color: #008CBA !important;
}

#searchFilterModal .small,
#searchFilterModal span.small {
    color: #9ca3af;
    font-size: 12px;
}

#searchFilterModal .modal-footer {
    background: #1e2124;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 12px 12px;
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#searchFilterModal .modal-footer .btn {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
}

#searchFilterModal .modal-footer .btn-default {
    background: #2D313A;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

#searchFilterModal .modal-footer .btn-default:hover {
    background: #23262D;
    border-color: rgba(255, 255, 255, 0.25);
}

#searchFilterModal .modal-footer .btn-primary {
    background: #4CAF50;
    border: none;
    color: #fff;
}

#searchFilterModal .modal-footer .btn-primary:hover {
    background: #45a049;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

/* Scrollbar for modal body */
#searchFilterModal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#searchFilterModal .modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#searchFilterModal .modal-body::-webkit-scrollbar-thumb {
    background: #2D313A;
    border-radius: 4px;
}

#searchFilterModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #23262D;
}

/* Search navigation styles */
.search-nav-addon {
    width: 1%;
    margin: 1px;
    background: none;
    padding: 1px;
    height: 20px;
}

.search-nav-addon:focus,
.search-nav-addon:active,
.search-nav-addon button:focus,
.search-nav-addon button:active {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Pagination styling in results page */
#search-results-wrapper .pagination,
.search-results-wrapper-lg .pagination {
    font-size: 12px;
}

/* Reusable panel container styling */
.results-panel-container {
    margin-bottom: 10px;
    background-color: #1e2124;
    padding: 10px;
    border-radius: 5px;
}

/* KPI cards should use panel spacing/border behavior, not generic container padding */
.kpi-panel-reset {
    padding: 0;
    border: none;
}

/* Make the main toolbar sticky within the scrolling container */
.results-toolbar {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
    z-index: 110;
    margin-top: 0;
    margin-bottom: 10px;
    will-change: transform;
}

/* Make DataTables controls toolbar sticky - positioned below navbar */
.datatables-controls-top {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 50px; 
    z-index: 100; 
    background-color: #1e2124;
    padding: 10px;
    margin-left: 15px;
    margin-right: 0;
    margin-bottom: 10px;
    will-change: transform;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}
.datatables-controls-bottom .dataTables_info {
    font-size: 12px ;
    margin-left: 15px ;
    padding-top: 10px; 
}

/* Extension filter panel */
.extension-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.extension-filter-panel .pager {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.extension-filter-panel .pager label {
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0 6px 0 0;
}

.extension-filter-panel .pager li {
    display: inline-block;
    margin: 0;
}

.extension-filter-panel .pager li > a {
    background-color: #2a2d32;
    /* border: 1px solid #3a3d42; */
    border: none;
    border-radius: 16px;
    font-size: 12px;
    color: #d0d0d0;
    transition: all 0.2s ease;
}

.extension-filter-panel .pager li > a:hover {
    color: #ffffff;
    transform: translateY(-1px);
    background-color: transparent;
}

.extension-filter-panel .pager li > a span {
    margin-left: 6px;
    font-weight: 600;
    color: #33A0D4;
}

.index-time-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    padding-top: 8px;
    border-top: 1px solid #2a2d32;
    margin-top: 4px;
}

.index-time-info i {
    color: #666;
}

/* Compact pagination control using Bootstrap pagination classes */
.pagination-page-input-item {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
    vertical-align: middle;
}

.pagination-page-input-item:hover {
    background-color: transparent;
}

.pagination-page-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0 8px 0 2px;
}

.pagination-page-input {
    background-color: #2a2d32 !important;
    border: 1px solid #3a3d42 !important;
    border-radius: 4px;
    color: #d0d0d0 !important;
    font-size: 12px;
    padding: 4px 6px;
    width: 50px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    margin: 0 4px;
}

.pagination-page-input::-webkit-outer-spin-button,
.pagination-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pagination-total {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

/* Compact pagination control styling */
.compact-pagination-control {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.compact-pagination-control li {
    display: inline-block;
    margin: 0;
}

.compact-pagination-control li a {
    display: inline-block;
    padding: 6px 10px;
    color: #d0d0d0;
    text-decoration: none;
    border: 1px solid #3a3d42;
    border-radius: 4px;
    background-color: #2a2d32;
    transition: all 0.2s ease;
}

.compact-pagination-control li a:hover:not([style*="pointer-events: none"]) {
    background-color: #3a3d42;
    border-color: #4a4d52;
    color: #fff;
}

.compact-pagination-control li.disabled a {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.compact-pagination-control li a i {
    font-size: 12px;
}

/* Compact pagination control styling */
.compact-pagination-control.pagination > li > a,
.compact-pagination-control.pagination > li > span {
    height: 30px;
    min-width: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
}

/* Prevent text-transform from affecting dropdown menu items */
.results thead th .dropdown-menu,
.results thead th .dropdown-menu li a {
    text-transform: none !important;
}

/* Chart container - matching table styling */
.search-charts-panel.panel.panel-default,
.black-panel {
    background: #1e2124;
    border: 1px solid #25282c;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 16px;
}

.search-charts-panel.panel.panel-default.panel {
    border: none;
}

.search-charts-panel.panel.panel-default .panel-heading,
.black-panel-heading {
    background: #1e2124;
    border-bottom: 2px solid #25282c;
    border-radius: 5px 5px 0 0;
    padding: 12px 16px;
}

.search-charts-panel.panel.panel-default .panel-body ,
.black-panel-body {
    padding: 16px;
    background: #1e2124;
}
/* Reusable dark theme form control border - used throughout the application */
.form-control-dark-border {
    border: 1px solid #3a3d42;
}

/* Chart type selector (select element) */
.search-charts-panel select.form-control.input-sm {
    background: rgba(30, 33, 36, 0.8);
    border: 1px solid rgba(47, 51, 56, 0.8);
    border-radius: 6px;
    color: #9ca3af;
    font-size: 12px;
    padding: 6px 10px;
    height: auto;
}

/* Chart canvas containers */
.search-charts-panel [id$="-Chart-container"] {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
}

/* Filter status text */
.search-charts-panel .statustext {
    color: #6b7280;
    font-size: 11px;
}

.search-charts-panel .statustext .glyphicon,
.dashboard-page .statustext .glyphicon {
    color: #33A0D4;
    margin-right: 4px;
}

/* Chart label styling */
.search-charts-panel label
 {
    color: #9ca3af;
    font-size: 12px;
    font-weight: normal;
    margin-right: 8px;
}

/* Center text-info vertically in numindicesselectedtop */
#numindicesselectedtop .text-info {
    margin: 0;
    display: flex;
    align-items: center;
}

/* Modern "To top" button styling - reusable component */
.scroll-to-top-btn {
    background: rgba(32, 35, 39, 0.9);
    border: none;
    color: #d0d0d0;
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.scroll-to-top-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(51, 160, 212, 0.15);
}

.scroll-to-top-btn:hover i {
    transform: translateY(-1px);
}

/* Help table styling */
.helptable {
    background-color: rgba(30, 33, 36, 0.3);
    border-radius: 4px;
}

.helptable thead th {
    border-bottom: 2px solid rgba(51, 160, 212, 0.4);
    background-color: rgba(37, 40, 44, 0.5);
    padding: 10px 12px;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    vertical-align: top;
}

/* Help table cell styling classes - reusable td styles */
.helptable-td {
    border-bottom: 1px solid rgba(60, 65, 70, 0.6);
    padding: 10px 12px;
    font-size: 12px;
}

.helptable-td-question {
    border-bottom: 1px solid rgba(60, 65, 70, 0.6);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: bold;
    min-width: 200px;
    vertical-align: top;
}

.helptable-td-answer {
    border-bottom: 1px solid rgba(60, 65, 70, 0.6);
    padding: 10px 12px;
    font-size: 12px;
    vertical-align: top;
}

.helptable-tr {
    transition: background-color 0.2s ease;
}

.helptable-tr:hover {
    background-color: rgba(42, 45, 50, 0.5);
}


/* Dashboard Modernization Styles */

/* Remove borders from dashboard buttons */
.dashboard-page .btn-default,
.dashboard-page .btn-group .btn-default {
    border: none;
}

/* Dashboard panels - remove default borders and apply modern styling */
.dashboard-page .panel {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background: #1e2124;
    margin-bottom: 16px;
}

.dashboard-page .panel-body {
    padding: 16px;
}

.dashboard-page .panel-body h1 {
    color: #d0d0d0;
    margin: 0;
}

.dashboard-page .panel-footer {
    background: #1e2124;
    border-top: 2px solid #25282c;
    /* border-radius: 0 0 12px 12px; */
    padding: 10px 16px;
    color: #9ca3af;
    font-size: 12px;
}

/* Table styling in dashboard */
.dashboard-page .table {
    background: #1e2124;
    color: #9ca3af;
}

.dashboard-page .table thead th {
    background: #25282c;
    color: #d0d0d0;
    border-bottom: 2px solid #33A0D4;
    border-top: none;
}

.dashboard-page .table tbody tr:hover {
    background: rgba(47, 51, 56, 0.5);
}

.dashboard-page .table tbody td {
    border-top: none;
    border-bottom: 1px solid #25282c;
}
/* End Dashboard Modernization Styles */
/* Analytics Layout Styles for Filetree */
.analytics-row-secondary {
    margin-bottom: 15px;
}

.analytics-card {
    overflow: hidden;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.analytics-card > .panel-heading {
    flex-shrink: 0;
}

.analytics-card-title,
.analytics-card-title-secondary {
    font-size: 14px;
    margin: 0;
    display: flex;
    align-items: center;
}

.analytics-card-body {
    padding: 8px 16px 20px 16px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.primary-chart-wrapper,
.secondary-chart-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.primary-chart-wrapper {
    min-height: 400px;
    align-items: center;
}

.secondary-chart-wrapper {
    min-height: 250px;
    align-items: flex-start;
    padding-top: 8px;
}

/* Analytics wrapper layout */
.analytics-wrapper {
    width: calc(100% - 500px);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
    overflow-y: auto;
}

#chart-container {
    flex: 1;
}

/* Fix tree-container positioning to prevent overlap with path input */
#tree-wrapper #tree-container {
    position: relative;
}