*{
    box-sizing: border-box;
    font-family: 'Inter' !important;
    color: rgb(44, 44, 44);
    
}
a {
    text-decoration: none;
    
}
.inventoryback{
    color: #019d51;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px rgba(24, 174, 1, 0.324);
}

.inventoryback:hover{
    color: #009c51;
}
body{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
}
.active{
    font-weight: 600 !important;
}
div.left{
    background-color: #02BF63;
    height: 100vh;
    width: 300px;
    justify-content: space-between;
    display: flex;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: center;
}
div.options{
    width: 100%;
    margin-top: 5lvh;
}
ul.options{
    text-align: center;
    padding: 0;
    margin: 0;
   
    display: flex;
    flex-direction: column !important;
}
li.logout{
    margin-top: 50px;
    margin-bottom: 50px !important;
}
li.options{
    text-align: center;
    margin-bottom: 10px !important;
}

li.options>a{
    text-decoration: none;
    color: white;
    
    
    font-size: 3.6lvh;
    font-weight:400;
}
ul{
    list-style: none;
}
div.right{
    width: 100%;
    display: flex;
    flex-direction: column;
}
form.addstore{
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 20px 50px;
}
/*Login*/
div.login-left{
    background-color: white;
    width: 50%;
    height: 100lvh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.login-right{
    background-color: #02BF63;
    width: 50%;
    height: 100lvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#login-input, #login-submit{
    border-radius: 15px !important;
    outline-color: white;
}
label.login-label{
    padding-left: 10px;
    margin-bottom: 5px;
    color: white;
    font-weight:600;
    margin-bottom: 2px;
    margin-top: 15px;
}
#login-submit{
    font-weight:800 !important;
    color: #02BF63 !important;
}

.login-left img {
    width: 300px; 
}
.login-text{
    color: #02BF63;
    font-weight:900 !important;
}
/*Super admin*/

