/*
  You can add custom CSS rules or import files here.
*/


/* Import the Radzen CSS files */
@import './styles-generated.css';
/* Component-specific dialog tweaks */
@import './split-order-dialog.css';

/* ========================================
   Issue Presence Avatars (Zendesk-style)
   ======================================== */

.presence-avatars {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.presence-avatars__stack {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 2px;
}

.presence-avatars__circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2.5px solid var(--rz-body-background-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: default;
    user-select: none;
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease,
        z-index 0s;
}

.presence-avatars__circle:not(:first-child) {
    margin-right: -10px;
}

.presence-avatars__circle:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100 !important;
}

.presence-avatars__initials {
    color: var(--rz-on-primary-color, #ffffff);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.presence-avatars__pulse {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: var(--rz-success);
    border-radius: 50%;
    border: 2px solid var(--rz-body-background-color);
    box-shadow: 0 0 0 2px var(--rz-success-lighter);
}

.presence-avatars__circle--more {
    background: linear-gradient(135deg, var(--rz-secondary) 0%, var(--rz-secondary-darker, var(--rz-secondary)) 100%) !important;
}

.presence-avatars__circle--more .presence-avatars__initials {
    font-size: 0.7em;
    font-weight: 600;
}

.presence-avatars__circle--more .presence-avatars__pulse {
    display: none;
}

.presence-avatars__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color, var(--rz-secondary));
    white-space: nowrap;
}

.presence-avatars--md .presence-avatars__circle {
    width: 38px;
    height: 38px;
}

.presence-avatars--md .presence-avatars__circle:not(:first-child) {
    margin-right: -12px;
}

.presence-avatars--md .presence-avatars__initials {
    font-size: 13px;
}

.presence-avatars--md .presence-avatars__pulse {
    width: 11px;
    height: 11px;
}

.presence-avatars--sm .presence-avatars__circle {
    width: 28px;
    height: 28px;
    border-width: 2px;
}

.presence-avatars--sm .presence-avatars__circle:not(:first-child) {
    margin-right: -9px;
}

.presence-avatars--sm .presence-avatars__initials {
    font-size: 10px;
}

.presence-avatars--sm .presence-avatars__pulse {
    width: 8px;
    height: 8px;
    bottom: -2px;
    right: -2px;
    border-width: 1.5px;
}

.presence-avatars--lg .presence-avatars__circle {
    width: 48px;
    height: 48px;
    border-width: 3px;
}

.presence-avatars--lg .presence-avatars__circle:not(:first-child) {
    margin-right: -14px;
}

.presence-avatars--lg .presence-avatars__initials {
    font-size: 16px;
}

.presence-avatars--lg .presence-avatars__pulse {
    width: 13px;
    height: 13px;
}

/* Target both parent and child grid cells */
.rz-cell-data,
.rz-grid-table .rz-cell-data,
.rz-datalist-data .rz-cell-data,
.rz-grid-table td .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle;
}

/* Additional specificity for nested grids */
.rz-grid-table .rz-grid-table .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle;
}

/* Target the detail template grid cells specifically */
.rz-grid-detail-template .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle;
}

.rz-grid-table td {
    vertical-align: middle !important;
}

.ManageMenusGrid {
    --rz-grid-cell-padding: 0.3rem .5rem;
}


.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: transparent;
    border: 3px solid var(--rz-on-primary-light);
    border-radius: 50%;
    text-align: center;
    line-height: 150px;
    font-family: sans-serif;
    font-size: 20px;
    color: var(--rz-primary);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--rz-primary);
    box-shadow: 0 0 20px var(--rz-primary-darker);
    z-index: 99999;
}

.ring:before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid var(--rz-primary);
    border-right: 3px solid var(--rz-primary);
    border-radius: 50%;
    animation: animateC 2s linear infinite;
    z-index: 99999;
}



.ring-bg {
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    width: 50%;
    height: 4px;
    background: transparent;
    transform-origin: left;
    animation: animate 2s linear infinite;
}

