@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/NvaComponents/NvaAutoComplete.razor.rz.scp.css */
/* ===== Autocomplete Wrapper ===== */
.autocomplete-container[b-i8sr82mg3t] {
    position: relative;
    width: 100%;
    font-family: inherit;
}

/* ===== Input ===== */
.autocomplete-input[b-i8sr82mg3t] {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.22s ease;
    box-sizing: border-box;
}

    .autocomplete-input[b-i8sr82mg3t]::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .autocomplete-input:hover[b-i8sr82mg3t] {
        border-color: #9ca3af;
    }

    .autocomplete-input:focus[b-i8sr82mg3t] {
        outline: none;
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 4px 18px rgba(37, 99, 235, 0.10);
    }

/* ===== Dropdown ===== */
.autocomplete-dropdown[b-i8sr82mg3t] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 8px;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    animation: dropdownFade-b-i8sr82mg3t 0.16s ease-out;
}

    /* ===== Scrollbar ===== */
    .autocomplete-dropdown[b-i8sr82mg3t]::-webkit-scrollbar {
        width: 8px;
    }

    .autocomplete-dropdown[b-i8sr82mg3t]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 12px;
    }

        .autocomplete-dropdown[b-i8sr82mg3t]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

/* ===== Item ===== */
.autocomplete-item[b-i8sr82mg3t] {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 12px;
    cursor: pointer;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.18s ease;
}

    .autocomplete-item:last-child[b-i8sr82mg3t] {
        margin-bottom: 0;
    }

    .autocomplete-item:hover[b-i8sr82mg3t] {
        background: #f3f6fb;
        transform: translateX(2px);
    }

    /* ===== Selected ===== */
    .autocomplete-item.selected[b-i8sr82mg3t] {
        background: linear-gradient( 135deg, #2563eb, #3b82f6 );
        color: white;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
    }

        .autocomplete-item.selected:hover[b-i8sr82mg3t] {
            transform: none;
        }

/* ===== Label ===== */
.form-label[b-i8sr82mg3t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

    /* ===== Required Star ===== */
    .form-label .text-danger[b-i8sr82mg3t] {
        font-size: 14px;
    }

/* ===== Animation ===== */
@keyframes dropdownFade-b-i8sr82mg3t {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.autocomplete-container:focus-within[b-i8sr82mg3t] {
    z-index: 10000;
}
/* /Components/NvaComponents/NvaCheckboxInput.razor.rz.scp.css */
.form-check-label[b-m72xhhhm5z] {
    padding-top: 0.5em;
}
/* /Components/NvaComponents/NvaConfirmModal.razor.rz.scp.css */
.confirm-message-modal[b-zc3uok4fdo] {
    z-index: 10000 !important;
}

.lead[b-zc3uok4fdo] {
    font-size:unset !important;
}
/* /Components/NvaComponents/NvaDntCaptchaComponent.razor.rz.scp.css */
.captcha-container[b-btdpeziple] {
    max-width: 340px; /* Slightly narrower for a cleaner look */
}

    /* Forces the image container to match standard Bootstrap input height exactly */
    .captcha-container .input-group-text[b-btdpeziple] {
        width: 110px; /* Slightly narrower image footprint */
        height: 38px; /* Standard Bootstrap form-control height */
        border-right: none; /* Smooth transition to the input */
    }

    /* Ensures the refresh button matches the height perfectly */
    .captcha-container .btn[b-btdpeziple] {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Scale the image nicely inside the 38px box */
.captcha-img[b-btdpeziple] {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Scales the image to fit the exact dimensions */
}

/* Match standard input height */
.captcha-input[b-btdpeziple] {
    height: 38px;
    font-size: 0.95rem;
}

    /* Fixes focus state borders so the input-group looks unified */
    .captcha-input:focus[b-btdpeziple] {
        box-shadow: none;
    }
/* /Components/NvaComponents/NvaForm.razor.rz.scp.css */
.autocomplete-container[b-14p1435eo2] {
    position: relative;
    width: 100%;
}

.autocomplete-input[b-14p1435eo2] {
    width:100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    transition: all 0.2s;
}

    .autocomplete-input:focus[b-14p1435eo2] {
        outline: none;
        border-color: #0078d4;
        box-shadow: 0 0 6px rgba(0, 120, 212, 0.3);
    }

.autocomplete-dropdown[b-14p1435eo2] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(5 * 40px);
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
    list-style: none;
}

.autocomplete-item[b-14p1435eo2] {
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

    .autocomplete-item:hover[b-14p1435eo2],
    .autocomplete-item.selected[b-14p1435eo2] {
        background-color: #0078d4;
        color: white;
    }
/* /Components/NvaComponents/NvaLoadingOverlay.razor.rz.scp.css */
.overlay[b-na3i129cku] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:99999999999999999999;
}

.overlay-content[b-na3i129cku] {
    text-align: center;
}
/* /Components/NvaComponents/NvaMultiAutoComplete.razor.rz.scp.css */
/* ===== Autocomplete Wrapper ===== */
.autocomplete-container[b-i581zia8w5] {
    position: relative;
    width: 100%;
    font-family: inherit;
}

/* ===== Input ===== */
.autocomplete-input[b-i581zia8w5] {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.22s ease;
    box-sizing: border-box;
}

    .autocomplete-input[b-i581zia8w5]::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .autocomplete-input:hover[b-i581zia8w5] {
        border-color: #9ca3af;
    }

    .autocomplete-input:focus[b-i581zia8w5] {
        outline: none;
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 4px 18px rgba(37, 99, 235, 0.10);
    }

/* ===== Dropdown ===== */
.autocomplete-dropdown[b-i581zia8w5] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 8px;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    animation: dropdownFade-b-i581zia8w5 0.16s ease-out;
}

    /* ===== Scrollbar ===== */
    .autocomplete-dropdown[b-i581zia8w5]::-webkit-scrollbar {
        width: 8px;
    }

    .autocomplete-dropdown[b-i581zia8w5]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 12px;
    }

        .autocomplete-dropdown[b-i581zia8w5]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

/* ===== Item ===== */
.autocomplete-item[b-i581zia8w5] {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 12px;
    cursor: pointer;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.18s ease;
}

    .autocomplete-item:last-child[b-i581zia8w5] {
        margin-bottom: 0;
    }

    .autocomplete-item:hover[b-i581zia8w5] {
        background: #f3f6fb;
        transform: translateX(2px);
    }

    /* ===== Selected ===== */
    .autocomplete-item.selected[b-i581zia8w5] {
        background: linear-gradient( 135deg, #2563eb, #3b82f6 );
        color: white;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
    }

        .autocomplete-item.selected:hover[b-i581zia8w5] {
            transform: none;
        }

/* ===== Label ===== */
.form-label[b-i581zia8w5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

    /* ===== Required Star ===== */
    .form-label .text-danger[b-i581zia8w5] {
        font-size: 14px;
    }

/* ===== Animation ===== */
@keyframes dropdownFade-b-i581zia8w5 {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.autocomplete-container:focus-within[b-i581zia8w5] {
    z-index: 10000;
}

/* ===== TAGS ===== */

.autocomplete-tags[b-i581zia8w5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.autocomplete-tag[b-i581zia8w5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient( 135deg, #2563eb, #3b82f6 );
    color: white;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.tag-remove[b-i581zia8w5] {
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.9;
    transition: all 0.2s ease;
}

    .tag-remove:hover[b-i581zia8w5] {
        opacity: 1;
        transform: scale(1.1);
    }
/* /Components/NvaComponents/NvaPromptConfirmModal.razor.rz.scp.css */
.modal-backdrop[b-qrs41g9urt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    /* allow clicks to children */
    pointer-events: auto;
}

.modal-dialog[b-qrs41g9urt] {
    position: relative; /* important for stacking */
    background: white;
    border-radius: 8px;
    min-width: 300px;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1060; /* above backdrop */
    padding: 1rem;
    pointer-events: auto; /* ensure dialog accepts clicks */
}


.modal-dialog[b-qrs41g9urt] {
    padding: 1rem; /* add spacing inside */
}

.modal-header[b-qrs41g9urt], .modal-body[b-qrs41g9urt], .modal-footer[b-qrs41g9urt] {
    margin: 0;
    padding: 0.5rem 1rem;
}

.modal-footer[b-qrs41g9urt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem; /* spacing between buttons */
}

.modal-dialog[b-qrs41g9urt] {
    animation: fadeIn-b-qrs41g9urt 0.2s ease-out;
}

@keyframes fadeIn-b-qrs41g9urt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/NvaComponents/NvaQuickGrid.razor.rz.scp.css */
.q-grid[b-f7vg1ibkey] {
    overflow: auto;
}

.autocomplete-container[b-f7vg1ibkey] {
    position: relative;
    width: 100%;
}

.autocomplete-input[b-f7vg1ibkey] {
    width:100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    transition: all 0.2s;
}

.autocomplete-input:focus[b-f7vg1ibkey] {
    outline: none;
    border-color: #0078d4;
    box-shadow: 0 0 6px rgba(0, 120, 212, 0.3);
}

.autocomplete-dropdown[b-f7vg1ibkey] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(5 * 40px);
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
    list-style: none;
}

.autocomplete-item[b-f7vg1ibkey] {
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

    .autocomplete-item:hover[b-f7vg1ibkey],
    .autocomplete-item.selected[b-f7vg1ibkey] {
        background-color: #0078d4;
        color: white;
    }
/* /Components/NvaComponents/NvaSelectInput.razor.rz.scp.css */
/* ===== Autocomplete Wrapper ===== */
.autocomplete-container[b-ftwhwxwf4y] {
    position: relative;
    width: 100%;
    font-family: inherit;
    margin-bottom: 16px;
}

    .autocomplete-container:focus-within[b-ftwhwxwf4y] {
        z-index: 10000;
    }

/* ===== Label ===== */
.form-label[b-ftwhwxwf4y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

    .form-label .text-danger[b-ftwhwxwf4y] {
        font-size: 14px;
        color: #dc2626;
    }

/* ===== Select Trigger Button ===== */
.select-trigger[b-ftwhwxwf4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    min-height: 46px;
    padding: 12px 40px 12px 16px; /* Space for the arrow icon */
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.22s ease;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

    .select-trigger .placeholder[b-ftwhwxwf4y] {
        color: #9ca3af;
        font-weight: 400;
    }

    .select-trigger:hover:not(:disabled)[b-ftwhwxwf4y] {
        border-color: #9ca3af;
    }

    .select-trigger:focus[b-ftwhwxwf4y],
    .is-open .select-trigger[b-ftwhwxwf4y] {
        outline: none;
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 4px 18px rgba(37, 99, 235, 0.10);
    }

    .select-trigger:disabled[b-ftwhwxwf4y] {
        background: #f3f4f6;
        color: #9ca3af;
        cursor: not-allowed;
        border-color: #e5e7eb;
    }

    /* Custom Dropdown Arrow Indicator */
    .select-trigger[b-ftwhwxwf4y]::after {
        content: "";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        transition: transform 0.22s ease;
    }

.is-open .select-trigger[b-ftwhwxwf4y]::after {
    transform: translateY(-50%) rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

/* ===== Dropdown Wrapper ===== */
.autocomplete-dropdown[b-ftwhwxwf4y] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 8px;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    animation: dropdownFade-b-ftwhwxwf4y 0.16s ease-out;
}

    /* Custom Scrollbar */
    .autocomplete-dropdown[b-ftwhwxwf4y]::-webkit-scrollbar {
        width: 8px;
    }

    .autocomplete-dropdown[b-ftwhwxwf4y]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 12px;
    }

        .autocomplete-dropdown[b-ftwhwxwf4y]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

/* ===== Dropdown List Items ===== */
.autocomplete-item[b-ftwhwxwf4y] {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 12px;
    cursor: pointer;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.18s ease;
}

    .autocomplete-item:last-child[b-ftwhwxwf4y] {
        margin-bottom: 0;
    }

    .autocomplete-item:hover[b-ftwhwxwf4y] {
        background: #f3f6fb;
        transform: translateX(2px);
        color: #2563eb;
    }

    /* Active Selected Style */
    .autocomplete-item.selected[b-ftwhwxwf4y] {
        background: linear-gradient(135deg, #2563eb, #3b82f6);
        color: white;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
        transform: none;
    }

/* ===== Invisible Outside Click Target ===== */
.dropdown-backdrop[b-ftwhwxwf4y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 9998; /* Sits just under the autocomplete-dropdown (9999) */
    cursor: default;
}

/* ===== Entry Animation ===== */
@keyframes dropdownFade-b-ftwhwxwf4y {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Components/Shared/ConfirmMessageModal.razor.rz.scp.css */
.confirm-message-modal[b-de4zyyx5kb] {
    z-index: 10000 !important;
}

.lead[b-de4zyyx5kb] {
    font-size:unset !important;
}
/* /Components/Shared/DisplayImageModal.razor.rz.scp.css */
.image-modal[b-dtrtr247w6] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.85);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content-custom[b-dtrtr247w6] {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 16px;
    background: #111;
}

.modal-image[b-dtrtr247w6] {
    width: 100%;
    height: 80vh;
    object-fit: contain;
    user-select: none;
}

.modalSwiper[b-dtrtr247w6] {
    width: 100%;
    height: 100%;
}


.modal-content-custom[b-dtrtr247w6] {
    position: relative; /* required so the close button can be positioned inside it */
}

.modal-close-btn[b-dtrtr247w6] {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .modal-close-btn:hover[b-dtrtr247w6] {
        background: rgba(0, 0, 0, 0.8);
    }
/* /Components/Shared/Snackbar.razor.rz.scp.css */
.snackbar[b-utvixhv8f1] {
    position: fixed;
    right: 30px;
    bottom: 50px;
    min-height: 80px;
    min-width: 300px;
    max-width: 420px;
    padding: 14px 18px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.95);
    transition: all .25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(8px);
    z-index: 9999999999999999999999;
}

    .snackbar.show[b-utvixhv8f1] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .snackbar.success[b-utvixhv8f1] {
        background: linear-gradient(135deg,#16a34a,#22c55e);
    }

    .snackbar.error[b-utvixhv8f1] {
        background: linear-gradient(135deg,#dc2626,#ef4444);
    }

    .snackbar.warning[b-utvixhv8f1] {
        background: linear-gradient(135deg,#d97706,#f59e0b);
    }

    .snackbar.info[b-utvixhv8f1] {
        background: linear-gradient(135deg,#2563eb,#3b82f6);
    }

    .snackbar i[b-utvixhv8f1] {
        font-size: 18px;
        flex-shrink: 0;
    }
/* /Layout/DesktopDropdownItem.razor.rz.scp.css */
@media (min-width: 992px) {
  /* Base for submenu parent */
  .dropdown-submenu[b-e27sqmjcvz] {
    position: relative;
  }

  /* Position nested menus absolutely so they can sit beside the parent */
  .dropdown-submenu > .dropdown-menu[b-e27sqmjcvz] {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    display: none;
    min-width: 12rem;
  }

  /* Right-aligned parent menus should open to the left */
  .dropdown-menu.dropdown-menu-end .dropdown-submenu > .dropdown-menu[b-e27sqmjcvz] {
    left: auto;
    right: 100%;
  }

  /* Only open menus on hover (do not open child submenus when parent is active or has .show) */
  .dropdown:hover > .dropdown-menu[b-e27sqmjcvz],
  .dropdown-submenu:hover > .dropdown-menu[b-e27sqmjcvz],
  .dropdown-menu .dropdown-submenu:hover > .dropdown-menu[b-e27sqmjcvz] {
    display: block;
  }

  /* Keep deeper nested submenus visible only when hovered */
  .dropdown-submenu .dropdown-submenu:hover > .dropdown-menu[b-e27sqmjcvz] {
    display: block;
  }

  /* Improve pointer tracking so the menu doesn't flicker while moving between items */
  .dropdown-menu[b-e27sqmjcvz],
  .dropdown-submenu > .dropdown-menu[b-e27sqmjcvz] {
    pointer-events: auto;
  }

  /* Ensure nested items look consistent and don't wrap */
  .dropdown-menu .dropdown-item.dropdown-toggle[b-e27sqmjcvz]::after {
    float: right;
    margin-top: 0.3rem;
  }

  .dropdown-menu .dropdown-item[b-e27sqmjcvz] {
    white-space: nowrap;
    display: block;
  }

  /* Visual active state (highlight only) */
  .dropdown-menu .dropdown-item.active[b-e27sqmjcvz],
  .dropdown-item.active[b-e27sqmjcvz],
  .dropdown-menu .nav-link.active[b-e27sqmjcvz] {
    background-color: var(--bs-danger);
    color: #fff;
  }

  /* Anchor fills horizontal space inside a menu */
  .dropdown-item[b-e27sqmjcvz] {
    display: block;
  }

  /* If using a flex-grow helper for items that also have a toggle */
  .dropdown-submenu .dropdown-item.flex-grow-1[b-e27sqmjcvz] {
    display: inline-block;
    width: calc(100% - 36px);
  }

  /* Show caret rotation on hover for affordance */
  .dropdown-submenu:hover .fa-caret-left[b-e27sqmjcvz] {
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
  }

  /* Ensure submenus appear above other page content */
  .dropdown-menu[b-e27sqmjcvz] {
    z-index: 2000;
  }
}

/* Always keep caret color consistent */
.fa-caret-left[b-e27sqmjcvz]:before {
  color: #000000 !important;
}
/* /Layout/DesktopMenuItem.razor.rz.scp.css */
.dropdown-menu[b-2seeex0bgn] {
    text-align: justify;
}
/* /Layout/DynamicDesktopMenu.razor.rz.scp.css */
.top-nav-red-theme[b-ukgs441do9] {
    background-color: #1a1a1a;
    height: 70px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid #E74C3C;
    --bs-navbar-color: rgba(255, 255, 255, 0.9);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #E74C3C;
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-color: #212529;
    --bs-dropdown-border-color: rgba(231, 76, 60, 0.3);
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #E74C3C;
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-active-bg: #E74C3C;
    --bs-navbar-toggler-border-color: #E74C3C;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.nav-container[b-ukgs441do9] {
    justify-content: unset;
}

/* =========================
   BRAND
========================= */
.top-nav-red-theme .site-title[b-ukgs441do9] {
    color: #ecf0f1;
    font-family: Lalezar, sans-serif;
    font-size: 1.8rem;
    transition: color 0.3s;
}

/* =========================
   NAV LINKS (STATIC + DYNAMIC)
   IMPORTANT: ::deep FIX
========================= */
.top-nav-red-theme[b-ukgs441do9]  .nav-link {
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
}

    .top-nav-red-theme[b-ukgs441do9]  .nav-link:hover {
        background-color: rgba(231, 76, 60, 0.1);
        border-bottom: 2px solid #E74C3C;
    }

    /* active route */
    .top-nav-red-theme[b-ukgs441do9]  .nav-link.active {
        font-weight: 700;
        border-bottom: 2px solid #E74C3C;
        background-color: rgba(231, 76, 60, 0.05);
    }

    /* Bootstrap dropdown OPEN state (CRITICAL FIX) */
    .top-nav-red-theme[b-ukgs441do9]  .nav-link.show,
    .top-nav-red-theme[b-ukgs441do9]  .dropdown-toggle.show {
        font-weight: 700;
        border-bottom: 2px solid #E74C3C;
        background-color: rgba(231, 76, 60, 0.05);
        color: #fff;
    }

/* =========================
   DROPDOWN MENU (FIX OPEN STATE)
========================= */
.top-nav-red-theme[b-ukgs441do9]  .dropdown-menu {
    text-align: right;
}

    /* ensure open dropdown always visible */
    .top-nav-red-theme[b-ukgs441do9]  .dropdown-menu.show {
        display: block;
    }

/* =========================
   DROPDOWN ITEMS
========================= */
.top-nav-red-theme[b-ukgs441do9]  .dropdown-item {
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s;
}

    .top-nav-red-theme[b-ukgs441do9]  .dropdown-item i.ms-2 {
        margin-left: 0.6rem;
        color: #C0392B;
        transition: color 0.3s;
    }

    .top-nav-red-theme[b-ukgs441do9]  .dropdown-item:hover i.ms-2,
    .top-nav-red-theme[b-ukgs441do9]  .dropdown-item.active i.ms-2 {
        color: #000000;
    }

/* =========================
   MOBILE FIX
========================= */
@media (max-width: 767.98px) {
    .top-nav-red-theme[b-ukgs441do9]  .collapse.navbar-collapse {
        display: none !important;
    }

    .top-nav-red-theme[b-ukgs441do9]  .navbar-toggler {
        display: block !important;
    }

    .top-nav-red-theme[b-ukgs441do9]  .nav-link .fa-shopping-cart {
        font-size: 1.4rem;
    }
}

/* =========================
   OTHER FIXES
========================= */
.dropdown-toggle[b-ukgs441do9]::after {
    margin-right: 0.3em;
}

.navbar-brand img[b-ukgs441do9] {
    vertical-align: middle;
}

.navbar-brand + .nav-link[b-ukgs441do9] {
    margin-top: 4px;
}
/* /Layout/DynamicSidebarMenu.razor.rz.scp.css */
.nav-menu-red-theme[b-kpwksnoiq7]  .nav-item .nav-link {
    color: #d7d7d7;
    background: none;
    border-radius: 6px;
    height: 3rem; /* slightly smaller */
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem; /* IMPORTANT: fixes icon/text spacing */

    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    /* hover */
    .nav-menu-red-theme[b-kpwksnoiq7]  .nav-item .nav-link:hover {
        background-color: rgba(231, 76, 60, 0.15);
        color: #fff;
    }

/* ACTIVE */
.nav-menu-red-theme[b-kpwksnoiq7]  a.active {
    background-color: #C0392B;
    color: #fff;
    font-weight: 600;
}

/* ICON FIX (remove old margin hacks) */
.nav-menu-red-theme[b-kpwksnoiq7]  .nav-link > i {
    width: 20px;
    font-size: 1rem;
    color: #E74C3C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0; /* IMPORTANT FIX */
}

/* hover + active icon */
.nav-menu-red-theme[b-kpwksnoiq7]  .nav-item .nav-link:hover i,
.nav-menu-red-theme[b-kpwksnoiq7]  a.active i {
    color: white;
}

/* =========================
   NESTED ITEMS (IMPORTANT FIX)
========================= */
.nav-menu-red-theme[b-kpwksnoiq7]  .ps-4 .nav-link {
    height: 2.4rem;
    font-size: 0.95rem;
    font-weight: 400;
    padding-right: 1.2rem;
}

    /* nested icon smaller */
    .nav-menu-red-theme[b-kpwksnoiq7]  .ps-4 .nav-link > i {
        font-size: 0.9rem;
    }

/* optional: indentation consistency */
.nav-menu-red-theme[b-kpwksnoiq7]  .ps-4 {
    padding-right: 0.75rem !important;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ktk8ep8bno] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Mobile Sidebar */
#mobileSidebar.offcanvas[b-ktk8ep8bno] {
    --bs-offcanvas-width: 260px;
}

/* Logo */
.logo-title[b-ktk8ep8bno] {
    font-family: 'Lalezar', sans-serif;
}

/* Main Content */
.main-content-area[b-ktk8ep8bno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-right 0.25s ease;
    min-width: 0;
}

.content[b-ktk8ep8bno] {
    flex: 1;
}

.page-loading-bar[b-ktk8ep8bno] {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #ff051d;
    z-index: 99999;
    opacity: 0;
    transition: width 0.25s ease, opacity 0.2s ease;
    pointer-events: none;
}

    .page-loading-bar.loading[b-ktk8ep8bno] {
        width: 75%;
        opacity: 1;
        animation: loading-progress-b-ktk8ep8bno 1.2s ease-in-out infinite;
    }

@keyframes loading-progress-b-ktk8ep8bno {
    0% {
        width: 0;
    }

    50% {
        width: 75%;
    }

    100% {
        width: 92%;
    }
}

.page-loading-bar.complete[b-ktk8ep8bno] {
    width: 100%;
    opacity: 1;
}


/* Offcanvas */
.offcanvas.bg-dark[b-ktk8ep8bno] {
    background-color: #1a1a1a !important;
    border-right: 2px solid #E74C3C;
}

.offcanvas-header .btn-close[b-ktk8ep8bno] {
    padding: 1rem !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}

    .offcanvas-header .btn-close:hover[b-ktk8ep8bno] {
        opacity: 0.7;
    }

/* Footer */
.footer-main-red-theme[b-ktk8ep8bno] {
    background-color: #1a1a1a;
    color: #ecf0f1;
    padding-top: 3rem;
    padding-bottom: 0;
    font-size: 0.9rem;
    width: 100%;
    margin-top: auto;
    border-top: 3px solid #C0392B;
}

.footer-container[b-ktk8ep8bno] {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 15px;
}

.footer-heading[b-ktk8ep8bno] {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #C0392B;
    display: inline-block;
}

.footer-text[b-ktk8ep8bno],
.contact-item[b-ktk8ep8bno] {
    line-height: 1.7;
    margin-bottom: 10px;
}

    .contact-item i[b-ktk8ep8bno] {
        color: #E74C3C;
        font-size: 1.1em;
        width: 1.5rem;
        text-align: center;
        transition: color 0.3s ease;
    }

.footer-link[b-ktk8ep8bno] {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    line-height: 2.2;
    display: block;
    border-right: 2px solid transparent;
    padding-right: 5px;
}

    .footer-link:hover[b-ktk8ep8bno] {
        color: #fff;
        border-right-color: #E74C3C;
        transform: translateX(-5px);
    }

.border-secondary-red[b-ktk8ep8bno] {
    border-color: #444 !important;
}

.footer-copyright[b-ktk8ep8bno] {
    font-size: 0.8rem;
    color: #7f8c8d;
    padding-top: 1rem;
}

/* Desktop */
@media (min-width: 641px) {
    .page[b-ktk8ep8bno] {
        flex-direction: row;
    }

    .top-row[b-ktk8ep8bno],
    article[b-ktk8ep8bno] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/SidebarMenuItem.razor.rz.scp.css */
.nav-menu-red-theme .nav-link > i[b-6r435cgr55] {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
    color: #E74C3C;
    transition: color 0.2s;
    padding-right: 0.5em;
    margin-left: 1em;
}
/* /Pages/404.razor.rz.scp.css */

:root[b-84ro7wpr29] {
    --bg: #000000; /* dark background 
*/    --card: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    /*background: aliceblue;*/
}

.notfound-root[b-84ro7wpr29] {
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    background: radial-gradient(1200px 400px at 10% 10%, rgba(96,165,250,0.04), transparent), radial-gradient(1000px 300px at 90% 90%, rgba(110,231,183,0.03), transparent), var(--bg);
    color: #e6eef8;
    font-family: 'Yekan', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card[b-84ro7wpr29] {
    display: flex;
    gap: 2rem;
    max-width: 980px;
    width: 100%;
    align-items: center;
    background: aliceblue;
    border: 1px solid rgba(255,255,255,0.04);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}

.art[b-84ro7wpr29] {
    width: 220px;
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content[b-84ro7wpr29] {
    flex: 1 1 auto;
}

h1[b-84ro7wpr29] {
    font-size: 3.5rem;
    margin: 0;
    line-height: 1;
    letter-spacing: -1px;
}

h2[b-84ro7wpr29] {
    margin: 0.2rem 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

p[b-84ro7wpr29] {
    margin-bottom: 1.25rem;
}

.actions[b-84ro7wpr29] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.btn-primary[b-84ro7wpr29] {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: linear-gradient(90deg,#60A5FA,#6EE7B7);
    color: #03203C;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(96,165,250,0.12);
}

.btn-ghost[b-84ro7wpr29] {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: transparent;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.04);
}

.muted[b-84ro7wpr29] {
    display: block;
    margin-top: 0.5rem;
}

/* subtle animation */
.robot[b-84ro7wpr29] {
    transform-origin: center;
    animation: float-b-84ro7wpr29 4s ease-in-out infinite;
}

@keyframes float-b-84ro7wpr29 {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }

    100% {
        transform: translateY(0)
    }
}

/* responsive */
@media (max-width:780px) {
    .card[b-84ro7wpr29] {
        flex-direction: column;
        align-items: flex-start
    }

    .art[b-84ro7wpr29] {
        width: 100%;
        flex: 0 0 auto
    }

    h1[b-84ro7wpr29] {
        font-size: 2.6rem
    }
}
/* /Pages/Account/Profile.razor.rz.scp.css */
/* Card Container Adjustments */
.profile-card[b-riru4xwr4b] {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Interactive Avatar Styles */
.avatar-wrapper[b-riru4xwr4b] {
    position: relative;
    width: 110px;
    height: 110px;
    cursor: pointer;
}

.avatar-image[b-riru4xwr4b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out;
}

.avatar-badge[b-riru4xwr4b] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background-color: #0d6efd; /* Bootstrap Primary */
    color: #ffffff;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Hover Visual Feedback */
.avatar-wrapper:hover .avatar-image[b-riru4xwr4b] {
    transform: scale(1.02);
}

.avatar-wrapper:hover .avatar-badge[b-riru4xwr4b] {
    background-color: #0b5ed7; /* Darker primary */
    transform: scale(1.1);
}

/* Role Badges */
.role-badge[b-riru4xwr4b] {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50rem;
}

/* Credit Balance Display */
.balance-card[b-riru4xwr4b] {
    background-color: #ffffff;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    min-width: 200px;
}

.balance-icon-box[b-riru4xwr4b] {
    background-color: #d1e7dd; /* Bootstrap success-subtle */
    color: #0f5132; /* Bootstrap success text */
    border-radius: 0.5rem;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Verification Panel Grid Wrap */
.status-overview-panel[b-riru4xwr4b] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Section Divider Headers */
.section-title[b-riru4xwr4b] {
    font-weight: 700;
    color: #6c757d;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

/* Action Operations Bar */
.form-footer-actions[b-riru4xwr4b] {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}
/* /Pages/Account/ProfileSettlementRequests.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-562x257lh2] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-562x257lh2] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-562x257lh2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-562x257lh2] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-562x257lh2] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-562x257lh2] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-562x257lh2] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-562x257lh2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-562x257lh2] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-562x257lh2] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-562x257lh2] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-562x257lh2] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-562x257lh2] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-562x257lh2] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-562x257lh2] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-562x257lh2] td:empty {
    display: none;
}
/* /Pages/Account/SettlementRequest.razor.rz.scp.css */
.image-slider[b-4507fnzpct] {
 margin-top:2em;
}

.slider-container[b-4507fnzpct] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-4507fnzpct] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-4507fnzpct]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-4507fnzpct]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-4507fnzpct]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-4507fnzpct]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-4507fnzpct] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-4507fnzpct] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-4507fnzpct] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-4507fnzpct] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-4507fnzpct] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-4507fnzpct] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-4507fnzpct] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-4507fnzpct] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-4507fnzpct] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-4507fnzpct] {
    direction:ltr;
}
.btn-close[b-4507fnzpct] {
    margin: inherit;
}
/* /Pages/BusinessPartner/CncCutting.razor.rz.scp.css */
.cnc-cutting-container[b-r4acm48w6l] {
    margin: 50px auto;
    padding: 40px;
    background: #1e1f26;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    text-align: center;
    color: #f0f0f0;
}

    .cnc-cutting-container > h1[b-r4acm48w6l] {
        color: #f39c12;
        margin-bottom: 15px;
    }

.intro[b-r4acm48w6l] {
    font-size: 16px;
    margin-bottom: 40px;
    line-height: 1.8;
}

.highlight[b-r4acm48w6l] {
    color: #e74c3c;
    font-weight: bold;
}

.materials[b-r4acm48w6l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.card[b-r4acm48w6l] {
    background: #2c2f3a;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s, background 0.3s;
}

    .card h3[b-r4acm48w6l] {
        color: #f39c12;
        margin-bottom: 10px;
    }

    .card p[b-r4acm48w6l] {
        font-size: 14px;
        line-height: 1.6;
        color: #ddd;
    }

    .card:hover[b-r4acm48w6l] {
        background: #343844;
        transform: translateY(-5px);
    }

.cnc-cutting-btn[b-r4acm48w6l] {
    padding: 15px 40px;
    font-size: 18px;
    background: linear-gradient(90deg, #f39c12, #e67e22);
    color: #fff;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
}

    .cnc-cutting-btn:hover[b-r4acm48w6l] {
        transform: scale(1.07);
        box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
    }

.intro[b-r4acm48w6l] {
    font-size: 14px;
}

.modal-provider[b-r4acm48w6l] {
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.8;
    text-align: right
}
/* /Pages/BusinessPartner/IndustrialDesigner.razor.rz.scp.css */
 .design-container[b-ex04yfkbmf] {
        max-width: 900px;
        margin: 50px auto;
        padding: 40px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        text-align: center;
        direction: rtl;
    }

    .container-designer > h1[b-ex04yfkbmf] {
        color: #2c3e50;
        margin-bottom: 20px;
    }

        .container-designer > p[b-ex04yfkbmf] {
        line-height: 1.7;
        font-size: 16px;
        margin-bottom: 30px;
        color: #333;
    }

    .highlight[b-ex04yfkbmf] {
        color: #e74c3c;
        font-weight: bold;
    }

    .designer-btn[b-ex04yfkbmf] {
        padding: 15px 30px;
        font-size: 16px;
        background: #e74c3c;
        color: #fff;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.3s;
    }

        .designer-btn:hover[b-ex04yfkbmf] {
            background: #c0392b;
        }

    p[b-ex04yfkbmf] {
        font-size: 14px;
    }

.modal-provider[b-ex04yfkbmf] {
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.8;
    text-align: right
}
/* /Pages/BusinessPartner/MongerShop.razor.rz.scp.css */
.monger-shop-container[b-o1dtphdsiv] {
    margin: 50px auto;
    padding: 40px;
    background: linear-gradient(135deg,#1a0f0f,#2a1515);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    text-align: center;
    color: #fef2f2;
    position: relative;
    overflow: hidden;
}

    .monger-shop-container[b-o1dtphdsiv]::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: rgba(239,68,68,.10);
    }

    .monger-shop-container[b-o1dtphdsiv]::after {
        content: "";
        position: absolute;
        bottom: -120px;
        left: -120px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(185,28,28,.10);
    }

    .monger-shop-container > h1[b-o1dtphdsiv] {
        color: #fef2f2;
        margin-bottom: 15px;
        font-size: 2.2rem;
        font-weight: 700;
        position: relative;
        z-index: 1;
    }

.monger-intro[b-o1dtphdsiv] {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 40px;
    color: #fef2f2;
    position: relative;
    z-index: 1;
}

.monger-highlight[b-o1dtphdsiv] {
    color: #f87171;
    font-weight: 700;
}

.monger-products[b-o1dtphdsiv] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.monger-card[b-o1dtphdsiv] {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(239,68,68,.25);
    padding: 24px;
    border-radius: 18px;
    transition: all .3s ease;
}

    .monger-card:hover[b-o1dtphdsiv] {
        transform: translateY(-8px);
        border-color: #ef4444;
        box-shadow: 0 12px 30px rgba(239,68,68,.25);
    }

    .monger-card h3[b-o1dtphdsiv] {
        color: #fef2f2;
        margin-bottom: 12px;
        font-size: 1.2rem;
    }

    .monger-card p[b-o1dtphdsiv] {
        color: #fef2f2;
        font-size: 14px;
        line-height: 1.8;
    }

.monger-card-icon[b-o1dtphdsiv] {
    font-size: 42px;
    color: #f87171;
    margin-bottom: 15px;
}

.monger-signup-btn[b-o1dtphdsiv] {
    padding: 16px 42px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg,#ef4444,#b91c1c);
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    z-index: 1;
}

    .monger-signup-btn:hover[b-o1dtphdsiv] {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(239,68,68,.35);
    }

.monger-modal[b-o1dtphdsiv] {
    max-height: 450px;
    overflow-y: auto;
    line-height: 1.9;
    text-align: right;
}

    .monger-modal ul[b-o1dtphdsiv] {
        padding-right: 20px;
    }

    .monger-modal li[b-o1dtphdsiv] {
        margin-bottom: 10px;
    }

@media (max-width: 768px) {
    .monger-shop-container[b-o1dtphdsiv] {
        padding: 25px;
    }

        .monger-shop-container > h1[b-o1dtphdsiv] {
            font-size: 1.8rem;
        }

    .monger-signup-btn[b-o1dtphdsiv] {
        width: 100%;
    }
}
/* /Pages/BusinessPartner/Supplier.razor.rz.scp.css */
    .page-container[b-hllonqvg5j] {
        display: flex;
        justify-content: center;
        padding: 40px;
        direction: rtl;
    }

    .content-box.supplier-box[b-hllonqvg5j] {
        background: #f0f8ff;
        padding: 30px;
        border-radius: 20px;
        width: 600px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        text-align: center;
    }

        .content-box.supplier-box .title[b-hllonqvg5j] {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #0a4d8c;
        }

        .content-box.supplier-box .description[b-hllonqvg5j] {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 25px;
        }

        .content-box.supplier-box .highlight[b-hllonqvg5j] {
            color: #0a8c4d;
            font-weight: bold;
        }

    .register-btn[b-hllonqvg5j] {
        background: #0a4d8c;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 10px;
        cursor: pointer;
        transition: 0.3s;
    }

        .register-btn:hover[b-hllonqvg5j] {
            background: #0c6db8;
        }


.modal-provider[b-hllonqvg5j] {
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.8;
    text-align: right
}
/* /Pages/Cart.razor.rz.scp.css */
.wizard-steps[b-z3recd6c5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 50rem;
}

.wizard-step-item[b-z3recd6c5p] {
    flex: 1;
    display: flex;
    align-items: center;
}

.wizard-link[b-z3recd6c5p] {
    width: 100%;
    border: none;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #6c757d;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

    .wizard-link:hover:not(:disabled)[b-z3recd6c5p] {
        color: #dc3545;
        background-color: rgba(220, 53, 69, 0.05);
    }

    .wizard-link.active[b-z3recd6c5p] {
        color: #fff !important;
        background-color: #dc3545 !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
    }

.wizard-step-arrow[b-z3recd6c5p] {
    color: #ced4da;
    font-size: 0.85rem;
}

html[dir="rtl"] .wizard-step-arrow[b-z3recd6c5p] {
    transform: rotate(180deg);
}
/* /Pages/CncMachines.razor.rz.scp.css */

.cnc-container[b-aq4cuwcopx] {
    max-width: 950px;
    margin: 50px auto;
    padding: 40px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    direction: rtl;
    text-align: right;
}

    .cnc-container h1[b-aq4cuwcopx] {
        color: #2c3e50;
        margin-bottom: 20px;
    }

    .cnc-container p[b-aq4cuwcopx] {
        line-height: 1.8;
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
    }

.features-list[b-aq4cuwcopx] {
    margin: 20px auto;
    padding: 0;
    list-style: none;
    max-width: 600px;
    text-align: right;
}

    .features-list li[b-aq4cuwcopx] {
        background: #f8f9fa;
        padding: 10px 15px;
        margin: 8px 0;
        border-radius: 8px;
        font-size: 15px;
    }

.highlight[b-aq4cuwcopx] {
    color: #e74c3c;
    font-weight: bold;
}

.contact-btn[b-aq4cuwcopx] {
    padding: 12px 25px;
    font-size: 16px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 50px;
    transition: background 0.3s;
    text-decoration: none;
}

    .contact-btn:hover[b-aq4cuwcopx] {
        background: #c0392b;
        color: #fff;
    }
/* /Pages/Gallery/CncGallery.razor.rz.scp.css */
/* Vertical scrollbar Material style */
.galleryContainer[b-mbk3f4umjp] {
    scrollbar-width: thin;
    scrollbar-color: #90caf9 #e3f2fd; /* Light blue Material theme */
}

    .galleryContainer[b-mbk3f4umjp]::-webkit-scrollbar {
        width: 10px;
    }

    .galleryContainer[b-mbk3f4umjp]::-webkit-scrollbar-track {
        background: #e3f2fd;
        border-radius: 10px;
    }

    .galleryContainer[b-mbk3f4umjp]::-webkit-scrollbar-thumb {
        background: #90caf9;
        border-radius: 10px;
    }

        .galleryContainer[b-mbk3f4umjp]::-webkit-scrollbar-thumb:hover {
            background: #42a5f5;
        }

/* Material-like card style */
.gallery-card[b-mbk3f4umjp] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    background: #fff;
}

    .gallery-card img[b-mbk3f4umjp] {
        height: 200px;
        object-fit: contain;
        background: #fafafa;
        padding: 8px;
    }

    .gallery-card:hover[b-mbk3f4umjp] {
        transform: translateY(-4px);
        box-shadow: 0 6px 10px rgba(0,0,0,0.25), 0 6px 10px rgba(0,0,0,0.22);
    }

    /* Button Material look */
    .gallery-card .btn[b-mbk3f4umjp] {
        border-radius: 20px;
        font-weight: 500;
        text-transform: uppercase;
        background: #545454;
        border: none;
    }

        .gallery-card .btn:hover[b-mbk3f4umjp] {
            background: #dc3545;
        }


.galleryContainer[b-mbk3f4umjp] {
    /*direction: ltr;*/ /* force left-to-right layout */
    /*text-align: left;*/ /* avoid rtl pushing scrollbar */
    /*scrollbar-width: thin;
    scrollbar-color: #90caf9 #e3f2fd;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;*/
}

    .galleryContainer[b-mbk3f4umjp]::-webkit-scrollbar {
        width: 10px; /* vertical scrollbar width */
        height: 0; /* prevent bottom bar */
        float: right; /* force on right (webkit) */
    }

.load-more[b-mbk3f4umjp] {
    margin-top:5em !important;
}


.fancy-h2[b-mbk3f4umjp] {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 800;
    font-size: 2.2rem;
    padding-bottom: 5px;
}

/* Custom styles for the Load More button */
.gallery-load-more-btn[b-mbk3f4umjp] {
    /* Base background gradient */
    background: linear-gradient(45deg, #007bff, #0056b3); /* Blue gradient */
    border: none; /* Remove default border */
    color: white; /* Ensure text is white */
    font-weight: bold;
    letter-spacing: 0.5px;
    /* Subtle shadow for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* A softer, larger shadow */
    /* Smooth transition for hover effects */
    transition: all 0.3s ease-in-out;
    /* Rounded corners */
    border-radius: 50px; /* More rounded, pill-like */
}

    .gallery-load-more-btn:hover[b-mbk3f4umjp] {
        /* Lighter gradient on hover */
        background: linear-gradient(45deg, #0056b3, #007bff); /* Invert or shift gradient */
        /* Slightly more pronounced shadow on hover */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        /* Slightly scale up for a subtle "pop" effect */
        transform: translateY(-2px);
    }

    .gallery-load-more-btn:active[b-mbk3f4umjp] {
        /* Push down effect on click */
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Style for the icon inside the button */
    .gallery-load-more-btn i[b-mbk3f4umjp] {
        transition: transform 0.3s ease-in-out;
    }

    .gallery-load-more-btn:hover i[b-mbk3f4umjp] {
        transform: rotate(360deg); /* Spin the icon on hover */
    }


.image-gallery[b-mbk3f4umjp] {
    position: relative;
    overflow: hidden;
}

    .image-gallery img[b-mbk3f4umjp] {
        transition: transform 0.4s ease;
        cursor: zoom-in;
    }


    .image-gallery:hover img[b-mbk3f4umjp] {
        transform: scale(1.5) translate(-5px, -5px);
    }


.gallery-zoom-btn[b-mbk3f4umjp] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-gallery:hover .gallery-zoom-btn[b-mbk3f4umjp] {
    opacity: 1;
}

/* /Pages/Home.razor.rz.scp.css */
.image-slider[b-sj7f5cqdlp] {
    margin-top: 2em;
}

.slider-container[b-sj7f5cqdlp] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-sj7f5cqdlp] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-sj7f5cqdlp]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-sj7f5cqdlp]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-sj7f5cqdlp]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-sj7f5cqdlp]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-sj7f5cqdlp] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-sj7f5cqdlp] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-sj7f5cqdlp] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-sj7f5cqdlp] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }

