.fix-body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.order-items>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px dashed #EEE;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.ods {
    display: flex;
    font-size: 13px;
}

.ods>img {
    max-width: 100px;
    height: auto;
    border-radius: 5px;
}

.ods>div {
    flex: 1;
}

.ods small {
    display: block;
    margin-top: .5rem;
}

.abs-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.drawer {
    height: 100vh;
    padding: 12px 12px 24px;
    flex: 0 0 240px;
    max-width: 240px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.drawer-content {
    height: 100vh;
    overflow: auto;
    flex: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.drawer-wrapper {
    display: -webkit-flex;
    display: flex;
}

.sidebar-btn:hover {
    background-color: #f5f5f5;
}

.dark .sidebar-btn:hover {
    background-color: #171717;
}
@media (max-width: 767px) {

    .hamburger-menu {
        position: relative;
        z-index: 1200;
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        height: 22px;
        width: 28px;
        cursor: pointer;
    }

    .bar-top,
    .bar-middle,
    .bar-bottom {
        height: 2px;
        background: hsl(var(--foreground));
        border-radius: 5px;
        margin: 0;
        transform-origin: left;
        transition: all 0.5s;
    }

    .d-active .hamburger-menu .bar-top {
        transform: rotate(45deg);
    }

    .d-active .hamburger-menu .bar-middle {
        transform: translateX(1rem);
        opacity: 0;
    }

    .d-active .hamburger-menu .bar-bottom {
        transform: rotate(-45deg);
    }



    .drawer {
        position: fixed !important;
        left: -240px;
        -webkit-transition: 200ms ease-in-out;
        -moz-transition: 200ms ease-in-out;
        -o-transition: 200ms ease-in-out;
        transition: 200ms ease-in-out;
        background-color: hsl(var(--background));
        z-index: 1000;
        height: calc( 100vh - 50px );
        top: 50px;
    }

    .drawer-wrapper.d-active .drawer {
        left: 0;
    }

    .drawer-wrapper {
        display: block !important;
    }

    .m-navbar {
        position: fixed;
        width: 100%;
        z-index: 1100;
        background: transparent;
        height: 50px;
        padding: 14px;
        -webkit-box-shadow: 0 4px 2px -2px var(--nshadow);
        box-shadow: 0 4px 2px -2px var(--nshadow);
    }
}
/* Chrome / Edge / Safari autofill dark mode fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; /* gray-700 */
    -webkit-text-fill-color: #000 !important;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #020817 inset !important;
    -webkit-text-fill-color: #ffffff !important;
}
input[type="file"]::file-selector-button {
    background-color: #454545;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background-color: #3a3a3a;
}

/* datetime-local dark mode fix */
.dark input[type="datetime-local"] {
    color: #ffffff;
}

.dark input[type="datetime-local"]:focus {
    background-color: #454545;
    color: #ffffff;
}

/* Calendar / clock icon */
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
scrollbar-none::-webkit-scrollbar {
    display: none;
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* The base skeleton style */
.skeleton {
    background-color: #e0e0e0;
    background-image: linear-gradient(
            90deg,
            #e0e0e0 0px,
            #f0f0f0 40px,
            #e0e0e0 80px
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite border-box;
    border-radius: 4px;
    display: inline-block;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

[data-sonner-toast][data-type="success"] {
    background: #16a34a !important;
    color: white !important;
    border: none !important;
    font-size: 15px !important;
}

[data-sonner-toast][data-type="error"] {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    font-size: 15px !important;
}