.ring-bg:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rz-primary);
    top: -6px;
    right: -8px;
    box-shadow: 0 0 20px var(--rz-primary);
}

.overlay {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 100000;
}


@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(405deg);
    }
}

.multiSelect {
    max-width: 300px;
    margin: 0px !important;
}

.optionsContainer {
    width: 100%;
    overflow-y: scroll;
    max-height: 280px;
    padding: 0px !important;
}

.optionContainer {
    width: 100%;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}


.optionContainer:nth-of-type(even) {
    background-color: var(--rz-base-500);
}

.butttonsContainer {
    width: 100%;
    margin: 0px !important;
    padding-bottom: 10px;
    padding-top: 10px;
}

.highlightStockLevelRow td {
    background-color: darkslategrey !important;
    font-weight: bold;
}

.childStockLevel ul li {
    padding: 0px !important;
}

.sticky {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: -16px;
    background-color: var(--rz-info-light);
    z-index: 9999999;
    padding-bottom: 8px;
    padding-top: 8px;
    
}
.sticky-content {
    background-color: var(--rz-base-50);
}

.sticky-footer {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    bottom: -12px;
    z-index: 9999999;
    padding-bottom: 8px;
    padding-top: 8px;
}



.weight-text-default {
    /* Define default text styles if needed; otherwise, this can be left empty */
}

.weight-text-highlighted {
    color: green;
    font-weight: bold;
}

/*head and sidebar custom styles*/




.rz-header .rz-dropdown:hover .rzi.rz-navigation-item-icon-children,
.rz-header .rz-dropdown:focus .rzi.rz-navigation-item-icon-children,
.rz-header .rz-dropdown.rz-state-focus .rzi.rz-navigation-item-icon-children {
    color: var(--header-text) !important;
}

.rz-header .rz-dropdown .rz-dropdown-trigger .rzi.rz-navigation-item-icon-children {
    color: var(--header-text) !important;
}

.rz-header .rzi.rz-navigation-item-icon-children,
.rz-header .rzi.rz-navigation-item-icon-children:hover,
.rz-header .rzi.rz-navigation-item-icon-children:focus,
.rz-header .rzi.rz-navigation-item-icon-children:active {
    color: var(--header-text) !important;
}

.rz-header,
.rz-header>* {
    background-color: var(--header-color) !important;
    color: var(--header-text) !important;
}

.rz-header .business-label,
.rz-header .rz-dropdown,
.rz-header .rz-dropdown * {
    background-color: var(--header-color) !important;
    color: var(--header-text) !important;
}

ul.rz-profile-menu {
    background-color: var(--header-color);
}

.rz-sidebar,
.rz-panel-menu {
    background-color: var(--sidebar-color);
    color: var(--sidebar-text);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
    background-color: var(--sidebar-color);
    color: var(--sidebar-text) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover {
    color: var(--sidebar-text);
}

/* Sidebar toggle button styles */
.rz-sidebar-toggle {
    background-color: var(--header-color) !important;
    color: var(--header-text) !important;
    border: none !important;
    padding: 0.5rem !important;
    margin: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 50% !important;
    /* Makes it round */
    width: 3rem;
    /* Ensure the button is square */
    height: 3rem;
    /* Ensure the button is square */
}

.rz-sidebar-toggle:hover {
    background-color: rgba(var(--header-text-rgb), 0.2) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 50% !important;
    /* Retain round shape on hover */
}

/* Ensure the toggle button icon is visible against the header */
.rz-sidebar-toggle .rzi {
    color: var(--header-text) !important;
    font-size: 1.5rem !important;
}

/* Remove any fixed positioning */
.rz-sidebar-toggle {
    position: static !important;
}

/* Ensure the button is properly aligned within the header */
.rz-header .rz-sidebar-toggle {
    float: left !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .rz-sidebar-toggle {
        display: block !important;
    }
}

/* Add a subtle outline on focus for accessibility */
.rz-sidebar-toggle:focus {
    outline: 2px solid rgba(var(--header-text-rgb), 0.5) !important;
    outline-offset: 2px !important;
}

.selectBusinessMainLayoutDropdown,
.selectBusinessMainLayoutDropdown * {
    background-color: var(--header-color) !important;
    color: var(--header-text) !important;
}

.rz-column-title-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.addAttachment {
    position: relative;
    top: 4px;
    right: 132px;
    color: #5dbf74;
    cursor: pointer;
}

#chooseContainer .rz-fileupload-buttonbar {
    background-color: transparent !important;
    text-align: center !important;
}