.card-body > button:hover[b-sj7f5cqdlp] {
    background: #dc3545;
    border-color: #dc3545;
}

/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-sj7f5cqdlp] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-sj7f5cqdlp] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-sj7f5cqdlp] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-sj7f5cqdlp] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

/* ==================================== */
/* 2025 Sleek Rectangular Button Style */
/* ==================================== */

/* Base style for the navigation button */
.image-slider button[b-sj7f5cqdlp] {
    /* Resetting default bootstrap padding for custom sizing */
    padding: 8px 10px;
    /* Sleek Rectangular Shape with rounded corners */
    border-radius: 50px; /* Moderately rounded corners (not a circle) */

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    cursor: pointer;
    /* Base Dark Style */
    background-color: #2c2c2c; /* A slightly softer dark gray */
    color: #ffffff; /* White icon */
    border: none; /* No visible border for a flatter look */
    /* Subtle Shadow */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    /* Smooth Transitions */
    transition: all 0.3s ease-out;
    z-index: 10;
}

    /* Hover Effect: Highlight with the Brand Red */
    .image-slider button:hover[b-sj7f5cqdlp],
    .image-slider button:focus[b-sj7f5cqdlp] {
        /* Fill with the primary brand red color */
        background-color: #E74C3C;
        color: #ffffff;
        /* Deeper Shadow and slight movement */
        box-shadow: 0 8px 15px rgba(231, 76, 60, 0.4); /* Stronger, colored shadow */
        transform: translateY(-2px); /* Slight lift effect */
        outline: none;
    }

    /* Active/Click Effect: Simulates pressing down */
    .image-slider button:active[b-sj7f5cqdlp] {
        background-color: #C0392B; /* Darker red on press */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        transform: translateY(0);
    }
