@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css');
:root {
    /* ========== COLORS ========== */
    --primary-color: #EE6EBC;
    --background-color: #F0F3F7;
    --second-color: #9DA2AD;
    --grey-color: #7A7A7B;
    --white-color: #FFFFFF;
}

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

a {
    color: unset;
    text-decoration: none;
}

body,
html {
    background-color: var(--background-color);
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
}

.fullheight {
    height: 100vh;
}

.align-items-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bg-img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-img-fixed {
    background-attachment: fixed;
}

.container {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
}

section {
    padding: 9rem 0;
}

.scroll {
    position: relative;
    overflow: scroll;
}

.noscroll {
    position: fixed;
    overflow-y: hidden;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ========== LOADER ========== */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.loadermaincontainer {
    display: none;
}

.loaderblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 150;
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.loaderinnercontainer {
    background-color: var(--background-color);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    z-index: 151;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loader {
    position: absolute;
    border: 16px solid #E5E5E5;
    border-top: 16px solid var(--primary-color);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    z-index: 152;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ========== INIT SELECT VIEW ========== */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.initialselectmaincontainer {
    display: none;
}

.initialselblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.initialsel-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 1001;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.initialsellabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
}

.initialselclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 118;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.initialselclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.initialsellistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.initialsellist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#initialselcellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 95%;
    /* height: 10%; */
    margin: 10px;
    cursor: pointer;
}

#initialselcellcontainer:hover {
    background-color: #E5E5E5;
}

.innerinitselcontainer {
    /* background-color: lightpink; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    /* position: relative; */
    /* border-radius: 5px;
    padding: 10px; */
    width: 100%;
    height: 100%;
}

.maininitsellabelcontainer {
    /* background-color: darkcyan; */
    width: 60%;
    height: 90%;
}

.detailinitialsellabel {
    font-size: 0.75rem;
}

.initselimgcontainer {
    /* background-color: salmon; */
    width: 40%;
    height: 90%;
    display: flex;
    align-items: right;
    justify-content: center;
    flex-direction: row;
}

.initselimageview {
    width: 50%;
    height: 90%;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* ========== END INIT SELECT VIEW ========== */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ========== TOP NAV ========== */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: var(--white-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px;
}

.menu-wrap {
    max-width: 1366px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem;
    /* background-color: yellow; */
}

.logo {
    color: var(--primary-color);
    /* background-color: red; */
    display: flex;
    flex-direction: row;
    margin: 5px;
}

.logoimg {
    width: 10%;
    /* background-color: black */
    ;
}

.selloccontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#sellocbtn {
    display: none;
    flex-direction: row;
    height: 50%;
    background-color: white;
    margin-left: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

#sellocbtn:hover {
    color: var(--grey-color);
}

.sellocimgcont {
    display: flex;
    flex-direction: wrap;
    justify-content: center;
    align-items: center;
}

.bxs-down-arrow {
    /* background-color: sienna; */
    margin-left: 1px;
    margin-top: 4px;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: orchid; */
}

.menu-item {
    margin-left: 1.0rem;
    padding: .5rem 1rem;
    font-weight: 500;
    color: var(--grey-color);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.menu-item:hover,
.menu-item.active {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-radius: 1rem;
}

.right-menu {
    background-color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-btn {
    width: 3rem;
    height: 3rem;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 2rem;
    cursor: pointer;
    transition: .5s ease-in-out;
    position: relative;
}

.cart-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 1rem;
}

.cartbadge {
    position: absolute;
    right: -0.25em;
    top: -0.25em;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: 0.8em;
    border: 0.05em solid white;
    background-color: red;
    color: white;
    padding: 5px;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.5em;
}

.shipcart-btn {
    /* background-color: orange; */
    width: 3rem;
    height: 3rem;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 2rem;
    cursor: pointer;
    transition: .5s ease-in-out;
    position: relative;
}

.shipcart-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 1rem;
}

.shipcartbadge {
    position: absolute;
    right: -0.25em;
    top: -0.25em;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: 0.8em;
    border: 0.05em solid white;
    background-color: red;
    color: white;
    padding: 5px;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.5em;
}

.logsignbtns {
    /* background-color: red; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 25%;
    text-align: center;
    /* padding: 2px; */
}

.loginspan {
    color: var(--primary-color);
    position: relative;
    top:0;
    left:0;
    height:100%;
    width: 50%;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    padding: 2px;
    /* background-color: darkkhaki; */
}

.signupspan {
    color: var(--primary-color);
    position: relative;
    top:0;
    left:0;
    height:100%;
    width:50%;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin-left: 10px;
    margin-right: 10px;
    /* background-color: slateblue; */
}

.loginspan:hover {
    color: gray;
    cursor: pointer;
}

.signupspan:hover {
    color: gray;
    cursor: pointer;
}

.dropmenu-btn i {
    display: none;
    cursor: pointer;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END TOP NAV */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* POPOUT MENU */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    background-color: var(--background-color);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
  }
  
  .sidenav button {
    padding: 8px 8px 8px 32px;
    margin-top: 50px;
    text-decoration: none;
    font-size: 25px;
    background-color: var(--background-color);
    color: var(--primary-color);
    display: block;
    transition: 0.3s;
    border: none;
  
  }
  
  .sidenav button:hover {
    color: lightgray;
    cursor: pointer;
  }
  
  .sidenav .popoutmenuclosebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
    cursor: pointer;
  }

  .sidenav .popoutmenuclosebtn:hover {
    color: lightgray;
  }

  /*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END POPOUT MENU */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* HOME SECTION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.slogan {
    text-align: left;
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
}

.slogan h1 {
    font-size: 5.5rem;
    color: var(--primary-color);
    text-shadow: 2px 2px black;
}

.homebtnscontainer {
    width: 60%;
    /* background-color: red; */
    display: flex;
    /* align-items: center;
    justify-content: center; */
    flex-direction: column;
}

.homestartbtn {
    /* height: 90%;
    width: 40%; */
    padding: 1rem 5rem;
    outline: none;
    border: none;
    background-color: white;
    border: .125rem solid var(--primary-color);
    border-radius: 3rem;
    color: var(--primary-color);
    margin-top: 2rem;
    /* margin-right: 1rem; */
    cursor: pointer;
    font-weight: 600;
    transition: .35s ease-in-out;
}

.homestartbtn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.startorderbtn {
    display: none;
}

