:root {
    --rz-sidebar-toggle-margin-inline-end: 0rem;
    --rz-grid-header-background-color: var(--rz-base-200);
    --rz-grid-cell-border: var(--rz-border-base-600);
    --rz-numeric-input-padding-inline: 0.375rem 0.875rem;
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

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

.rz-body {
    padding: 0 !important;
    /*margin: var(--rz-layout-body-margin);*/
    margin:0px;
    border-radius:0px !important;
   /* padding: var(--rz-layout-body-padding);*/
    border-bottom-left-radius: var(--rz-layout-body-border-radius);
    border-bottom-right-radius: var(--rz-layout-body-border-radius);
    background-color: var(--rz-layout-body-background-color);
   /* margin-bottom:8px;*/
}

a {
    color: var(--rz-link-color);
}

/*a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}*/

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.navbar-text{
    font-size: 1rem;
}

/* override radzen dialog ui starts */
.rz-dialog-titlebar, .rz-dialog-side-titlebar {
    display: flex;
    align-items: normal;
    font-size: var(--rz-dialog-title-font-size);
    line-height: var(--rz-dialog-title-line-height);
    background-color: var(--rz-primary) !important;
    padding: 8px 20px 8px 20px !important;
}


.rz-dialog-title, .rz-dialog-side-title {
    flex: auto;
    font-weight: var(--rz-dialog-title-font-weight);
    letter-spacing: var(--rz-dialog-title-letter-spacing);
    color: var(--rz-on-primary) !important;
    user-select: none;
}

.rz-dialog-titlebar-close .rzi-times, .rz-dialog-side-titlebar-close .rzi-times {
    font-size: var(--rz-dialog-close-font-size);
    color: var(--rz-on-primary) !important;
    vertical-align: var(--rz-dialog-close-vertical-align);
}
/* override radzen dialog ui ends */

.rz-grid-table thead th.rz-text-align-right .rz-column-title {
    padding-right: 0.5rem;
}

/* Category header styles matching legacy prodpictitle.ascx */
.category-header {
    margin-bottom: 1rem;
}

.category-title {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.text-a {
    font-size: 1.0625rem;    
    font-weight: bold;
    margin-bottom: 0.125rem;
}

.text-b {
    font-size: 1.0625rem;    
}

.text-b ul {
    line-height: 1.4;
    margin: 0.25rem 0.625rem;
    padding: 0;
    padding-left: 1.25rem;
}

.text-b li {
    margin-bottom: 0.5rem;
}

/* ProductDetail spec/description row: full margin on desktop, none below 1024px */
.pd-spec-row {
    margin-right: 5rem;
}

@media (max-width: 1268px) {
    .pd-spec-row {
        margin-right: 0;
    }
}

.no-hover-btn:hover,
.no-hover-btn:focus,
.no-hover-btn:active {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* Sticky DataGrid header - pins column headers when scrolling */
/* Desktop: overflow clip preserves border-radius without creating a scroll container */
.sticky-header.rz-datatable {
    overflow: clip !important;
}

.sticky-header .rz-data-grid-data {
    overflow: visible !important;
}

.sticky-header .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--rz-grid-header-background-color);
}

/* Mobile/tablet: enable horizontal scrolling so all columns are accessible */
@media (max-width: 1200px) {
    .sticky-header.rz-datatable {
        overflow: hidden !important;
    }

    .sticky-header .rz-data-grid-data {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ALTCHA web component: stays hidden until JS confirms the bundle's
   styles are applied. A pure CSS approach (:not(:defined),
   :not(:has(.altcha-main))) fails because there is no CSS selector for
   "the bundled <style> has been injected and applied" - the element
   becomes :defined and renders .altcha-main BEFORE its stylesheet
   takes effect, producing a paint of unstyled stacked children
   (checkbox above text, retry icon below text, no border) for 1-2
   frames. The reveal class html.altcha-ready is set by an inline
   script in App.razor that awaits customElements.whenDefined() plus
   two requestAnimationFrame ticks, which is the earliest moment the
   styled widget is guaranteed to be on screen. visibility:hidden (not
   display:none) is used so .altcha-wrapper's reserved 60px height
   stays stable - no layout shift on reveal. */
.altcha-wrapper altcha-widget {
    visibility: hidden;
}

html.altcha-ready .altcha-wrapper altcha-widget {
    visibility: visible;
}

.altcha-wrapper {
    min-height: 30px;
    /* The 60px min-height reserves space for the widget before its CDN bundle */
    /* upgrades the custom element (FOUC prevention). Once upgraded, the widget */
    /* content (~36px) is shorter than the reservation, so without this rule    */
    /* the content sits at the top of the 60px box and looks offset when the    */
    /* widget shares a horizontal flex row with a shorter neighbor (e.g. a      */
    /* Radzen button). Centering content along the main axis (vertical, since   */
    /* RadzenStack renders flex-direction: column) keeps the visible checkbox   */
    /* aligned with the wrapper's geometric center, which is what the parent    */
    /* row's align-items:center aligns against.                                 */
    justify-content: center;
}

/* Force the inner <altcha-widget> custom element to fill its .altcha-wrapper
   container. ALTCHA's bundle gives the element a min-width near 260px; the
   min-width: 0 override lets the wrapper's explicit width (e.g. 190px) win. */
.altcha-wrapper altcha-widget {
    display: block;
    width: 100%;
    min-width: 0;
}

/* On phone-sized viewports, expand the widget to fill the form column even
   when the consumer specified a fixed width like Style="width:190px". */
@media (max-width: 480px) {
    .altcha-wrapper {
        width: 100% !important;
    }
}

/* Make AltchaWidget visually compatible with horizontal layouts beside a
   Radzen primary button:
   1) justify-content:center vertically centers the internal checkbox row
      within the widget's box (default is space-between, which left the
      checkbox at the top when only one child is visible after we hide
      footer/logo via configuration).
   2) Padding 0.4rem top/bottom shrinks the widget's rendered height from
      ~46px to ~36px so it matches a Radzen ButtonSize.Medium button.
   These changes are no-ops in pure-vertical layouts (Login, ForgetPassword)
   and only help in horizontal layouts (CreateAccount). */
.altcha-wrapper altcha-widget .altcha-main {
    justify-content: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}