/* /Pages/Order/CustomOrder.razor.rz.scp.css */
/* 1. Ensure the icon has a smooth rotation animation */
.collapse-icon[b-u3dydgv2dl] {
    transition: transform 0.3s ease-in-out;
    display: inline-block; /* Essential for transform to work reliably */
}

/* 2. Target the icon when the button is NOT collapsed (i.e., when the section is OPEN) */
.btn[data-bs-toggle="collapse"]:not(.collapsed) .collapse-icon[b-u3dydgv2dl] {
    transform: rotate(180deg) !important;
}

a[b-u3dydgv2dl], .btn-link[b-u3dydgv2dl] {
    color: #b52212;
}
/* /Pages/Order/OrderFactorDetails.razor.rz.scp.css */
.q-grid[b-q6vfq3vdhz] {
    overflow: auto;
}
[b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-q6vfq3vdhz] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-q6vfq3vdhz] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-q6vfq3vdhz] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-q6vfq3vdhz] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-q6vfq3vdhz] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-q6vfq3vdhz] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-q6vfq3vdhz] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-q6vfq3vdhz] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-q6vfq3vdhz] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-q6vfq3vdhz] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-q6vfq3vdhz] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-q6vfq3vdhz] td:empty {
    display: none;
}
/* /Pages/Order/OrderGalleryDesignFile.razor.rz.scp.css */
/* /Pages/Order/OrderTracker.razor.rz.scp.css */
.order-tracking-container[b-vudq4e4grx] {
    background: #fff;
    border-radius: 12px;
    direction: rtl; /* force RTL for text + layout */
}

