.panel {
    position: relative;
    transition: width 250ms ease;
    width: 0px;
}
.panel.pinline {
    width: 400px;
}
.panel.poverlay {
    
}

.panel .panelBg {
    opacity: 0;
    transition: opacity 500ms;
    pointer-events: none;
}
.panel.pinline .panelBg {
    display: none;
}
.panel.poverlay .panelBg {
    opacity: 1;
    pointer-events: auto;
    z-index: 105;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba(0,0,0,.4);
    cursor: default;
}

.panel .panelContent {
    transition: transform 250ms, right 250ms ease;
    position: fixed;
    top: 0px;
    width: 100%;
    max-width: 400px;
    /* height: 100vh; */
    height: 100%;
    overflow: scroll;
    background-color: var(--rsi-window-bgcolor);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;

}
.panel .panelContent.menu {
    transform: translateX(-100%);
    left: 0px;
    right: auto;
    grid-template-rows: min-content 1fr;
}
.panel .panelContent.shoppingcart {
    transform: translateX(100%);
    left: auto;
    right: 0px;
}
.panel .panelContent.adminDetails {
    transform: translateX(100%);
    left: auto;
    /* right: 0px; */
}
.panel.pinline.categoryPanel .panelContent {
    transform: translateX(calc(0% + var(--admin-sidebar-width)));

    /* box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%); */
}
.panel.pinline .panelContent {
    transform: translateX(0%);
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    z-index: 100;

    /* box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%); */
}
.panel.poverlay .panelContent {
    transform: translateX(0%);
    z-index: 203;
}

.panel .panelContent .panelContentHeader {
    user-select: none;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    border-bottom: 1px solid #e2e0e2;
    height: 62px;
    /* box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%); */
}
.panel .panelContent .panelContentHeader:hover {
    background-color: rgba(0,0,0,0.1);
    cursor: pointer;
}
.panel .panelContent .panelContentHeader p {
    padding: 0px;
    display: inline;
}
.panel .panelContent .panelContentHeader > i {
    padding: 0px 15px;
}