.superadminstorelogo{
    
    border-radius: 50%;
    width: 25lvh;
    height: 25lvh;
    
}
.storelogooverview{
    width: 20lvh;
    height: 20lvh;
    margin-right: 20px;
    border-radius: 50%;
}
.storetable{
    margin-left: 100px;
}
/*edit store modal*/
.editinput{
    background-color: rgba(228, 228, 228, 0.521) !important;
}
/*overview superadmin*/
.onoff{
    font-size: 3rem;
}
.onlinetxt{
    font-size: 1rem !important;
}
.red{
    color: red;
}
.green{
    color: #009c51;
}
.storestat{
    display: flex;
    justify-content:space-around;
    align-items: end;
    flex-direction: row;
    
}
.collect{
    background-color: #FF914D !important;
    border-color: #FF914D !important;
    
}
.stores{
    display: flex;
    flex-direction: row;
}
.storenumber{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    margin-right: 15px;
    color:#FF914D;
    font-size: 4rem;
    font-weight: 800;
    /*font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;*/
    
}
.storestext p{
    margin: 0px;
    line-height: 1.2;
    font-size: 1.5rem;
    color:#007F41;
    font-weight: 700 !important;
    
    /*font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;*/  
}
.storestext{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.productrank{
    padding: 0px 70px;
}
.superadminoverview th{
    color:#007F41 !important;
}
.monthlyproducttxt{
    font-size: 1.8rem;
    color:#007F41;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0px !important;
}
.stafftxt{
    font-size: 1.6rem;
    color:#008d49;
    font-weight: 700;
    text-align: center;
}
.ranktxt,.rankhead{
    font-weight: 700;
    text-align: center !important;
}
.notranktxt{
    font-weight: 500;
}
.filteroverview{
    display: flex;
    flex-direction: row;
    
    max-width: 80%;
    
}
.monthlyproducttxt{
    margin-bottom: 20px;
}
.storefilter{
    margin-left: 0px;
}
.storefilter,.categoryfilter{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: end;
}
.labeloverview{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right:5px;
    
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.salestxt{
    font-size: 1.8rem;
    color: #007F41;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px !important;
    margin-top: 20px;
    width: 100%;
    align-items: center;
}
.printpdf{
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 4px 8px 0px #77777760;
    margin-left: 20px;
}
.excelpdf{
    margin-left: 20px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 2px 4px 0px #7777772f;
    border-color: rgb(201, 201, 201) !important;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.saleshead{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 10px;
}
.itemperiod{
    display: flex;
    justify-content: end !important;
    width: fit-content;
    flex-direction: row;
    align-items: center;
}

.salessuper>.form-select{
    width:min-content;
   
}
.salessuper{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
}
.superadminsalescanvas{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 0 50px;
}
.storeinfotxt{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.storeinfotxt p{
    margin-bottom: 0;
}
.overviewstorename{
    color: #007F41;
    font-size: 2rem;
    font-weight: 700;
}
.storeinfooverview{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 28%;
    margin: 20px 40px;
}
.storeoverview{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.storeinfooverview{
    width: 90%;
}
.form-check-input:checked {
    background-color:#007F41;
    border-color:#007F41;
}
.form-switch .form-check-input {
    height: 2rem;
    width: 3rem;
}
.form-check.form-switch{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end;
}
.superadmintxt{
    font-size: 2rem;
    font-weight: 7 00;
    margin: 20px 0px 0px 30px;
    color: #007F41;
    margin-bottom: 40px;
}
/*Account*/
#rightaccount{
    
    
}
.accountsdiv{
    margin-left: 5lvw;
    
}

.accountstext{
    
    color:#007F41;
    font-weight: 800;
    font-size: 2em;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 1lvh;
}
.accountstext p{
    color: #02BF63;
}

.accountsdiv{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
    height: 70lvh;
    padding-right: 1lvw;
    
}
input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}


.acoountdiv{
    display: flex;
   
    flex-direction: row;
    cursor: pointer;
    align-items: center;
    width: 26%;
    max-height: 30%;
    margin-right: 60px;
    height: 27%;
    background-color: #02BF63;
    border-radius: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px 0px #03412260;
}






.accountlogo{
    width: lvh;
    height: 14lvh;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-left: 5%;
}
.accountname{
    color: white;
    font-size: 2em;
    font-weight: 700;
    text-wrap: nowrap;
    margin-bottom: 0 !important;
    white-space: normal;
    margin-right: 5px;
    width: 100%;
    text-align: center;
    padding-right: 5px;
}
.storename
{
    width: 100%;
    text-align: center;
}
.categoryname
{
    width: 100%;
    
}
.addstore{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 30px;
    
}
#add-store{
    background-color: #00a153;
    border-color: #02BF63;
    width: 180px;
    height: 80px;
    position: fixed;
    bottom: 20px;
    right: 0px;
    
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.modal-dialog {
    max-width: 60% !important;
    
}
.menumodal{
    max-width: 50% !important;
    max-height: 60lvh !important;
}
.modal-content1{
    border-radius: 20px !important;
}
.form-label{
    margin: 0;
    font-weight: bold;
}
.form-control{
    border-radius: 10px !important;
    border-color: rgba(109, 109, 109, 0.562)
}
/*add account modal*/
.upperaddacc{
    display: flex;
    flex-direction: row;
}
.storeinfo{
    display: flex;
    flex-direction: column;
    
}
.labelinput{
    width: 100%;
    margin-right: 3lvh;
}
.labelinputright{
    margin-right: 0 !important;
}
.storeinforow{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    margin-bottom: 10px;
}
.exitbtn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}
.modaltitle{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#007F41;
    margin-bottom: 30px;
}
.modaltitle>h5{
    font-size: 5lvh;
    font-weight: bold;
}

.modal-content1{
    padding: 2lvh 5lvw;
}
.footer{
    width: 100%;
    margin-top: 50px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px !important;
}
.editstorefooter{
    display: flex;
    flex-direction: row-reverse;
}
.footer>button{
    width: 45%;
    border-radius: 20px !important;
}
.editstorefooter>form>button{
    width: 100%;
    border-radius: 20px !important;
}
.editstorefooter>form{
    width: 45%;
}
.addacclogo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px black solid;
    min-height: 25lvh;
    min-width: 25%;
    border-radius: 10px;
    margin-right: 2lvw; 
}
.editacclogo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px black solid;
    min-height: 25lvh;
    min-width: 25%;
    border-radius: 10px;
    margin-right: 2lvw; 
}