.order-tracking[b-vudq4e4grx] {
    position: relative;
    direction:ltr;
}

.tracking-step[b-vudq4e4grx] {
    position: relative;
    flex: 1;
}

    .tracking-step:not(:last-child)[b-vudq4e4grx]::after {
        content: "";
        position: absolute;
        top: 12px;
        right: 50%; /* RTL adjustment */
        width: 100%;
        height: 4px;
        background: #dee2e6;
        z-index: 1;
    }

    .tracking-step .circle[b-vudq4e4grx] {
        width: 24px;
        height: 24px;
        margin: 0 auto;
        border-radius: 50%;
        background: #8295ff;
        position: relative;
        z-index: 2;
    }

        .tracking-step .circle.completed[b-vudq4e4grx] {
            background: #198754; /* Bootstrap green */
            box-shadow: 0 0 8px rgba(25, 135, 84, 0.4);
        }

    .tracking-step.completed .step-label[b-vudq4e4grx] {
        color: #198754;
        font-weight: 600;
    }


/* Responsive vertical layout for small screens */
@media (max-width: 768px) {
    .order-tracking[b-vudq4e4grx] {
        flex-direction: column !important;
        align-items: flex-start !important;
        position: relative !important;
        direction: rtl !important; /* maintain Persian reading flow */
    }

    .tracking-step[b-vudq4e4grx] {
        display: flex !important;
        align-items: center !important;
        text-align: right !important;
        margin-bottom: 1.5rem !important;
        position: relative !important;
        flex: none !important;
    }

        .tracking-step[b-vudq4e4grx]::after {
            content: "" !important;
            position: absolute !important;
            right: 11px !important; /* aligns the vertical line with circles */
            top: 30px !important;
            width: 2px !important;
            height: calc(100% - 30px) !important;
            background: #dee2e6 !important;
            z-index: 1 !important;
        }

        .tracking-step:last-child[b-vudq4e4grx]::after {
            display: none !important; /* hide the line after the last step */
        }

        .tracking-step .circle[b-vudq4e4grx] {
            flex-shrink: 0 !important;
            margin-left: 10px !important;
        }

    .step-label[b-vudq4e4grx] {
        font-size: 0.9rem !important;
    }

    /* Adjust completed line color */
    .tracking-step .circle.completed + .step-label[b-vudq4e4grx] {
        color: #198754 !important;
    }
}

