/* Primary navy scrollbars — loaded last so these rules win.
   Do not set scrollbar-width on the page scroller: in Chromium that
   disables ::-webkit-scrollbar and shows the grey Windows bar. */

.mud-popover .mud-list,
.mud-popover-relative-width .mud-list,
.mud-popover.action-menu-popover > .mud-menu-list,
.action-menu-popover .mud-menu-list,
.commodities-table,
.messages-email-table,
.mud-select-popover .mud-list,
.mud-drawer-content,
.mud-dialog-content,
.dashboard-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 20, 137) transparent;
}

.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.mud-layout::-webkit-scrollbar,
.mud-main-content::-webkit-scrollbar,
.dashboard-main::-webkit-scrollbar,
.mud-table-container::-webkit-scrollbar,
.mud-drawer-content::-webkit-scrollbar,
.mud-dialog-content::-webkit-scrollbar,
.mud-popover .mud-list::-webkit-scrollbar,
.mud-popover-relative-width .mud-list::-webkit-scrollbar,
.mud-popover.action-menu-popover > .mud-menu-list::-webkit-scrollbar,
.action-menu-popover .mud-menu-list::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.commodities-table::-webkit-scrollbar,
.messages-email-table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.mud-layout::-webkit-scrollbar-thumb,
.mud-main-content::-webkit-scrollbar-thumb,
.dashboard-main::-webkit-scrollbar-thumb,
.mud-table-container::-webkit-scrollbar-thumb,
.mud-drawer-content::-webkit-scrollbar-thumb,
.mud-dialog-content::-webkit-scrollbar-thumb,
.mud-popover .mud-list::-webkit-scrollbar-thumb,
.mud-popover-relative-width .mud-list::-webkit-scrollbar-thumb,
.mud-popover.action-menu-popover > .mud-menu-list::-webkit-scrollbar-thumb,
.action-menu-popover .mud-menu-list::-webkit-scrollbar-thumb,
.commodities-table::-webkit-scrollbar-thumb,
.messages-email-table::-webkit-scrollbar-thumb {
    background: rgba(0, 20, 137, 0.4) !important;
    border-radius: 99px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 99px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.mud-layout::-webkit-scrollbar-thumb:hover,
.mud-main-content::-webkit-scrollbar-thumb:hover,
.dashboard-main::-webkit-scrollbar-thumb:hover,
.mud-table-container::-webkit-scrollbar-thumb:hover,
.mud-drawer-content::-webkit-scrollbar-thumb:hover,
.mud-dialog-content::-webkit-scrollbar-thumb:hover,
.mud-popover .mud-list::-webkit-scrollbar-thumb:hover,
.mud-popover-relative-width .mud-list::-webkit-scrollbar-thumb:hover,
.mud-popover.action-menu-popover > .mud-menu-list::-webkit-scrollbar-thumb:hover,
.action-menu-popover .mud-menu-list::-webkit-scrollbar-thumb:hover,
.commodities-table::-webkit-scrollbar-thumb:hover,
.messages-email-table::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 20, 137, 0.7) !important;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.mud-layout::-webkit-scrollbar-track,
.mud-main-content::-webkit-scrollbar-track,
.dashboard-main::-webkit-scrollbar-track,
.mud-table-container::-webkit-scrollbar-track,
.mud-drawer-content::-webkit-scrollbar-track,
.mud-dialog-content::-webkit-scrollbar-track,
.mud-popover .mud-list::-webkit-scrollbar-track,
.mud-popover-relative-width .mud-list::-webkit-scrollbar-track,
.mud-popover.action-menu-popover > .mud-menu-list::-webkit-scrollbar-track,
.action-menu-popover .mud-menu-list::-webkit-scrollbar-track,
.commodities-table::-webkit-scrollbar-track,
.messages-email-table::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
.dashboard-main::-webkit-scrollbar-button,
.mud-main-content::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* Reserve 8px always; only paint the thumb on hover so layout does not jump */
.mud-table-container,
.mud-popover .mud-list,
.mud-popover-relative-width .mud-list,
.mud-select-popover .mud-list,
.mud-popover.action-menu-popover > .mud-menu-list,
.action-menu-popover .mud-menu-list {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.mud-main-content::-webkit-scrollbar,
.dashboard-main::-webkit-scrollbar,
.mud-table-container::-webkit-scrollbar,
.mud-popover .mud-list::-webkit-scrollbar,
.mud-popover-relative-width .mud-list::-webkit-scrollbar,
.mud-select-popover .mud-list::-webkit-scrollbar,
.mud-popover.action-menu-popover > .mud-menu-list::-webkit-scrollbar,
.action-menu-popover .mud-menu-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mud-main-content::-webkit-scrollbar-thumb,
.dashboard-main::-webkit-scrollbar-thumb,
.mud-table-container::-webkit-scrollbar-thumb,
.mud-popover .mud-list::-webkit-scrollbar-thumb,
.mud-popover-relative-width .mud-list::-webkit-scrollbar-thumb,
.mud-select-popover .mud-list::-webkit-scrollbar-thumb,
.mud-popover.action-menu-popover > .mud-menu-list::-webkit-scrollbar-thumb,
.action-menu-popover .mud-menu-list::-webkit-scrollbar-thumb {
    background: transparent !important;
}

.mud-main-content::-webkit-scrollbar-button,
.dashboard-main::-webkit-scrollbar-button,
.mud-table-container::-webkit-scrollbar-button,
.mud-popover .mud-list::-webkit-scrollbar-button,
.mud-popover-relative-width .mud-list::-webkit-scrollbar-button,
.mud-select-popover .mud-list::-webkit-scrollbar-button,
.action-menu-popover .mud-menu-list::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.mud-main-content:hover,
.dashboard-main:hover,
.mud-table-container:hover,
.mud-table:has(tbody:hover) .mud-table-container,
.mud-popover .mud-list:hover,
.mud-popover-relative-width .mud-list:hover,
.mud-select-popover .mud-list:hover,
.mud-popover.action-menu-popover > .mud-menu-list:hover,
.action-menu-popover .mud-menu-list:hover {
    scrollbar-color: rgba(0, 20, 137) transparent;
}

.mud-main-content:hover::-webkit-scrollbar-thumb,
.dashboard-main:hover::-webkit-scrollbar-thumb,
.mud-table-container:hover::-webkit-scrollbar-thumb,
.mud-table:has(tbody:hover) .mud-table-container::-webkit-scrollbar-thumb,
.mud-popover .mud-list:hover::-webkit-scrollbar-thumb,
.mud-popover-relative-width .mud-list:hover::-webkit-scrollbar-thumb,
.mud-select-popover .mud-list:hover::-webkit-scrollbar-thumb,
.mud-popover.action-menu-popover > .mud-menu-list:hover::-webkit-scrollbar-thumb,
.action-menu-popover .mud-menu-list:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 20, 137, 0.4) !important;
}