#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.slider-one-mode {
    --carousel-arrow-color: rgba(0,0,0,0.5);
}

.product-price-weighable,
.product-price-weighable .product-prices,
.product-price-weighable .product-prices .price,
.product-price-weighable .product-prices .price .val,
.product-price-weighable .product-prices .price .mon,
.product-price-weighable .product-prices .price .text {
    color: gray !important;
}

#components-reconnect-modal {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10001;
        width: clamp(220px, 32vw, 400px);
        aspect-ratio: 17 / 8;
        max-height: 70vh;
        overflow: auto;
        background: #fff;
        padding: clamp(.6rem, .95vw, 1.05rem);
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 10px 24px rgba(0,0,0,.28);
    }

.components-reconnect-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 3px solid rgba(66, 133, 244, .18);
    border-top-color: rgba(66, 133, 244, 1);
    animation: components-reconnect-spin .9s linear infinite;
}

@keyframes components-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.components-reconnect-text {
    font-size: clamp(.9rem, 1vw, 1rem);
    line-height: 1.25;
}