:root {
    --main-color: #D64541;
    --highlight-color: #D0ACAA;
    --border-radius: 0px;
}
    /*#region Toast Notifications*/
    .e-toast-container .custom-toast-template {
    /*    border-left: 4px solid var(--notification-left-border-color) !important;*/
    background-color: var(--notification-background-color) !important;
    color: var(--notification-text-color) !important;
    display: flex !important;
    align-items: center !important; /* Vertically center content */
    gap: 0rem !important; /* Optional: space between icon and text */
    padding: 0rem !important; /* Adjust padding to control spacing */
    margin-top: 1rem !important;
    vertical-align: middle;
    position: relative !important;
    margin: 0rem !important;
}

.e-toast-container .e-toast .e-toast-progress {
    background-color: var(--notification-progress-bar-color) !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 4px !important;
    margin: 0 !important;
    border-radius: var(--border-radius) !important;
}

.custom-toast-template svg,
.custom-toast-template .e-icons {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    display: inline-block !important;
    fill: var(--notification-icon-color) !important;
    color: var(--notification-icon-color) !important;
}

.e-toast.toast-container {
    border-left: 4px solid var(--notification-left-border-color) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.e-toast-container {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 9999;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    pointer-events: none !important; /* Allow clicks through the container */

    padding: 0rem !important; /* helps position the notification */
    margin: 0rem !important; /* helps position the notification */
}

.e-toast {
    pointer-events: auto !important; /* Allow interaction with individual toasts */
}

.toast-stack {
    position: fixed !important;
    top: 2rem !important; /* Adjusts the vertical position of the first toast */
    right: 1rem !important; /* Adjusts the horizontal position */
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important; /* Adjusts the space between stacked toasts */
    z-index: 9999;
    pointer-events: none !important; /* Makes sure the toast stack doesn’t block clicks */
}

.toast-container {
    pointer-events: auto !important; /* Allows interactions with each individual toast */
    display: flex !important;
    flex-direction: row !important;
}

.toast-title {
    font-size: 1.1rem !important;
    padding-bottom: 0.2rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    line-height: 1.25 !important;
    padding: 0rem !important;
    margin: 0.5rem 0rem 0.5rem 0rem !important;
}

.toast-content hr {
    margin: 0rem 0rem 0rem 0rem !important;
    width: 100% !important;
}

.toast-message {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    line-height: 2.25 !important;
    padding: 0rem !important;
    margin: 0.5rem 0rem 0.5rem 0rem !important;
}

.e-toast-icon {
}



/*#region User Profile*/
.profile-container {
    display: flex;
    min-height: 90vh;
    background: #f8f8f8;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    font-family: 'Segoe UI', sans-serif;
}

.sidebar {
    width: 240px;
    background: #fff;
    padding-top: 30px;
    border-right: 1px solid #e5e5e5;
}

    .sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar li {
        padding: 15px 30px;
        cursor: pointer;
        color: #333;
        font-weight: 500;
        transition: background 0.3s, color 0.3s;
    }

        .sidebar li:hover {
            background-color: #f2f2f2;
        }

        .sidebar li.active {
            background-color: #d64541;
            color: #fff;
        }

.content-area {
    flex: 1;
    padding: 40px;
    background: #fcfcfc;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}

.section-content {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.user-details {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
}

.user-avatar {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #d64541;
}

.detail-row {
    margin-bottom: 10px;
}

.detail-label {
    font-weight: 600;
    color: #777;
}

.detail-value {
    margin-left: 10px;
    color: #333;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .orders-table th, .orders-table td {
        padding: 12px 15px;
        border: 1px solid #e0e0e0;
        text-align: left;
    }

    .orders-table th {
        background-color: #f4f4f4;
        color: #555;
    }
/*#endregion*/



/*#region Footer*/
footer {
    width: 100%; /* Ensures the footer spans the full width */
    height: auto;
    background: #524C44; /*linear-gradient(to right, #A97B70, #524C44);*/
    color: #fff;
    padding: 10px 10px 0px;
    font-size: 12px !important;
    text-align: left;
    position: relative;
    flex-shrink:0;
}

    footer a { /* All footer links */
        color: var(--white-text);
        font-size: 12px !important;
        position: relative;
    }
    footer .footer-link {
        margin-left: -0.5rem;
        margin-bottom: 10px;
        font-size: 12px !important;
    }

    footer .footer-link a {
        text-decoration: none;
        display: inline-block;
        transition: transform 0.2s;
    }

        footer .footer-link a:hover {
            transform: translateX(2px);
        }

    footer .legal-link {
        margin-left: -0.5rem;
        display: inline-block;
        transition: transform 0.2s;
        margin-right: 0px;
        font-size: 12px !important;
    }
        footer .legal-link:hover {
            transform: translateY(-2px);
        }

        footer .legal-link a:hover {
            color: white !important;
        }

    footer .copyright-f {
        position: relative; /* Ensures it doesn't float */
        text-align: left;
        color: var(--white-text);
        margin-top: 40px;
        padding-bottom: 10px !important;
        margin-left: -0.5rem;
        font-size: 12px !important;
    }
    footer .env p {
        margin-left: -0.5rem;
        font-size: 12px !important;
    }
  

.row-f {
    width: 85%;
    margin: auto;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.col-f {
    flex-basis: 20%;
    padding: 50px 0px 0px;
}
    .col-f p {
        line-height: 0rem;
        padding:0.5rem;
    }

    .col-f a {
        line-height: 0rem;
        text-decoration: none;
        cursor: pointer;
        padding: 0rem;
    }

    .col-f:nth-child(5) {
        margin-top: 50px;
        flex-basis: 100%;
    }
    .col-f:nth-child(6) {
        flex-basis: 100%;
    }

    .col-f h3 {
        color: var(--white-text);
        width: fit-content;
        margin-bottom: 40px;
        position: relative;
        font-size: 16px;
    }

.social-icons a {
    text-decoration: none;
    color: #ababab;
    display: inline-block;
    transition: transform 0.2s;
    margin-bottom: 20px;
    margin-right: 2px;
    padding: 0;
}

    .social-icons a:hover {
        color: #ff004f;
        transform: translateY(-2px);
    }
/*#endregion*/



@media (max-width: 767px) {

    /*#region Footer*/
    .col-f:nth-child(1), .col-f:nth-child(2), .col-f:nth-child(3), .col-f:nth-child(4) {
        flex-basis: 50%;
    }
    /*#endregion*/
}
/*#endregion*/


.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}








.responsive-dialog.e-dlg-container .e-dlg-content {
    width: 80vw;
    max-width: 1000px;
    margin: auto;
}

@media (max-width: 768px) {
    .responsive-dialog.e-dlg-container .e-dlg-content {
        width: 90vw;
    }
}



















/*#region SyncFusion Navmenu*/










/* Button layout - ensure horizontal alignment */
.e-grid .grid-buttons {
    justify-content: center; /* Center the buttons horizontally */
    align-items: center; /* Center vertically */
    padding: 0;
    width: 36px; /* Set consistent width for buttons */
    height: 36px; /* Set consistent height for buttons */
    border: none; /* Remove borders */
    cursor: pointer; /* Pointer cursor on hover */
}

    /* Ensure the icon inside the button is centered and properly sized */
    .e-grid .grid-buttons .gridview-icons {
        background-repeat: no-repeat;
        background-position: center center; /* Center the icon */
        width: 16px; /* Set consistent width for icons */
        height: 16px; /* Set consistent height for icons */
        background-size: contain; /* Ensure icon stays within bounds of button */
        margin: -4px 0 0 -4px; /* Center the icon */
        filter: invert(1); /* Invert icon colors if necessary */
        display: inline-block; /* Make sure the icon is inline and centered */
    }


/* Sample specific styles*/
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
/* Specific styles for TreeView component expandable && collapse icon element*/
.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
    float: right;
}

.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
    margin: 10px;
}

.e-bigger .sidebar-treeview .e-treeview .e-icon-collapsible,
.e-bigger .sidebar-treeview .e-treeview .e-icon-expandable {
    margin: 8px;
}
/* Specific styles for TreeView component*/
.sidebar-treeview .e-treeview,
.sidebar-treeview .e-treeview .e-ul {
    padding: 0;
    margin: 0;
}

#wrapper .sidebar-treeview {
    z-index: 20 !important;
}
/* Specific styles for main-menu-header element */
.sidebar-treeview .main-menu .main-menu-header {
    color: #656a70;
    padding: 15px 15px 15px 0;
    font-size: 14px;
    width: 13em;
    margin: 0;
    margin-top: 50px;
}