#chooseContainer .rz-fileupload-content .rz-fileupload-files {
    border-radius: 8px !important;
}

.attachmentsCount {
    min-width: 1.6em;
    /* or width, explained below. */
    height: 1.6em;
    border-radius: 0.8em;
    /* or 50%, explained below. */
    background-color: #386A20;
    /* number size and position */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color:white !important;
}

#attachmentList .rz-datalist-data {
    width: 33%;
    float: left;
}

#attachmentList .rz-datalist-data li {
    padding: 3px !important;
}

.purchaseOrderPendingChanges {
    margin-left: 12px;
    padding: 8px !important;
    border: 1px inset darkkhaki !important;
    color: darkkhaki;
    font-weight: bold;
}

.purchaseOrderCanceled {
    margin-left: 12px;
    padding: 8px !important;
    border: 1px solid #ef9696 !important;
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: rgb(179, 38, 30);
}

.attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
}

.attachments-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attachments-header-actions {
    margin-left: auto;
}

.rz-state-disabled {
    /* border-color: #d3d3d3 !important; */
    /* Example border color */
    cursor: default !important;
    /* Change cursor to not-allowed */
    opacity: 0.8 !important;
    /* Ensure opacity is set */
    color: var(--rz-text-color) !important;
}

.rz-state-disabled.rz-dropdown-label {
    color: #d3d3d3 !important;
    /* Example border color */
    opacity: 0.8 !important;
    /* Ensure opacity is set */
}

div:not(.rz-form-field-content)>.rz-state-disabled.rz-dropdown .rz-inputtext {
    /* opacity: 0.8 !important; */
    color: var(--rz-text-color) !important;
}

div:not(.rz-form-field-content)>.rz-textarea:disabled {
    opacity: 0.6 !important;
}

#purchaseOrderTabs .rz-tabview-panel {
    padding-bottom: 10px;
}

div:not(.rz-form-field-content)>.rz-textbox:disabled {
    opacity: 0.6 !important;
}

div:not(.rz-form-field-content)>.rz-spinner.rz-state-disabled .rz-inputtext {
    opacity: 0.6 !important;
}

#accordionBusinesSettings .rz-accordion-content {
    background-color: transparent !important;
}

.emailContent {
    height: 100%;
    overflow: scroll;
}

.emailContent .rz-html-editor-content {
    background-color: white !important;
    height: 80%;
    overflow: scroll;
}

.datalist-item .rz-datalist-data li {
    padding: 5px !important;
    /* Reduce padding */
    margin: 2px 0 !important;
    /* Reduce margin between items */
}

#productRequirements .rz-datalist-data>li {
    padding: 8px !important;
    /* Reduce padding */
    margin: 0px 0 !important;
    /* Reduce margin between items */
}

#productRequirements .rz-datalist-data {
    padding: 0px !important;
    /* Reduce padding */
    margin: 4px 0 !important;
    /* Reduce margin between items */
}

#packages .rz-datalist-data {
    padding: 0px !important;
    /* Reduce padding */
    margin: 4px 0 !important;
    /* Reduce margin between items */
}

#packages .rz-datalist-data>li {
    padding: 8px !important;
    /* Reduce padding */
    margin: 0px 0 !important;
    /* Reduce margin between items */
    background: none !important;
}

.localTime {
    display: block;
    height: 100%;
    align-content: center;
}


#trackingList .rz-datalist-data li {
    padding: 0px !important;
}

.vcenter {
    display: inline-block !important;
    vertical-align: middle !important;
}

#addShipmentDescription .rz-html-editor-content {
    background: none !important;
}