label{
    width: 100%;
}
.upperaddacc{
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.addstorebelow{
    margin-top: 20px;
}
.greenbtn{
    background-color:#02BF63 !important;
    border-color: #02BF63 !important;
}
.greenbtn:hover{
    background-color:#00a153 !important;
    border-color: #00a153 !important;
}
.graybtn{
    background-color: #dc3545;
    border-color: #dc3545 !important;
}

.graybtn:hover{
    background-color: #ee182d;
    border-color: #ee182d !important;
}
.uploadbtn{
    display: flex;
    flex-direction: column;

}
.uploadbtn>i{
    font-size: 10lvh;
}
.ownerdetailstext{
    font-weight: bold;
    
}
.ownercontact{
    min-width: 130px !important; 
    
}
/*Kiosk*/
/*store*/
.storebody{
    display: flex;
    flex-direction: column;
    
}
.header{
    background-color:#02BF63;
    width: 100%;
    display: flex;
    justify-content:space-between;
    font-size: 1.3rem;
    align-items: center;
    color: rgb(255, 255, 255);
    padding-right: 20px;
    font-weight: 700 !important;
}
#text{
    font-weight: 600 !important;
}
.bx-shopping-bag{
    font-size: 2rem !important;
    margin-left: 5px;
    color: white;
    width: 36px;
   
}
.kioskstorelogo{
    width: 8lvh;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 2px 4px 0px #1f1f1f60;
    margin: 10px 0 10px 30px;
    border-radius: 50%;
   
}
.down{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.kioskstores{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: 50vh;
    width: 90%;
    
}


.kioskstore{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 22%;
    height: 30%;
    background-color: #02BF63;
    border-radius: 30px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px 0px #03412260;
    margin-right: 2lvw !important;
}



.storelogo{
    
    height: 10lvh;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-left: 5%;
}
#storestext{
    width: 100%;
    display: flex;
    color: rgb(43, 43, 43);
    font-weight: 800;
    font-size: 2em;
    align-items: flex-start;
    margin-top: 40px;
    margin-bottom: 10px;
    padding-left: 5%;
}
.storename p{
    font-size: 2vw;
}
.categoryname p{
    font-size: 4lvh;
    font-weight: bold;
    
}
input.searchstores{
    min-width: 90lvw;
    min-height: 8lvh;
    border-radius: 20px;
    background-color: rgba(207, 207, 207, 0.452);
    border-color: white;
    padding-left: 20px;
    border: 0;
}
.kiosksearch{
    margin-top: 4lvh;
    
}
.kiosksearch form{
    display: flex;
    justify-content: center;
    flex-direction: row;
    border: none;
}
.kioskstore:hover{
    cursor: pointer;
}
/*menu*/
.addcategorymodal{
    max-width: 40% !important;
}
.addcategorymodalcontent{
    border-radius: 10px !important;
}
.storeheader{
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px 0px #77777760;
}
.menusstoreholder{
    justify-content: space-between !important;
    width: 100% !important;
}
.filteroverviewmenus{
    min-width: 100% !important;
    display: flex;
    justify-content: space-between;
}
.menustorename p{
    font-weight:800;
    /*font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    font-size: 5lvh;
}
.menustorename{
    margin: 2lvh 0px 0px 2lvw;
}
.menusearch{

   display: flex;
   flex-direction: row;
   border: 0;
   justify-content: space-between;
}
.menusearch form{
    display: flex;
    justify-content: start;
    flex-direction: row;
    border: none;
}
input.menusearch{
    min-width: 30lvw;
    min-height: 5lvh;
    border-radius: 20px;
    background-color: rgba(207, 207, 207, 0.452);
    border-color: white;
    padding-left: 20px;
    margin-left: 2lvw;
    margin-bottom: 15px;
}
.categories{
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: end;
}
.categories>ul>li>a{
    margin: 0 1.5lvw !important;
    line-height: 5lvh !important;
    margin-bottom: 0px !important;
    font-size: 3lvh;
    font-weight: 700;
    color: #02BF63;
}
.activemenu{
    border: 0;
    border-bottom: 7px #02BF63;
    margin-bottom: 0px !important;
    border-style:solid ;
    line-height: 50px !important;
    transition: width 0.3s all;
}
.storeitems{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow-y: scroll;
    max-height: 68lvh;
    padding-right: 20px;
    width: 100%;
    max-width: 100lvw;
    padding-left: 30px;
}
.storeitem{
    display: flex;
    flex-direction: row;
    align-items: center;
    
    width: 30%;
    justify-content: space-between;
    max-height: 25lvh;
    margin-right: 5%;
    background-color: white;
    border: 1px rgba(194, 194, 194, 0.555)   solid;
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 10px 20px;
    box-shadow: 0 1px 2px rgba(197, 197, 197, 0.007), 0 8px 16px 0px #5757572a;
}
.itemname{
    font-size: calc(2.5lvh + 0.5lvw);
    /*font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif!important;*/
    font-weight: 600 !important;
    margin-bottom: 0px !important;
    
}
.itemprice{
    margin-bottom: 0px !important;
    font-weight: 500 !important;
}
.kioskstore{
    display: flex;
    

}
.itemlogo{
    height: 20lvh;
    width: 40%;
    object-fit: cover;
    
}
.itemdetails{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}
.categoryitem{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
    height: auto;
}
ul{
    display: flex;
    list-style: none !important;
    text-decoration: none !important;
    flex-direction: row;
    list-style-type: none !important;
    margin-bottom: 0px !important;
}
li{
    text-decoration: none !important;
    list-style-type: none;
    margin-bottom: 0px !important;
}
a{
    text-decoration: none !important    ;
}
.itemsdiv{
    display: flex;
    flex-direction: row;
    height: auto;
    width: 100%;
    
    flex-wrap: wrap;
}
.storemenus{
    max-width: 100lvw;
    
}
.storeitem:nth-child(3n) {
    margin-right: 0;
}