.material-dark .sidebar-treeview .main-menu .main-menu-header, .highcontrast .sidebar-treeview .main-menu .main-menu-header,
.fabric-dark .sidebar-treeview .main-menu .main-menu-header, .bootstrap-dark .sidebar-treeview .main-menu .main-menu-header,
.tailwind-dark .sidebar-treeview .main-menu .main-menu-header {
    color: white;
}

.material-dark .sidebar-treeview .main-treeview .icon {
    color: white;
}

#main-text .sidebar-heading {
    font-size: 16px;
}

.e-bigger #main-text .sidebar-heading {
    font-size: 18px;
}
/* specifies the table of content area styles */
.sidebar-treeview .table-content {
    padding: 20px 18px;
    height: 5em;
}

.material .sidebar-treeview .table-content {
    padding: 20px 14px;
}

.bootstrap4 .sidebar-treeview .table-content,
.highcontrast.e-bigger .sidebar-treeview .table-content,
.fabric.e-bigger .sidebar-treeview .table-content,
.fabric-dark.e-bigger .sidebar-treeview .table-content {
    padding: 20px 22px;
}

.bootstrap .sidebar-treeview .table-content,
.bootstrap-dark .sidebar-treeview .table-content {
    padding: 20px 12px;
}

.highcontrast .sidebar-treeview .table-content {
    padding: 20px 18px;
}

.fabric .sidebar-treeview .table-content,
.fabric-dark .sidebar-treeview .table-content {
    padding: 20px 16px;
}

.bootstrap.e-bigger .sidebar-treeview .table-content,
.bootstrap-dark.e-bigger .sidebar-treeview .table-content {
    padding: 20px;
}

.bootstrap4.e-bigger .sidebar-treeview .table-content {
    padding: 20px 30px;
}

.material.e-bigger .sidebar-treeview .table-content {
    padding: 20px 18px;
}

.e-bigger .sidebar-treeview .table-content {
    padding: 20px 27px;
}
/*Specific styles for content area elements */
#main-text .sidebar-content .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