.order-tracking[b-vudq4e4grx], .tracking-step[b-vudq4e4grx] {
    transition: all 0.3s ease;
}
/* /Pages/Panel/CategoryManagement/Categories.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-8svwx6jh4j] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-8svwx6jh4j] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-8svwx6jh4j] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-8svwx6jh4j] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-8svwx6jh4j] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-8svwx6jh4j] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-8svwx6jh4j] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-8svwx6jh4j] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-8svwx6jh4j] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-8svwx6jh4j] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-8svwx6jh4j] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-8svwx6jh4j] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-8svwx6jh4j] td:empty {
    display: none;
}
/* /Pages/Panel/CategoryManagement/Category.razor.rz.scp.css */
.image-slider[b-zrcjdxbogi] {
 margin-top:2em;
}

.slider-container[b-zrcjdxbogi] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-zrcjdxbogi] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-zrcjdxbogi]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-zrcjdxbogi]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-zrcjdxbogi]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-zrcjdxbogi]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-zrcjdxbogi] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-zrcjdxbogi] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-zrcjdxbogi] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-zrcjdxbogi] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-zrcjdxbogi] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-zrcjdxbogi] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-zrcjdxbogi] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-zrcjdxbogi] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-zrcjdxbogi] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-zrcjdxbogi] {
    direction:ltr;
}
.btn-close[b-zrcjdxbogi] {
    margin: inherit;
}
/* /Pages/Panel/FactorManagement/Factor.razor.rz.scp.css */
.image-slider[b-m6cx8ub257] {
 margin-top:2em;
}

