.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;
}



/* #rsi_window {
    position: fixed;
    top: 0px;
    margin: 0px;
    right: 0px;
    width: 100vw;
    max-width: 510px;
    height: 100vh;
    overflow: scroll;
    background-color: var(--rsi-window-bgcolor);
    z-index: 203;
    box-shadow: 10px 0 5px -2px #888;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;
}
.shoppingcart_inline #rsi_window {
    position: absolute;
    max-width: 400px;
    left: 0px;
    right: auto;
    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%);
}
.shoppingcart_overlay #rsi_window {
    
}
.shoppingcart_product {
    padding: 15px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 50px 1fr min-content min-content;
    grid-template-areas:
        "image nameandstock amount price";
    border-bottom: 1px solid #ededed;
}
.shoppingcart_product > * {
    margin: 0px;
}


#shoppingcart-products > div > i > a {
    text-decoration: none;
    text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}

#shoppingcart-bottom {
    grid-area: shoppingcart-bottom;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-areas: 
        "shoppingcart-total-price shoppingcart-checkout-button"
        "shoppingcart-inkl-moms-text shoppingcart-checkout-button";
}
#shoppingcart-bottom > span:first-child {
    grid-area: shoppingcart-total-price;
    justify-self: end;
    align-self: end;
    margin-right: 14px;
}
#shoppingcart-bottom > span > span {
}
#shoppingcart-bottom > span:nth-child(2) {
    grid-area: shoppingcart-inkl-moms-text;
    justify-self: end;
    align-self: end;
    margin-right: 14px;
    white-space: nowrap;
}
#shoppingcart-bottom > a {
    grid-area: shoppingcart-checkout-button;
    background-color: #2F9DF2;
    padding: 10px 14px;
    border: 0;
    border-radius: 2px;
    white-space: nowrap;
    text-decoration: none;
}
#shoppingcart-bottom > a:hover {
    cursor: pointer;
}

.popup {
    pointer-events: none;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: none;
    margin: 0px;
}
.popup_inner {
    pointer-events: auto;
    z-index: 102;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0px;
    border: none;
    background-color: white;
    overflow: auto;
    align-self: center;
    justify-self: center;
    border-radius: 0px;
    padding: 20px;
    box-sizing: border-box;
}
@media (min-width: 550px) {
    .popup_inner {
        height: auto;
        max-height: calc(100% - 40px);
        border: 1px solid rgb(194, 194, 194);
        border-radius: 4px;
        max-width: 550px;
    }
}
#shoppingcart {
    grid-area: right;
    position: relative;
}
#shoppingcart.shoppingcart_inline {
    width: 400px;
    overflow: hidden;
    border-left: 1px solid #ccc;
}

.popup_bg {
    pointer-events: auto;
    z-index: 101;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba(0,0,0,.4);
    cursor: default;
}

.shoppingcart_inline .popup_bg {
    position: relative;
    max-width: 510px;
    width: 100%;
} */