.startonlineorderbtn {
    display: none;
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END HOME SECTION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* APP SECTION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.app-container {
    height: 75vh;
    /* background-color: red; */
    display: flex;
}

.app-data {
    /* background-color: #ff8c00; */
    padding: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    flex-direction: column;
}

.app-initial {
    color: var(--primary-color);
    font-size: 4.5rem;
    font-weight: 900;
}

.app-description {
    color: black;
    font-size: 1.25rem;
    font-weight: 500;
}

.app-stores {
    /* background-color: cadetblue; */
    display: inline-block;
    padding-top: 50px;
    margin-bottom: 2rem;
}

.app-store {
    margin: -5rem .5rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.app-img-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 1rem;
}

.app-img {
    width: 52%;
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END APP SECTION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* FOOD MENU */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

#food-menu {
    display: none;
}

.primary-color {
    color: var(--primary-color);
}

.food-menu {
    padding: 4rem;
    background-color: var(--white-color);
    border-radius: 2rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.food-menu h1 {
    color: var(--grey-color);
    font-weight: 750;
    font-size: 3.5rem;
}

.food-menu p {
    margin: 2rem 0;
}

.food-category {
    display: flex;
    flex-wrap: scroll;
    overflow-y: scroll
}

.food-category button {
    padding: .5rem 2.5rem;
    margin: 0.25rem 0.5rem;
    outline: none;
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    font-weight: 600;
    border-radius: 1rem;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.food-category button:hover,
.food-category button.active {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.food-item-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 3rem;
}

.food-item {
    width: 25%;
    height: 30rem;
    padding: 1rem;
}

.item-wrap {
    height: 100%;
    transition: .4s ease-in-out;
    cursor: pointer;
    border-radius: 2rem;
    padding: 5px;
    /* background-color: tomato; */
    overflow: hidden;
}

.item-wrap:hover {
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.item-img {
    height: 60%;
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
}

.img-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .5s ease-in-out;
    border-radius: 2rem;
}

.img-holder:hover {
    transform: scale(2) rotate(45deg);
}

.item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.0rem;
    padding: 0 0.5rem;
    /* background-color: aqua; */
    height: 30%;
}

.item-info h3 {
    /* max-height: 60%; */
    max-width: 100%;
    color: var(--grey-color);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    /* background-color: rebeccapurple; */
}

.item-info span {
    /* background-color: chocolate; */
    text-align: left;
}

.item-info p {
    max-height: 100px;
    color: black;
    /* background-color: red; */
    text-align: left;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-top: 0;
}

.item-info>div:first-child {
    text-align: left;
}

.food-item-wrap>div {
    display: none;
}

.food-item-wrap.All>div {
    display: block;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END FOOD MENU */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* FOOD ITEM DETAILS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.fooditemdetailcontainer {
    display: none;
}

.fidcblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 120;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.fooddetails-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 121;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
}

.fidclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 122;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.fidclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.fooddetails {
    position: relative;
    /* background-color: red; */
    height: 100%;
}

.fooditemlist {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
    list-style: none;
}

.itemimage {
    /* background-color: aqua; */
    height: 100%;
}

.itmimg {
    /* background-color: plum; */
    height: 100%;
    width: 100%;
}

.iteminfodetails {
    /* background-color: greenyellow; */
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.iteminfodetails h3 {
    /* background-color: darkorange; */
    margin: 10px;
}

.iteminfodetails h5 {
    /* background-color: tomato; */
    margin: 10px;
    font-size: 1.75rem;
    left: 0;
}

.iteminfodetails p {
    /* background-color: aqua; */
    margin: 10px;
}

.sepLineFID {
    position: relative;
    background-color: black;
    width: 85%;
    height: 1px;
    margin-top: 10px;
    /* align-items: center;
    justify-content: center; */
}

.specialrequestcontainer {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5px;
}

.specialrequestlabel {
    background-color: white;
    font-weight: 750;
    padding-top: 5px;
    padding-bottom: 5px;
}

.specialrequestfield {
    background-color: white;
    border: 0.50px solid black;
}

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

.fooddetailspayment {
    position: absolute;
    bottom: 0;
    background-color: white;
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 10px 10px 10px gray;
}

.fooddetailspaymentcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-self: center; */
}

.quantityview {
    /* background-color: aqua; */
    position: absolute;
    left: 5%;
    display: flex;
    flex-direction: row;
    width: 40%;
    height: 50%;
    align-items: center;
    justify-content: center;
}

.quantityview h3 {
    background-color: lightgray;
    font-weight: 500;
    font-size: 2rem;
    padding: 10px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40%;
    border-radius: 10%;
}

.minusbtn {
    background-color: transparent;
    position: absolute;
    width: 3vw;
    height: 3vw;
    left: 10px;
    font-weight: 500;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 50%;
    border-width: 1.75px;
    border-color: black;
}

.minusbtn:hover {
    opacity: 50%;
}

.plusbtn {
    background-color: transparent;
    position: absolute;
    width: 3vw;
    height: 3vw;
    right: 10px;
    font-weight: 500;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 50%;
    border-width: 1.75px;
    border-color: black;
}

.plusbtn:hover {
    opacity: 50%;
}

.addtocartbtn {
    /* background-color: white; */
    width: 40%;
    height: 50%;
    position: absolute;
    right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.addtocartbutton {
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
}

.addtocartbutton:hover {
    background-color: #E5E5E5;
}

.addtocartbtn button h5 {

}

.addtocartlabel {

}

.addtoshipcartbutton {
    background-color: var(--primary-color);
    color: white;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
}

.addtoshipcartbutton:hover {
    background-color: #E5E5E5;
}

.unavitembtn {
    background-color: red;
    color: white;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
}

.unavitembtn:hover {
    background-color: #E5E5E5;
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END FOOD ITEM DETAILS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* MODIFIERS VIEW */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


.fooddetailmodifierscontainer {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modifierInnerContainer {
    background-color: white;
    height: 100%;
    width: 100%;
}

.modHeaderContainer {
    background-color: white;
    width: 100%;
    /* height: 5vh; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.modHeaderLine {
    /* position: absolute; */
    top: 0;
    /* margin-top: 5px; */
    margin-bottom: 5px;
    width: 100%;
    height: 5px;
    background-color: lightgray;
}

.modTitlesContainer {
    background-color: white;
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
}

.mainTitleMods {
    background-color: white;
    width: 100%;
    /* height: 45%; */
    margin-top: 5px;
    margin-bottom: 5px;
}

.subTitleMods {
    background-color: white;
    width: 100%;
    /* height: 45%; */
    margin-top: 5px;
    margin-bottom: 5px;
}

.modNecessityContainer {
    background-color: white;
    height: 100%;
    width: 25%;
    text-align: center;
}

.necessityTitleMods {
    background-color: white;
    height: 50%;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 500;
}

.modItemsContainer {
    background-color: white;
    width: 100%;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content: center; */
}

.modItemsList {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modListItem {
    background-color: white;
    width: 100%;
    height: 50px;
}

.modListContainer {
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.modItemSelectionContainer {
    position: relative;
    background-color: white;
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modSelectionOuter {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modSelectionInner {
    display: none;
    background-color: black;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.modSelectionInner.active {
    display: block;
}

.Single {
    border-radius: 50%;
}

.Multiple {
    border-radius: 0%;
}


.modItemSelectQuotaContainer {
    position: absolute;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 5px;
}

.modItemSelectQuotaMinus {
    background-color: white;
    width: 20px;
    height: 20px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid black;
}

.modItemSelectQuotaMinus:hover {
    opacity: 50%;
}

.modItemSelectQuotaLabel {
    background-color: white;
    height: 50%;
    font-size: 0.75rem;
    font-weight: 650;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
}

.modItemSelectQuotaPlus {
    background-color: white;
    width: 20px;
    height: 20px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid black;
}

.modItemSelectQuotaPlus:hover {
    opacity: 50%;
}


.modItemTitleContainer {
    background-color: white;
    height: 100%;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.modItemTitleLabel {
    background-color: white;
    text-align: left;
    left: 0;
}

.modItemChargeContainer {
    background-color: white;
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modItemChargeLabel {
    font-weight: 600;
}

.modItemLine {
    position: relative;
    background-color: gray;
    width: 100%;
    height: 1px;
    /* margin-top: 10px; */
    /* align-items: center;
    justify-content: center; */
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* END MODIFIERS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* CART VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.cartlistcontainer {
    display: none;
}

.cartlistcontainer .blurbackground {
    z-index: 107;
}

.cartcontainer {
    background-color: rgba(255, 255, 255, 1.0);
    position: fixed;
    top: 0%;
    right: 0%;
    /* transform: translate(-50%, -50%); */
    z-index: 108;
    border-radius: 4px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 20px 0px 0px 0px;
    height: 100%;
    width: 30%;
    overflow: hidden;
}

.innercartcontainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.cartcontainer .cartlist {
    display: block;
    background-color: none;
    z-index: 109;
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 70%;
}

#crtcthdr {
    text-align: center;
}

.cartheadercontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cartheadercontainer #cartxicon {
    position: absolute;
    left: 10px;
    top: 0px;
    font-size: 25px;
    cursor: pointer;
    border-radius: 50%;
}

.cartheadercontainer #cartxicon:hover {
    background-color: red;
    color: white;

}

.clearcartbtn {
    background-color: white;
    color: red;
    border: none;
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 1em;
    cursor: pointer;
}

.clearcartbtn:hover {
    opacity: 50%;
}

.cartcontainer .cartlist #cartcellcontainer {
    display: flex;
    flex-direction: row;
    position: relative;
    /* background-color: yellow; */
    /* margin: 20px; */
    border-radius: 5px;
    padding: 10px;
    /* -webkit-box-shadow: 0 0 2px 4px #E5E5E5;
    -moz-box-shadow: 0 0 2px 4px #E5E5E5;
    box-shadow: 0 0 2px 4px #E5E5E5; */
}

#quantitycartcontainer {
    /* background-color: violet; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.quantitycartlabel {
    /* font */
}

#infocartcontainer {
    /* background-color: lightblue; */
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 10px;
    width: 75%;
}

.titlecartlabel {

}

.modinfocartlabel {
    font-size: 0.8rem;
    color: gray;
}

#pricecartcontainer {
    /* background-color: forestgreen; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.pricecartlabel {

}

#deletecartcontainer {
    /* background-color: rosybrown; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

#deleteCartBtn {
    /* background-color: slateblue; */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#deleteCartBtn:hover {
    color: red;
}

.cartsepline {
    position: relative;
    background-color: gray;
    width: 100%;
    height: 1px;
    /* margin-top: 10px; */
    /* align-items: center;
    justify-content: center; */
}

.cartcheckoutcontainer {
    background-color: var(--background-color);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.subtotalcartcontainer {
    /* background-color: var(--background-color); */
    width: 100%;
    height: 20%;
    margin-bottom: 10px;
    /* padding: 5px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.subtotalcartlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    left: 0;
    margin: 10px;
}

.subtotalamountlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    right: 0;
    margin: 10px;
}

.taxescartcontainer {
    /* background-color: var(--background-color); */
    width: 100%;
    height: 20%;
    margin-bottom: 15px;
    /* padding: 5px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.taxescartlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    left: 0;
    margin: 10px;
}

.taxesamountlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    right: 0;
    margin: 10px;
}

.cartcheckoutbtn {
    height: 30%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 5px;
    box-shadow: none;
    border: none;
    bottom: 10px;
}

.cartcheckoutbtn:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 0.5px solid var(--primary-color);
    cursor: pointer;
}

.cartcheckoutbtn .span {
    font-size: 0.75rem;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* END CART VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* SHIPPING CART VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.shipcartlistcontainer {
    display: none;
}

.shipcartlistcontainer .blurbackground {
    z-index: 107;
}

.shipcartcontainer {
    background-color: rgba(255, 255, 255, 1.0);
    position: fixed;
    top: 0%;
    right: 0%;
    /* transform: translate(-50%, -50%); */
    z-index: 108;
    border-radius: 4px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 20px 0px 0px 0px;
    height: 100%;
    width: 30%;
    overflow: hidden;
}

.innershipcartcontainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.shipcartcontainer .shipcartlist {
    display: block;
    background-color: none;
    z-index: 109;
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 70%;
}

#scrtcthdr {
    text-align: center;
}

.shipcartheadercontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.shipcartheadercontainer #scartxicon {
    position: absolute;
    left: 10px;
    top: 0px;
    font-size: 25px;
    cursor: pointer;
    border-radius: 50%;
}

.shipcartheadercontainer #scartxicon:hover {
    background-color: red;
    color: white;

}

.clearshipcartbtn {
    background-color: white;
    color: red;
    border: none;
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 1em;
    cursor: pointer;
}

.clearshipcartbtn:hover {
    opacity: 50%;
}

.shipcartcontainer .shipcartlist #shipcartcellcontainer {
    display: flex;
    flex-direction: row;
    position: relative;
    /* background-color: yellow; */
    /* margin: 20px; */
    border-radius: 5px;
    padding: 10px;
    /* -webkit-box-shadow: 0 0 2px 4px #E5E5E5;
    -moz-box-shadow: 0 0 2px 4px #E5E5E5;
    box-shadow: 0 0 2px 4px #E5E5E5; */
}

#quantityshipcartcontainer {
    /* background-color: violet; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.quantityshipcartlabel {
    /* font */
}

#infoshipcartcontainer {
    /* background-color: lightblue; */
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 10px;
    width: 75%;
}

.titleshipcartlabel {

}

.modinfoshipcartlabel {
    font-size: 0.8rem;
    color: gray;
}

#priceshipcartcontainer {
    /* background-color: forestgreen; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.priceshipcartlabel {

}

#deleteshipcartcontainer {
    /* background-color: rosybrown; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

#deleteShipCartBtn {
    /* background-color: slateblue; */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#deleteShipCartBtn:hover {
    color: red;
}