#main-text .sidebar-content {
    padding: 15px;
    font-size: 14px;
}

.e-bigger #main-text .sidebar-content {
    font-size: 16px;
}

#main-text .paragraph-content {
    padding: 15px 0;
    font-weight: normal;
    font-size: 14px;
}

.sidebar-treeview .main-treeview .icon {
    font-family: 'fontello';
    font-size: 16px;
    margin: -4px 0;
}

#wrapper .e-toolbar .e-icons {
    font-size: 20px;
}


.e-bigger .e-folder {
    font-size: 18px;
}

.e-folder {
    text-align: center;
    font-weight: 500;
    font-size: 16px
}
/* Specific styles for TreeView component*/
.sidebar-treeview .e-treeview .e-text-content {
    padding-left: 18px;
}

.material .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 14px;
}

.bootstrap4 .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 22px;
}

.bootstrap .sidebar-treeview .e-treeview .e-text-content,
.bootstrap-dark .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 12px;
}

.fabric .sidebar-treeview .e-treeview .e-text-content,
.fabric-dark .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 16px
}

.bootstrap.e-bigger .sidebar-treeview .e-treeview .e-text-content,
.bootstrap-dark.e-bigger .sidebar-treeview .e-treeview .e-text-content,
.bootstrap.e-bigger .sidebar-treeview .e-treeview .e-list-icon + .e-list-text,
.bootstrap-dark.e-bigger .sidebar-treeview .e-treeview .e-list-icon + .e-list-text {
    padding-left: 20px;
}

.bootstrap4.e-bigger .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 30px;
}

.tailwind-dark.e-bigger .sidebar-treeview .e-treeview .e-text-content,
.tailwind.e-bigger .sidebar-treeview .e-treeview .e-text-content,
.bootstrap5.e-bigger .sidebar-treeview .e-treeview .e-text-content,
.bootstrap5-dark.e-bigger .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 26px;
}

.material.e-bigger .sidebar-treeview .e-treeview .e-text-content,
.highcontrast .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 18px;
}

.e-bigger .sidebar-treeview .e-treeview .e-text-content {
    padding-left: 22px;
}

.sidebar-treeview .main-treeview .icon-microchip::before {
    content: '\e806';
}

.sidebar-treeview .main-treeview .icon-thumbs-up-alt::before {
    content: '\e805';
}

.sidebar-treeview .main-treeview .icon-docs::before {
    content: '\e802';
}

.sidebar-treeview .main-treeview .icon-th::before {
    content: '\e803';
}

.sidebar-treeview .main-treeview .icon-code::before {
    content: '\e804';
}

.sidebar-treeview .main-treeview .icon-chrome::before {
    content: '\e807';
}

.sidebar-treeview .main-treeview .icon-up-hand::before {
    content: '\e810';
}

.sidebar-treeview .main-treeview .icon-bookmark-empty::before {
    content: '\e811';
}

.sidebar-treeview .main-treeview .icon-help-circled::before {
    content: '\e813';
}

.sidebar-treeview .main-treeview .icon-doc-text::before {
    content: '\e812';
}

.sidebar-treeview .main-treeview .icon-circle-thin::before {
    content: '\e808';
}
/* Specific styles for Toolbar component */
.tailwind-dark #wrapper .e-toolbar {
    border-bottom: 1px solid #4b5563;
}

.material #wrapper .e-toolbar {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.tailwind #wrapper .e-toolbar {
    border-bottom: 1px solid #e5e7eb;
}

.bootstrap5-dark #wrapper .e-toolbar {
    border-bottom: 1px solid #444c54;
}

.bootstrap5 #wrapper .e-toolbar {
    border-bottom: 1px solid #d2d6de;
}




#wrapper .main-content {
    height: 380px;
}
/* Specific styles for Overall wrapper element*/
.material .sidebar-treeview {
    border-right: 1px solid rgba(0,0,0,0.12) !important;
}

.fabric .sidebar-treeview {
    border-right: 1px solid #eaeaea !important;
}

.tailwind .sidebar-treeview {
    border-right: 1px solid #d7d7d7 !important;
}

.bootstrap5-dark .sidebar-treeview {
    border-right: 1px solid #444c54 !important;
}

.bootstrap5 .sidebar-treeview {
    border-right: 1px solid #dee2e6 !important;
}

.material-dark .sidebar-treeview {
    border-right: 1px solid #616161 !important;
}

.fabric-dark .sidebar-treeview {
    border-right: 1px menu #414040 !important;
}

.tailwind-dark .sidebar-treeview {
    border-right: 1px solid #4b5563 !important;
}

.bootstrap5 .e-folder-name, .bootstrap5-dark .e-folder-name {
    margin-top: -2px;
}

.bootstrap4 .e-folder-name,
.bootstrap .e-folder-name, .bootstrap-dark .e-folder-name {
    margin-top: 3px;
}

.material .e-folder-name, .material-dark .e-folder-name {
    margin-top: 1px;
}

/*.bootstrap5\.3 .sidebar-treeview .e-treeview .e-icon-collapsible,
.bootstrap5\.3 .sidebar-treeview .e-treeview .e-icon-expandable,
.bootstrap5\.3-dark .sidebar-treeview .e-treeview .e-icon-collapsible,
.bootstrap5\.3-dark .sidebar-treeview .e-treeview .e-icon-expandable,
.highcontrast .sidebar-treeview .e-treeview .e-icon-collapsible,
.highcontrast .sidebar-treeview .e-treeview .e-icon-expandable {
    margin: 3px;
}*/