.slider-container[b-m6cx8ub257] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-m6cx8ub257] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-m6cx8ub257]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-m6cx8ub257]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-m6cx8ub257]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-m6cx8ub257]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-m6cx8ub257] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-m6cx8ub257] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-m6cx8ub257] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-m6cx8ub257] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-m6cx8ub257] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-m6cx8ub257] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-m6cx8ub257] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-m6cx8ub257] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-m6cx8ub257] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-m6cx8ub257] {
    direction:ltr;
}
.btn-close[b-m6cx8ub257] {
    margin: inherit;
}
/* /Pages/Panel/FactorManagement/Factors.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-e25touldu2] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-e25touldu2] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-e25touldu2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-e25touldu2] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-e25touldu2] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-e25touldu2] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-e25touldu2] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-e25touldu2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-e25touldu2] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-e25touldu2] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-e25touldu2] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-e25touldu2] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-e25touldu2] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-e25touldu2] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-e25touldu2] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-e25touldu2] td:empty {
    display: none;
}
/* /Pages/Panel/FileManagement/File.razor.rz.scp.css */
.image-slider[b-xx5r0rkopt] {
 margin-top:2em;
}

.slider-container[b-xx5r0rkopt] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-xx5r0rkopt] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-xx5r0rkopt]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-xx5r0rkopt]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-xx5r0rkopt]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-xx5r0rkopt]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-xx5r0rkopt] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-xx5r0rkopt] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-xx5r0rkopt] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-xx5r0rkopt] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-xx5r0rkopt] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-xx5r0rkopt] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-xx5r0rkopt] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-xx5r0rkopt] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-xx5r0rkopt] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-xx5r0rkopt] {
    direction:ltr;
}
.btn-close[b-xx5r0rkopt] {
    margin: inherit;
}
/* /Pages/Panel/FileManagement/Files.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-s43grim0d6] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-s43grim0d6] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-s43grim0d6] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-s43grim0d6] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-s43grim0d6] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-s43grim0d6] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-s43grim0d6] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-s43grim0d6] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-s43grim0d6] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-s43grim0d6] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-s43grim0d6] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-s43grim0d6] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-s43grim0d6] td:empty {
    display: none;
}
/* /Pages/Panel/NavigationManagement/Navigation.razor.rz.scp.css */
.image-slider[b-i4kfta6wgb] {
 margin-top:2em;
}

.slider-container[b-i4kfta6wgb] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-i4kfta6wgb] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-i4kfta6wgb]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-i4kfta6wgb]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-i4kfta6wgb]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-i4kfta6wgb]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-i4kfta6wgb] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-i4kfta6wgb] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-i4kfta6wgb] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-i4kfta6wgb] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-i4kfta6wgb] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-i4kfta6wgb] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-i4kfta6wgb] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-i4kfta6wgb] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-i4kfta6wgb] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-i4kfta6wgb] {
    direction:ltr;
}
.btn-close[b-i4kfta6wgb] {
    margin: inherit;
}
/* /Pages/Panel/NavigationManagement/Navigations.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-vvmuo6jrji] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-vvmuo6jrji] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-vvmuo6jrji] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-vvmuo6jrji] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-vvmuo6jrji] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-vvmuo6jrji] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-vvmuo6jrji] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-vvmuo6jrji] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-vvmuo6jrji] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-vvmuo6jrji] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-vvmuo6jrji] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-vvmuo6jrji] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-vvmuo6jrji] td:empty {
    display: none;
}
/* /Pages/Panel/OrderManagement/AddDeliverTrackingCode.razor.rz.scp.css */
.image-slider[b-jx7qsrt2lf] {
 margin-top:2em;
}

.slider-container[b-jx7qsrt2lf] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-jx7qsrt2lf] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-jx7qsrt2lf]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-jx7qsrt2lf]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-jx7qsrt2lf]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-jx7qsrt2lf]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-jx7qsrt2lf] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-jx7qsrt2lf] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-jx7qsrt2lf] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-jx7qsrt2lf] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-jx7qsrt2lf] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-jx7qsrt2lf] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-jx7qsrt2lf] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-jx7qsrt2lf] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-jx7qsrt2lf] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-jx7qsrt2lf] {
    direction:ltr;
}
.btn-close[b-jx7qsrt2lf] {
    margin: inherit;
}
/* /Pages/Panel/OrderManagement/AddOrderFactor.razor.rz.scp.css */
.image-slider[b-9jf6n658rz] {
 margin-top:2em;
}

.slider-container[b-9jf6n658rz] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-9jf6n658rz] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-9jf6n658rz]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-9jf6n658rz]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-9jf6n658rz]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-9jf6n658rz]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-9jf6n658rz] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-9jf6n658rz] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-9jf6n658rz] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-9jf6n658rz] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-9jf6n658rz] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-9jf6n658rz] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-9jf6n658rz] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-9jf6n658rz] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-9jf6n658rz] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-9jf6n658rz] {
    direction:ltr;
}
.btn-close[b-9jf6n658rz] {
    margin: inherit;
}
/* /Pages/Panel/OrderManagement/AddOrderFactorDescription.razor.rz.scp.css */
.image-slider[b-ycgt33mig8] {
 margin-top:2em;
}

.slider-container[b-ycgt33mig8] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-ycgt33mig8] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-ycgt33mig8]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-ycgt33mig8]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-ycgt33mig8]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-ycgt33mig8]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-ycgt33mig8] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-ycgt33mig8] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-ycgt33mig8] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-ycgt33mig8] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-ycgt33mig8] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-ycgt33mig8] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-ycgt33mig8] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-ycgt33mig8] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-ycgt33mig8] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-ycgt33mig8] {
    direction:ltr;
}
.btn-close[b-ycgt33mig8] {
    margin: inherit;
}
/* /Pages/Panel/OrderManagement/Order.razor.rz.scp.css */
.image-slider[b-9gx806vh0z] {
 margin-top:2em;
}

.slider-container[b-9gx806vh0z] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-9gx806vh0z] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-9gx806vh0z]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-9gx806vh0z]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-9gx806vh0z]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-9gx806vh0z]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-9gx806vh0z] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-9gx806vh0z] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-9gx806vh0z] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-9gx806vh0z] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-9gx806vh0z] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-9gx806vh0z] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-9gx806vh0z] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-9gx806vh0z] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-9gx806vh0z] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-9gx806vh0z] {
    direction:ltr;
}
.btn-close[b-9gx806vh0z] {
    margin: inherit;
}
/* /Pages/Panel/OrderManagement/OrderDetails.razor.rz.scp.css */
.modal.show[b-dj23y8eiye] {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease-in-out;
}

.modal-content[b-dj23y8eiye] {
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.bg-light-subtle[b-dj23y8eiye] {
    background-color: #f8fafc !important;
}

.card[b-dj23y8eiye] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e2e8f0 !important;
}

    .card:hover[b-dj23y8eiye] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }

.card-header[b-dj23y8eiye] {
    letter-spacing: 0.5px;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #475569 !important;
}

.table-responsive[b-dj23y8eiye] {
    border: 1px solid #e2e8f0 !important;
}

.table thead th[b-dj23y8eiye] {
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.table tbody tr[b-dj23y8eiye] {
    transition: background-color 0.15s ease;
}

    .table tbody tr:hover[b-dj23y8eiye] {
        background-color: #f8fafc !important;
    }

.table td[b-dj23y8eiye], .table th[b-dj23y8eiye] {
    padding: 1rem 0.75rem !important;
}

.table tfoot[b-dj23y8eiye] {
    background-color: #f8fafc !important;
    border-top: 3px double #cbd5e1 !important;
}

.font-monospace[b-dj23y8eiye] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.9rem;
    letter-spacing: -0.3px;
}

.bg-light-subtle.border.rounded[b-dj23y8eiye] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    transition: border-color 0.15s ease;
}

    .bg-light-subtle.border.rounded:hover[b-dj23y8eiye] {
        border-color: #cbd5e1 !important;
    }

.group[b-dj23y8eiye] {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
}

    .group img[b-dj23y8eiye] {
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    .group:hover img[b-dj23y8eiye] {
        transform: scale(1.02);
        opacity: 0.95;
    }

.text-primary[b-dj23y8eiye] {
    color: #0284c7 !important;
}

.text-muted[b-dj23y8eiye] {
    color: #64748b !important;
}

.modal-body[b-dj23y8eiye]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.modal-body[b-dj23y8eiye]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.modal-body[b-dj23y8eiye]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .modal-body[b-dj23y8eiye]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

.modal-header[b-dj23y8eiye] {
    direction: ltr;
}

.btn-close[b-dj23y8eiye] {
    margin: inherit;
}
/* /Pages/Panel/OrderManagement/OrderFactorItems.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-iq5ulfsebf] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-iq5ulfsebf] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-iq5ulfsebf] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-iq5ulfsebf] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-iq5ulfsebf] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-iq5ulfsebf] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-iq5ulfsebf] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-iq5ulfsebf] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-iq5ulfsebf] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-iq5ulfsebf] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-iq5ulfsebf] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-iq5ulfsebf] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-iq5ulfsebf] td:empty {
    display: none;
}
/* /Pages/Panel/OrderManagement/Orders.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-in0bgesfkl] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-in0bgesfkl] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-in0bgesfkl] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-in0bgesfkl] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-in0bgesfkl] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-in0bgesfkl] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-in0bgesfkl] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-in0bgesfkl] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-in0bgesfkl] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-in0bgesfkl] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-in0bgesfkl] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-in0bgesfkl] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-in0bgesfkl] td:empty {
    display: none;
}
/* /Pages/Panel/PaymentManagement/Payment.razor.rz.scp.css */
.image-slider[b-9uklbqq650] {
 margin-top:2em;
}

.slider-container[b-9uklbqq650] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-9uklbqq650] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-9uklbqq650]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-9uklbqq650]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-9uklbqq650]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-9uklbqq650]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-9uklbqq650] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-9uklbqq650] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-9uklbqq650] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-9uklbqq650] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-9uklbqq650] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-9uklbqq650] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-9uklbqq650] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-9uklbqq650] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-9uklbqq650] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-9uklbqq650] {
    direction:ltr;
}
.btn-close[b-9uklbqq650] {
    margin: inherit;
}
/* /Pages/Panel/PaymentManagement/PaymentDetails.razor.rz.scp.css */
.image-slider[b-91n4z8az7f] {
 margin-top:2em;
}

