/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.custom-font {
    font-family: "Arial", "Helvetica", sans-serif;
}

.bottom_content {
    position: fixed;
    /*bottom: 60px;*/
    width: 260px;
    cursor: pointer;
    font-weight: 400;
    bottom: 29px;
    left: 40px;
}

.bottom expand_sidebar {
    display: none;
}

.swal2-title,
.swal2-content {
    text-align: center;
}

.swal2-popup .swal2-styled-select {
    text-align: center;
}

.higher-modal {
    margin-bottom: 20%;
}

.menu_items.submenu {
    display: none;
    padding-left: 20px;
}

.submenu_item.show_submenu + .menu_items.submenu {
    display: block;
}

.arrow-left {
    transition: transform 0.3s ease;
}

.submenu_item.show_submenu .arrow-left {
    transform: rotate(90deg);
}

:root {
    --white-color: #fff;
    --blue-color: #4070f4;
    --grey-color: #707070;
    --grey-color-light: #aaa;
}

/*body {
    background-color: #e7f2fd;
    transition: all 0.5s ease;
    font-family: "Arial", "Helvetica", sans-serif;
}*/
body {
    /*background-color: #ffffff;*/
    background-color: #e7ebe9;
    transition: all 0.5s ease;
    font-family: "Arial", "Helvetica", sans-serif;
    margin-top: 60px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 300px; /* Optional padding for the content */
}


    body.dark {
        background-color: #333;
    }

    body.dark {
        --white-color: #333;
        --blue-color: #fff;
        --grey-color: #f2f2f2;
        --grey-color-light: #aaa;
    }

/* navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    /*background-color: var(--white-color);*/
    background-color: #2b3137;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    z-index: 1000;
    box-shadow: 0 0 2px var(--grey-color-light);
}

.logo_item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 22px;
    font-weight: 500;
    /*color: var(--blue-color);*/
    color: #4b4b4b;
}

.navbar img {
    width: 35px;
    height: 35px;
    object-fit: cover;
}

.search_bar {
    height: 35px;
    max-width: 455px;
    width: 100%;
}

    .search_bar input {
        height: 100%;
        width: 100%;
        border-radius: 0px;
        font-size: 18px;
        outline: none;
        background-color: var(--white-color);
        color: var(--grey-color);
        border: 1px solid var(--grey-color-light);
        padding: 0 20px;
    }

.navbar_content {
    display: flex;
    align-items: center;
    column-gap: 25px;
}

    .navbar_content i {
        cursor: pointer;
        font-size: 20px;
        color: var(--grey-color);
    }

/* sidebar */
.sidebar {
    /*background-color: var(--white-color);*/
    background-color: #2b3137;
    width: 260px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    padding: 80px 0px;
    z-index: 100;
    overflow-y: scroll;
    box-shadow: 0 0 1px var(--grey-color-light);
    transition: all 0.5s ease;
}

    .sidebar.close {
        padding: 60px 0;
        width: 80px;
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

.menu_content {
    position: relative;
}

.menu_title {
    margin: 15px 0;
    padding: 0 20px;
    font-size: 18px;
}

.sidebar.close .menu_title {
    padding: 6px 30px;
}

.menu_title::before {
    color: var(--grey-color);
    white-space: nowrap;
}

.menu_dahsboard::before {
    content: "Dashboard";
}

.menu_editor::before {
    content: "Editor";
}

.menu_setting::before {
    content: "Setting";
    color: var(--white-color);
}
.menu_lead::before {
    content: "LLII Ordering System";
    color: white;
}


.sidebar.close .menu_title::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 18px;
    border-radius: 12px;
    background: var(--grey-color-light);
}

.menu_items {
    padding: 0;
    list-style: none;
}

.navlink_icon {
    position: relative;
    font-size: 22px;
    min-width: 50px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    border-radius: 6px;
}

    .navlink_icon::before {
        content: "";
        position: absolute;
        height: 100%;
        width: calc(100% + 100px);
        left: -20px;
    }

    .navlink_icon:hover {
        /*background: var(--blue-color);*/
        background: #4b4b4b;
    }

.sidebar .nav_link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 15px;
    border-radius: 8px;
    text-decoration: none;
    /*color: var(--grey-color);*/
    color: var(--white-color);
    white-space: nowrap;
}

.sidebar.close .navlink {
    display: none;
}

.nav_link:hover {
    color: var(--white-color);
    /*background: var(--blue-color);*/
    background: #4b4b4b;
}

.sidebar.close .nav_link:hover {
    background: var(--white-color);
}

.submenu_item {
    cursor: pointer;
}

.submenu {
    display: none;
}