/* Top Bar */
.topbar {
    background-color: var(--main-color);
    color: white;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*    height: var(--top-bar-height) !important;
*/ z-index: 1001;
    display: flex;
    align-items: center;
}

.e-toolbar-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto; /* Ensure it wraps tightly around content */
    padding: 0; /* Remove unwanted padding */
    margin: 0; /* Remove unwanted margin */
}

    .e-toolbar-left img {
        /*    transform: scale(0.4);
*/ transform-origin: top left;
        width: 100px; /* Original width */
        height: 100px;
        pointer-events: none; /* prevent ghost hitbox */
        margin-left: 20px;
    }

.topbar .first-item {
    margin-left: 1.3rem !important;
}

.topbar.auth {
    height: 55px !important;
    transition: height 0.3s ease;
}

.topbar.guest {
    height: 95px !important;
    transition: height 0.3s ease;
}


.topbar .e-toolbar-items {
    align-items: center;
    padding-left: 10px; /* Adjust if needed */
    background-color: var(--main-color) !important;
}

.topbar.auth .e-toolbar-item:first-child {
    margin-left: 0; /* Ensure the menu button is flush left */
}

.topbar.auth .e-folder {
    display: flex;
    align-items: center;
    margin-left: 10px; /* Adjust if needed */
}

.guest-menu-item {
    padding: 0 10px;
    cursor: pointer;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 100%;
    transition: background 0.2s ease;
}

    .guest-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }


.content-wrapper .e-toolbar {
    /*background-color: #123456;
    color: white;*/
    border: none;
    align-items: center;
}

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
.e-toolbar .e-toolbar-items .e-toolbar-item .e-icons {
    color: white;
}

.e-toolbar-item button {
    background-color: var(--main-color) !important;
}

    .e-toolbar-item button:focus {
        box-shadow: none !important;
        outline: none !important;
    }

/* Style the full toolbar button (not just the icon) */
.e-toolbar .e-toolbar-items .e-toolbar-item .e-btn.menu-button {
    background-color: red !important;
    color: white !important; /* Text/icon color */
    border: none;
}

    /* Optional: hover effect */
    .e-toolbar .e-toolbar-items .e-toolbar-item .e-btn.menu-button:hover {
        background-color: red;
    }

.menu-button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: red !important;
    box-shadow: none !important;
    outline: none !important;
}

    .menu-button::before {
        color: white !important;
        font-size: 20px; /* Optional: to adjust size */
    }

    .menu-button:hover::before {
        color: gray !important;
        background-color: transparent !important;
    }




.toolbar-menu {
    padding: 1rem;
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    flex-wrap: wrap;
    text-align: center;
    white-space: nowrap;
}

.toolbar-item {
    cursor: pointer;
    color: white;
}

    .toolbar-item:hover {
        color: #ffca28;
    }

/* Style for center menu items */
.toolbar-menu {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    height: 100%;
}


@media (max-width: 1024px) {
    .toolbar-menu {
        display: none;
    }

    .guest-first-item {
        display: inline-block !important;
    }
}

@media (min-width: 1024.1px) {
    .guest-first-item {
        display: none !important;
    }

    .menu-button {
        display: inline-block !important;
    }
}






/* Fixed top toolbar */
/* Side Menu */
.sidebar-treeview {
    background-color: var(--main-color); /* Deep Sea Blue */
    color: white;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1001;
}

    /* TreeView list items - text color */
    .sidebar-treeview .main-treeview .e-list-item,
    .sidebar-treeview .main-treeview .e-list-item .e-fullrow,
    .sidebar-treeview .main-treeview .e-list-item .e-text-content {
        color: white;
    }









/* On hover */
.sidebar-treeview .main-treeview .e-list-item.e-hover {
    background-color: #1d4e89; /* Slightly lighter Deep Sea Blue */
    color: white;
}

        /* Selected TreeView Item */
        .sidebar-treeview .main-treeview .e-list-item.e-active {
            background-color: #757575; /* Sonic Silver */
            color: white;
        }

/* Optional: Textbox Styling */
.table-content .e-input-group {
    background-color: var(--main-color);
    border-color: #757575;
}

    .table-content .e-input-group input {
        color: white;
    }
/* Ensure treeview text is white */
.main-treeview .e-list-text {
    color: white !important;
}




.e-template-list .e-active,
.e-list-text {
    background-color: transparent !important; /* Replace with your color */
    color: white !important; /* Optional: override text color */
}

/* Selected item text color */
.main-treeview .e-active .e-list-text {
    color:white !important; /* Bright green */
    font-weight: bold;
}
/* Optional: selected background color */
.main-treeview .e-active {
    background-color: transparent !important;
}
/* Change background of selected item */
.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: var(--main-color) !important;
    border-color: white !important;
}
/* Change background of selected item of dock-sidebar */
.e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
    background-color: var(--main-color) !important;
    border-color: white !important;
}

/* Optional: hovered item */
.main-treeview .e-hover {
    background-color: transparent !important;
}