#queuePurchaseOrders .rz-datalist-data li {
    padding: 3px 3px 3px 10px !important;
    margin: 0px !important;
}

#queuePurchaseOrders ul {
    padding: 3px !important;
    margin: 0px !important;
}

#queueReceivingRecords .rz-datalist-data li {
    padding: 3px 3px 3px 10px !important;
    margin: 0px !important;
}

#queueReceivingRecords ul {
    padding: 3px !important;
    margin: 0px !important;
}

#workstations .rz-datalist-data li {
    padding: 3px 3px 3px 3px !important;
    margin: 0px !important;
}

#workstations ul {
    padding: 3px !important;
    margin: 0px !important;
}

.hide-header .rz-grid-table thead {
    display: none;
}

.show-header .rz-grid-table thead {
    display: table-header-group;
}

.pending-deliver-item {
    background-color: #ef9696;
    padding: 6px;
    font-weight: bold;
    color: darkslategray;
    border-radius: 11px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    /* Horizontally centers */
    align-items: center;
}

.deliver-item {
    background-color: palegreen;
    padding: 6px;
    font-weight: bold;
    color: darkslategray;
    border-radius: 20px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    /* Horizontally centers */
    align-items: center;
}

#trackingList .rz-accordion {
    position: relative;
}

.suggested-card {
    background-color: #2E7D32;
    border: 1px solid #4CAF50;
}

.current-card {
    background-color: #5D4037;
    border: 1px solid #FFA000;
}

.btn-cancel {
    background-color: #424242;
    color: #F5F5F5;
    border: 1px solid #616161;
    transition: background-color 0.3s;
}

.btn-cancel:hover {
    background-color: #616161;
}

.address-text {
    color: #F5F5F5;
}

.address-subtext {
    color: #E0E0E0;
}

.rz-button-light {
    background-color: #424242;
    color: #F5F5F5;
}

.rz-button-light:hover {
    background-color: #616161;
}

.rz-button-warning {
    background-color: #FF8F00;
    color: #212121;
}

.rounded-lg {
    border-radius: 0.75rem;
}

.highlight {
    background-color: yellow;
    color: black;
    padding: 0 2px;
    border-radius: 2px;
}

.rz-data-row td {
    vertical-align: top;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 120px;
    /* Adjust this height as needed */
}

.grid-container {
    margin-top: 140px;
    /* Match the height of .fixed-header */
    height: 60px;
    /* Take up the remaining viewport space */
    overflow: auto;
    /* Prevent scrolling on the container itself */
}

.datagrid-wrapper {
    margin-top: 0px;
    /* Ensure this matches the height of .fixed-header */
    height: calc(100vh - 350px);
    /* Dynamically calculate available height */
    overflow: auto;
    /* Allow scrolling for grid */
}

.scrolling-grid .rz-data-grid-data {
    height: 100%;
    overflow: auto;
    /* Prevent scrolling on the overall grid */
}

/* Apply scrolling to the tbody inside the grid */
.scrolling-grid .rz-grid-table-fixed tbody {
    display: block;
    max-height: 100%;
    /* Make it fill available height */
    overflow: auto;
    /* Enable vertical scrolling */
}

/* Ensure the table headers stay aligned with the table body */
.scrolling-grid .rz-grid-table-fixed {
    display: block;
}

.scrolling-grid .rz-grid-table-fixed thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.scrolling-grid .rz-grid-table-fixed tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.summary-active {
    --rz-accordion-item-font-weight: bold;
    --rz-accordion-item-background-color: lightgreen;
}

/* Sidebar styles */
.rz-sidebar.rz-sidebar-expanded {
    width: 280px !important;
    max-width: none !important;
}

.notification-icon {
    position: relative;
    font-size: 24px;
    cursor: pointer;
    display: inline-flex;
}

.notification-counter {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: #ebeaccCE;
    border-radius: 50%;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
}

.custom-dialog {
    max-width: 90vw;
    /* Maximum width based on viewport */
    max-height: 90vh;
    /* Maximum height based on viewport */
    overflow: auto;
    /* Allows scrolling if content overflows */
}