.menumodalpic{
    height: 40lvh;
    width: 100%;
    object-fit:cover;
    
}
.menumodalcontent{
    padding: 0lvh 0lvw !important;
    border-radius: 20px;
    min-height: 95lvh !important;
}
.itemmenuprice{
    font-weight: 400 !important;
}

.menuprice{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 600 !important;
}
.menuprice1{
    font-size: 1.5rem;
}
.menuitemname{
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0;
}
.modalbody{
    max-height: 100lvh !important;
    margin:0px !important;
    padding:0px !important;
    overflow-y: hidden;
}
.menumodalbody{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 68lvh;
    margin: 0 0 0 20px !important;
    padding-right: 20px !important;
}
.choosevariant{
    font-size: 1.4rem;
    margin-bottom: 0px;
    font-weight:600;
}
.menuvariation, .menusize{
    width: 100%;
    background-color:#02bf640c;
    border:1px rgba(128, 128, 128, 0.295) solid;
    align-items: flex-start;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.itemsizelabel{
    font-weight: 600;
    color: rgb(80, 80, 80) !important;
}
.modalfooter{
    max-height: 10lvh !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100% !important;
}
.menuvariation input,.menusize input{
    transform: scale(1.5);
    margin-right: 15px;
    border-color: #007F41;
}
.radioholder:hover{
    background-color:#1bb46d4d;
    border-radius: 5px;
    
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    margin-right: 10px; /* Adjust the margin as needed */
    color: #007F41;
    font-weight: 500;
    box-shadow: 1px 2px 4px rgb(150, 189, 114);
    background-color: #cbf0de4f;
    border-radius: 5px;
    padding: 2px 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    /* Add your hover effect styles here */
    /* For example: */
    background-color: #009c51; /* Change background color on hover */
    color:white; /* Change text color on hover */
    cursor: pointer;
}


.radioholder:hover label{

    color:#007F41;
}
.radioholder:hover input[type="radio"] {
    border:#007F41 2.5px solid ; 
}
.radioholder p{
    font-size:1.3rem;
    align-items: center;
    text-align: center;
    margin-bottom: 0px !important;
    font-weight: 400 !important;
    
}
.storeitem {
   
    transition: transform 0.1s ease; 
}

.storeitem:hover {
    transform: scale(1.03); 
    background-color:#29da5e15;
}
input.quantity{
    text-align: center;
    max-width: 40px !important;
}
.quantityInput{
    min-width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0;
}
.quantitydiv{
    display: flex;
    flex-direction: row;
    max-width:100px;
    min-width:100px;
    width: 100px;
    justify-content: space-between;
    margin-right: 20px
}
.quantitybtn{
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    
}

.quantitybutton{
    min-height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
    font-size: 1.1rem;
    border: gray 1px solid;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.quantitybutton p{
    margin-bottom: 0px;
    text-align: center !important;
}
.modal-footer{
    
}
.addtocartbtn{
    width:100% !important;
    min-height: 7lvh;
    background-color: #02BF63 !important;
    border-color:#02BF63 !important;
    border-radius: 10px !important;
}
.stockdiv{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.menustock{
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 0px;
    color: gray;
}
.stockdiv p{
    text-align: center;
}
/*search store*/
.searchbackground{
    background-color: rgba(128, 128, 128, 0.116);
    padding: 20px;
    border-radius: 10px;
}
input[type="radio"] {
   
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
   
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #007F41;
    background-color: white;
    margin-right: 10px; 
    
}
button:disabled{
    background-color: gray !important;
    border-color: gray !important;
    
}
.fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade-in-left.show {
    opacity: 1;
    transform: translateX(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in.show {
    opacity: 1;
}


@keyframes checkedAnimation {
    50% {
        background-color: #007F41;
        border-color: #007F41;
    }
    100% {
        background-color: white;
        border-width: 4px;
    }
}

input[type="radio"]:checked {
    animation: checkedAnimation 0.3s;
    border-width: 4px;
}

.radioholder:hover input[type="radio"]:checked {
    border-width: 4px;
}
.radioholder{
    display: flex;
    flex-direction: row;
    align-items: center !important;
    line-height: 50px;
    width: 100%;
    padding: 0 15px;
}


.radio{
    margin-right: 10px;
    
}
.cartbag{
    position: relative;
    bottom: 0;
    right:0;
}
/*store*/
/*add item*/
.itemsize{
    display:flex;
    flex-direction: row;
}
.addsizebtn{
    margin-left: 50px;

}
.additemlogo{
    margin-right: 0px !important;
    min-height: 50lvh;
}
.addstoreinput{
    /*margin-top: 20px;*/
}
.addsizebtngreen{
    background-color:unset;
    color: black;
    border-color:#00b35c !important;
    border-width: 1.5px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 1px 2px rgba(202, 202, 202, 0.068), 0 8px 16px 0px #b6b6b671;
}
.checkbox{
    margin-bottom: 10px;
}
#newVarietyInput,#newSizeInput{
    margin-bottom: 20px;
    margin-top: 10px;
}
.additemstore,.additemvariant{
    width: 100%;
}
.additemvariant{
    width: 70% !important;
}
.itemdetailstxt{
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 10px;
}
.additeminput{
    margin-top: 20px;
}
.additemstore{
    padding-right: 30px;
}
.additemvariant{
    padding-left: 30px;
    max-height: 78lvh;
    overflow-y: auto;
}
.addsizebtngreensubmit{
    background-color:#009c51;
    border-color:#00c465;
    width: 100%;
    position:relative;
    bottom: 0;
    height: 3rem;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(29, 97, 43, 0.226), 0 8px 16px 0px #45534b71;
}
.addsizebtngreensubmit:hover{
    background-color: #008143;
    border-color: #008143;
    
}
.addsizebtngreen:hover{
    background-color:#d3f0e2;
    border-color: #7ccea6 !important;
    color: black !important;
}
.submitbtndiv{
    width: 30%;
    display: flex;
    align-items: end;
    
    position: fixed;
    bottom: 50px;

    
    
}

.sizecontainer{
    display: flex;
    flex-direction: row;
}
a.ddvariant{
    margin-bottom: 50px;
}
.itemsizee{
    display:flex;
    flex-direction: row;
}
#size-container{
    display: flex;
    flex-direction: row;
    margin-left: 50px;
}
.additem{
    display: flex;
    flex-direction: column !important;
}
#varietyOption, .size-option{
    display: flex;
    flex-direction: row;
}
#varietyOption label, .size-option label{
    margin-left: 5px;
}
.additem2formheader{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.hradditem{
    margin-top: 5;
}
.varietytxtheader{
    border: 0;
    min-width: 100px !important;
    font-weight: 600;
    background-color: unset !important;
}
p.varietytxtheader{
    font-size: 1.2rem;
    font-weight: 600;
}
input.varietytxtheader::placeholder {
    font-size: 1.2rem;
    color: black;
    font-weight: 600;
}
.additem2,.headeradditem2{
    padding: 0px 30px;
    padding-bottom: 0 !important;
}
.additem2{
    max-height: 82lvh;
    overflow-y: scroll;
}
.headeradditem2{
    padding: 0;
    margin-bottom: 0px !important;
    margin: 0 !important;
    padding: 10px 30px !important;
    border: 0;
}
.pricestocktxt{
    min-width: 250px !important;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
}
.sizetxt{
    margin-bottom: 0;
    min-width:100px;
    font-weight: 500;
    font-size: 1.2rem;
}
.variantstxt{
    margin-top: 30px !important;
   
    font-weight: 600;
    font-size: 1.5rem;
}
.variantstxt:first-child {
    margin-top: 0px !important;
}

.sizedetails{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 15px;
    align-items: center;
    margin-left: 40px;
    padding-bottom: 15px;
}
.receipttext{
    width: 100%;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 800;
    margin-top: 20px;
    color:#007F41;
    margin-bottom: 0px;
}

/*cart*/
.cartstorename{
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}
table td>input{
    
}
.table>:not(caption)>*>* {
    padding: 0.3rem !important;
}
.table>tbody{
    vertical-align:unset;
}
td>select{
    border:none;
    background-color:white !important;
}

select>option{
    background-color: lightgray !important;
}

td>input{
    border: 0px;
    outline: none;
}
.mt-4{
    margin-top: 1rem !important;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    transition: visibility 0.5s;
}

#loading-spinner {
    border: 8px solid #f3f3f3; 
    border-top: 8px solid #02BF63; 
    border-radius: 50%;
    background-image: url('../resources/foodpark.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 300px;
    height: 300px;
    animation: spin 1s linear infinite;
}

/*logo animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.cartfooter{
    width: 100%;
    padding: 0px 7lvw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    bottom: 40px !important;
}
.cartfooterbtn{
    width: 35%;
    border-radius: 20px;
    height: 50px !important;
    background-color: #02BF63 !important;
    border-color: #02BF63 !important;
    font-size: 1rem;
    font-weight: 700 !important;
}
.cancelbtn{
    background-color: gray !important;
    border-color: gray !important;
}
.iscancelled{
    margin-top: 0px;
}
.countdown-message{
    margin-top: 10px;
    text-align: center;
}
.cancelbody{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.canceltxt{
    text-decoration: none;
    color: white !important;
    font-size: 1rem;
}
.orderidtxt{
    color: white;
    margin-bottom: 0px !important;
    font-size: 1.1rem;
    font-weight: 700;
}
.totalcartcount p{
    color: white !important;
    position: fixed;
    top: 20px;
    right:20px;
}
.cart-count{
   
    position:absolute;
    top: 18px;
    width: 20px;
    height: 20px;
    right: 0px;
    font-size: 1rem;
    background-color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
}
.cart-count>span{
    color: #007F41 !important;
}
.cart-count>span{
    min-width: 20px;
}
.nocart{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
.nocartbtn{
    width: 30% !important;
    margin-top: 20px;
}
.cartdiv{
    max-height: 60lvh !important;
    overflow-y: scroll;
}
@keyframes scaleAndFadeIn {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.cart-count-number.show-animation {
    animation: scaleAndFadeIn 0.7s ease;
}


.menuvariation, .menusize, .radioholder {
    transition: background-color 0.5s ease-out;
}
.menusize{
    margin-bottom: 20px !important;
}
.submitbtngreen{
    background-color:#009c51;
    border-color: #009c51;
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 10px;
    padding: 10px 50px;
    box-shadow: 0 1px 2px rgba(29, 97, 43, 0.226), 0 8px 16px 0px #45534b71;
}
.submitbtngreen:hover{
    background-color: #008143;
    border-color: #008143;
}
/* comfirmed order*/
.confirmorderid{
    color: rgb(80, 80, 80);
    font-size: 1.5rem !important;
}
.orderpaymenttxt{
    font-size: 1.7rem !important;
    font-weight: 700;
    color: #007F41 !important;
    margin-bottom: 0;
    text-align: center;
}
.customernumbertxt{
    font-size: 0.8rem !important;
    font-weight: 600;
    color: #007F41 !important;
    text-align: center;
    margin-bottom: 30px;
}



/*STore orders*/
.modalorders{
    padding: 30px 50px !important;
    min-height: 80lvh !important; 
}
.paybtn{
    width:40% !important;
    min-height: 7lvh;
    background-color: #02BF63 !important;
    border-color:#02BF63 !important;
    border-radius: 10px !important;
}
.closebtn{
    background-color: gray !important;
    border-color: gray !important;
}
.divorderspaid {
    max-height: 100lvh !important;
    overflow-y: scroll;
}
.cashdiv{
    display: flex;

    align-items: end;
    flex-direction: column;
}
.cashtendered{
    max-width: 100px;
    border-radius: 10px;
}
.cashdivholder{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.cashtxt{
    margin-bottom: 0 !important;
}
.totalpricenonmodal{
    text-align: end;
    
}
.totalprice{
    font-weight: 600 !important;
}
.cartitemname{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0 !important;
}
.cartfooterdelete{
    justify-content: space-between !important;
}
.cartdelete{
    width: auto !important;
    border-radius: 20px;
}
.cartdeletemodal{
    align-items: center;
    justify-content: center !important;
}
.totalinputmodal,.totalprice{
    min-width: 70px; /* Set the minimum width to 100 pixels, adjust as needed */
    text-align: start;
    display: inline-block; 
}
.totalinputmodal,.modalchange,.cashtendered,.pesosign{
    font-size: 1.2rem;
    font-weight: 600;
}
.ordersnumdiv{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
}
.orderserved{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.orderpending{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.orderpendingtxt,.orderservedtxt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    color: #007F41;
}
.orderpendingtxt p,.orderservedtxt p {
    color: #007F41;
    font-size: 1.8rem;
    font-weight: 800;
}
.ordertxt{
    margin-bottom: 0;
}
.orderpeningnum,.orderservednum{
    align-items: center;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    font-size: 5rem;
    color: #FF914D;
    font-weight: 700;
    margin-right: 10px;
}
.storeright{
    padding: 20px 50px 0px 50px;
}
.container.mt-4{
    margin-top: 0px !important;
}
.storesrow{
    border-style: none !important;
}
.tablestore td {
  /*border: none !important;*/
}
table{
    border-collapse: unset;
}
.orderqueuetxt{
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: #007F41;
    margin-bottom: 0;
}
.storehr{
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: black !important;
    background-color: black;
    opacity: 1 !important;
}
td.ordernum{
    max-width: 20px !important;
}
.tablestore th{
    max-width: 30px !important;
}
.tablestore tr{
    text-align:center;
}
td.price span{
    display: inline-block !important;
}
.tablestore td.price{
    max-width: 5px !important;
}
.table-max-height tbody{
    max-height: 30lvh !important;
    overflow-y: auto !important; 
}
.paybtnnonmodal{
    width: 50%;
    background-color:#02BF63;
    border-color:#02BF63;
    margin-bottom: 5px;
}
.paybtnnonmodal:hover{
    background-color: #00b35c;
    border-color: #00b35c !important;
}
#orderTableBody{
    
    overflow-y: scroll !important;
}
.bg-primary {
    background-color:#01a556!important;
    
}
.toast-body{
    color: white !important;
}
.neworderid{
    color: white !important;
    font-weight: 600;
}
.toast{
    font-size: 1.1rem !important;
    font-weight: 500;
}
.storequeuebody{
    display: flex !important;
    justify-content: center;
    align-items: start;
    flex-direction: row;
    width: 100lvw;
    background-color: rgba(231, 231, 231, 0.5);
    background-size:30%;
    background-position:center; 
    background-repeat: no-repeat;
}
.storequeuebody::after {
    content: "";
    position: absolute;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 80lvh;
    background-position: center; 
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
}
.storequeueleft,.storequeueright{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    
}
.colleccttxt,.preparingtxt{
    text-align: center;
    margin-bottom: 0;
    font-size: 3rem;
    font-weight: 700;
    color: white;
}
.storequeueheader{
    background-color:#008d49;
}
.storequeueheader.preparing{
    background-color: rgb(83, 83, 83);
}
.preparingorderid,.collectorderid{
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 0px;
}
#collectdiv,#preparingdiv{
    column-count: 3;
    column-gap: 20px; 
    overflow: hidden; 
    max-height: 85lvh;
    break-inside: avoid-column; 
    column-fill: auto; 
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
}
.storequeueleft{
    margin-right: 5px;
}
/*staff*/
.addstaffbtn{
    background-color:#00b35c !important;
    border-color: #00b35c !important;
    border-radius: 20px;
    width: 14%;
    margin-bottom: 30px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 4px 8px 0px #77777760;
    
}
.staffoptions{
    display: flex;
    justify-content: center;
}
.boxshadow{
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 2px 4px 0px #7777772f;
}
.overviewstaffsheader{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 10px;
}
.settingbtn{
    margin-top: 20px;
}
/*add staff*/

.addstaffmodaldialog{
    max-width: 40% !important;
}
.addstaffmodalbody{
    max-height: 65lvh !important;
    overflow-y: scroll;
}
.addstaffinput{
    margin-bottom: 10px;
}
.formtxt{
    font-size: 1.5rem;
    font-weight: 800;
}
.optional{
    color: rgb(82, 82, 82);
}
.addstaffsubmit{
    background-color:#00b35c !important;
    border-color:#00b35c !important;
}
.staffadded {
    position:fixed;
    top: 30px;
    left: 48%;
    background-color: #bdf3c8 !important;
    border-color: rgb(169, 238, 186) !important;
    
}
.strongsuccess{
    color: unset;
}
.chart-label{
    text-align: center;
}
/*cashier*/
.cashierbody{
    flex-direction: row !important;
}
.cashierbag{
    position: fixed;
    right: 70px;
    bottom: 50px;
}
.cart-count>.cartcountnumber{
    color: white !important;
    font-size: 1.5rem !important;
}
.shoppingbag{
    font-size: 3rem !important;

}
.shoppingbagcircle{
    height: 30px;
    width: 30px;
    top: 25px !important;
    right: -15px !important;
}
.cashiersearch{
    margin-top: 20px;
}
.cashieritems{
    max-height: calc(85lvh) !important;
    overflow-y: auto !important;
}
.storecartbody{
    display: flex;
    flex-direction: row;
}
.storecartcancel{
    color: black !important;
}
.tablecartstore{
    max-height: 90lvh !important;
    overflow-y: auto;
}
.storecarttable{
    padding: 0 20px !important;
}
.cartstoretxt{
    margin:25px;
}
.cartfooterstorecart{
    width: 80%;
}
.uppersetting{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.uppersettingsuperadmin{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.leftupper{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
}
.lowersetting{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 30px;
    
}
.lowerlower{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.lowerrow{
   
    margin-right: 20px;
}
.formsetting{
    margin: 0px 80px;
    margin-top: 20px !important;
}
.storedetailssetting{
    width: 100%;
}
.labeltxt{
    font-size: 1.5rem;
    margin-bottom: 7px;
}
.editstorelogo{
    min-height: 25lvh;
    min-width: 18%;
}

/*index*/
body.index{
    background-color:#009c51 !important;
    min-width: 100% !important;
    min-height: 100lvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.indexorder,.indexlogin{
    border: 10px solid;
    border-radius: 50%;
    min-width: 60lvh;
    min-height: 60lvh;
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
    align-items: center;
    box-shadow: 0 5px 10px rgba(93, 121, 116, 0.384), 10px 16px 32px 0px #0d5f36d8;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white !important;
}
.indexorder i,.indexlogin i{
    color: white !important;
    
}
.indexorder:hover, .indexlogin:hover { 

    transform: scale(1.1); 

}
.indexorder,.indexlogin{
    font-size: 15rem;
}
.indexholder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.indexfont{
    font-size: 2rem !important;
    font-weight: 800;
    color: white;
}
/*kioskindex*/
.indexkiosk{
    display: flex;
    justify-content:space-around;
    align-items: center;
    width: 100%;
    flex-direction: column;
    background-color: #02BF63;
}
.indextop{
    background-color:#02BF63;
    height: 80lvh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.indexwelcome{
    font-size: 4rem !important;
    color: white;
    font-weight: 900;
    letter-spacing: 8px;
}
.indextap{
    font-size: 3rem;
    color: white;
    font-weight: 600;
}

@keyframes breathe {
    0%, 100% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.1);
      
      opacity: 1;
    }
  }
  
  .indextap {
    animation: breathe 1s infinite ease-in-out;
  }
  
.indexkiosk {
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    opacity: 1;
    transition: opacity 1s;

}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    animation: fadeOut 1s forwards;
}

@media (orientation: portrait) {
    .modalbody{
        max-height: 100lvh !important;
    }
    .storename p{
        font-size: 1.5rem;
    }
    .kioskstore{
        width: 30%;
        height: 40%;
        flex-direction: column !important;
        justify-content: space-around !important;
    }
    .kioskstores{
        height: 65lvh !important;
    }
    .storelogo{
        margin-left: 0;
        height: 15lvh;
    }
    .storeitem{
        flex-direction: column-reverse;
        min-height: 30lvh !important;
    }
    .itemlogo{
        width: 100% !important;
        height: 15lvh !important;
        min-height: 20lvh !important;
        object-fit:cover !important;
    }
    .categories>ul>li>a{
        font-size: 1.8lvh;
        line-height: 5lvh !important;
        padding-bottom: 8px;
        margin: 0 1lvw !important;
    }
    .menustorename p{
        font-size: 4lvh;
    }
    .categoryname p{
        font-size: 3lvh;
    }
    .itemname{
        font-size: 2lvh;
    }
    .storeitems{
        max-height: calc(95lvh - 53px - 100px - 60px) !important;
    }
    .storeitem{
        align-items: flex-start !important;
    }
    input.menusearch{
        min-height: 5lvh !important;
        margin-bottom: 10px;
    }
    .menumodal{
        max-width: 60% !important;
    }
    .menumodalbody{
        max-height: 100lvh;
    }
}


@media screen and (max-width: 767px) {
    .menusearch{
        flex-direction: column !important;
    }
    .categories{
        justify-content: start;
    }
    .categories ul{
        padding-left: 2lvw !important;
    }
    #searchforms, input.menusearch{
        width: 100% !important;
        margin-right: 2lvw;
    }
    .storeitem{
        width: 100%;
        margin-right: 10px;
        flex-direction: row;
        min-height: 5px !important;
        padding-right: 10px !important;
        box-shadow:  none !important;
        border: 0px !important;
        border-bottom: 1px solid lightgray!important;
        border-radius: 0px !important;
        margin-bottom: 5px !important;
    }
    .storeitem:last-child{
        border-bottom: 0px !important;
    }
    .itemlogo{
        width: 30% !important;
        max-height: 100px !important;
        object-fit:cover !important;
        min-height: 10px !important;
        border-radius: 20px !important;
    }
    .storeitems{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .categoryitem{
        padding-top: 20px !important;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }
    .categoryitem:not(:first-child) {
        border-top: 10px solid rgba(211, 211, 211, 0.199) !important;
        
    }    
    .index{
        flex-direction: column !important;
    }
    .indexorder,.indexlogin{
        min-width: 30lvh;
        min-height: 20lvh;
        font-size: 10rem !important;
    }
    .indexwelcome{
        font-size: 2rem !important;
        letter-spacing: 8px;
    }
    .indexwelcome {
        
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    span.indexwelcome{
        letter-spacing: 2px;
    }
    .indextap{
        font-size: 1.5rem;
    }
    /*stores mobile*/
    .kioskstores{
        padding-right: 0;
    }
    .kioskstore{
        width: 45%;
        margin-bottom: 20px;
    }
    .storename p{
        font-size: 1rem !important;
    }
    .menumodal{
        max-width: unset !important;
    }
    .menuitemname{
        font-size: 1.5rem !important;
    }
}