/* Override Syncfusion's default blue background for selected item */
.main-treeview .e-list-item.e-active,
.main-treeview .e-list-item.e-active:hover {
    background-color: transparent !important;
}

/* Optional: hover styling for non-selected items */
.main-treeview .e-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.guest-treeview {
    top: 2rem;
}


/*#endregion*/

/* Apply flex display to the toolbar */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Align items to the right */
.topbar-right {
    margin-left: auto; /* Pushes this item to the right */
}

/* Flex display for the links to be arranged horizontally */
.topbar-links {
    display: flex;
    gap: 20px;
}

    /* Styling for the links */
    .topbar-links a {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .topbar-links a:hover {
            color: #007bff;
        }

.login-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 280px;
    z-index: 1000;
}
.login-dialog-wrapper {
    opacity: 0;
    padding:1rem;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: fadeInSlide 0.4s ease forwards;
}

    .login-dialog-wrapper.show {
        opacity: 1;
        transform: translateY(0);
    }
.login-dialog-wrapper h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.login-dialog-wrapper hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 16px;
}
@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cart-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 280px;
    z-index: 1000;
}

.user-info {
    display: flex;
    align-items:flex-start;
    margin-bottom: 0px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 5px;
}

.user-details {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 10px;
}

.user-name {
    font-weight: bold;
    line-height:0px;
}

.user-email {
    font-size: 0.85rem;
    color: #555;
}

.login-option {
    padding: 10px 14px;
    border-radius: var(--border-radius);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #333; /* Same text color as sidebar items */
    
}

    .login-option:hover {
        background-color: #f5f5f5; /* Matches hover background of sidebar */
        color: #000;
    }








.scalable-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

@media (max-width: 1000px) {
    .scalable-wrapper {
        transform: scale(0.9);
    }
}

@media (max-width: 800px) {
    .scalable-wrapper {
        transform: scale(0.8);
    }
}

@media (max-width: 600px) {
    .scalable-wrapper {
        transform: scale(0.7);
    }
}

@media (max-width: 400px) {
    .scalable-wrapper {
        transform: scale(0.6);
    }
}

















/*#region Syncfusion Sidebar dock */
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.maincontent {
    height: 355px;
}

#wrapper .content {
    font-size: 14px;
    padding: 15px;
}


/* Specifies the Sidebar component related styles
    .dockSidebar.e-sidebar.e-right.e-close {
        visibility: visible;
        transform: translateX(0%);
    }

    .dockSidebar .e-sb-icon::before {
        font-size: 24px;
    }

    .dockSidebar.e-close .sidebar-item {
        padding: 5px 20px;
    }

    .dockSidebar.e-dock.e-close span.e-text {
        display: none;
    }

    .dockSidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }

    .dockSidebar span.e-icons {
        line-height: 2
    }

    .e-open .e-icons {
        margin-right: 16px;
    }

    .e-open .e-text {
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 23px;
        font-size: 15px;
    }
    /* Specifies the ListView component related styles */
.e-bigger .dockSidebar .e-listview .e-list-icon + .e-list-text {
    padding-left: 10px;
}

.bootstrap4.e-bigger .dockSidebar .e-listview .e-list-icon + .e-list-text {
    padding-left: 4px;
}

.bootstrap4.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.bootstrap.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.highcontrast.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -10px;
}

.bootstrap.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.bootstrap-dark.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -15px;
}

.material.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.material-dark.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -18px;
}

.fabric.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.fabric-dark.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -18px;
}

.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons::before {
    font-size: 26px;
}

.bootstrap5.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.bootstrap5-dark.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-bottom: -10px;
}

.tailwind.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons,
.tailwind-dark.e-bigger .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-bottom: -3px;
}

.dockSidebar .e-listview .e-list-icon.sb-icons {
    margin: 0;
    width: 30px;
}

.material .dockSidebar .e-listview .e-list-icon.sb-icons,
.material-dark .dockSidebar .e-listview .e-list-icon.sb-icons,
.bootstrap .dockSidebar .e-listview .e-list-icon.sb-icons,
.bootstrap-dark .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -8px;
}

.tailwind .dockSidebar .e-listview .e-list-icon.sb-icons,
.tailwind-dark .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin: 0 5px;
    margin-top: -4px;
}

.bootstrap4 .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -8px;
}

.bootstrap5 .dockSidebar .e-listview .e-list-icon.sb-icons,
.bootstrap5-dark .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-bottom: -12px;
}

.fabric .dockSidebar .e-listview .e-list-icon.sb-icons,
.fabric-dark .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin-top: -4px;
}

.fluent2 .dockSidebar .e-listview .e-list-icon.sb-icons,
.fluent2-dark .dockSidebar .e-listview .e-list-icon.sb-icons,
.fluent2-highcontrast .dockSidebar .e-listview .e-list-icon.sb-icons {
    margin: 6px 0 0 6px;
}

.fluent2 .dockSidebar.e-close .e-listview .e-list-icon.sb-icons,
.fluent2-dark .dockSidebar.e-close .e-listview .e-list-icon.sb-icons,
.fluent2-highcontrast .dockSidebar.e-close .e-listview .e-list-icon.sb-icons {
    padding: 2px;
    margin-left: 10px;
}

.e-listview .e-list-icon {
    width: 20px;
    height: 20px;
}