.slider-container[b-91n4z8az7f] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-91n4z8az7f] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-91n4z8az7f]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-91n4z8az7f]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-91n4z8az7f]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-91n4z8az7f]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-91n4z8az7f] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-91n4z8az7f] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-91n4z8az7f] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-91n4z8az7f] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-91n4z8az7f] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-91n4z8az7f] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-91n4z8az7f] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-91n4z8az7f] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-91n4z8az7f] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-91n4z8az7f] {
    direction:ltr;
}
.btn-close[b-91n4z8az7f] {
    margin: inherit;
}
/* /Pages/Panel/PaymentManagement/PaymentFactor.razor.rz.scp.css */
.image-slider[b-kvx8e023w6] {
 margin-top:2em;
}

.slider-container[b-kvx8e023w6] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-kvx8e023w6] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-kvx8e023w6]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-kvx8e023w6]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-kvx8e023w6]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-kvx8e023w6]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-kvx8e023w6] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-kvx8e023w6] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-kvx8e023w6] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-kvx8e023w6] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-kvx8e023w6] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-kvx8e023w6] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-kvx8e023w6] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-kvx8e023w6] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-kvx8e023w6] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-kvx8e023w6] {
    direction:ltr;
}
.btn-close[b-kvx8e023w6] {
    margin: inherit;
}
/* /Pages/Panel/PaymentManagement/PaymentLogDetails.razor.rz.scp.css */
.image-slider[b-diz1gluzw5] {
 margin-top:2em;
}

.slider-container[b-diz1gluzw5] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-diz1gluzw5] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-diz1gluzw5]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-diz1gluzw5]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-diz1gluzw5]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-diz1gluzw5]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-diz1gluzw5] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-diz1gluzw5] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-diz1gluzw5] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-diz1gluzw5] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-diz1gluzw5] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-diz1gluzw5] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-diz1gluzw5] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-diz1gluzw5] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-diz1gluzw5] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-diz1gluzw5] {
    direction:ltr;
}
.btn-close[b-diz1gluzw5] {
    margin: inherit;
}
/* /Pages/Panel/PaymentManagement/Payments.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-ixfqwwqpuq] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-ixfqwwqpuq] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-ixfqwwqpuq] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-ixfqwwqpuq] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-ixfqwwqpuq] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-ixfqwwqpuq] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-ixfqwwqpuq] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-ixfqwwqpuq] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-ixfqwwqpuq] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-ixfqwwqpuq] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-ixfqwwqpuq] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-ixfqwwqpuq] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-ixfqwwqpuq] td:empty {
    display: none;
}
/* /Pages/Panel/ProductManagement/Product.razor.rz.scp.css */
.image-slider[b-9uu49otqqk] {
 margin-top:2em;
}

.slider-container[b-9uu49otqqk] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-9uu49otqqk] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-9uu49otqqk]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-9uu49otqqk]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-9uu49otqqk]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-9uu49otqqk]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-9uu49otqqk] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-9uu49otqqk] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-9uu49otqqk] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-9uu49otqqk] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-9uu49otqqk] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-9uu49otqqk] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-9uu49otqqk] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-9uu49otqqk] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-9uu49otqqk] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-9uu49otqqk] {
    direction:ltr;
}
.btn-close[b-9uu49otqqk] {
    margin: inherit;
}
/* /Pages/Panel/ProductManagement/Products.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-r5mlq1io8c] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-r5mlq1io8c] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-r5mlq1io8c] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-r5mlq1io8c] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-r5mlq1io8c] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-r5mlq1io8c] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-r5mlq1io8c] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-r5mlq1io8c] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-r5mlq1io8c] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-r5mlq1io8c] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-r5mlq1io8c] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-r5mlq1io8c] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-r5mlq1io8c] td:empty {
    display: none;
}
/* /Pages/Panel/ProductManagement/ProductSpecification.razor.rz.scp.css */
.image-slider[b-mxjidvvuak] {
 margin-top:2em;
}

.slider-container[b-mxjidvvuak] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-mxjidvvuak] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-mxjidvvuak]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-mxjidvvuak]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-mxjidvvuak]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-mxjidvvuak]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-mxjidvvuak] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-mxjidvvuak] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-mxjidvvuak] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-mxjidvvuak] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-mxjidvvuak] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-mxjidvvuak] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-mxjidvvuak] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-mxjidvvuak] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-mxjidvvuak] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-mxjidvvuak] {
    direction:ltr;
}
.btn-close[b-mxjidvvuak] {
    margin: inherit;
}
/* /Pages/Panel/ProductManagement/ProductSpecifications.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-04ks24omzm] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-04ks24omzm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-04ks24omzm] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-04ks24omzm] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-04ks24omzm] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-04ks24omzm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-04ks24omzm] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-04ks24omzm] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-04ks24omzm] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-04ks24omzm] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-04ks24omzm] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-04ks24omzm] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-04ks24omzm] td:empty {
    display: none;
}
/* /Pages/Panel/SpecificationManagement/Specification.razor.rz.scp.css */
.image-slider[b-eskx77shtx] {
 margin-top:2em;
}

.slider-container[b-eskx77shtx] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-eskx77shtx] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-eskx77shtx]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-eskx77shtx]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-eskx77shtx]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-eskx77shtx]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-eskx77shtx] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-eskx77shtx] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-eskx77shtx] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-eskx77shtx] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-eskx77shtx] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-eskx77shtx] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-eskx77shtx] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-eskx77shtx] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-eskx77shtx] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-eskx77shtx] {
    direction:ltr;
}
.btn-close[b-eskx77shtx] {
    margin: inherit;
}
/* /Pages/Panel/SpecificationManagement/Specifications.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-r2venaaw9t] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-r2venaaw9t] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-r2venaaw9t] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-r2venaaw9t] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-r2venaaw9t] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-r2venaaw9t] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-r2venaaw9t] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-r2venaaw9t] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-r2venaaw9t] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-r2venaaw9t] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-r2venaaw9t] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-r2venaaw9t] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-r2venaaw9t] td:empty {
    display: none;
}
/* /Pages/Panel/UserManagement/User.razor.rz.scp.css */
.image-slider[b-ku7ujo96fr] {
 margin-top:2em;
}

.slider-container[b-ku7ujo96fr] {
    overflow-x: auto;
    width: 100%;
}

.slider-track[b-ku7ujo96fr] {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
}


/* For Chrome, Edge, Safari */
.slider-container[b-ku7ujo96fr]::-webkit-scrollbar {
    height: 10px; /* scrollbar thickness */
}

.slider-container[b-ku7ujo96fr]::-webkit-scrollbar-track {
    background: #f1f1f1; /* track color */
    border-radius: 10px;
}

.slider-container[b-ku7ujo96fr]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff, #4cafef); /* gradient thumb */
    border-radius: 10px;
}

    .slider-container[b-ku7ujo96fr]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a52d5, #3a8edb);
    }

/* For Firefox */
.slider-container[b-ku7ujo96fr] {
    scrollbar-width: none; /* makes scrollbar thinner */
    scrollbar-color: #6c63ff #f1f1f1; /* thumb color | track color */
}



.slider-item[b-ku7ujo96fr] {
    flex: 0 0 calc(100% / 6 - 1rem); /* 6 items with spacing */
    max-width: calc(100% / 6 - 1rem);
    height: 280px;
    margin: 0 0.5rem; /* margin on both left and right */
}



    .slider-item .card[b-ku7ujo96fr] {
        display: flex;
        flex-direction: column;
    }

    .slider-item img[b-ku7ujo96fr] {
        height: 220px; /* fixed image height */
        object-fit: contain; /* crop nicely */
        width: 100%;
    }


/* Large tablet: 4 items */
@media (max-width: 1200px) {
    .slider-item[b-ku7ujo96fr] {
        flex: 0 0 calc(100% / 4 - 1rem);
        max-width: calc(100% / 4 - 1rem);
    }
}

/* Tablet: 3 items */
@media (max-width: 992px) {
    .slider-item[b-ku7ujo96fr] {
        flex: 0 0 calc(100% / 3 - 1rem);
        max-width: calc(100% / 3 - 1rem);
    }
}

/* Mobile: 2 items */
@media (max-width: 768px) {
    .slider-item[b-ku7ujo96fr] {
        flex: 0 0 calc(100% / 2 - 1rem);
        max-width: calc(100% / 2 - 1rem);
    }
}

/* Small mobile: 1 item */
@media (max-width: 480px) {
    .slider-item[b-ku7ujo96fr] {
        flex: 0 0 calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
}

.add-file-btn[b-ku7ujo96fr] {
    font-weight: 600;
    gap: 0.5rem;
}

.modal-header[b-ku7ujo96fr] {
    direction:ltr;
}
.btn-close[b-ku7ujo96fr] {
    margin: inherit;
}
/* /Pages/Panel/UserManagement/Users.razor.rz.scp.css */
/*
 * --------------------------------
 * QuickGrid Theme Definition (nva-rtl-theme)
 * --------------------------------
 */

.q-grid[b-i6wxb8vhrp] {
    overflow:auto;
}
/* Target the QuickGrid root element for the theme and RTL */
[b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] {
    /* Set the text direction for the grid content */
    /* Inherit the base table style properties */
    font-size: 0.9rem;
    color: #333;
    /* Other theme-specific resets can go here */
}

    /* Style the main table element within the theme */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
       
    }



    /* Style the table header (thead) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Flipped for RTL */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            /* Use 'flex-direction: row-reverse' to put the sort indicator BEFORE the text */
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right */
            flex-direction: row-reverse;
        }

            [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Flipped from margin-left for RTL */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table data cells (td) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }






    /* Style table rows (tr) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

/* Container for Edit/Delete buttons (if you use a separate class) */
/* Assuming this is inside a TemplateColumn, you might need to adjust based on final HTML */
.grid-actions[b-i6wxb8vhrp] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right (end) for RTL */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-i6wxb8vhrp] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Add some pop to the primary action button */
    .grid-actions .btn-primary[b-i6wxb8vhrp] {
        background-color: #007bff;
        border-color: #007bff;
    }



