.Sidebar-header {
    background-color: rgb(0 0 0 / 5%);
}

.Sidebar-headerContainer {
    white-space: nowrap;
    display: flex;
}

.Sidebar-headerCloseContainer {
    font-size: 14px;
    padding: 10px 17px;
    margin: -0.5rem -1rem;
}

.Sidebar-headerTitleContainer {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 0;
    margin-left: 20px;
}

.Sidebar-headerCloseContainer:hover {
    background-color: #dedede;
}

.Sidebar-headerTitle {
    font-size: 14px;
    padding-top: 3px;
    margin-bottom: -3px;
}

.Sidebar-headerClose {
    font-size: 14px;
    color: #7f7f7f;
}

.Sidebar-content {
    padding: 15px 15px 0;
    height: 100%;
}

.Sidebar-footerContainer {
    width: 100%;
    padding: 15px 25px 20px;
    float: right;
}

.Sidebar-outer--inContainer {
    /* So the .Sidebar--inContainer height calc ignores this element */
    display: contents;
}

.Sidebar--inContainer {
    /* Override fixed positioning so we can position sidebar relative to closest ancestor with position: relative */
    position: absolute;
    height: 100%;
    z-index: 1035; /* Copied from Bootstrap's .b-sidebar-outer, which won't take effect with the display:contents */
}

.Sidebar-outer--inContainer .b-sidebar-backdrop {
    position: absolute;
    inset: 0;
    z-index: 100; /* Below 100 fails for sidebars in Gantt/NJEG and above 999 brings ot over in-container sidebars */
}