.fluent2 .dockSidebar.e-close .e-listview .e-list-text,
.fluent2-dark .dockSidebar.e-close .e-listview .e-list-text,
.fluent2-highcontrast .dockSidebar.e-close .e-listview .e-list-text {
    padding: 0;
}

.dockSidebar .e-listview {
    border: 0px;
    border-radius: 0;
}
/* Specifies the Toolbar component related styles */
.dockToolbar.e-toolbar {
    border-left: 0px;
    border-right: 0px;
}

.e-toolbar {
    background-color: var(--main-color);
}

    .e-toolbar .e-toolbar-item {
/*        background-color: var(--main-color);
*/    }

    .e-toolbar .e-toolbar-items {
/*        background-color: var(--main-color);
 */   }

.e-sidebar {
    background-color: #222;
}

.e-list-text {
    color: white;
}


.e-text-content {
    margin-left: 7px;
}

/* Specifies the ListView template item related styles */
.fabric .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.material .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.material-dark .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.bootstrap .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.fabric-dark .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.bootstrap-dark .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.bootstrap5 .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.bootstrap4 .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.bootstrap5-dark .dockSidebar .e-listview:not(.e-list-template) .e-list-item {
    padding-left: 16px;
    padding-right: 16px;
}

.tailwind .e-dock.e-close.dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.tailwind-dark .e-dock.e-close.dockSidebar .e-listview:not(.e-list-template) .e-list-item {
    padding-left: 12px;
    padding-right: 12px;
}

.highcontrast .dockSidebar .e-listview:not(.e-list-template) .e-list-item {
    padding-left: 14px;
    padding-right: 14px;
}
/* Specifies the Toolbar component related styles in light themes*/
.material .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}

.fabric .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}

.tailwind .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}

.bootstrap5-dark .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}

.bootstrap5 .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}
/* Specifies the Toolbar component related styles in dark themes*/
.material-dark .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}

.fabric-dark .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}

.tailwind-dark .dockToolbar.e-toolbar {
    border-bottom: 1px solid var(--main-color);
}
/* Specifies the Sidebar component related styles in light themes*/
.material .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.fabric .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.tailwind .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}
/* Specifies the Sidebar component related styles in dark themes*/
.bootstrap5-dark .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.bootstrap5 .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.material-dark .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.fabric-dark .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.tailwind-dark .dockSidebar {
    border-right: 1px solid var(--main-color) !important;
}

.e-bigger.bootstrap5 .dockSidebar .e-listview:not(.e-list-template) .e-list-item,
.e-bigger.bootstrap5-dark .dockSidebar .e-listview:not(.e-list-template) .e-list-item {
    height: 43px;
}

#wrapper .dockSidebar {
    z-index: 20 !important;
}
/* Specifies the Sidebar component icons related styles*/
@@font-face {
    font-family: 'sb-icons';
    font-weight: normal;
    font-style: normal;
}

.dockSidebar .e-sb-icon {
    font-family: 'sb-icons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Specifies the ListView component icons related styles*/
.dockSidebar .icon-chart::before {
    content: '\e906';
}

.dockSidebar .icon-grid::before {
    content: '\e916';
}

.dockSidebar .icon-datepicker::before {
    content: '\e90f';
}

.dockSidebar .icon-dropdownlist::before {
    content: '\e913';
}

.dockSidebar .icon-dialog::before {
    content: '\e911';
}
/* Specifies the Toolbar component related styles*/
.e-folder {
    font-size: 16px;
    font-weight: 500;
}

.e-bigger .e-folder {
    font-size: 18px;
}
/* Specifies the Toolbar component related styles for light themes*/
.bootstrap5 .e-folder-name, .bootstrap5-dark .e-folder-name {
    margin-top: -2px;
}

.bootstrap4 .e-folder-name,
.bootstrap .e-folder-name, .bootstrap-dark .e-folder-name {
    margin-top: 3px;
}

.material .e-folder-name, .material-dark .e-folder-name {
    margin-top: 1px;
}

@@font-face {
    font-family: 'Material_toolbar';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.e-bigger .e-tbar-btn .tb-icons {
    font-size: 20px;
}

.e-tbar-btn .tb-icons {
    font-family: 'Material_toolbar';
    speak: none;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.e-toolbar .e-icons {
    font-size: 20px;
}

.e-tbar-menu-icon:before {
    content: "\e718";
}

.material3 .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.material3-dark .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 8px;
}

.bootstrap5:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.bootstrap5-dark:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.bootstrap4:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.bootstrap:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.bootstrap-dark:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.highcontrast:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.material:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.material-dark:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 10px;
}

.tailwind:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.tailwind-dark:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 12px;
    padding: 2px;
}

.tailwind:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:first-child > .e-toolbar-item:last-child,
.tailwind-dark:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:first-child > .e-toolbar-item:last-child {
    padding: 0;
}

.fabric:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.fabric-dark:not(.e-bigger) .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 8px;
}

.bootstrap5.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.bootstrap5-dark.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.highcontrast.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 4px;
}

.material.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.material-dark.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 6px;
}

.bootstrap4.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.tailwind.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
.tailwind-dark.e-bigger .dockToolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 8px;
}
/*#endregion */