.shipcartsepline {
    position: relative;
    background-color: gray;
    width: 100%;
    height: 1px;
    /* margin-top: 10px; */
    /* align-items: center;
    justify-content: center; */
}

.shipcartcheckoutcontainer {
    background-color: var(--background-color);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.subtotalshipcartcontainer {
    /* background-color: var(--background-color); */
    width: 100%;
    height: 20%;
    margin-bottom: 10px;
    /* padding: 5px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.subtotalshipcartlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    left: 0;
    margin: 10px;
}

.shipsubtotalamountlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    right: 0;
    margin: 10px;
}

.taxesshipcartcontainer {
    /* background-color: var(--background-color); */
    width: 100%;
    height: 20%;
    margin-bottom: 15px;
    /* padding: 5px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.taxesshipcartlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    left: 0;
    margin: 10px;
}

.shiptaxesamountlabel {
    /* background-color: var(--background-color); */
    position: absolute;
    right: 0;
    margin: 10px;
}

.shipcartcheckoutbtn {
    height: 30%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 5px;
    box-shadow: none;
    border: none;
    bottom: 10px;
}

.shipcartcheckoutbtn:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 0.5px solid var(--primary-color);
    cursor: pointer;
}

.shipcartcheckoutbtn .span {
    font-size: 0.75rem;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* END SHIPPING CART VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ACCOUNT SECTION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.accountmaincontainer {
    height: 75vh;
    background-color: white;
    display: flex;
    flex-direction: row;
}

.accountprofilecontainer {
    background-color: white;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-radius: 5px;
}

.accountprofileimg {
    font-size: 7.5rem;
    padding: 10px;
}

.nameaccountlabel {
    font-size: 1.5rem;
    padding: 10px;
}

.emailaccountlabel {
    font-size: 1rem;
    color: grey;
    padding: 5px;
}

.phoneaccountlabel {
    font-size: 1rem;
    color: grey;
    padding: 5px;
}

.editprofileaccountbtn {
    display: none;
    background-color: var(--primary-color);
    color: white;
    width: 20%;
    height: 10%;
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.editprofileaccountbtn:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.createprofileaccountbtn {
    display: none;
    background-color: var(--primary-color);
    color: white;
    width: 20%;
    height: 10%;
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.createprofileaccountbtn:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.signoutaccountbtn {
    color: red;
    background-color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10%;
}

.signoutaccountbtn:hover {
    color: grey;
}

/* .accountsepline {
    background-color: black;
    height: 100%;
    width: 1px;
} */

.accountorderingcontainer {
    background-color: white;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

.accountheaderlabel {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 800;
}

.accountlist {
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.editaccountcell {
    background-color: lightgray;
    width: 100%;
    height: 20%;
    margin: 5px;
    padding: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.editaccountcell:hover {
    opacity: 50%;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ACCOUNT SECTION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* EDIT PROFILE VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.editprofilemaincontainer {
    display: none;
}

.editprofileblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.editprofile-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.editprofileclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.editprofileclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.editprofilelistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.editprofiletitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.editprofilelist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.editprofilefield {
    display: block;
    width: 80%;
    margin-top: 20px;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--primary-color);
}

#emailepfield {
    color: grey;
}

.saveeditprofilebtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.saveeditprofilebtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.saveeditprofilebtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END EDIT PROFILE VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  GUEST SIGNUP VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.guestsignupmaincontainer {
    display: none;
}

.guestsignupblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.guestsignup-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.guestsignupclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.guestsignupclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.guestsignuplistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.guestsignuptitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.guestsignuplist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.guestsignupfield {
    display: block;
    width: 80%;
    margin-top: 20px;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--primary-color);
}

/* #emailgsufield {
    color: grey;
} */

.saveguestsignupbtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.saveguestsignupbtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.saveguestsignupbtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END GUEST SIGNUP VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  PAYMENT METHODS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.paymentmethodscontainer {
    display: none;
}

.paymentmethodsblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 116;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.paymentmethods-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 117;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.paymentmethodslabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
}

.paymentmethodsclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 118;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.paymentmethodsclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.paymentmethodslistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.paymentmethodslist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#usercardcellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    /* height: 10%; */
    margin: 10px;
    cursor: pointer;
}

#usercardcellcontainer:hover {
    background-color: #E5E5E5;
}

#cardimgcontainer {
    /* background-color: aqua; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardimageview {
    /* background-color: yellow; */
    width: 50%;
    height: 50%;
}

#cardnumscontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardnumslabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
}

#defaultcardiconcontainer {
    /* background-color: darkgreen; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.defaulcardicon {
    display: none;
    font-size: 1.75rem;
    color: var(--primary-color);
}

#deletecardcontainer {
    /* background-color: salmon; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deletecardbtn {
    font-size: 1rem;
}

.deletecardbtn:hover {
    color: red;
}

.addnewcardbtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.addnewcardbtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.addnewcardbtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END PAYMENT METHODS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  SELECT CARD VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.sxpaymentmethodscontainer {
    display: none;
}

.sxpaymentmethodsblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 130;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.sxpaymentmethods-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 131;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sxpaymentmethodslabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.sxpaymentmethodsclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 132;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.sxpaymentmethodsclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.sxpaymentmethodslistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sxpaymentmethodslist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.sxaddnewcardbtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.sxaddnewcardbtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.sxaddnewcardbtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

#selcardcellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    /* height: 10%; */
    margin: 10px;
    cursor: pointer;
}

#selcardcellcontainer:hover {
    background-color: #E5E5E5;
}

#selcardimgcontainer {
    /* background-color: aqua; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selcardimageview {
    /* background-color: yellow; */
    width: 50%;
    height: 50%;
}

#selcardnumscontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selcardnumslabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
}

#seldefaultcardiconcontainer {
    /* background-color: darkgreen; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.seldefaulcardicon {
    display: none;
    font-size: 1.75rem;
    color: var(--primary-color);
}

#deletecardcontainer {
    /* background-color: salmon; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deletecardbtn {
    /* display: none; */
    font-size: 1rem;
}

.deletecardbtn:hover {
    color: red;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END SELECT CARD VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ADD CARD VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.addpaymentcontainer {
    display: none;
}

.addpayblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 135;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.addpay-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 136;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
}

.addpayinnercontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addpaylabel {
    background-color: none;
    margin-top: 25px;
    padding: 20px;
}

.addpayclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 137;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.addpayclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

#payment-form {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bx-credit-card {
    font-size: 10rem;
}

.form-row {
    background-color: white;
    width: 75%;
    padding: 10px;
    text-align: left;
}

#card-element {
    /* background-color: violet; */
    width: 100%;
    margin: 10px;
    /* height: 100%; */
}

#card-button {
    margin: 10px;
    background-color: var(--primary-color);
    color: white;
    width: 35%;
    height: 7.5%;
    margin-top: 10%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#card-button:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ADD CARD VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* CHECKOUT VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.checkoutcontainer {
    display: none;
}

.checkoutblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 120;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.checkout-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 121;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
}

