@starting-style {
    .xaf-sidebar {
        display: none;
    }
}
.dxbl-group-header.dxbl-accordion-group-header {
}

.xaf-sidebar .dxbl-group, .xaf-sidebar {
    background: none !important;
}

.xaf-sidebar {
    position: absolute;
    z-index: 1000;
    background: rgba(26,25,26, 0.80) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.header {
    background-color: #484748 !important;
}

.xaf-sidebar {
    position: absolute !important;
    left: 0;
    bottom: 0;
    top: 48px;
    width: 260px;  adjust to your layout 
    height: 100vh;
    display: flex;
    flex-direction: column;
     Frosted dark glass effect 
    background: rgba(26,25,26, 0.80) !important;  semi-transparent dark 
     Soft shadow on the right side 
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.35);
    z-index: 9999;  sits above other flex children 
    pointer-events: auto;
}


/* === Shiny bevel highlight on right edge === */
/*.xaf-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;*/ /* slightly outside the edge */
    /*width: 12px;*/ /* thickness of the bevel */
    /*height: 100%;*/
    /* The shiny bevel gradient */
    /*background: linear-gradient( to left, rgba(255, 255, 255, 0.25),*/ /* bright highlight */
    /*rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.00) );
    pointer-events: none;*/ /* allow clicking through */
    /*z-index: 10000;*/ /* over everything, including the sidebar */
/*}*/