/*
 * --------------------------------
 * 1. Global Reset and Container
 * --------------------------------
 */

/* Target the container holding the grid for a clean look */
.container.bg-white[b-i6wxb8vhrp] {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 20px !important;
}

/*
 * --------------------------------
 * 2. QuickGrid Theme (nva-rtl-theme)
 * --------------------------------
 */

/* Target the QuickGrid root element for the theme and RTL */
[b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] {
    direction: rtl; /* Enforce RTL direction */
    font-size: 0.9rem;
    color: #333;
}

    /* Style the main table element */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Style the table header (thead) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] thead {
        background-color: #f8f9fa;
        border-bottom: 3px solid #dee2e6;
    }

    /* Style header cells (th) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th {
        font-weight: 600;
        padding: 12px 15px;
        text-align: right; /* Align header text right */
        color: #495057;
        vertical-align: middle;
    }

        /* Styling for the sort indicators */
        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Align header content to the right edge */
            flex-direction: row-reverse; /* Put indicator before text */
        }

            [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th a::after {
                content: ' ';
                margin-right: 6px; /* Space on the left of the indicator (after text in RTL) */
                margin-left: 0;
                font-size: 0.8rem;
                opacity: 0.6;
            }

        /* Sort icons for ascending/descending states */
        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th[aria-sort="ascending"] a::after {
            content: ' ▲';
            opacity: 1;
        }

        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] th[aria-sort="descending"] a::after {
            content: ' ▼';
            opacity: 1;
        }

    /* Style table rows (tr) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }

        /* Hover effect for rows */
        [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }

    /* Style table data cells (td) */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] td {
        padding: 12px 15px;
        vertical-align: middle;
    }

/*
 * --------------------------------
 * 3. Action Button Group
 * --------------------------------
 */

/* Container for Edit/Delete buttons - Needs to be adjusted if not inside the theme scope */
.grid-actions[b-i6wxb8vhrp] {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align buttons to the right (end) */
}

    /* Custom button sizes for actions */
    .grid-actions .btn[b-i6wxb8vhrp] {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

/*
 * --------------------------------
 * 4. General/Pagination Styles
 * --------------------------------
 */

/* Style for the main add button */
.add-file-btn[b-i6wxb8vhrp] {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .add-file-btn:hover[b-i6wxb8vhrp] {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

/* * --------------------------------
 * CSS Fix for QuickGrid Empty Rows (If needed)
 * --------------------------------
 */
[b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] tbody tr:empty {
    display: none !important;
}

/* Make the grid responsive on small screens */
@media (max-width: 768px) {
    .container.bg-white[b-i6wxb8vhrp] {
        padding: 10px !important;
    }

    /* Ensure table content flows nicely */
    [b-i6wxb8vhrp] .quickgrid[theme=nva-rtl-theme] table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


[b-i6wxb8vhrp] tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

[b-i6wxb8vhrp] td:empty {
    display: none;
}
/* /Pages/Payment/Checkout.razor.rz.scp.css */
/* 1. Ensure the icon has a smooth rotation animation */
.collapse-icon[b-16s1s498y7] {
    transition: transform 0.3s ease-in-out;
    display: inline-block; /* Essential for transform to work reliably */
}

/* 2. Target the icon when the button is NOT collapsed (i.e., when the section is OPEN) */
.btn[data-bs-toggle="collapse"]:not(.collapsed) .collapse-icon[b-16s1s498y7] {
    transform: rotate(180deg) !important;
}

a[b-16s1s498y7], .btn-link[b-16s1s498y7] {
    color: #b52212;
}
/* /Pages/Payment/Verify.razor.rz.scp.css */
.circle[b-ru4kazmizh] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d1d5db;
}

.circle.completed[b-ru4kazmizh] {
    background: #28a745;
}

.circle.active[b-ru4kazmizh] {
    background: #0d6efd;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(13,110,253,.5);
}
/* /Pages/Shop/ProductCard.razor.rz.scp.css */
.product-card[b-za8540wddt] {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    max-width: 350px;
    transition: .2s ease;
}

    .product-card:hover[b-za8540wddt] {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0,0,0,.10);
    }

.product-image[b-za8540wddt] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.product-card .p-3[b-za8540wddt] {
    padding: .75rem !important;
}

.product-card h5[b-za8540wddt] {
    font-size: .95rem;
    margin-bottom: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align:center;
}

.product-card .text-success[b-za8540wddt] {
    font-size: .9rem;
}

.product-swiper .swiper-pagination[b-za8540wddt] {
    bottom: 4px !important;
}

.product-swiper .swiper-pagination-bullet[b-za8540wddt] {
    width: 6px;
    height: 6px;
}

.swiper-button-next[b-za8540wddt], .swiper-button-prev[b-za8540wddt] {
    color:#fff !important;
}

.product-card-footer[b-za8540wddt] {
    background: #fff;
}

.product-title[b-za8540wddt] {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.5;
}

.product-price[b-za8540wddt] {
    font-size: 1.15rem;
    font-weight: 800;
}

.product-btn[b-za8540wddt],
.product-btn-buy[b-za8540wddt] {
    height: 40px;
    border-radius: 12px;
    font-weight: 500;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-btn[b-za8540wddt] {
    background: #f8f9fa;
}

    .product-btn:hover[b-za8540wddt] {
        background: #eef3ff;
        border-color: var(--bs-primary);
        transform: translateY(-1px);
    }

.product-btn-buy[b-za8540wddt] {
    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}

    .product-btn-buy:hover[b-za8540wddt] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
    }

    .product-btn i[b-za8540wddt],
    .product-btn-buy i[b-za8540wddt] {
        font-size: .95rem;
        padding:5px;
    }
/* /Pages/Shop/ProductDetails.razor.rz.scp.css */
.product-details-body[b-h0ssk82pod] {
    background: #f5f7fb;
    padding: 1.5rem;
}

/* CARDS */
.product-gallery-card[b-h0ssk82pod],
.product-info-card[b-h0ssk82pod],
.card-section[b-h0ssk82pod],
.description-card[b-h0ssk82pod] {
    background: white;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 10px 35px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}

/* IMAGE */
.product-image-wrapper[b-h0ssk82pod] {
    height: 520px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fc, #eef2f7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image[b-h0ssk82pod] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: 0.35s ease;
    padding: 1rem;
}

    .product-image:hover[b-h0ssk82pod] {
        transform: scale(1.03);
    }

/* EMPTY */
.empty-image-box[b-h0ssk82pod] {
    height: 520px;
    width:100%;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f7f7f7;
    color: #999;
    font-size: 1.1rem;
}

    .empty-image-box i[b-h0ssk82pod] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

/* TITLE */
.product-title[b-h0ssk82pod] {
    font-size: 2rem;
    font-weight: 800;
    color: #1e1e1e;
    line-height: 1.3;
}

.product-subtitle[b-h0ssk82pod] {
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

/* PRICE */
.price-box[b-h0ssk82pod] {
    background: linear-gradient(135deg, #1d1d1d, #323232);
    border-radius: 20px;
    padding: 1.2rem 1.4rem;
    color: white;
}

.price-label[b-h0ssk82pod] {
    font-size: 0.9rem;
    opacity: 0.75;
}

.price-value[b-h0ssk82pod] {
    font-size: 2rem;
    font-weight: 800;
}

/* INFO BOX */
.info-box[b-h0ssk82pod] {
    background: #f8fafc;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    height: 100%;
    border: 1px solid #edf1f5;
}

.info-label[b-h0ssk82pod] {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

/* STATUS */
.status-badge[b-h0ssk82pod] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #198754;
    color: white;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* RATE */
.rating-stars[b-h0ssk82pod] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.2rem;
}

.active-star[b-h0ssk82pod] {
    color: #ffb400;
}

.inactive-star[b-h0ssk82pod] {
    color: #cfd4da;
}

.rating-value[b-h0ssk82pod] {
    margin-left: 0.6rem;
    font-size: 0.95rem;
    color: #555;
    font-weight: 700;
}

/* DESCRIPTION */
.description-header[b-h0ssk82pod],
.card-header[b-h0ssk82pod] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1e1e1e;
}

.description-content[b-h0ssk82pod] {
    color: #555;
    line-height: 2;
    font-size: 1rem;
    white-space: pre-wrap;
}

.product-section-title[b-h0ssk82pod] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 14px 0;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #eee;
    color: #333;
}

.specifications-section[b-h0ssk82pod] {
    border-bottom: 1px solid #ececec;
    padding-bottom: 1.5rem;
}

.specification-item[b-h0ssk82pod] {
    background: #f8f9fb;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    height: 100%;
    transition: all .2s ease;
}

    .specification-item:hover[b-h0ssk82pod] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,.06);
        border-color: #dcdcdc;
    }

.specification-key[b-h0ssk82pod] {
    font-size: .85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: .4rem;
}

.specification-value[b-h0ssk82pod] {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    word-break: break-word;
}

@media(max-width: 991px) {

    .product-image-wrapper[b-h0ssk82pod] {
        height: 350px;
    }

    .product-title[b-h0ssk82pod] {
        font-size: 1.5rem;
    }

    .price-value[b-h0ssk82pod] {
        font-size: 1.5rem;
    }
}
/* /Pages/Shop/Products.razor.rz.scp.css */
.load-more[b-oy4hkn3244] {
    margin-top:5em !important;
}


.fancy-h2[b-oy4hkn3244] {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 800;
    font-size: 2.2rem;
    padding-bottom: 5px;
}

.swiper-pagination-bullet-active[b-oy4hkn3244] {
    background-color: #292627 !important;
}