.checkoutheadercontainer {
    /* background-color: var(--background-color); */
    background-color: white;
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.checkoutlabel {
    background-color: none;
    margin-top: 25px;
    padding: 20px;
}

.checkoutclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 122;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.checkoutclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.checkoutlistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.checkoutlist {
    display: block;
    /* background-color: var(--background-color); */
    background-color: white;
    /* list-style: none; */
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.checkoutlocationcontainer {
    background-color: white;
    /* height: 70%; */
    width: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.downarrowimg {
    /* background-color: yellow; */
    height: 40%;
    margin-left: 5px;
}

.checkoutlocationlabel {
    background-color: white;
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.mapimgview {
    background-color: white;
    width: 100%;
    height: 80%;
}

.selordertypecontainer {
    background-color: white;
    height: 20%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    /* margin-top: 5px; */
    text-align: left;
}

.selordertitlelabel {
    padding-left: 10px;
}

.selordertypelblcontainer {
    background-color: white;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
}

.selordertypelblcontainer:hover {
    background-color: #E5E5E5;
}

.selordertypelabel {
    /* background-color: white; */
    width: 100%;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.selordervehiclecontainer {
    background-color: white;
    height: 20%;
    width: 100;
    display: none;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    /* margin-top: 5px; */
    text-align: left;
}

.selordervehicletitlelabel {
    padding-left: 10px;
}

.selordervehiclelblcontainer {
    background-color: white;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
}

.selordervehiclelblcontainer:hover {
    background-color: #E5E5E5;
}

.selordervehiclelabel {
    /* background-color: white; */
    width: 100%;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.seldeliveraddresscontainer {
    background-color: white;
    height: 20%;
    width: 100;
    display: none;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    /* margin-top: 5px; */
    text-align: left;
}

.seldeliveraddresstitlelabel {
    padding-left: 10px;
}

.seldeliveraddresslblcontainer {
    background-color: white;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
}

.seldeliveraddresslblcontainer:hover {
    background-color: #E5E5E5;
}

.seldeliveraddresslabel {
    /* background-color: white; */
    width: 100%;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.selorderdatetimecontainer {
    /* background-color: white; */
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    text-align: left;
}

.seldatetimetitlelabel {
    background-color: white;
    width: 100%;
    padding-left: 10px;
}

.seldatetimecontainer {
    background-color: white;
    width: 100%;
    /* height: 20%; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.seldatechkoutcontainer {
    background-color: white;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .seldatechkoutcontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
} */

.seldatelabel {
    background-color: none;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1em;
    margin-top: 5px;
    border: none;
    cursor: pointer;
}

.seltimechkoutcontainer {
    width: 50%;
}

.seltimechkoutcontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
}

.seltimelabel {
    /* background-color: white; */
    /* width: 50%; */
    padding: 10px;
    text-align: center;
    font-size: 1em;
    margin-top: 5px;
}

.specificdatescontainer {
    background-color: white;
    height: 100%;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.specificdatescontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
}

.specificdatelabel {

}

.seltipcontainer {
    background-color: white;
    height: 30%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.seltiptitlelabel {
    background-color: white;
    padding-left: 10px;
}

.tipblockscontainer {
    background-color: white;
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.tenpertipcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.fifteenpertipcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.twentypertipcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.customtiprcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

/* .tenpertitlelabel, .fifteenpertitlelabel, .twentypertitlelabel, .custonamttitlelabel {
    color: var(--primary-color);
}

.tenperamntlabel, .fifteenperamntlabel, .twentyperamntlabel {
    color: var(--primary-color);
} */

.tenpertipcontainer:hover, .tenpertipcontainer.active, .fifteenpertipcontainer:hover, .fifteenpertipcontainer.active, .twentypertipcontainer:hover, .twentypertipcontainer.active, .customtiprcontainer:hover, .customtiprcontainer.active {
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}

.checkoutpromocodecontainer {
    /* background-color: indianred; */
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.checkoutpromocodetitlelabel {
    padding-top: 5px;
    padding-left: 10px;
}

.copromocodecontainer {
    /* background-color: red; */
    height: 90%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

#promocodechkoutfield {
    width: 80%;
    text-align: left;
    padding: 10px;
    text-transform: uppercase;
}

.promocodeapplybtn {
    width: 20%;
    padding: 10px;
}

.checkoutpaymentinfocontainer {
    background-color: white;
    max-height: 80%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.checkoutpaymentinfotitlelabel {
    padding-left: 10px;
}

.subtotalchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.subtotalchkoutlabel {
    width: 50%;
}

.subtotalamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.tipchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.tipchkoutlabel {
    width: 50%;
}

.tipsamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.taxeschkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.taxeschkoutlabel {
    width: 50%;
}

.taxesamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.conveniencefeechkoutcontainer {
    background-color: white;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.conveniencefeechkoutlabel {
    width: 50%;
}

.conveniencefeeamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.deliveryfeechkoutcontainer {
    background-color: white;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.deliveryfeechkoutlabel {
    width: 50%;
}

.deliveryfeeamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.discountchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.discountchkoutlabel {
    width: 50%;
}

.discountamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.totalchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.totalchkoutlabel {
    width: 50%;
}

.totalamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.checkoutselpaymentcontainer {
    background-color: white;
    height: 40%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.checkoutselpaymenttitlelabel {
    padding-left: 10px;
}

.selorderpayinstorecontainer {
    background-color: white;
    height: 40%;
    width: 100%;
    display: none;
    justify-content: left;
    align-items: center;
    flex-direction: row;
}

.selorderpayinstorecontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
}

.payinstoreimgcontainer {
    /* background-color: white; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payinstoreimg {
    /* background-color: white; */
    width: 50%;
    height: 50%;
}

.payinstoretitlecontainer {
    /* background-color: white; */
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.payinstorelabel {
    /* background-color: white; */
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.payinstoredefaultcontainer {
    /* background-color: white; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.pisdefaultcardicon {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.pisdefaultcardicon.active {
    display: block;
}

.selorderpaymethodcontainer {
    background-color: white;
    height: 40%;
    width: 100%;
    display: none;
    justify-content: left;
    align-items: center;
    flex-direction: row;
}

.selorderpaymethodcontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
}

.selordercardimgcontainer {
    /* background-color: white; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selordercardimg {
    /* background-color: white; */
    width: 50%;
    height: 50%;
}

.selordercardnumscontainer {
    /* background-color: white; */
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.selcarddotslabel {
    /* background-color: white; */
    /* width: 50%; */
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selcardlast4label {
    /* background-color: white; */
    /* width: 40%; */
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}

.selordercarddefaultcontainer {
    /* background-color: white; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.sodefaultcardicon {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.sodefaultcardicon.active {
    display: block;
}

.checkoutorderbtnconatiner {
    background-color: var(--background-color);
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 10%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.checkoutpobtn {
    background-color: var(--primary-color);
    color: white;
    width: 80%;
    height: 65%;
    border: none;
    border-radius: 5px;
}

.checkoutpobtn:hover {
    background-color: #E5E5E5;
    color: var(--primary-color);
    cursor: pointer;
    border: 1px solid var(--primary-color);
}

.checkoutclosedbtnconatiner {
    background-color: var(--background-color);
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 10%;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.checkoutclosedbtn {
    background-color: red;
    color: white;
    width: 80%;
    height: 65%;
    border: none;
    border-radius: 5px;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END CHECKOUT VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* SHIPPING CHECKOUT VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.shippingcheckoutcontainer {
    display: none;
}

.shippingcheckoutblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 120;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.shipcheckout-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 121;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
}

.shipcheckoutheadercontainer {
    /* background-color: var(--background-color); */
    background-color: white;
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.shipcheckoutlabel {
    background-color: none;
    margin-top: 25px;
    padding: 20px;
}

.shipcheckoutclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 122;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.shipcheckoutclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.shipcheckoutlistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.shipcheckoutlist {
    display: block;
    /* background-color: var(--background-color); */
    background-color: white;
    /* list-style: none; */
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.downarrowimg {
    /* background-color: yellow; */
    height: 40%;
    margin-left: 5px;
}

.shipestimatecontainer {
    background-color: white;
    height: 20%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    /* margin-top: 5px; */
    text-align: left;
}

.shipestimatetitlelabel {
    padding-left: 10px;
}

.shipestimatelblcontainer {
    background-color: white;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    /* cursor: pointer; */
}

.shipestimatelblcontainer:hover {
    /* background-color: #E5E5E5; */
}

.shipestimatelabel {
    /* background-color: white; */
    width: 100%;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.shipseladdresscontainer {
    background-color: white;
    height: 20%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    /* margin-top: 5px; */
    text-align: left;
}

.shipseladdresstitlelabel {
    padding-left: 10px;
}

.shipseladdresslblcontainer {
    background-color: white;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
}

.shipseladdresslblcontainer:hover {
    background-color: #E5E5E5;
}

.shipseladdresslabel {
    /* background-color: white; */
    width: 100%;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.shipseltipcontainer {
    background-color: white;
    height: 30%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.shipseltiptitlelabel {
    background-color: white;
    padding-left: 10px;
}

.shiptipblockscontainer {
    background-color: white;
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.shiptenpertipcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.shipfifteenpertipcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.shiptwentypertipcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.shipcustomtiprcontainer {
    background-color: white;
    color: var(--primary-color);
    width: 20%;
    height: 85%;
    margin: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
}

.shiptenpertipcontainer:hover, .shiptenpertipcontainer.active, .shipfifteenpertipcontainer:hover, .shipfifteenpertipcontainer.active, .shiptwentypertipcontainer:hover, .shiptwentypertipcontainer.active, .shipcustomtiprcontainer:hover, .shipcustomtiprcontainer.active {
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}

.shipcheckoutpromocodecontainer {
    /* background-color: indianred; */
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.shipcheckoutpromocodetitlelabel {
    padding-top: 5px;
    padding-left: 10px;
}

.shipcopromocodecontainer {
    /* background-color: red; */
    height: 90%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

#shippromocodechkoutfield {
    width: 80%;
    text-align: left;
    padding: 10px;
    text-transform: uppercase;
}

.shippromocodeapplybtn {
    width: 20%;
    padding: 10px;
}

.shipcheckoutpaymentinfocontainer {
    background-color: white;
    max-height: 80%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.shipcheckoutpaymentinfotitlelabel {
    padding-left: 10px;
}

.shipsubtotalchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shipsubtotalchkoutlabel {
    width: 50%;
}

.shipsubtotalamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shiptipchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shiptipchkoutlabel {
    width: 50%;
}

.shiptipsamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shiptaxeschkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shiptaxeschkoutlabel {
    width: 50%;
}

.shiptaxesamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shipconveniencefeechkoutcontainer {
    background-color: white;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shipconveniencefeechkoutlabel {
    width: 50%;
}

.shipconveniencefeeamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shipshippingfeechkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shipshippingfeechkoutlabel {
    width: 50%;
}

.shipshippingfeeamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shipdiscountchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shipdiscountchkoutlabel {
    width: 50%;
}

.shipdiscountamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shiptotalchkoutcontainer {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 10px;
}

.shiptotalchkoutlabel {
    width: 50%;
}

.shiptotalamountchkoutlabel {
    width: 50%;
    text-align: right;
}

.shipcheckoutselpaymentcontainer {
    background-color: white;
    height: 40%;
    width: 100;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    margin-top: 5px;
    text-align: left;
}

.shipcheckoutselpaymenttitlelabel {
    padding-left: 10px;
}

.shipselorderpaymethodcontainer {
    background-color: white;
    height: 40%;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
}

.shipselorderpaymethodcontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
}

.shipselordercardimgcontainer {
    /* background-color: white; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipselordercardimg {
    /* background-color: white; */
    width: 50%;
    height: 50%;
}

.shipselordercardnumscontainer {
    /* background-color: white; */
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.shipselcarddotslabel {
    /* background-color: white; */
    /* width: 50%; */
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipselcardlast4label {
    /* background-color: white; */
    /* width: 40%; */
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}

.shipselordercarddefaultcontainer {
    /* background-color: white; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.shipsodefaultcardicon {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.shipsodefaultcardicon.active {
    display: block;
}

.shipcheckoutorderbtnconatiner {
    background-color: var(--background-color);
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 10%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.shipcheckoutpobtn {
    background-color: var(--primary-color);
    color: white;
    width: 80%;
    height: 65%;
    border: none;
    border-radius: 5px;
}

.shipcheckoutpobtn:hover {
    background-color: #E5E5E5;
    color: var(--primary-color);
    cursor: pointer;
    border: 1px solid var(--primary-color);
}

.shipcheckoutclosedbtnconatiner {
    background-color: var(--background-color);
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 10%;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.shipcheckoutclosedbtn {
    background-color: red;
    color: white;
    width: 80%;
    height: 65%;
    border: none;
    border-radius: 5px;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END SHIPPING CHECKOUT VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  PROCESSING ORDER VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.processingordercontainer {
    display: none;
}

.processingorderblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.processingorder-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0.9;
}

.processingorderclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.processingorder-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.processingorderlistcontainer {
    background-color: var(--background-color);
    /* background-color: orange; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: top;
    align-items: center;
    flex-direction: column;
    margin-top: 100px;
}

.processingorderinnercontainer {
    /* background-color: purple; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.processingordertitlelabel {
    background-color: none;
    /* background-color: pink; */
    color: var(--primary-color);
    /* position: absolute; */
    left: 0;
    padding: 0px 100px 0px 0px;
    font-size: 1.5rem;

}

.processingloader {
    /* position: absolute; */
    right: 0;
    border: 3px solid clear;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin2 2s linear infinite;
    /* z-index: 152; */
    /* background-color: cyan; */
}

@keyframes spin2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.processingorderinfocontainer {
    /* background-color: var(--background-color); */
    /* background-color: brown; */
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    padding: 20px;
}

.processingorderinfolabel {
    text-align: left;
}

.processingorderitemslabel {
    padding-top: 25px;
    text-align: left;
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END PROCESSING ORDER VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  CUSTOMER INFO VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.customerinfoviewcontainer {
    display: none;
}

.customerinfoblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 125;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.customerinfo-container {
    background-color: var(--background-color);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    /* height: 40%; */
    z-index: 126;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: block;
}

.customerinfotitlelabel {
    /* background-color: none; */
    padding: 20px;
    width: 100%;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.customerinfoexplainlabel {
    padding: 10px;
    padding-left: 20px;
    width: 100%;
    font-size: 0.75rem;
    color: black;
}

.customerinfoinnercontainer {
    /* background-color: var(--background-color); */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
}

#namecifield {
    width: 90%;
    text-align: left;
    padding: 10px;
    margin: 5px;
    border: none;
}

#emailcifield {
    width: 90%;
    text-align: left;
    padding: 10px;
    margin: 5px;
    border: none;
}

#phonenumbercifield {
    width: 90%;
    text-align: left;
    padding: 10px;
    margin: 5px;
    border: none;
}

.customerinfobtnscontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
}

.customerinfocancelbtn {
    width: 50%;
    padding: 10px;
    color: red;
    border: none;
}

.customerinfocancelbtn:hover {
    background-color: #E5E5E5;
}

.customerinfoapplybtn {
    width: 50%;
    padding: 10px;
    color: blue;
    border: none;
}

.customerinfoapplybtn:hover {
    background-color: #E5E5E5;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END CUSTOMER INFO VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  CUSTOM TIP VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.customtipviewcontainer {
    display: none;
}

.customtipblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 125;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.customtip-container {
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    /* height: 40%; */
    z-index: 126;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: block;
}

.customtiptitlelabel {
    /* background-color: none; */
    padding: 20px;
    width: 100%;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.customtipinnercontainer {
    /* background-color: var(--background-color); */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
}

#customtipchkoutfield {
    width: 90%;
    text-align: left;
    padding: 10px;
}

#customtipchkoutfield::-webkit-outer-spin-button,
#customtipchkoutfield::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#customtipchkoutfield[type=number] {
  -moz-appearance: textfield;
}

.customtipbtnscontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
}

.customtipcancelbtn {
    width: 50%;
    padding: 10px;
    color: red;
    border: none;
}

.customtipcancelbtn:hover {
    background-color: #E5E5E5;
}

.customtipapplybtn {
    width: 50%;
    padding: 10px;
    color: blue;
    border: none;
}

.customtipapplybtn:hover {
    background-color: #E5E5E5;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END CUSTOM TIP VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  THANKS FOR ORDER VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.thanksforordercontainer {
    display: none;
}

.thanksfororderblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 130;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.thanksfororder-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 131;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.thanksfororderlabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    font-size: 1.5rem;
    font-weight: 800;
    padding: 20px;
}

.thanksforordersclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 132;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.thanksforordersclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.thanksfororderlistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.thanksfororderlist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}

.orderdatetimetfoconatiner {
    width: 90%;
    /* background-color: wheat; */
}

.orderdatetimetfolabel {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
}

.estimatetimetfoconatiner {
    width: 90%;
    /* background-color: thistle; */
    margin-top: 10px;
}

.estimatetimetfolabel {
    text-align: left;
    font-size: 1.25rem;
    font-weight: 600;
}

.pickuplocationtfoconatiner {
    width: 90%;
    /* background-color: slateblue; */
    margin-top: 10px;
}

.pickuplocationtfolabel {
    color: black;
    text-align: left;
    font-weight: 900;
}

.curbsideinfotfoconatiner {
    width: 90%;
    background-color: lightgray;
    margin-top: 10px;
    padding: 10px;
}

.curbsideinfotfolabel {
    text-align: center;
}

.curbsideinstructtfolabel {
    text-align: center;
    color: mediumblue;
}

.customerinfotfoconatiner {
    width: 90%;
    /* background-color: plum; */
    margin-top: 25px;
    /* padding: 10px; */
}

.customerinfotfolabel {
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
}

.paymentmethodtfoconatiner {
    width: 90%;
    /* background-color: olive; */
}

.paymentmethodtfolabel {
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
}

.ordertotaltfoconatiner {
    width: 90%;
    /* background-color: aqua; */
    margin-top: 10px;
}

.ordertotaltfolabel {
    /* background-color: rebeccapurple; */
    text-align: left;
}

.orderitemstfoconatiner {
    width: 90%;
    /* background-color: yellow; */
    margin-top: 2px;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
}

.itemsquantitytfolabel {
    /* background-color: indianred; */
    text-align: center;
    font-size: .75rem;
    width: 10%;
}

.itemsInfoConatiner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 70%;
}

.itemtitletfolabel {
    /* background-color: gold; */
    text-align: left;
    font-size: .75rem;
}

.itemmodinfolabel {
    /* background-color: paleturquoise; */
    text-align: left;
    font-size: .75rem;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  END THANKS FOR ORDER VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ORDER TYPES VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.orertypesmaincontainer {
    display: none;
}

.ordertypesblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.ordertypes-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ordertypestitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.ordertypesclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.ordertypesclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.ordertypeslistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ordertypeslist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#ordertypecellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    /* height: 10%; */
    margin: 10px;
    cursor: pointer;
}

#ordertypecellcontainer:hover {
    background-color: #E5E5E5;
}

.ordertypelabelcontainer {

}

.ordertypecelllabel {

}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ORDER TYPES VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* SELECT VEHICLE VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.selectvehiclemaincontainer {
    display: none;
}

.selectvehicleblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.selectvehicle-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.selectvehicletitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.selectvehicleclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.selectvehicleclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.selectvehiclelistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.selectvehiclelist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#uservehiclescellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin: 10px;
    cursor: pointer;
}

#uservehiclescellcontainer:hover {
    background-color: #E5E5E5;
}

#carimgcontainer {
    /* background-color: aqua; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carimageicon {
    /* background-color: yellow; */
    width: 50%;
    height: 50%;
}

#vehicleinfolabelcontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uservehicleslabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
}

#deletevehiclecontainer {
    /* background-color: salmon; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deletevehiclebtn {
    font-size: 1rem;
}

.deletevehiclebtn:hover {
    color: red;
}

.addnewvehiclebtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.addnewvehiclebtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.addnewvehiclebtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END SELECT VEHICLE VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ADD NEW VEHICLE VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.addnewvehiclemaincontainer {
    display: none;
}

.addnewvehicleblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.addnewvehicle-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addnewvehicletitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.addnewvehicleclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.addnewvehicleclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.addnewvehiclelistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addnewvehiclelist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.carinfofield {
    display: block;
    width: 80%;
    margin-top: 20px;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--primary-color);
}


/* #ordertypecellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin: 10px;
    cursor: pointer;
} */

/* #ordertypecellcontainer:hover {
    background-color: #E5E5E5;
} */

.savenewvehiclebtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.savenewvehiclebtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.savenewvehiclebtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ADD NEW VEHICLE VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* SELECT DELIVERY ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.selectdeliveryaddymaincontainer {
    display: none;
}

.selectdeliveryaddyblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.selectdeliveryaddy-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.selectdeliveryaddytitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 2rem;
    font-weight: 800;
}

.selectdeliveryaddyclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.selectdeliveryaddyclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.selectdeliveryaddylistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.selectdeliveryaddylist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#deliveryaddycellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin: 10px;
    cursor: pointer;
}

#deliveryaddycellcontainer:hover {
    background-color: #E5E5E5;
}

#locpinimgcontainer {
    /* background-color: aqua; */
    height: 100%;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locpinimageview {
    /* background-color: yellow; */
    width: 50%;
    height: 50%;
}

#addytitlecontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addytitlelabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
}

#addydistancecontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addydistlabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    text-align: right;
}

#deletedeliveryaddycontainer {
    /* background-color: salmon; */
    height: 100%;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deletedeliveryaddybtn {
    font-size: 1rem;
}

.deletedeliveryaddybtn:hover {
    color: red;
}

.addnewdeliveryaddybtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.addnewdeliveryaddybtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.addnewdeliveryaddybtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END SELECT DELIVERY ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ADD NEW DELIVERY ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.addnewdeliveryaddymaincontainer {
    display: none;
}

.addnewdeliveryaddyblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.addnewdeliveryaddy-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addnewdeliveryaddytitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
    font-weight: 800;
}

.addnewdeliveryaddyclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.addnewdeliveryaddyclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.addnewdeliveryaddylistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addnewdeliveryaddylist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#searchTextField {
    width: 80%;
    height: 20%;
    margin-bottom: 10px;
}

#aptNumberField {
    width: 80%;
    height: 20%;
}

.savenewdeliveryaddybtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.savenewdeliveryaddybtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.savenewdeliveryaddybtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ADD NEW DELIVERY ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* SELECT SHIPPING ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.selectshippingaddymaincontainer {
    display: none;
}

.selectshippingaddyblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.selectshippingaddy-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.selectshippingaddytitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 2rem;
    font-weight: 800;
}

.selectshippingaddyclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.selectshippingaddyclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.selectshippingaddylistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.selectshippingaddylist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#shippingaddycellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin: 10px;
    cursor: pointer;
}

#shippingaddycellcontainer:hover {
    background-color: #E5E5E5;
}

#shippinglocpinimgcontainer {
    /* background-color: aqua; */
    height: 100%;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shippinglocpinimageview {
    /* background-color: yellow; */
    width: 50%;
    height: 50%;
}

#shipaddytitlecontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipaddytitlelabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
}

#shipaddydistancecontainer {
    /* background-color: darkgoldenrod; */
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipaddydistlabel {
    /* background-color: indigo; */
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    text-align: right;
}

#deleteshippingaddycontainer {
    /* background-color: salmon; */
    height: 100%;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0px;
}

.deleteshippingaddybtn {
    font-size: 1rem;
}

.deleteshippingaddybtn:hover {
    color: red;
}

.addnewshippingaddybtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.addnewshippingaddybtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.addnewshippingaddybtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END SELECT SHJIPPING ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ADD NEW SHIPPING ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.addnewshippingaddymaincontainer {
    display: none;
}

.addnewshippingaddyblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.addnewshippingaddy-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addnewshippingaddytitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
    font-weight: 800;
}

.addnewshippingaddyclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.addnewshippingaddyclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.addnewshippingaddylistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.addnewshippingaddylist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#shippingSearchTextField {
    width: 80%;
    height: 20%;
    margin-bottom: 10px;
}

