:root {
    --CartTemplateBackground: #e7e5e5c7;
    --CartTemplatePriceBackground: rgba(231, 229, 229, 0.92);
    --CartTemplateBorder: rgba(0, 0, 0, 0.3);
    --CartButtonColorHover: #5b5b5b;
    --CartButtonColorSuccess: green;
    --CartButtonColorWaiting: #fb320f;
    --CartButtonInputBorder: gray;
    --CartZIndex: 999999;
}
.beautiful-cart-button {
    position: absolute;
    z-index: var(--CartZIndex);
    bottom: 0;
    right: 0;
    padding: 5px 5px 5px 10px;
    border-top-left-radius: 4px;
    background-color: var(--CartTemplateBackground);
    border-top: var(--CartTemplateBorder) 1px solid;
    border-left: var(--CartTemplateBorder) 1px solid;
    border-bottom: var(--CartTemplateBorder) 1px solid;
    color: black;
    display: flex;
}
.beautiful-cart-button.d-visible {
    display: flex !important;
}
.beautiful-cart-button > .icon-wrapper {
    min-width: 30px;
}
.beautiful-cart-button > .icon-wrapper > i.fas {
    display: block;
    font-size: 1.2em;
}
.beautiful-cart-button > .icon-wrapper > i.fas.fa-shopping-cart,
.beautiful-cart-button > .icon-wrapper > i.fas.fa-check {
    margin: 0.25em 0.4em 0 0;
}
.beautiful-cart-button > .icon-wrapper > i.fas.fa-shopping-cart:hover {
    color: var(--CartButtonColorHover);
    cursor: pointer;
}
.beautiful-cart-button > .icon-wrapper > i.fas.fa-spin {
    display: block;
    line-height: unset !important;
    height: unset !important;
    text-align: center !important;
    font-size: 1rem;
    margin: 0 0.4em 0 0;
}
.beautiful-cart-button .cart-response-success {
    color: var(--CartButtonColorSuccess);
}
.beautiful-cart-button .awaiting-cart-response {
    color: var(--CartButtonColorWaiting);
}
.beautiful-cart-button > input[type=number] {
    border-radius: 5px;
    border: 1px solid var(--CartButtonInputBorder);
    width: 3em;
}
.beautiful-cart-prices {
    font-size: .8em;
    position: absolute;
    bottom: 4.1em;
    right: 0;
    padding: .5em;
    z-index: var(--CartZIndex);
    background-color: var(--CartTemplatePriceBackground);
    border-top: var(--CartTemplateBorder) 1px solid;
    border-left: var(--CartTemplateBorder) 1px solid;
    border-bottom: var(--CartTemplateBorder) 1px solid;
}
.beautiful-cart-prices > i {
    color: black;
    position: relative;
}
.beautiful-cart-prices > p {
    font-size: .9em;
    margin-bottom: 0;
}
.beautiful-cart-prices > p > span.price {
    margin-left: .4em;
    float: right;
}
/* Disable the text/user-selection of prices etc. when it is a product box initialized with this plugin */
.productbox-inner[data-beautiful-cart-element-id] .boxbeschreibung {
    user-select: none;
}