#purchaseOrderAccordion .rz-accordion-content {
    padding-top: 0px !important;
}

#purchaseOrderAccordion .rz-accordion-header {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.rz-progressbar-value {
    border-radius: 8px;
}

#cartItems .rz-paginator {
    display: none;
}

.status-open {
    background-color: gainsboro !important;
    color: #333333 !important;
    padding: 3px !important;
    border-radius: 0px !important;
}

.status-open-active {
    background-color: goldenrod !important;
    /* Yellow */
    color: #333333 !important;
    padding: 3px !important;
    border-radius: 0px !important;
}

.status-in-progress {
    background-color: gainsboro !important;
    color: #333333 !important;
    padding: 8px !important;
    border-radius: 0px !important;
}

.status-in-progress-active {
    background-color: dodgerblue !important;
    /* Blue */
    color: #333333 !important;
    padding: 3px !important;
    border-radius: 0px !important;
}

.status-complete {
    background-color: gainsboro !important;
    color: #333333 !important;
    padding: 8px !important;
    border-radius: 0px !important;
}

.status-complete-active {
    background-color: #C8E6C9AA !important;
    /* Green */
    color: #333333 !important;
    padding: 3px !important;
    border-radius: 0px !important;
}

.status-all {
    background-color: gainsboro !important;
    color: #333333 !important;
    padding: 8px !important;
    border-radius: 0px !important;
}

.status-all-active {
    background-color: gray !important;
    /* Gray */
    color: #333333 !important;
    padding: 8px !important;
    border-radius: 0px !important;
}

:root {
    --header-color: #ffffff;
    --sidebar-color: #333333;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base-50: #f8fafb;
    --rz-base-100: #f3f6f9;
    --rz-base-200: #e3eaf2;
    --rz-base-300: #dfe5ec;
    --rz-base-400: #dbe0e6;
    --rz-base-500: #d7dbe0;
    --rz-base-600: #6e7277;
    --rz-base-700: #5b5f64;
    --rz-base-800: #45494f;
    --rz-base-900: #1b1c20;
    --rz-primary: #1d72e2;
    --rz-primary-light: #bcd8ff;
    --rz-primary-lighter: rgba(0, 110, 255, 0.13);
    --rz-primary-dark: #375a8b;
    --rz-primary-darker: #00205d;
    --rz-secondary: #5b6471;
    --rz-secondary-light: #c2cddc;
    --rz-secondary-lighter: rgba(0, 106, 255, 0.13);
    --rz-secondary-dark: #444c58;
    --rz-secondary-darker: #19202b;
    --rz-info: #085786;
    --rz-info-light: #aadaff;
    --rz-info-lighter: rgba(170, 218, 255, 0.5);
    --rz-info-dark: #086791;
    --rz-info-darker: #002d41;
    --rz-success: #386A20;
    --rz-success-light: #c0ffaa;
    --rz-success-lighter: rgba(192, 255, 170, 0.5);
    --rz-success-dark: #3e9108;
    --rz-success-darker: #194100;
    --rz-warning: #e8e971;
    --rz-warning-light: #f9ffaa;
    --rz-warning-lighter: rgba(249, 255, 170, 0.5);
    --rz-warning-dark: #918908;
    --rz-warning-darker: #413d00;
    --rz-danger: #b3261e;
    --rz-danger-light: #ffb4aa;
    --rz-danger-lighter: rgba(255, 180, 170, 0.5);
    --rz-danger-dark: #91080a;
    --rz-danger-darker: #410001;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #00205d;
    --rz-on-primary-lighter: #00205d;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #bcd8ff;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #19202b;
    --rz-on-secondary-lighter: #19202b;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #c2cddc;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #002d41;
    --rz-on-info-lighter: #086791;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #aadaff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #194100;
    --rz-on-success-lighter: #194100;
    --rz-on-success-dark: #000000;
    --rz-on-success-darker: #c0ffaa;
    --rz-on-warning: #1b1c20;
    --rz-on-warning-light: #413d00;
    --rz-on-warning-lighter: #413d00;
    --rz-on-warning-dark: #000000;
    --rz-on-warning-darker: #f9ffaa;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #410001;
    --rz-on-danger-lighter: #410001;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffb4aa;
    --rz-series-1: #75abf0;
    --rz-series-2: #9c75f0;
    --rz-series-3: #f075e8;
    --rz-series-4: #f0758c;
    --rz-series-5: #f0ba75;
    --rz-series-6: #c9f075;
    --rz-series-7: #75f07d;
    --rz-series-8: #75f0d9;
    --rz-series-9: #478eeb;
    --rz-series-10: #7b47eb;
    --rz-series-11: #eb47e0;
    --rz-series-12: #eb4766;
    --rz-series-13: #eba447;
    --rz-series-14: #b7eb47;
    --rz-series-15: #47eb52;
    --rz-series-16: #47ebcc;
    --rz-series-17: #3d72b8;
    --rz-series-18: #643db8;
    --rz-series-19: #b83db0;
    --rz-series-20: #b83d54;
    --rz-series-21: #b8823d;
    --rz-series-22: #91b83d;
    --rz-series-23: #3db845;
    --rz-series-24: #3db8a1;
}