#shippingAptNumberField {
    width: 80%;
    height: 20%;
}

.savenewshippingaddybtncontainer {
    /* background-color: firebrick; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.savenewshippingaddybtn {
    background-color: var(--primary-color);
    color: white;
    width: 70%;
    height: 80%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.savenewshippingaddybtn:hover {
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ADD NEW SHIPPING ADDRESS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ORDER TIMES VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.ordertimesmaincontainer {
    display: none;
}

.ordertimesblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.ordertimes-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ordertimestitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.ordertimesclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.ordertimesclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.ordertimeslistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ordertimeslist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#ordertimecellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    /* height: 10%; */
    margin: 10px;
    cursor: pointer;
}

#ordertimecellcontainer:hover {
    background-color: #E5E5E5;
}

.ordertimelabelcontainer {

}

.ordertimecelllabel {

}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ORDER TIMES VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* FOOTER */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.footer {
    color: var(--white-color);
}

.footer .container {
    background-color: #00000050;
    padding: 30px;
}

.footer h1 {
    color: var(--primary-color);
}

.input-group {
    padding: 1rem;
    border: .125rem solid var(--primary-color);
    border-radius: 2rem;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.input-group input {
    flex: auto;
    outline: none;
    border: none;
    color: white;
    background-color: transparent;
}

.input-group button {
    padding: .5rem 1rem;
    outline: none;
    border: none;
    background-color: var(--primary-color);
    border-radius: 1rem;
    color: var(--white-color);
    font-weight: 600;
    cursor: pointer;
}

.footermissionlabel {
    background-color: #00000060;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

.footeraboutuslabel {
    background-color: #00000060;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

.footersocialslist {

}

.footersocialscellcontainer {
    background-color: #00000060;
    padding: 5px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    cursor: pointer;
}

.footersocialscellcontainer:hover {
    background-color: #E5E5E550;
}

.socialiconimageview {
    font-size: 2rem;
}
.socialtitlelabel {
    font-size: 1rem;
}

.xpressinfopoweredbylabel {
text-align: right;
}
.xpresspoweredbyspan {
    color: var(--primary-color);
    cursor: pointer;
}

.xpresspoweredbyspan:hover {
    color: #E5E5E5;
}

.back-to-top {
    position: fixed;
    bottom: 70px;
    right: 70px;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    padding: .5rem;
    z-index: 99;
    display: none;
}
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END FOOTER */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* SELECT LOCATION VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


.locationselectlistcontainer {
    display: none;
}

.loclistblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 104;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.loclistcontainer {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 105;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loclistheadercontainer {
    background-color: goldenrod;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 20%;
    width: 100%;
}

#slcthdr {
    text-align: center;
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
}

.loclistclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.loclistclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.loclistinnercontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.locationlist {
    background-color: none;
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}


.loclistcellcontainer {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: row;
    position: relative;
    /* background-color: yellow; */
    margin: 20px;
    /* padding: 10px; */
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px 4px #E5E5E5;
    -moz-box-shadow: 0 0 2px 4px #E5E5E5;
    box-shadow: 0 0 2px 4px #E5E5E5;
}

.loclistcellcontainer:hover {
    background-color: #E5E5E5;
    cursor: pointer;
}

.loclistinfocellcontainer {
    /* background-color: slateblue; */
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column;
    width: 80%;
    /* height: 100%; */
    /* padding: 20px; */
    margin: 20px;
    padding: 10px;
}

.loclistcontainer .locationlist #locinfobtn {
    /* background-color: blueviolet; */
    position: relative;
    font-size: 1.75rem;
    cursor: pointer;
}

.loclistcontainer .locationlist #locinfobtn:hover {
    color: grey;
}

.loclistdistcellcontainer {
    /* background-color: orange; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20%;
    margin: 20px;
    /* padding: 10px; */
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END SELECT LOCATION VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* LOCATION INFO VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.locinformationcontainer {
    display: none;
}

.locinformationblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 110;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.locinformation-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 111;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#locinfocthdr {
    text-align: center;
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-weight: 800;
}

.locinformationclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.locinformationclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.locinformationinnercontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.locinformationlist {
    background-color: none;
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.mapviewlocinfocontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mapviewlocinfo {
    width: 100%;
    height: 40%;
    border-radius: 5px;
}

.storenamelocinfolabel {
    padding: 5px;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 500;
}

.fulladdresslocinfolabel {
    padding: 5px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    width: 60%;
}

.storephonelocinfolabel {
    padding: 5px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 450;
}

.storehourslocinfocontainer {
    /* background-color: firebrick; */
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    width: 100%;
}

.daylocinfocontainer {
    /* background-color: turquoise; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 60%;
}

.storedaytitlelabel {
    /* background-color: hotpink; */
    padding: 5px;
    margin: 5px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    width: 40%;
}

.storedaylocinfolabel {
    /* background-color: red; */
    padding: 5px;
    margin: 5px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 300;
    width: 60%;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END LOCATION INFO VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* LOGIN VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.lgsumaincontainer {
    display: none;
}

.blurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 110;
    opacity: 0.50;
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.logsign-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    /* height: 70%; */
    z-index: 111;
    border-radius: 4px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 20px;
}

.logsign-container .lgclose-btn {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 25px;
    cursor: pointer;
    width: 7.5%;
    height: 7.5%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.lgclose-btn:hover {
    background-color: red;
    color: white;
}

.logsign-container h1 {
    color: var(--primary-color);
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
}

.logsign-container form {
    margin: 20px;
}


/* .logsign-container label {
    display: block;
    color: var(--grey-color);
    font-size: 1rem;
    margin-top: 20px;
} */

.logsign-container input.lgsufield {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--primary-color);
}

.logsign-container button {
    background-color: var(--primary-color);
    color: var(--white-color);
    display: block;
    width: 50%;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 1.10rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

.logsign-container button:hover {
    color: var(--primary-color);
    background-color: var(--white-color);
    border: 1px solid var(--primary-color);
}

.lgforgotpasswordcontainer {
    /* background-color: royalblue; */
    margin-top: 20px;
    padding: 2px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    right: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;


}

.logsign-container .fpbtn {
    /* background-color: violet; */
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 700;
    cursor: pointer;
    margin-left: 150px;
    font-size: 0.90rem;
    text-align: right;
}

.logsign-container .fpbtn:hover {
    text-decoration: underline;
}

.logsign-container .lgsignupbtn {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 700;
    cursor: pointer;
}

.logsign-container .lgsignupbtn:hover {
    text-decoration: underline;
}

.logsign-container .fplink {
    margin-top: 20px;
    text-align: center;
    color: black;
}

.logsign-container .fplink a {
    color: var(--primary-color);
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END LOGIN VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* SIGNUP VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


.signupmaincontainer {
    display: none;
}

.blurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 110;
    opacity: 0.50;
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.signup-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    /* height: 70%; */
    z-index: 111;
    border-radius: 4px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 20px;
}

.signup-container .sgclose-btn {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 25px;
    cursor: pointer;
    width: 7.5%;
    height: 6.75%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.signup-container .sgclose-btn:hover {
    background-color: red;
    color: white;
}

.signup-container h1 {
    color: var(--primary-color);
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 15px;
}

.signup-container form {
    margin: 20px;
}


/* .signup-container label {
    display: block;
    color: var(--grey-color);
    font-size: 1rem;
    margin-top: 20px;
} */

.signup-container input.signupfield {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--primary-color);
}

.signup-container button {
    background-color: var(--primary-color);
    color: var(--white-color);
    display: block;
    width: 50%;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 1.10rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.signup-container button:hover {
    color: var(--primary-color);
    background-color: var(--white-color);
}

.signup-container .sulogbtn {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 700;
    cursor: pointer;
}

.signup-container .sulogbtn:hover {
    text-decoration: underline;
}

.signup-container .aamlink {
    margin-top: 20px;
    text-align: center;
    color: black;
}

.signup-container .aamlink a {
    color: var(--primary-color);
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* END SIGNUP VIEW */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* FORGOT PASSWORD VIEW */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.fpassmaincontainer {
    display: none;
}

.blurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 110;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.fpass-container {
    /* background-color: darkblue; */
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    /* height: 70%; */
    z-index: 111;
    border-radius: 4px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 50px;
}

.fpass-container .fpclose-btn {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 25px;
    cursor: pointer;
    width: 7.5%;
    height: 10%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.fpass-container .fpclose-btn:hover {
    background-color: red;
    color: white;
}

.fpass-container h1 {
    color: var(--primary-color);
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 15px;
}

.fpass-container .submitfpass {
    text-align: center;
}

.fpass-container form {
    margin: 20px;
}


/* .fpass-containers label {
    display: block;
    color: var(--grey-color);
    font-size: 1rem;
    margin-top: 20px;
} */

.fpass-container input.fpassfield {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--primary-color);
}

.fpass-container #fpassbtn {
    background-color: var(--primary-color);
    color: var(--white-color);
    display: block;
    width: 50%;
    padding: 10px;
    border: none;
    outline: none;
    font-size: 1.10rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.fpass-container #fpassbtn:hover {
    color: var(--primary-color);
    background-color: var(--white-color);
}

/* END FORGOT PASSWORD VIEW */

/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* USER ORDERS LIST VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.userorderslistsmaincontainer {
    display: none;
}

.userorderslistblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.userorderslist-container {
    background-color: var(--background-color);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.userorderslisttitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
}

.userorderslistclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.userorderslistclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.userorderslistlistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.userorderslistlist {
    background-color: var(--background-color);
    display: block;
    list-style: none;
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

#userorderslistcellcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    margin: 10px;
    cursor: pointer;
}

#userorderslistcellcontainer:hover {
    background-color: #E5E5E5;
}

.userorderinfocontainer {
    width: 70%;
}

.orderdateuollabel {
    font-size: 0.65rem;
    font-weight: 700;
}

.orderaddyuollabel {
    font-size: 1.1rem;
    font-weight: 400;
}

.ordertypeuollabel {
    font-size: 0.85rem;
    font-weight: 200;
}

.userorderslistitemslabel {
    font-size: 0.65rem;
    font-weight: 500;
    color: grey;
}

.userorderslisttotallabel {
    font-size: 0.9rem;
    font-weight: 500;
    color: black;
}

.userorderstatuscontainer {
    width: 20%;
}

.userordersstatuslabel {

}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END USER ORDERS LIST VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ORDER DETAILS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.orderdetailsmaincontainer {
    display: none;
}

.orderdetailsblurbackground {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 124;
    opacity: 0.50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px); */
}

.orderdetails-container {
    background-color: var(--background-color);
    /* background-color: rgba(255, 255, 255, 0.95); */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 95%;
    z-index: 125;
    border-radius: 10px;
    border: 1px rgba(255, 255, 255, 0.25);
    padding: 0px;
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.orderdetailstitlelabel {
    background-color: none;
    color: var(--primary-color);
    /* margin-top: 25px; */
    padding: 20px;
    font-size: 1.5rem;
    font-weight: 800;
}

.orderdetailsclose-btn {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 5vh;
    height: 5%;
    z-index: 126;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.orderdetailsclose-btn:hover {
    background-color: red;
    color: var(--white-color);
}

.orderdetailslistcontainer {
    background-color: var(--background-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.orderdetailslist {
    display: block;
    background-color: var(--background-color);
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50%;
}

.orderorderiduodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.orderordertimeuodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.orderorderschedtimeuodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.orderpickuplocuodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.orderselvehicleuodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.orderpaytypeuodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.orderorderstatusuodlabel {
    padding: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.ordercheckincontainer {
    /* background-color: hotpink; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* height: 25%; */
}

.checkintitlelabel {
    /* background-color: limegreen; */
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    width: 100%;
    /* height: 10%; */
}

.checkinbtncontainer {
    width: 100%;
    /* height: 90%; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.checkinnumberfield {
    width: 90%;
    margin: 10px;
    padding: 10px;
    border: none;
}

.checkinbutton {
    background-color: var(--primary-color);
    color: white;
    width: 90%;
    margin: 10px;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.checkinbutton:hover {
    background-color: #E5E5E5;
    color: white;
}

.checkincompletecontainer {
    position: absolute;
    background-color: var(--background-color);
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

.trackinginfouodcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.trackinginnercontainer {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
}

.trackingcarrierimagecontainer {
    /* background-color: rebeccapurple; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 20%;
}

.trackingcarrierimageview {
    width: 80%;
    height: 80%;
}

.trackingcarrierinfocontainer {
    /* background-color: sandybrown; */
    display: flex;
    align-items: left;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 70%;
}

.trackingnumbercontainer {
    /* background-color: aqua; */
    display: flex;
    align-items: left;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    margin-left: 5px;
}

.tracknumtitlelabel {
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
}

.tracknumlabel {
    font-size: 0.8rem;
    font-weight: 300;
    text-align: left;
}

.tracksitecontainer {
    /* background-color: indianred; */
    display: flex;
    align-items: left;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    margin-left: 5px;
}

.tracksitetitlelabel {
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
}

.tracksitelabel {
    font-size: 0.8rem;
    font-weight: 300;
    text-align: left;
}

.notrackinginfocontainer {
    background-color: var(--background-color);
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.15rem;
    font-weight: 600;
}

.locationinfouodcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.locationstoreaddylabel {
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    width: 100%;
}

.locationdeliveryaddylabel {
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    width: 100%;
}

.locationuodimageview {
    width: 100%;
    height: 40%;
    border-radius: 5px;
}

.orderinfouodline {
    height: 1px;
    width: 100%;
    background-color: black;
    margin-top: 10px;
    margin-bottom: 10px;
}

#orderitemsuodcontainer {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin: 10px;
}

.itemcellxuodcontainer {
    /* background-color: white; */
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    position: relative;
    width: 100%;
}

#quantityuodcontainer {
    /* background-color: violet; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 10%;
}

.quantityuodlabel {
    font-size: 0.8rem;
}

#infouodcontainer {
    /* background-color: lightblue; */
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 10px;
    width: 75%;
}

.titleuodlabel {
    font-size: 1rem;
}

.modinfouodlabel {
    font-size: 0.8rem;
    color: gray;
}

#priceuodcontainer {
    /* background-color: forestgreen; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 10%;
}

.priceuodlabel {
    font-size: 0.8rem;
}

.subtotaluodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.subtotaltitleuodlabel {
    width: 50%;
    text-align: left;
}

.subtotalamountuodlabel {
    width: 50%;
    text-align: right;
}

.tipuodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.tiptitleuodlabel {
    width: 50%;
    text-align: left;
}

.tipamountuodlabel {
    width: 50%;
    text-align: right;
}

.taxuodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.taxtitleuodlabel {
    width: 50%;
    text-align: left;
}

.taxamountuodlabel {
    width: 50%;
    text-align: right;
}

.deliveryfeeuodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.deliveryfeetitleuodlabel {
    width: 50%;
    text-align: left;
}

.deliveryfeeamountuodlabel {
    width: 50%;
    text-align: right;
}

.convfeeuodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.convfeetitleuodlabel {
    width: 50%;
    text-align: left;
}

.convfeeamountuodlabel {
    width: 50%;
    text-align: right;
}

.discountuodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.discounttitleuodlabel {
    width: 50%;
    text-align: left;
}

.disocuntamountuodlabel {
    width: 50%;
    text-align: right;
}

.finaltotaluodcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 15px;
}

.finaltotaltitleuodlabel {
    width: 50%;
    text-align: left;
}

.finaltotalamountuodlabel {
    width: 50%;
    text-align: right;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ORDER DETAILS VIEW */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* SHIPPING MENU */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

#shipping-menu {
    display: none;
}

.shipping-menu {
    padding: 4rem;
    background-color: var(--white-color);
    border-radius: 2rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.shipping-menu h1 {
    color: var(--grey-color);
    font-weight: 750;
    font-size: 3.5rem;
}

.shipping-menu p {
    margin: 2rem 0;
}

.shipping-category {
    display: flex;
    flex-wrap: scroll;
    overflow-y: scroll
}

.shipping-category button {
    padding: .5rem 2.5rem;
    margin: 0.25rem 0.5rem;
    outline: none;
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    font-weight: 600;
    border-radius: 1rem;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.shipping-category button:hover,
.shipping-category button.active {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.ship-item-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 3rem;
}

.ship-item {
    width: 25%;
    height: 30rem;
    padding: 1rem;
}

.shipitem-wrap {
    height: 100%;
    transition: .4s ease-in-out;
    cursor: pointer;
    border-radius: 2rem;
    padding: 5px;
    /* background-color: tomato; */
    overflow: hidden;
}

.shipitem-wrap:hover {
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.shipitem-img {
    height: 60%;
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
}

.shipimg-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .5s ease-in-out;
    border-radius: 2rem;
}

.shipimg-holder:hover {
    transform: scale(2) rotate(45deg);
}

.shipitem-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.0rem;
    padding: 0 0.5rem;
    /* background-color: aqua; */
    height: 30%;
}

.shipitem-info h3 {
    /* max-height: 60%; */
    max-width: 100%;
    color: var(--grey-color);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    /* background-color: rebeccapurple; */
}

.shipitem-info span {
    /* background-color: chocolate; */
    text-align: left;
}

.shipitem-info p {
    max-height: 100px;
    color: black;
    /* background-color: red; */
    text-align: left;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-top: 0;
}

.shipitem-info>div:first-child {
    text-align: left;
}

.ship-item-wrap>div {
    display: none;
}

.ship-item-wrap.All>div {
    display: block;
}

/*  ////////// ////////// ////////// ////////// ////////// ////////// */

/* END SHIPPING MENU */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */
/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* ANIMATION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.left-to-right {
    transform: translateX(-150%);
    transition: 1s ease-in-out;
}

.left-to-right.start {
    transform: translateX(0);
}

.right-to-left {
    transform: translateX(150%);
    transition: 1s ease-in-out;
}

.right-to-left.start {
    transform: translateX(0);
}

.zoom {
    transform: scale(0);
    transition: .6s ease-in-out;
}

.zoom.start {
    transform: unset;
}

.bottom-up {
    transform: translateY(30%);
    transition: .8s ease-in-out;
}

.bottom-up.start {
    transform: translateY(0);
}

.delay-2 {
    transition-delay: .2s;
}

.delay-4 {
    transition-delay: .4s;
}

.delay-6 {
    transition-delay: .6s;
}

.delay-8 {
    transition-delay: .8s;
}

.delay-10 {
    transition-delay: .10s;
}

.delay-12 {
    transition-delay: .12s;
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* END ANIMATION */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* GRID SYSTEM */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */

.row {
    display: flex;
    flex-wrap: wrap;
}

[class*="col-"] {
    padding: 1rem;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

.mb-nav {
    display: none;
}


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/*  ////////// ////////// ////////// ////////// ////////// ////////// */


/* Extra small devices (phones, 1000px and down) */

@media only screen and (max-width: 1000px) {
    * {
        font-size: 13px;
    }
    .logo {
        display: flex;
        justify-self: center;
        align-items: center;
    }
    .logoimg {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        max-width: 80px;
        max-height: 80px;
        
    }
    h1 {
        font-size: 3rem !important;
    }
    span {
        font-size: inherit;
    }
    .cart-btn i {
        font-size: 2rem;
    }
    .shipcart-btn i {
        font-size: 2rem;
    }
    .app-container {
        /* background-color: chocolate; */
        display: inline-block;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100vw;
        height: 100%;
    }
    .app-data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* background-color: blueviolet; */
        /* width: 110%; */
        margin-top: -50px;
    }
    .app-initial {
        /* background-color: darkblue; */
        font-size: 2rem;
        text-align: center;
    }
    .app-description {
        /* background-color: darkgreen; */
        padding: 25px;
        text-align: left;
    }
    .app-stores {
        /* background-color: cornflowerblue; */
        justify-content: center;
        align-items: center;
        display: inline-flex;
        flex-direction: row;
        width: 75vw;
        height: 10vh;
    }
    .app-store {
        /* flex-direction: row; */
        /* width: 10rem; */
        width: 100%;
        height: 20%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .app-img-section {
        /* background-color: darkorange; */
    }
    .app-img {
        /* background-color: firebrick; */
        width: 50vw;
        margin-top: -100px;
    }

    /* MOBILE - TOP NAV */
    .cart-btn {

    }
    .dropmenu-btn i {
        display: block;
        font-size: 2rem;
        padding: 2px;
    }
    .dropmenu-btn i:hover {
        color: lightgrey;
    }
    .logsignbtns {
        /* display: none; */
        width: 900px;
    }
    .right-menu {

    }

    /* MOBILE - POPOUT MENU */
    /* .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    } */

    /* MOBILE - FOOD MENU */
    .food-menu {
        padding: 4rem 0;
    }
    .food-item {
        width: 50%;
        height: 25rem;
    }
    .food-category {
        overflow-y: scroll;
    }
    .food-category::-webkit-scrollbar {
        display: none;
    }
    .food-category button {
        width: max-content;
    }
    .item-info p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .back-to-top {
        bottom: 6rem;
        right: 1rem;
    }

    /* MOBILE - LOGIN VIEW */
    .logsign-container {
        width: 90%;
    }
    .logsign-container .fpbtn {
        margin-left: 50%;
    }

    /* MOBILE - SIGNUP VIEW */
    .signup-container {
        width: 90%;
    }

    /* MOBILE - FORGOT PASSWORD VIEW */
    .fpass-container {
        width: 90%;
    }


    /* MOBILE - SELECT LOCATION VIEW */
    .loclistcontainer {
        width: 90%;
        height: 80%;
    }

    /* MOBILE - LOCATION INFO VIEW */
    .locinformation-container {
        width: 90%;
        height: 80%;
    }

    /* MOBILE - CART VIEW */
    .cartcontainer {
        width: 100%;
        height: 100%;
    }

    /* MOBILE - CHECKOUT VIEW */
    .checkout-container {
        width: 100%;
        height: 100%;
    }
    .mapimgview {
        height: 50%;
    }

    .promocodeapplybtn {

    }

    /* MOBILE - ORDER TYPES VIEW */
    .ordertypes-container {
        width: 90%;
        height: 80%;
    }

    .ordertypestitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - SELECT VEHICLE VIEW */
    .selectvehicle-container {
        width: 90%;
        height: 80%;
    }

    .selectvehicletitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - ADD NEW VEHICLE VIEW */
    .addnewvehicle-container {
        width: 90%;
        height: 80%;
    }

    .addnewvehicletitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - SELECT DELIVERY ADDY VIEW */
    .selectdeliveryaddy-container {
        width: 90%;
        height: 80%;
    }

    .selectdeliveryaddytitlelabel {
        font-size: 1.5rem;
    }

    /* MOBILE - ADD NEW DELIVERY ADDY VIEW */
    .addnewdeliveryaddy-container {
        width: 90%;
        height: 80%;
    }

    .addnewdeliveryaddytitlelabel {
        font-size: 1.5rem;
    }

    /* MOBILE - CUSTOM TIP VIEW */
    .customtip-container {
        width: 90%;
        /* height: 0%; */
    }

    /* MOBILE - ORDER TIMES VIEW */
    .ordertimes-container {
        width: 90%;
        height: 80%;
    }

    .ordertimestitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - FOOD ITEM DETAILS VIEW */
    .fooddetails-container {
        width: 90%;
        height: 80%;
    }
    .minusbtn {
        width: 2rem;
        height: 2rem;
    }
    .plusbtn {
        width: 2rem;
        height: 2rem;
    }
    .addtocartbtn {
        /* width: 40%;
        height: 40%; */
    }
    .addtocartbtn button {

    }
    .itemimage {
        height: 60%;
    }

    /* MOBILE - PAYMENT METHODS VIEW */
    .paymentmethods-container {
        width: 90%;
        height: 80%;
    }
    .paymentmethodslabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - SELECT PAYMENT METHODS VIEW */
    .sxpaymentmethods-container {
        width: 90%;
        height: 80%;
    }
    .sxpaymentmethodslabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - ADD NEW CARD VIEW */
    .addpay-container {
        width: 85%;
        height: 65%;
    }

    .addpaylabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - USER ORDERS LIST VIEW */
    .userorderslist-container {
        width: 90%;
        height: 80%;
    }

    .userorderslisttitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - ORDER DETAILS VIEW */
    .orderdetails-container {
        width: 90%;
        height: 80%;
    }
    .orderdetailstitlelabel {
        font-size: 1.5rem;
    }

    /* MOBILE - ACCOUNT SECTION */
    .editprofileaccountbtn {
        width: 50%;
        padding: 5px;
    }

    .createprofileaccountbtn {
        width: 50%;
        padding: 5px;
    }

    .accountheaderlabel {
        font-size: 1.75rem;
    }

    /* MOBILE - GUEST SIGNUP VIEW */
    .guestsignup-container {
        width: 90%;
        height: 80%;
    }

    .guestsignuptitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - EDIT PROFILE VIEW */
    .editprofile-container {
        width: 90%;
        height: 80%;
    }

    .editprofiletitlelabel {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    /* MOBILE - CUSTOMER INFO VIEW */
    .customerinfo-container {
        width: 90%;
        /* height: 0%; */
    }

    /* MOBILE - THANKS VIEW */
    .thanksfororder-container {
        width: 100%;
        height: 100%;
    }

    /* MOBILE - INITIAL SELECT VIEW */
    .initialsel-container {
        width: 95%;
        height: 90%;
    }

    /* MOBILE - SHIPPING MENU */
    .shipping-menu {
        padding: 4rem 0;
    }
    .ship-item {
        width: 50%;
        height: 25rem;
    }
    .ship-category {
        overflow-y: scroll;
    }
    .ship-category::-webkit-scrollbar {
        display: none;
    }
    .ship-category button {
        width: max-content;
    }
    .shipitem-info p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* MOBILE - SHIPPING CART VIEW */
    .shipcartcontainer {
        width: 100%;
        height: 100%;
    }

    /* MOBILE - SHIPPING CHECKOUT VIEW */
    .shipcheckout-container {
        width: 100%;
        height: 100%;
    }

    .shipcheckoutlabel {
        text-align: center;
        font-size: 1.25rem;
        font-weight: 700;
    }

    /* MOBILE - SHIPPING ADDRESS VIEW */
    .selectshippingaddy-container {
        width: 90%;
        height: 80%;
    }

    .selectshippingaddytitlelabel {
        text-align: center;
        font-size: 1.25rem;
        font-weight: 700;
    }

    /* MOBILE - ADD NEW SHIPPING ADDRESS VIEW */
    .addnewshippingaddy-container {
        width: 90%;
        height: 80%;
    }

    .addnewshippingaddytitlelabel {
        text-align: center;
        font-size: 1.25rem;
        font-weight: 700;
    }

    /* MOBILE - PROCESSING ORDER VIEW */
    .processingorder-container {
        width: 90%;
        height: 80%;
    }

    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /* MOBILE NAV */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    .mb-nav {
        position: fixed;
        bottom: 0;
        display: none/*flex*/;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background-color: var(--white-color);
        z-index: 99;
        overflow: hidden;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
    .mb-nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 25%;
        padding: 1rem 0;
    }
    .mb-nav-item i,
    .mb-nav-item a {
        font-size: 2rem;
        color: var(--second-color);
        z-index: 2;
        transition: .5s ease-in-out;
    }
    .mb-nav-item a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* padding: 10px; */
    }
    .mb-nav-item.active i, .mb-nav-item.active a {
        color: var(--white-color);
    }
    .mb-move-item {
        position: absolute;
        left: 0;
        width: 25%;
        height: 100%;
        background-color: var(--primary-color);
        transition: .5s ease-in-out;
    }
    /* END MOBILE NAV */
    .col-xs-1 {
        width: 8.33%;
    }
    .col-xs-2 {
        width: 16.66%;
    }
    .col-xs-3 {
        width: 25%;
    }
    .col-xs-4 {
        width: 33.33%;
    }
    .col-xs-5 {
        width: 41.66%;
    }
    .col-xs-6 {
        width: 50%;
    }
    .col-xs-7 {
        width: 58.33%;
    }
    .col-xs-8 {
        width: 66.66%;
    }
    .col-xs-9 {
        width: 75%;
    }
    .col-xs-10 {
        width: 83.33%;
    }
    .col-xs-11 {
        width: 91.66%;
    }
    .col-xs-12 {
        width: 100%;
    }
    .h-xs {
        display: none;
    }
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
    /*  ////////// ////////// ////////// ////////// ////////// ////////// */
}