.nav-buttons-container .dxbl-btn.dxbl-btn-icon-only {
    --dxbl-btn-padding-x: 0.75rem;
    --dxbl-btn-padding-y: 0.25rem;
}

.icon {
    --icon-width: 1rem;
    --icon-height: 1rem;
    --icon-back-mask-image: url("/images/back.svg");
    --icon-close-mask-image: url("/images/close.svg");
    --icon-menu-mask-image: url("/images/menu.svg");
    --icon-docs-mask-image: url("/images/doc.svg");
    --icon-demos-mask-image: url("/images/demos.svg");
    --icon-home-mask-image: url("/images/home.svg");
    --icon-weather-mask-image: url("/images/weather.svg");
    --icon-counter-mask-image: url("/images/counter.svg");
}

/* Bootstrap Theme Sidebar Styling
 * Ensures nav menu items remain readable on hover with dark sidebar background
 */
html[data-theme-name="Bootstrap"] #sidebar .menu-item,
html[data-theme-name="BootstrapDark"] #sidebar .menu-item {
    color: #fff !important;
    background-color: transparent !important;
}

/* Reset DevExpress Bootstrap theme's default treeview node selection styling
 * The Bootstrap theme applies white/light backgrounds to selected nodes which
 * clashes with the dark sidebar. We need to reset these and apply our own.
 */
html[data-theme-name="Bootstrap"] #sidebar .dxbl-treeview-node-content,
html[data-theme-name="BootstrapDark"] #sidebar .dxbl-treeview-node-content {
    background-color: transparent !important;
}

/* Override Bootstrap's default hover colors on treeview nodes */
html[data-theme-name="Bootstrap"] #sidebar .dxbl-treeview-node-content:hover,
html[data-theme-name="BootstrapDark"] #sidebar .dxbl-treeview-node-content:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme-name="Bootstrap"] #sidebar .dxbl-treeview-node-content:hover .menu-item,
html[data-theme-name="BootstrapDark"] #sidebar .dxbl-treeview-node-content:hover .menu-item {
    color: #fff !important;
}

/* Selected state - only apply to the DIRECT node content of selected nodes 
 * Use > direct child combinator to prevent bleeding to parent/ancestor nodes
 */
html[data-theme-name="Bootstrap"] #sidebar .dxbl-treeview-node-selected > .dxbl-treeview-node-content,
html[data-theme-name="BootstrapDark"] #sidebar .dxbl-treeview-node-selected > .dxbl-treeview-node-content {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme-name="Bootstrap"] #sidebar .dxbl-treeview-node-selected > .dxbl-treeview-node-content .menu-item,
html[data-theme-name="BootstrapDark"] #sidebar .dxbl-treeview-node-selected > .dxbl-treeview-node-content .menu-item {
    color: #fff !important;
}

/* Ensure user profile text is visible */
html[data-theme-name="Bootstrap"] #sidebar .user-name,
html[data-theme-name="BootstrapDark"] #sidebar .user-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme-name="Bootstrap"] #sidebar .user-email,
html[data-theme-name="BootstrapDark"] #sidebar .user-email {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme-name="Bootstrap"] #sidebar .mru-job,
html[data-theme-name="BootstrapDark"] #sidebar .mru-job {
    color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme-name="Bootstrap"] #sidebar .mru-name,
html[data-theme-name="BootstrapDark"] #sidebar .mru-name {
    color: rgba(255, 255, 255, 0.7) !important;
}