/* Apply specific images to each button */
.custom-icon {
    display: inline-block;
    width: 16px; /* Set icon width */
    height: 16px; /* Set icon height */
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px; /* Add spacing between icon and text */
    vertical-align: middle; /* Align with text */
    filter: brightness(0) invert(1); /* Makes black SVG white */
}
.circle-icon {
    display: inline-block;
    width: 16px; /* Set icon width */
    height: 16px; /* Set icon height */
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 8px;
    vertical-align: middle; /* Align with text */
    filter: brightness(0) invert(1); /* Makes black SVG white */
}

.circle-stepper-icon {
    display: inline-block;
    width: 20px; /* Set icon width */
    height: 20px; /* Set icon height */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Align with text */
    filter: brightness(0) invert(1); /* Makes black SVG white */
}

.custom-button-icon {
    position:relative;
    width: 16px; /* Set icon width */
    height: 16px; /* Set icon height */
    background-size: contain;
    background-repeat: no-repeat;
    left: 8px;
    /*    background-color:black;*/
    vertical-align: middle; /* Align with text */
    filter: brightness(0) invert(1); /* Makes black SVG white */
}

/*.e-hscroll-content{
    background-color:white;
}*/
/*.custom-dock-sidebar .custom-toolbar .e-toolbar-item .e-tbar-btn {
    background-image: url('/icons/menu.svg') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    margin: 5px !important;
    min-width: 27px !important;
    margin-right: 20px !important;
    background-color: transparent;
    border: none;
}

    .custom-dock-sidebar .custom-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon::before {
        content: '' !important;
        width: 10px !important;
        height: 10px !important;
        font-size: 10px !important;
        min-width: 10px !important;
        line-height: 10px !important;
    }*/
.custom-icon-black {
    display: inline-block;
    width: 16px; /* Set icon width */
    height: 16px; /* Set icon height */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Align with text */
    filter: brightness(0) invert(0); /* Makes black SVG white */
}
.custom-icon-disabled {
    display: inline-block;
    width: 16px; /* Set icon width */
    height: 16px; /* Set icon height */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Align with text */
    /*filter: brightness(0) invert(0);*/ /* Makes black SVG white */
    /*filter: brightness(0) saturate(100%) invert(26%) sepia(92%) saturate(2046%) hue-rotate(347deg) brightness(96%) contrast(101%);*/ /*red*/
    filter: brightness(0) saturate(100%) invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);/*light gray*/
}

.login-option .custom-icon {
    filter: brightness(0) invert(0); /* Makes black SVG white */
}


.home-icon {
    background-image: url('/icons/home-2502.svg');
}

.check-icon {
    background-image: url('/icons/check.svg');
}

.cancelled-icon {
    background-image: url('/icons/cancelled.svg');
}

.products-icon {
    background-image: url('/icons/delivery-box-11393.svg');
}

.orders-icon {
    background-image: url('/icons/food.svg');
}

.delete-icon {
    background-image: url('/icons/delete.svg');
}

.edit-icon {
    background-image: url('/icons/edit.svg');
}

.pos-icon {
    background-image: url('/icons/pos.svg');
}
.drivers-icon {
    background-image: url('/icons/drivers.svg');
}
.rewards-icon {
    background-image: url('/icons/rewards.svg');
}

.coupons-icon {
    background-image: url('/icons/invoice-8860.svg');
}

.customers-icon {
    background-image: url('/icons/user-256.svg');
}

.settings-icon {
    background-image: url('/icons/settings.svg');
}


.login-icon {
    background-image: url('../icons/login.svg');
}

.register-icon {
    background-image: url('../icons/register.svg');
}

.logout-icon {
    background-image: url('/icons/exit-logout-2857.svg');
}


.profile-icon {
    background-image: url('/icons/user-or-person-black-circle-20714.svg');
}

.cancel-icon {
    background-image: url('/icons/cancel.svg');
}

.refund-icon {
    background-image: url('/icons/refund.svg');
    width: 18px; /* Set icon width */
    height: 18px; /* Set icon height */
}
.undo-icon {
    background-image: url('/icons/undo.svg');
}



