@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

*,
body {
    font-family: "Montserrat", sans-serif;
}

:root {
    --edit-btn-color: #ece4d1;
    --delete-btn-color: #ffcecf;
    --block-btn-color: #f0f0f0;
    --unblock-btn-color: #f0f0f0;
    --block-badge-color: rgba(176, 7, 7, 0.2);
    --active-badge-color: rgba(52, 199, 89, 0.12);
    --pending-badge-color: rgba(255, 204, 0, 0.2);
    --shipped-and-deliver-badge-color: rgba(0, 122, 255, 0.14);
    --cancel-badge-color: rgba(255, 59, 48, 0.12);
    --stock-badge-color: rgba(240, 240, 240, 1);
    --placed-status-color: rgba(255, 204, 0, 0.2);
    --packed-status-color: rgba(255, 149, 0, 0.2);
    --delivered-status-color: rgba(0, 122, 255, 0.2);
    --cancelled-status-color: rgba(255, 59, 48, 0.2);
    --complete-status-color: rgba(52, 199, 89, 0.2);
    --black-color: #000000;
    --sidebar-active-tile: rgba(255, 255, 255, 1);
    --text-white-color: rgba(255, 255, 255, 1);
    --page-background-color: #f8f4ed;
    --red-popup-btn-color: rgba(217, 3, 3, 1);
    --white-color: #ffffff;
    --dark-gray-color: #344054;
    --light-gray-color: #475467;
}

/* general side bar  */
.main-sidebar {
    background-color: var(--black-color);
}
.brand-link .brand-image {
    max-height: 76px;
    margin-left: 2rem;
    margin-right: 0px;
    float: none;
}
.nav-item > a {
    font-weight: 400;
    font-size: 14px;
    line-height: 17.07px;
    letter-spacing: 0%;
    color: var(--sidebar-active-tile);
}
.nav-item > a > p {
    font-weight: 400;
    font-size: 14px;
    line-height: 17.07px;
    letter-spacing: 0%;
    color: var(--sidebar-active-tile);
}
.nav-pills .nav-link.active {
    width: 233;
    height: 45;
    gap: 10px;
    border-radius: 8px;
    padding-top: 10px;
    padding-right: 18px;
    padding-bottom: 10px;
    padding-left: 18px;

    background-color: var(--text-white-color);
}
.nav-pills .nav-link.active p {
    color: var(--black-color);
    font-weight: 500;
}
.nav-item.menu-is-opening.menu-open .menu-link p {
    font-weight: 600;
}
.nmb-4 {
    margin-block: -4px !important;
}
.dropdown-content {
    display: none;
    /* Add other styling as needed */
}

.arrow-icon.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.nav-sidebar .nav-link > .right:nth-child(2) {
    right: 1rem;
}
/* general button css */
.edit-btn,
.delete-btn,
.block-btn,
.unblock-btn {
    width: 200;
    height: 48;
    border-radius: 50px;
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
    gap: 8px;
}
.edit-btn {
    background-color: var(--edit-btn-color);
}
.delete-btn {
    background-color: var(--delete-btn-color);
}

.block-btn {
    background-color: var(--block-btn-color);
}
.unblock-btn {
    background-color: var(--unblock-btn-color);
}
.red-popup-btn {
    height: 48;
    border-radius: 50px;
    gap: 8px;
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
    background-color: var(--red-popup-btn-color);
    color: var(--sidebar-active-tile);
}
.white-popup-btn {
    height: 48;
    border-radius: 50px;
    gap: 8px;
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
    background-color: var(--sidebar-active-tile);
    color: var(--black-color);
}
/* general status css  */
.block-badge,
.active-badge,
.pending-badge,
.shipped-badge,
.cancelled-badge,
.stock-badge,
.delivered-badge {
    height: 29;
    border-radius: 8px;
    padding-top: 6px;
    padding-right: 8px;
    padding-bottom: 6px;
    padding-left: 8px;
    gap: 8px;
}
.block-badge {
    width: 56;
    background-color: var(--block-badge-color);
}
.active-badge-color {
    background-color: var(--active-badge-color);
}
.pending-badge-color {
    background-color: rgba(255, 204, 0, 0.7);
}
.shipped-badge {
    width: 76px;
    background-color: var(--shipped-and-deliver-badge-color);
}

.cancelled-badge {
    width: 87px;
    background-color: var(--cancel-badge-color);
}
.stock-badge {
    width: 105px;
    background-color: var(--stock-badge-color);
}
.pendingBadge {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #e8b00b;
    background: #fdf0bd;
    padding: 6px 8px;
    border-radius: 8px;
}

.resolvedBadge {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    background: #34c7591f;
    color: #34c759;
    padding: 6px 8px;
    border-radius: 8px;
}
.approvedBadge {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    background: #34c7591f;
    color: #34c759;
    padding: 6px 8px;
    border-radius: 8px;
}
.delivered-badge {
    width: 84px;
    background-color: var(--delivered-status-color);
}
.placed-status,
.packed-status,
.completed-status,
.cancelled-status,
.delivered-status {
    height: 22;
    border-radius: 99999px;
    padding-top: 3px;
    padding-right: 8px;
    padding-bottom: 3px;
    padding-left: 8px;
    gap: 4px;
    border-width: 1px;
}
.placed-status {
    width: 55px;
    background-color: var(--placed-status-color);
    color: rgba(255, 204, 0, 1);
}

.packed-status {
    width: 59px;
    background-color: var(--packed-status-color);
    color: rgba(255, 149, 0, 1);
}
.completed-status {
    width: 72px;
    background-color: var(--complete-status-color);
    color: rgba(52, 199, 89, 1);
}
.cancelled-status {
    width: 74px;
    background-color: var(--cancelled-status-color);
    color: rgba(255, 59, 48, 1);
}
.delivered-status {
    width: 71px;
    background-color: var(--delivered-status-color);
    color: rgba(0, 122, 255, 1);
}

/* general content section css  */
.content-header h1 {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 2.1rem;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--black-color);
}
.content-wrapper,
.content-header,
.main-header {
    background-color: var(--page-background-color);
}

.top-bar {
    background-color: var(--black-color);
    border-bottom-left-radius: 50px;
    padding: 10px 10px;
}
.pushmenu {
    display: none;
}
.main-header {
    border-bottom: none;
}
.btn.dropdown-btn {
    color: white;
}

/* general modal section css  */
.modal-content {
    background-color: #000000;
}
.modal-content-view {
    width: 537px;
    height: auto;
    text-align: center;
    border: none;
    border-radius: 11px;
}
/* general table  card section css  */
.table-card {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    box-shadow: none;
    border: none;
}

div::-webkit-scrollbar {
    width: 5px;
}
.table-responsive::-webkit-scrollbar {
    height: 5px;
}

div::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
.toast-success {
    background-color: #101312 !important; /* Solid color */
    color: white !important;
    opacity: 1 !important; /* Force full opacity */
    backdrop-filter: none !important; /* Optional: remove blur */
}
@media screen and (max-width: 992px) {
    .pushmenu {
        display: block;
    }
}
@media screen and (max-width: 768px) {
    .table-card {
        overflow-x: scroll;
    }
}