html {
    --header-color: #ffffff;
    --sidebar-color: #333333;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
    --header-color: #ffffff;
    --sidebar-color: #333333;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
}

#gridColumns .rz-display-flex {
    padding: 6px;
    width: 166px;
    min-width: 166px;
    max-width: 166px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 2px;
    margin-right: 2px;
    font-size: 13px;
}

#hiddenColumnsPanel {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.rz-grid-filter-icon {
    margin: 0px !important;
    font-size:small;
}

#check_review_list .rz-datalist-data
{
    padding: 0px !important;
}

#check_review_list .rz-datalist-data>li{
    padding: 0px !important;
    margin: 0px !important;
}

/* Custom CSS to right-align the header text for datagrid column */
.RightAlignedColumnHeader > div {
    display: flex;
    justify-content: flex-end;
}

.RightAlignedColumnHeader .rz-column-title {
    justify-content: flex-end;
    display: flex;
    width: 100%;
}

/* Custom CSS to center the header text for datagrid column */
.CenterAlignedColumnHeader > div {
    display: flex;
    justify-content: center;
}

.CenterAlignedColumnHeader .rz-column-title {
    justify-content: center;
    display: flex;
    width: 100%;
}


#ddUpload{
    height:108px;
}

.rz-fileupload-choose.rz-button:has(#ddUpload) {
    background-color: #f5f5f5;
    border: 1px dashed gray;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    height:100px;
    width:100%;
}

#ddUpload .rz-fileupload-content {
    background-color: transparent !important;
    position: absolute;
    top: 43px;
    padding-left: 10px;
    padding-right: 20px;
    font-size:14px;
    z-index:1;
}

#wire_review_list .rz-datalist-data {
    padding: 0px !important;
}

    #wire_review_list .rz-datalist-data > li {
        padding: 0px !important;
        margin: 0px !important;
    }

.table-container {
    display: flex;
    flex-direction: column;
    width: 400px; /* set table width */
    border: var(--rz-grid-cell-border);
}

.grid-row {
    display: flex;
}

.grid-cell {
    flex: 1;
    padding:8px;
    border-right: var(--rz-grid-cell-border);
    border-bottom: var(--rz-grid-cell-border);
    text-align: left;
}

.grid-row:last-child .grid-cell {
    border-bottom: none; /* No bottom border on last row */
}

.grid-cell:last-child {
    border-right: none; /* No right border on last cell in row */
}

.highlight-grid:nth-child(odd) > td {
    background: rgba(248,206,204,255) !important;
}

.highlight-grid:nth-child(even) > td {
    background: rgba(249,217,215,11) !important;
}

.wide-dropdown-grid .rz-dropdown-panel {
    min-width: 600px !important;
    max-width: 800px !important;
}

.wide-dropdown-grid .rz-dropdown-panel .rz-data-grid {
    width: 100% !important;
}