@media (max-width: 768px) {
     .order-label {
        display: none;
    }
}












    .advanced-stepper {
        --stepper-primary: #007bff;
        --stepper-secondary: #6c757d;
        --stepper-success: #28a745;
        --stepper-danger: #dc3545;
        --stepper-warning: #ffc107;
        --stepper-light: #f8f9fa;
        --stepper-dark: #343a40;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .stepper-header {
        margin-bottom: 2rem;
        text-align: center;
    }

        .stepper-header h3 {
            margin: 0 0 0.5rem 0;
            color: var(--stepper-dark);
        }

    .stepper-description {
        color: var(--stepper-secondary);
        margin: 0;
    }

    /* Horizontal Stepper */
    .stepper-horizontal .stepper-nav.horizontal {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
        position: relative;
    }

    .stepper-horizontal .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
        max-width: 200px;
    }

    .stepper-horizontal .step-indicator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--stepper-light);
        border: 2px solid var(--stepper-secondary);
        color: var(--stepper-secondary);
        font-weight: 600;
        transition: all 0.3s ease;
        z-index: 2;
        position: relative;
    }

    .stepper-horizontal .step-item.active .step-indicator {
        background: var(--stepper-primary);
        border-color: var(--stepper-primary);
        color: white;
    }

    .stepper-horizontal .step-item.completed .step-indicator {
        background: var(--stepper-success);
        border-color: var(--stepper-success);
        color: white;
    }

    .stepper-horizontal .step-item.status-error .step-indicator {
        background: var(--stepper-danger);
        border-color: var(--stepper-danger);
        color: white;
    }

    .stepper-horizontal .step-item.status-warning .step-indicator {
        background: var(--stepper-warning);
        border-color: var(--stepper-warning);
        color: var(--stepper-dark);
    }

    .stepper-horizontal .step-label {
        margin-top: 0.5rem;
        text-align: center;
        max-width: 120px;
    }

    .stepper-horizontal .step-title {
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--stepper-dark);
        margin-bottom: 0.25rem;
    }

    .stepper-horizontal .step-desc {
        font-size: 0.75rem;
        color: var(--stepper-secondary);
        line-height: 1.2;
    }

    .stepper-horizontal .step-optional {
        color: var(--stepper-secondary);
        font-style: italic;
    }

    .stepper-horizontal .step-connector {
        position: absolute;
        top: 20px;
        left: calc(50% + 20px);
        right: calc(-50% + 20px);
        height: 2px;
        background: var(--stepper-secondary);
        z-index: 1;
        transition: background-color 0.3s ease;
    }

        .stepper-horizontal .step-connector.completed {
            background: var(--stepper-success);
        }

    /* Vertical Stepper */
    .stepper-vertical .stepper-nav.vertical {
        margin-bottom: 2rem;
    }

    .stepper-vertical .step-item {
        display: flex;
        margin-bottom: 1.5rem;
        align-items: flex-start;
    }

    .stepper-vertical .step-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 1rem;
    }

    .stepper-vertical .step-indicator {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--stepper-light);
        border: 2px solid var(--stepper-secondary);
        color: var(--stepper-secondary);
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .stepper-vertical .step-item.active .step-indicator {
        background: var(--stepper-primary);
        border-color: var(--stepper-primary);
        color: white;
    }

    .stepper-vertical .step-item.completed .step-indicator {
        background: var(--stepper-success);
        border-color: var(--stepper-success);
        color: white;
    }

    .stepper-vertical .step-connector {
        width: 2px;
        height: 40px;
        background: var(--stepper-secondary);
        margin-top: 0.5rem;
        transition: background-color 0.3s ease;
    }

        .stepper-vertical .step-connector.completed {
            background: var(--stepper-success);
        }

    .stepper-vertical .step-content {
        flex: 1;
        padding-top: 0.25rem;
    }

    .stepper-vertical .step-title {
        font-weight: 600;
        color: var(--stepper-dark);
        margin-bottom: 0.25rem;
    }

    .stepper-vertical .step-desc {
        font-size: 0.875rem;
        color: var(--stepper-secondary);
        line-height: 1.4;
    }

    /* Actions */
    .stepper-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
        gap: 1rem;
    }

    .btn-stepper-previous,
    .btn-stepper-next,
    .btn-stepper-skip {
        padding: 0.5rem 1.5rem;
        border: none;
        border-radius: 0.375rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .btn-stepper-next {
        background: var(--stepper-primary);
        color: white;
    }

        .btn-stepper-next:hover:not(:disabled) {
            background: #0056b3;
        }

    .btn-stepper-previous {
        background: var(--stepper-secondary);
        color: white;
    }

    .btn-stepper-skip {
        background: transparent;
        border: 1px solid var(--stepper-secondary);
        color: var(--stepper-secondary);
    }

        .btn-stepper-previous:disabled,
        .btn-stepper-next:disabled,
        .btn-stepper-skip:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

    /* Progress Bar */
    .stepper-progress {
        margin-top: 1rem;
        position: relative;
        height: 4px;
        background: var(--stepper-light);
        border-radius: 2px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background: var(--stepper-primary);
        transition: width 0.3s ease;
    }

    .progress-text {
        position: absolute;
        right: 0;
        top: -1.5rem;
        font-size: 0.75rem;
        color: var(--stepper-secondary);
    }

    /* Themes */
    .stepper-modern {
        --stepper-primary: var(--success-notification);
        --stepper-success: var(--Ablue);
        --stepper-light: #f1f5f9;
    }

        .stepper-modern .step-indicator {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

    .stepper-material {
        --stepper-primary: #1976d2;
        --stepper-success: #388e3c;
    }

        .stepper-material .step-indicator {
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

    /* Disabled states */
    .step-item.disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
    }

        .step-item.disabled .step-indicator {
            background: var(--stepper-light);
            border-color: #dee2e6;
            color: #adb5bd;
        }

    /* Responsive */
    @media (max-width: 768px) {
        .stepper-horizontal .step-label {
            display: none;
        }

        .stepper-horizontal .step-indicator {
            width: 32px;
            height: 32px;
            font-size: 0.75rem;
        }

        .stepper-actions {
            flex-direction: column;
            gap: 0.5rem;
        }

            .stepper-actions > * {
                width: 100%;
            }
    }





/*#region New non-Syncfusion Toast*/
.toast-container {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10000 !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast-message {
    padding: 0.75rem 1.25rem !important;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

    .toast-message.info {
        background-color: #007bff;
    }

    .toast-message.success {
        background-color: #28a745;
    }

    .toast-message.warning {
        background-color: #ffc107;
        color: #212529;
    }

    .toast-message.error {
        background-color: #dc3545;
    }

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/*#endregion*/