.submenu_item .arrow-left {
    position: absolute;
    right: 10px;
    display: inline-block;
    margin-right: auto;
}

.sidebar.close .submenu {
    display: none;
}

.show_submenu ~ .submenu {
    display: block;
}

.show_submenu .arrow-left {
    transform: rotate(90deg);
}

.submenu .sublink {
    padding: 15px 15px 15px 52px;
}

/*.bottom_content {
    position: fixed;
    bottom: 60px;
    left: 0;
    width: 260px;
    cursor: pointer;
    transition: all 0.5s ease;
}*/

.bottom {
    position: absolute;
    display: flex;
    align-items: center;
    left: 0;
    justify-content: space-around;
    /*padding: 18px 0;*/
    text-align: center;
    width: 100%;
    color: var(--grey-color);
    border-top: 1px solid var(--grey-color-light);
    background-color: var(--white-color);
}

    .bottom i {
        font-size: 20px;
    }

    .bottom span {
        font-size: 18px;
    }

.sidebar.close .bottom_content {
    width: 50px;
    left: 15px;
}

.sidebar.close .bottom span {
    display: none;
}

/*.sidebar.hoverable .collapse_sidebar {
    display: none;
}*/

#sidebarOpen {
    display: none;
}

@media screen and (max-width: 768px) {
    #sidebarOpen {
        font-size: 25px;
        display: block;
        margin-right: 10px;
        cursor: pointer;
        color: var(--grey-color);
    }

    .sidebar.close {
        /*left: -100%;*/
        font-size: 25px;
        display: block;
        margin-right: 10px;
        cursor: pointer;
        color: var(--grey-color);
    }

    .search_bar {
        display: none;
    }

    .sidebar.close .bottom_content {
        left: -100%;
    }
}
@media (max-width: 768px) {
    body {
        padding-left: 0; /* Disable the padding for mobile view */
    }
}
@media (max-width: 768px) {
    #datetime {
        padding-left: 0; /* Disable the padding for mobile view */
    }
}
@media (max-width: 768px) {
    .col-sm-6 #datetime {
        padding-left: 0;
    }
}

@media screen and (max-width: 768px) {
    .sidebar.close {
        left: -100%;
    }

    .menu_title.menu_dashboard {
        display: block !important; /* Ensure the menu title is visible */
    }

    /* ... other styles for mobile view ... */
}


.custom-button {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px;
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: rgb(9, 128, 76);
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 22px;
    transition: all 150ms ease-in-out 0s;
}

.custom-details-button {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px;
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: #3d3dfc;
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-details-button:hover {
        color: rgb(255, 255, 255);
        background-color: #0029ca;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-approve-button {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px;
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: rgb(9, 128, 76);
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    transition: all 150ms ease-in-out 0s;
}
    .custom-approve-button:hover {
        color: rgb(255, 255, 255);
        background-color: #04680c;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-approve-button-v2 {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px;
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: rgb(9, 128, 76);
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-approve-button-v2:hover {
        color: rgb(255, 255, 255);
        background-color: #2a7900;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-cancel-button {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px;
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: #ff1c1c;
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-cancel-button:hover {
        color: rgb(255, 255, 255);
        background-color: #e20000;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-cancel-button-v2 {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px;
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: #ff1c1c;
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-cancel-button:hover {
        color: rgb(255, 255, 255);
        background-color: #e20000;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-back-button {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 10px 12px; /*Text center*/
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: #3d3dfc;
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-back-button:hover {
        color: rgb(255, 255, 255);
        background-color: #0029ca;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-update-button {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 10px 12px; /*Text center*/
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: #ff6500;
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-update-button:hover {
        color: rgb(255, 255, 255);
        background-color: #d84900;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

.custom-update-button-v2 {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding: 0px 12px; /*Text center*/
    border: 0px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    background-color: #ff6500;
    box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    transition: all 150ms ease-in-out 0s;
}

    .custom-update-button-v2:hover {
        color: rgb(255, 255, 255);
        background-color: #d84900;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }


.custom-submit-order-button {
    --b: 3px; /* border thickness */
    --s: .45em; /* size of the corner */
    /*--color: #373B44;*/
    --color: rgb(9, 128, 76);
    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) 1px solid #0000;
    outline-offset: .6em;
    font-size: 16px;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

    .custom-submit-order-button:hover, .custom-submit-order-button:focus-visible {
        --_p: 0px;
        outline-color: rgb(9, 128, 76);
        outline-offset: .05em;
        box-shadow: rgb(19 170 82 / 40%) 0px 2px 3px, rgb(195 231 202) 0px 0px 0px 3px;
    }

    .custom-submit-order-button:active {
        background: var(--color);
        color: #fff;
    }