body, input, select, textarea{
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Poppins', sans-serif;
    line-height: 150%;
    color: #000000;
    user-select: none;

}
body{
    background-color: #f1e8c7;

}
body:before{
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    box-shadow: #e53512 0px 0px 0px 2px inset;
    pointer-events: none;
}
input:focus, select:focus, textarea:focus{
    outline: none;
}
img {
    opacity: 1;
    transition: opacity 0.3s;
}

img[data-src] {
    opacity: 0;
}

@media print {
    body{
        background-color: #fff!important;
        scroll-margin-top: 0!important;
        scroll-margin-top: 0!important;
        background-image: none!important;
    }
    body:before{
        content: none;

    }
    .topbar, .pagefootercontainer{
        display: none!important;
    }
    .pageholdertopbar{
        display: none!important;
    }
    .monthselectorholder{
        display: none!important;
    }

}


.logincontainerholder{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logincontainer{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    margin: 0 10px;
    display: flex;
    flex-direction: column;
}
.logincontainertitle{
    position: relative;
    float: left;
    width: 100%;
    color: #FFF;
    font-size: 16px;

}

.kkadminloginformholder{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.pagecontainer{
    position: relative;
    margin: 0 auto;
    top: 10px;
    width: calc(100% - 20px);
    min-height: 700px;
    padding: 10px;
    max-width: 1024px;
    display: flow-root;
    border-radius: 10px;
}

.loginformholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 300px;
    background-color: #F6F6F6;
    margin: 100px auto 0;
}
.loginformtitle{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
}
.loginformuserid, .loginformpassword{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 14px;
    margin: 10px 10px 0 10px;
    border: none;
    padding: 10px;
}
.loginsubmit {
    position: relative;
    float: right;
    margin: 20px 10px 0 0;
    font-size: 14px;
    padding: 10px 20px;
    border: none;
    background-color:#000000;
    color: #FFFFFF;
    cursor: pointer;
}
.glyimgdownload{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    bottom: 5px;
    color: #FFF;
    cursor: pointer;
    z-index: 1;
}
.topbar{
    position: sticky;
    top: 0;
    float: left;
    width: calc(100% - 40px);
    padding: 0 20px;
    height: 100px;
    z-index: 3;
    border-top: none;
    display: flex;
    background-color: #ffffff;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
    background-image: url("../image/bordertexture.png");
    background-size: auto;
    /*background-repeat: no-repeat;*/
}
.profilepageverifiybyadminbutton{
    position: relative;
    float: left;
    padding: 0 10px;
    height: 40px;
    background-color: #ff0000;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}
.accountnavdropdown{
    position: fixed;
    right: -410px;
    bottom: 10px;
    width: calc(100% - 20px);
    max-width: 400px;
    height: calc(100% - 120px);
    background-color: #979F93;
    z-index: 2;
    overflow: hidden;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    transition: right .75s cubic-bezier(.5,0,.5,1);
}
.topbaritemholder{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.topbaritem {
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 15px 10px;
    color: #000000;
    text-decoration: none;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
    font-size: 14px;
    font-weight: bold;
}
.topbaritem:hover{
    color: #333333;
}

.createorderholder{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 655px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;
}
.createorderdate{
    display: none;
    position: relative;
    float: left;
    width: 100%;
    text-align: right;
    font-size: 12px;
}
.indexnewordertopbar{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.customardetails{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}
.customarnameinput{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.customarnameinput::placeholder, #customdeliverycharge::placeholder{
    color: #cccccc;

}

.orderplatformname{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
.importdatabutton{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/import.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;

}
.selectorderdetailsholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.createorderquantityselectholder{
    position: relative;
    float: left;
    margin-left: 10px;
    height: 16px;
    padding: 5px 0;
}
.createorderquantityselectminus, .createorderquantityselectplus{
    position: relative;
    float: left;
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #f6921e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.createorderquantityselect{
    position: relative;
    float: left;
    margin: 0 5px;
    width: 40px;
    height: 16px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #202124;

}
.selecteditemfororderholder{
    position: relative;
    float: left;
    width: 100%;
    padding: 20px 0;
    height: calc(100% - 240px);
    overflow: auto;
}
.selecteditem{
    position: relative;
    float: left;
    width: calc(100% - 30px);
    padding-left: 25px;
    font-size: 12px;
    margin-bottom: 5px;
    border-bottom: 1px solid #444;
    color: #fff;
}

.selecteditemimage{
    position: relative;
    float: left;
    width: 60px;
    height: 60px;
    background-color: #999999;
}
.selecteditemname{
    position: relative;
    float: left;
    width: calc(100% - 45px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.selecteditemtotalprice{
    position: relative;
    float: left;
    width: 45px;
    text-align: right;
}
.selecteditemprice{
    position: relative;
    float: left;
    width: 55px;
    /*margin-top: 7px;*/
    clear: both;
}

.forpathaolinkandcustomarinbox{
    display: block!important;
    position: absolute;
    left: -500px;
    bottom: 130px;
    width: 400px;
    height: 300px;
    opacity: 1;
    background-color: #999999;
}
.forpathaolinkandcustomarinboxtext{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    resize: none;
    border: none;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    color:#000000;
    line-height: 18px;
}
.forpathaolinkandcustomarinboxcopy{
    position: relative;
    float: right;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #f6921e;
    border: 1px solid #f7af2e;
    cursor: pointer;
}

.bottombar{
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 20px);
    height: 100px;
    padding: 10px;
    text-align: center;
    background-color: #202124;
}
.calculate{
    position: relative;
    display: inline-block;
    background-color: #f6921e;
    color: #FFFFFF;
    font-size: 14px;
    margin: 0 10px;
    padding: 10px 15px;
    cursor: pointer;
}
.forpathaolinkandcustomarinboxclose{
    position: absolute;
    right: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    background-image: url(../image/cancel.png);
    background-size: 30px 30px;
    cursor: pointer;
}

.topbarpagelogo{
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    cursor: pointer;
}
.topbarpagelogo img{
    width: 80px;
    height: 80px;
}


.selectdeliverylocation{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
#customdeliverycharge{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.removeproduct{
    position: absolute;
    left: 0;
    top: 2px;
    width: 26px;
    height: 26px;
    background-image: url(../image/minimize.png);
    background-size: 26px 26px;
    cursor: pointer;
    transform: scale(0.7);
    transform-origin: top left;
}
.allorderholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    min-height: calc(100% - 90px);
}
.saveicon{
    position: relative;
    float: right;
    width: 70px;
    margin-top: 10px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #93151f;
    border: 1px solid #780b14;
    cursor: pointer;
}


.savepopupholder{
    display: none;
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background-color: rgb(0 0 0 / 80%);*/
}
.savepopup{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #444;
}
.closesavepopup{
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    cursor: pointer;
    z-index: 1;
}
.selectpaymentmethodholder{

    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;

}
.selectpaymentmethod{
    position: relative;
    float: left;
    width: 185px;
    font-size: 14px;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #333;
    color: #999;
}
.selectpaymentmethod option{
    background-color: #FFFFFF;
    color:#000000;
}
.payableamountconfirmationholder{
    position: relative;
    float: left;
    width: 100%;
    max-width: 300px;
}
.payableamountconfirmation{
    position: relative;
    float: left;
    margin-left: 10px;
    line-height: 20px;
    text-align: left;
    color: #fff;

}
.saveorderbutton{
    position: relative;
    float: right;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    margin: 5px 10px 0;
    border-radius: 5px;
    color: #fff;
    background-color: #f6921e;
    border: 1px solid #f7af2e;
    cursor: pointer;
}






.allorderbox{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.orderbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #a0bacf;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

}
.orderboxcustomarname{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}
.orderboxordervalue{
    position: relative;
    float: left;
    font-size: 12px;
    color: #e53512;
    font-weight: bold;
    text-transform: uppercase;
}
.orderboxtagholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 5px;
}
.orderboxtag{
    position: relative;
    float: left;
    padding: 3px 6px;
    margin: 0 5px;
    background-color: #f6921e;
    color: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 12px;
}
.orderboxtag:first-child{
    margin-left: 0;
}
.orderboxtag:last-child{
    margin-right: 0;
}
.removeorderboxtag{
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background-image: url(../image/cancel.png);
    background-size: 20px 20px;
    cursor: pointer
}
.orderboxexpand{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-image: url(../image/down.png);
    background-size: 20px 20px;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s;

}
.orderboxdetails{
    display: none;
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 32px;
    border-top: 1px solid #75342A;
}
.orderboxproductholder{
    position: relative;
    float: left;
    width: calc(100% - 210px);
    display: flex;
    flex-direction: column;
    gap: 10px;

}
.orderboxproducttitle{
    position: relative;
    float: left;
    width: 100%;
    text-align: left;
    padding: 5px 0;
    margin-bottom: 10px;
    font-size: 16px;
    color:#000000;
}
.orderboxproductname{
    position: relative;
    float: left;
    width: 100%;
}
.orderboxproductnameli{
    position: relative;
    float: left;
    width: 100%;
    height: 60px;
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 10px;
}
.orderboxproductthumb{
    position: relative;
    float: left;
    width: 60px;
    height: 60px;
}
.orderboxproductthumb img{
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}
.itemli{
    position: relative;
    float: left;
}
.itemqty{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #75342A;
    color: #FFF;
    border-radius: 50%;
}
.orderboxdetailsupdate{
    position: relative;
    float: right;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}
.orderboxdetailtrackinglinkholder{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
}
.orderboxdetailtrackinglinklabel{
    position: absolute;
    top: -15px;
    left: 0;
    font-size: 12px;
    color: #999999;
}
.orderboxdetailtrackinglinkurl{
    position: relative;
    float: left;
    width: calc(100% - 75px);
    font-size: 14px;
    padding: 8.5px 5px;
    padding-right: 70px;
    background-color: transparent;
    border: 1px solid #70868d;
}
.checkoutpageorderplaceerroetext{
    position: relative;
    float: left;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
    cursor: pointer;
}
.orderboxdetailtrackinglinkurlviews{
    position: absolute;
    top: 6.5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-image: url(../image/landing-page.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
}
.orderboxdetailsupdatepackedselect, .orderboxdetailsupdateshippedselect, .orderboxdetailsupdatedeliveredselect{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    font-size: 12px;
    padding: 0 10px;
    color: #000000;
    background-color: #70868d;
}
.orderboxdetailsupdatepackedselect option, .orderboxdetailsupdateshippedselect option, .orderboxdetailsupdatedeliveredselect option{
    background-color: #ffffff;
    color:#000000;
}

.succeed{
    background-color: #364d61;
    color: #fff;
}


.orderboxdetailsupdatesave{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #e87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50px;
    grid-column-start: 2;
    justify-self: end;
}
.errormessageholder{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../image/bggrin.png);
    backdrop-filter: brightness(0.5);
    background-size: auto;
    z-index: 3;
}
.errormessagebg{
    position: absolute;
    width: 300px;
    padding: 10px;
    top: calc(50% - 75px);
    left: calc(50% - 150px);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;

}
.errormessage{
    position: relative;
    float: left;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    color:#000000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.errormessageokbtn{
    position: relative;
    float: left;
    width: 100px;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    background-color: #E77253;
    border-radius: 50px;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: end;
    cursor: pointer;
}

.usernameholder, .passwordholder{
    position: relative;
    float: left;
    width: 100%;
    padding: 20px 0;
}
.submitloginholder{
    position: relative;
    float: left;
}
.kkadminloginformtitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 18px;
    color: #FFF;
}
.kkadminloginformtitlesub{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    color: #FFF;
}
.loginusername, .loginpassword{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;

}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    background-color: #eeeeee!important;
}
.is-invalid{
    box-shadow: inset 0px 0px 0px 1px #e53512;

}
.invalid-feedback{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -2px;
    font-size: 12px;
    color: #e53512;
}
.submitloginbutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.kkadminloginform{
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}

.ordernavholder{
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.ordernav{
    cursor: pointer;
    position: relative;
    float: left;
    padding: 0 10px;
    /* margin: 10px 0; */
    font-size: 14px;
    font-weight: bold;
    color: #000;
    border-right: 1px solid #000;
}

.ordernav:nth-last-child(1){
    border-right: none;
}
.ordernav-selected{
    color: #e53512;
}
.orderno{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000;
}
.orderno:hover{
    cursor: pointer;
    text-decoration: underline;
}
.orderno:hover ~ .orderblame{
    display: block;

}
.orderblame{
    display: none;
    position: absolute;
    top: 30px;
    left: 10px;
    background-color: #012e40;
    padding: 10px;
    z-index: 1;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
}
.orderdate{
    position: relative;
    float: left;
    font-size: 12px;
    margin-left: 5px;
    color:#000000;
}
.monthlystatementpageholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    min-height: calc(100% - 90px);
}
.monthlystatementholderinner{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}
.monthselectorholder{
    position: relative;
    float: left;
    width: 100%;
    height: 50px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.monthlystatementtitleholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.monthlystatementtitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    margin-right: auto;
}
.monthlystatementsubtitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
}
.monthlystatementdaterange{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
}
.monthlystatementheader{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 10px;
}
.monthlystatementsummaryholder{
    position: relative;
    margin-left: auto;
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #999;
    max-width: 260px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.monthlystatementsummaryrow{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.monthlystatementsummarytitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
}
.monthlystatementsummarynumber{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
.monthlystatementdata{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    font-weight: normal;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 10px;
}
.monthlystatementheadercol{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.monthlystatementheadercol:nth-child(4), .monthlystatementheadercol:nth-child(5), .monthlystatementheadercol:nth-child(6){
    justify-content: flex-end;
}

.monthlystatementdatacol{
    position: relative;
    float: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monthlystatementdatacol:nth-child(4), .monthlystatementdatacol:nth-child(5), .monthlystatementdatacol:nth-child(6){
    display: flex;
    justify-content: flex-end;
}


.monthselect{
    position: relative;
    display: inline-block;
    width: 180px;
    font-size: 14px;
    padding: 9px 5px;
    cursor: pointer;
}
.monthlystatementholder{
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
}

.printstatement{
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 15px;
    width: 30px;
    height: 30px;
    background-image: url(../image/printer.png);
    background-position: 0 0;
    background-size: 30px 30px;
    background-color: transparent;
}
.orderplatform{
    position: relative;
    float: left;
    font-size: 12px;
    white-space: pre;
    color:#000000;
}
.invoicepageholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    min-height: calc(100% - 90px);
}
.invoicetopbarholder{
    position: sticky;
    float: left;
    top: 111px;
    width: calc(100% - 20px);
    text-align: center;
    padding: 10px;
    background-color: #444;
    border-radius: 10px;
    z-index: 1;
}


.importpopup{
    display: none;
    position: absolute;
    width: 300px;
    right: 0;
    top: 45px;
    background-color: #222;
    z-index: 1;
    border-radius: 8px;
}
.inportfromtext{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 180px;
    margin: 10px;
    resize: none;
    border: none;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    background-color: #444;
    color: #fff;
    line-height: 18px;
}
.importpopupbottombar{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.splitbutton{
    position: relative;
    display: inline-block;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #f6921e;
    border: 1px solid #f7af2e;
    cursor: pointer;
}
.selectdiscount{
    position: relative;
    float: right;
    width: 75px;
    margin: 5px;
    margin-left: 0;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.selectdiscountlavel{
    position: absolute;
    font-size: 12px;
    color: #aaaaaa;
    top: 14.5px;
    right: 8px;
    user-select: none;
}
.monthselectorrange{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #000;
    background-color: #f3d978;
}
.statementselltype, .statementsupplier, .statementby, .statementsavedby{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #000;
    background-color: #f3d978;
}
.statementfilterapplybutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #e87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50px;
}

.billsummarydisplayholder{

}
.billsummarydisplay{
    position: relative;
    float: left;
    width: calc(100% - 90px);
    height: 100px;
    background-image: linear-gradient(to top right, rgb(160 195 65), rgb(164 211 30));
    border-radius: 10px;
    font-family: 'Press Start 2P', cursive;
    color: #000;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-content: center;
    align-items: center;
}
.billsummarydisplaysubtotal, .billsummarydisplaydc, .billsummarydisplayafterdiscount, .billsummarydisplaysubtotalwithdc{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding-right: 10px;
    text-align: right;
}
/*.billsummarydisplayafterdiscount{*/
/*    grid-column: 2 / span 1;*/
/*}*/


.billsummarydisplaysubtotallabel, .billsummarydisplaydclabel,.billsummarydisplayafterdiscountlabel, .billsummarydisplaysubtotallabelwithdc{
    font-size: 8px;
    margin-bottom: 5px;
}
.billsummarydisplaysubtotalamount, .billsummarydisplaydcamount, .billsummarydisplayafterdiscountamount, .billsummarydisplaysubtotalamountwithdc{
    font-size: 10px;
}

.indexcontentholder, .productcontentholder, .createaccountcontentholder{
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.indexoverviewholder{
    position: relative;
    float: left;
    width: 100%;
}
.indexdateandtitleholder{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.indexoverviewtitle{
    position: relative;
    float: left;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.indexoverviewdate{
    position: relative;
    float: left;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #f6921e;
}
.indexoverviewgrid{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.indexoverviewgridbox{
    position: relative;
    float: left;
    width: 100%;
    height: 100px;
    background-color: #E77253;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indexoverviewgridboxtitle{
    position: absolute;
    left: 10px;
    top: 0;
    height: 32px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.indexoverviewgridboxnumber{
    position: relative;
    float: left;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.indexoutletsalesrecordsholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    /*top: 0;*/
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
}
.indexoutletsalesrecordsnewpopuptitle{
    position: absolute;
    top: 15px;
    left: 10px;
    font-size: 18px;
    color: #fff;
}
.indexcreateorderholdertitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.closeindexoutletsalesrecordsnewpopup{
    position: absolute;
    top: 6px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.closeindexcreateorderholder{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.resetindexcreateorderholder{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/reset.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.indexoutletsalesrecordstitle{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 17px 10px;
    font-size: 16px;
    font-weight: bold;
}
.indexoutletsalesrecordsnewbutton{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 70px;
    background-color: #f6921e;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 7px;
    border-radius: 5px;
    cursor: pointer;
}
.indexoutletsalesrecordsnewpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    margin: 10px;
    padding-top: 40px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 655px;
    background-color: #1a1825;
    border-radius: 10px;
    overflow: auto;

}

.indexoutletsalesrecordsnewpopupcustomardetails{
    position: relative;
    float: left;
    width: calc(100% - 230px);
    height: 160px;
    margin-left: 10px;
}
.indexoutletsalesrecordsnewpopupinvoicedetails{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    min-height: 315px;
    margin: 0 10px;
    margin-top: 10px;
    padding-bottom: 120px;
    grid-column-start: 1;
    grid-column-end: 4;
}
.indexoutletsalesrecordsnewpopupitembox{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px;
    color: #fff;
    font-weight: normal;

}
.indexoutletsalesrecordsnewpopupitemslno{
    position: relative;
    float: left;
    width: 20px;
    text-align: center;
}
.indexoutletsalesrecordsnewpopupitemname{
    position: relative;
    float: left;
    width: calc(100% - 237px);
    text-align: left;
}
.indexoutletsalesrecordsnewpopupitemrate{
    position: relative;
    float: left;
    width: 45px;
    text-align: right;
}
.indexoutletsalesrecordsnewpopupitemqty{
    position: relative;
    float: left;
    width: 42px;
    padding-left: 2px;
    margin-top: -2px;
    font-size: 13px;
    text-align: left;
    text-indent: 3px;
    color: #fff;
    background-color: transparent;
}
.indexoutletsalesrecordsnewpopupitemdiscount{
    position: relative;
    float: left;
    width: 60px;
    padding-top: 1px;
    font-size: 13px;
    text-align: left;
    text-indent: 3px;
    color: #fff;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.indexoutletsalesrecordsnewpopupitemdiscount option{
    color: #333333;
}
.indexoutletsalesrecordsnewpopupitemdiscountlabel::after{
    content: "-";
    position: absolute;
    left: -29px;
    top: -1px;
    font-size: 14px;
    color: #fff;
    user-select: none;
    pointer-events: none;
}
.indexoutletsalesrecordsnewpopupitemtotal{
    position: relative;
    float: left;
    width: 70px;
    text-align: right;
}
.indexoutletsalesrecordsnewpopupitemdiscountlabel{
    position: absolute;
    font-size: 11px;
    color: #888;
    top: 1px;
    right: 82px;
    user-select: none;
    pointer-events: none;
}

.indexoutletsalesrecordsnewpopupsaveboxholder{
    position: relative;
    float: left;
    width: 200px;
    height: 135px;
    margin: 0 10px;
}
.indexoutletsalesrecordsnewpopupsaveboxpaidbyholder{
    position: relative;
    float: right;
    margin-top: 10px;
}
.indexoutletsalesrecordsnewpopupsaveboxpaidbyholder label{
    position: relative;
    float: left;
    margin: 7px 0;
    margin-right: 10px;
    color: #fff;
}
.indexoutletsalesrecordsnewpopupsaveboxpaidby{
    position: relative;
    float: left;
    width: 84px;
    font-size: 14px;
    padding: 2.5px;
    border-radius: 5px;
    background-color: #ccc;
    border: 1px solid rgb(204 204 204);
}
.indexoutletsalesrecordsnewpopupsavebutton{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 68px;
    background-color: #93151f;
    border: 1px solid #780b14;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
}
.addcustompitemdetails{
    position: absolute;
    right: 9px;
    top: 9px;
    width: 30px;
    height: 30px;
    background-image: url(../image/plus.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;

}
.addcustompitemdetailspopup{
    display: none;
    position: absolute;
    top: 55px;
    right: 9px;
    width: 300px;
    height: 200px;
    background-color: #fff;
    z-index: 1;
    border-radius: 5px;
}
.addcustompitemdetailspopuptitle{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 5px 10px;
    margin-top: 15px;
    font-size: 16px;
    text-align: left;
    font-weight: bold;
}
.addcustompitemdetailspopupitemname{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    background-color: #eee;
    border: 1px solid rgb(204 204 204);
}
.addcustompitemdetailspopupitemrate{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    background-color: #eee;
    border: 1px solid rgb(204 204 204);
}
.addcustompitemdetailspopupaddbutton{
    position: relative;
    float: right;
    width: 70px;
    margin-top: 10px;
    font-size: 14px;
    padding: 6px 5px;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: #f6921e;
    border: 1px solid #f7af2e;
    cursor: pointer;
}

.indexoutletsalesrecordsnewpopupcustomarname, .indexoutletsalesrecordsnewpopupcustomarphone{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.indexoutletsalesrecordsnewpopupcustomarname::placeholder, .indexoutletsalesrecordsnewpopupcustomarphone::placeholder, .otheradjustmentamount::placeholder{
    color: #cccccc;
}
.indexoutletsalesrecordsnewpopupdisplay{
    position: absolute;
    bottom: 10px;
    right: 0px;
    width: calc(100% - 10px);
    padding: 0 5px;
    min-height: 100px;
    background-image: linear-gradient(to top right, rgb(160 195 65), rgb(164 211 30));
    border-radius: 10px;
    font-family: 'Press Start 2P', cursive;
    color: #000;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    align-items: center;
}
.indexoutletsalesrecordsnewpopupdisplaybox{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding: 0 5px;
    display: grid;
    justify-items: end;
}
.indexoutletsalesrecordsnewpopupdisplayboxlabel{
    position: relative;
    float: left;
    font-size: 8px;
    margin-bottom: 5px;
}
.indexoutletsalesrecordsnewpopupdisplayboxamount{
    position: relative;
    float: left;
    font-size: 12px;
    margin-bottom: 5px;
}
.ordercancelicon{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    background-image: url(../image/trash.png);
    background-size: 30px 30px;
    cursor: pointer;
    z-index: 1;
}
.orderconcelconfirmpopupholder{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgb(255 255 255 / 60%);
}
.orderconcelconfirmpopup{
    position: fixed;
    width: 300px;
    height: 100px;
    top: 200px;
    left: calc(50% - 150px);
    background-color: #222;
    border: 1px solid #000;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
}
.orderconcelconfirmpopuptext{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    color: #fff;
}
.orderconcelconfirmyes, .orderconcelconfirmno{
    position: relative;
    float: left;
    width: 70px;
    background-color: #f6921e;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 7px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
}


/*_-------*/
/* The indexoutletsalesrecordsnewpopupusevoucher */
.customcheckboxstyle {
    display: none;
    float: left;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.customcheckboxstyle input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color:#555555;
    border-radius: 3px;
}


/* On mouse-over, add a grey background color */
.customcheckboxstyle:hover input ~ .checkmark {
    background-color: #555555;
}

/* When the checkbox is checked, add a blue background */
.customcheckboxstyle input:checked ~ .checkmark {
    background-color: #f6921e;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.customcheckboxstyle input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.customcheckboxstyle .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.indexoutletsalesrecordsnewpopupselectproducts{
    position: relative;
    float: left;
    width: 100%;
    height: 45px;
    padding-top: 3px;
    border-radius: 5px;
    background-color: #444444;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 4;
}

.alloutletsellholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;

}
.alloutletsellbox{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.alloutletsellpagetitle{
    position: relative;
    float: left;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.allorderpagetitle{
    position: relative;
    float: left;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.indexoutletsalesrecordsboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.indexoutletsalesrecordsbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #a0bacf;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.indexoutletsalesinvnumber{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000;
}
.indexoutletsalescustomarname{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}

.indexoutletsalespaidamountsum{
    position: relative;
    float: left;
    font-size: 12px;
    color: #e53512;
    font-weight: bold;
    text-transform: uppercase;
}
.indexoutletsalesdetailsholder{
    display: none;
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 32px;
    border-top: 1px solid #75342A;

}
.indexoutletsalescustomarproducts{
    position: relative;
    float: left;
    width: calc(100% - 210px);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.indexoutletsalesamountdetailsholder{
    position: relative;
    float: right;
    width: 200px;
    font-size: 14px;
    color:#000000;
}
.indexoutletsalescustomarproductli{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 10px;
}
.indexoutletsalescustomarproductname{
    position: relative;
    float: left;
}
.indexoutletsalescustomarproductsqty{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #75342A;
    color: #FFF;
    border-radius: 50%;
}
.indexoutletsalestotalbill, .indexoutletsalesadjustment, .indexoutletsalespaidamount{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.indexoutletsalesamountdetailsamount{
    color: #000000;
}

.topbarstatementnavsub{
    display: none;
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}


.indexoutletsalesrecordsboxholdertitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.outletsaleallbitton{
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 14px;
    text-decoration: none;
    color:#000000;
    cursor: pointer;
}


.createbillofferpopup{
    display: none;
    position: absolute;
    width: 240px;
    padding: 10px;
    right: 0;
    top: 45px;
    background-color: #222;
    z-index: 1;
    border-radius: 8px;
}

.createbillofferdscper{
    position: relative;
    float: left;
    width: 100%;
}
.createbillofferfreeshippingholder{
    position: relative;
    float: left;
    width: 100%;
}
.offerfreeshippingminvalue{
    position: relative;
    float: right;
    width: 75px;
    margin: 5px;
    margin-left: 0;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.offerfreeshippingminvaluelavel{
    position: absolute;
    font-size: 12px;
    color: #aaaaaa;
    top: 14.5px;
    right: 8px;
    user-select: none;
}

.offeractivationshoup{
    position: relative;
    float: left;
    width: 60px;
    margin-left: 15px;
}
.offeractivationshoupdsc{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/offericons.png");
    /*background-size: 22px 88px;*/
    background-position: 0 -60px;
}
.offeractivationshoupdscactive{
    background-position: 0 -90px;
}
.offeractivationshoupfrship{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/offericons.png");
    /*background-size: 22px 88px;*/
    background-position: 0 0;
}
.offeractivationshoupfrshipactive{
    background-position: 0 -30px;
}
.otheradjustmentamount{
    position: relative;
    float: right;
    width: 122px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.accountnavhholder{
    position: relative;
    float: right;
    height: 100%;
    display: flex;
    align-items: center;
}
.accountloginnameholder, .accountloginbuttonholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.accountnavicon{
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    background-image: url(../image/user.png);
    background-position: 0 0;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding: unset;
    cursor: pointer;

}
.noscroll{
    overflow: hidden;
}
.indexnewenrtybuttonholder{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    height: 120px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.indexnewenrtybuttonholdertitle{
    position: relative;
    float: left;
    font-size: 18px;
    color: #000000;
    font-weight: bold;
}
.indexnewsellrecord{
    position: relative;
    float: left;
    margin-left: 20px;
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    color: #fff;
    background-color: #f6921e;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.indexneworderrecord{
    position: relative;
    float: left;
    margin-left: 20px;
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    color: #fff;
    background-color: #f6921e;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

}
.indexcreateorderholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
}
.settingpageholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
}
.indexoutletsalesinvnumber:hover{
    cursor: pointer;
    text-decoration: underline;
}
.indexoutletsalesinvnumber:hover ~ .outletorderplame{
    display: block;

}
.outletorderplame{
    display: none;
    position: absolute;
    top: 30px;
    left: 10px;
    background-color: #012e40;
    padding: 10px;
    z-index: 1;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
}
.loadinggifholder{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../image/bggrin.png);
    backdrop-filter: brightness(0.5);
    background-size: auto;
    z-index: 3;
}
.loadinggifbg{
    position: fixed;
    width: 150px;
    height: 150px;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    background-color: #fcfcff;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.loadinggif{
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background-image: url(../image/loader.gif);
    background-position: 0 0;
    background-size: 100px 100px;
}

.nodataboxholder{
    position: relative;
    float: left;
    width: 100%;
    height: 190px;
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}
.nodataboxtext{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: bold;
}
.nodataboxicon{
    position: relative;
    float: left;
    width: 128px;
    height: 128px;
    background-image: url("../image/document.png");
}
.settingpagetitle{
    position: relative;
    float: left;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.allproductsholder{
    position: relative;
    float: left;
    width: 100%;
}
.addnewproductbutton{
    position: relative;
    float: right;
    color:#000000;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.addnewproductbutton:hover{
    text-decoration: underline;
}
.newproductpageholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
}
.newproductpagetitle{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
}
.newproductentryholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
}

.newproductlabel{
    position: relative;
    float: left;
    font-size: 14px;
    color: #000000;
}
.newproductinput{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #000000;
    background-color: #eeeeee;
    border: 1px solid #e0e0e0;
}
.newproductcategory{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #000000;
    background-color: #eeeeee;
    border: 1px solid #e0e0e0;
}
.newproductnameholder{
    position: relative;
    float: left;
    width: 100%;
}
.newproductmainimageuploadholder{
    position: relative;
    float: right;
    width: 389px;
    height: 200px;
    border: 1px dashed #f6921e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}
.newproductmainimagethimbs{
    display: block;
    position: relative;
    float: left;
    width: 100%;
    /*height: 60px;*/
    /*display: flex;*/
    justify-content: center;
}
.newproductmainimagethimbs img{
    margin: 0 5px;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    overflow: hidden;
}
.newproductdescriptionholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
}
.newproducttextarea{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    height: 300px;
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #000000;
    background-color: #eeeeee;
    border: 1px solid #e0e0e0;
    resize: none;
}
.newproductmainimageuploadbtn input[type="file"] {
    display: none;
}
.newproductmainimageuploadbtn{
    position: relative;
    float: left;
    width: 80px;
    background-color: #f6921e;
    border: 1px solid #e58210;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    cursor: pointer;
}
.newproductdocumentationholder{
    position: relative;
    float: left;
    width: calc(100% - 400px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.newproductpriceholder, .newproductstockholder, .newproductweightholder, .newproductvariantnameholder, .productcategoryholder{
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    margin-top: 20px;
}
.newproductvariationholder{
    position: relative;
    float: left;
    width: 100%;
    clear: both;
    margin-top: 20px;
}
.newproductvariationselector{
    display: block;
    color: #000000;
}
.newproductinputplaceholder{
    position: absolute;
    font-size: 14px;
    color: #aaaaaa;
    bottom: 11px;
    right: 8px;
    user-select: none;
}
.newproductvariationboxholder{
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 20px;
}
.newproductvariationbox{
    position: relative;
    float: left;
    width: calc(100% - 42px);
    padding: 20px;
    border: 1px dashed #999;
    border-radius: 10px;
}
.addanothervariation{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    cursor: pointer;
}
.newproducaddsubmitbutton{
    position: relative;
    float: left;
    margin-top: 20px;
    width: 200px;
    height: 64px;
    border: none;
    border-radius: 10px;
    color: #fff;
    background-color: #f6921e;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.newproductvariationbox .newproductinput{
    /*width: calc(100% - 70px);*/
    margin-top: 0px;
}
.newproductvariationbox .newproductvariantnameholder{
    margin-top: 0px;
}
.newproductvariationbox .newproductstockholder{
    margin-top: 10px;
}
.newproductvariationimagepreview{
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #e6e7eb;
}
.newproductvariantholder{
    position: relative;
    float: left;
    width: calc(100% - 90px);
    margin-left: 10px;
}
.newproductvariationimage{
    width: 80px;
    height: 80px;
}
img:not([src]) {
    visibility: hidden;
}
.newproductvariationbox input[type="file"]{
    display: none;
}
.newproductvariationimageuploadbutton{
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    background-image: url(../image/add-photo.png);
    background-size: 30px 30px;
    cursor: pointer;
}
.removenewproductvariationbox{
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.newproductvariationbox:nth-last-child(2) .removenewproductvariationbox{
    display: block;
}

.allproductbox{
    position: relative;
    float: left;
    width: 100%;
}
.productboxtitle{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    background-color: #012E40;
    color: #fff;
    display: flex;
    flex-direction: row;
    font-size: 16px;
    align-items: center;
    border-radius: 5px;
}
.productimagetitle{
    position: relative;
    float: left;
    width: 80px;
    text-align: center;
}

.productcodetitle{
    position: relative;
    float: left;
    width: 80px;
    text-align: center;
}
.productactiontitle{
    position: relative;
    float: left;
    width: 100px;
    text-align: center;
}
.inventoryproductboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.productbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #a0bacf;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    justify-content: space-between;
}

.productbox img{
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
}
.productnameholder{
    position: relative;
    float: left;
    width: calc(100% - 190px);
    min-height: 80px;
    padding-left: 10px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.productnametitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
}
.productname{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
}
.productvariationname{
    position: relative;
    float: left;
    width: 100%;
}
.productcode{
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
.productaction{
    position: relative;
    float: left;
    width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-direction: column;
}
.productnameholderinner{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding-right: 10px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
}
.productnameholderinner:hover{
    background-color: #E5E5E5;
}
.productvariationholderinner{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 40px;
    padding-right: 10px;

    margin-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
}
.productvariationholderinner:hover{
    background-color: #E5E5E5;
}
.productactionedit{
    position: relative;
    float: left;
    color: #000000;
    cursor: pointer;
}
.productactionstatus{
    position: relative;
    float: left;
    cursor: pointer;
    background-color: transparent;
}
.allproductsfilter{
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
}
.allproductsfiltertab{
    cursor: pointer;
    position: relative;
    float: left;
    padding: 0 10px;
    margin: 10px 0;
    font-size: 14px;
    color: #333;
    border-left: 1px solid rgb(204 204 204);
}
.allproductsfiltertab:nth-child(1){
    padding-left: 0px;
    border-left: none;
}
.selectedtab{
    color: #f6921e;
}
.inventorypageholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inventorypagetitle{
    position: relative;
    float: left;
    width: 100%;
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
}
.productstock{
    position: relative;
    float: left;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}
.editproductstock{
    position: relative;
    float: left;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    background-image: url(../image/calculator.png);
    background-size: 26px 26px;
    background-position: 0 0;
    cursor: pointer;
    aspect-ratio: 1;
}


.stockupdatepopup{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: calc(100% - 30px);
    padding: 10px;
    padding-top: 20px;
    background-color: #222;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.productnameforpopup{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #FFF;
}

.stockupdatecurrentstock{
    position: relative;
    float: left;
    width: 200px;
    height: 40px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    background-color: #383838;
    border-radius: 10px;
    justify-content: space-evenly;
}
.stockupdatecurrentstocklabel{
    position: relative;
    float: left;
    width: 100%;
    background-color: #222;
    color: #FFF;
    font-size: 12px;
    display: flex;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
}
.stockupdatecurrentstocknumber{
    position: relative;
    float: left;
    width: 100%;
    color: #fff;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stockupdatemodifystock{
    position: relative;
    float: left;
    width: 200px;
    height: 40px;
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    background-color: #383838;
    border-radius: 10px;
    justify-content: space-evenly;
}
.stockupdatemodifystockplusminusholder{
    position: relative;
    float: left;
    width: 80px;
    height: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
}
.stockupdatemodifystockplus{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-color: #383838;
    color: #000000;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}
.stockupdatemodifystockminus{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-color: #383838;
    color: #000000;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}
.selected{
    background-color: #b40000;
    color: #fff;
}
.stockupdatemodifystockqtyholder{
    position: relative;
    float: left;
    width: calc(100% - 90px);
    height: 40px;
    display: flex;
    align-items: center;
}
.stockupdatepopupclose{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
    z-index: 1;
}
.stockupdatemodifystockqty{
    position: relative;
    float: left;
    width: 100%;
    padding: 10px 0;
    padding-left: 25px;
    font-size: 14px;
    background-color: #222;
    color: #fff;
    border-radius: 7px;
}
.stockupdatemodifystockselectedicon{
    position: absolute;
    z-index: 1;
    left: 10px;
    font-size: 14px;
    color: #fff;
    pointer-events: none;
}
.stockupdateconfirmbutton{
    position: relative;
    width: 80px;
    height: 30px;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
}
.stockupdatepopupholder{
    display: none;
    position: fixed;
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
}


.indexorderconfirmpopup{
    display: none;
    position: relative;
    float: left;
    width: 100%;
}
.indexorderconfirmpopuptitle{
    position: relative;
    float: left;
    width: 100%;
    margin: 15px 0;
    font-size: 18px;
    color: #f6921e;
}
.indexorderdeliverylinkholder{
    position: relative;
    float: left;
    width: 100%;
    height: 93px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.indexorderdeliverylinkholder label{
    position: relative;
    float: left;
    width: 100%;
    max-width: 260px;
}
.checkouturlinputtitle{
    position: absolute;
    left: 0;
    top: -15px;
    font-size: 12px;
    color: #888;
}
.indexorderdeliverylink{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    max-width: 260px;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #000000;
}
.indexorderdeliverylinkcopy{
    position: relative;
    float: left;
    width: 68px;
    background-color: #f6921e;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
}
.deliveryinfoholder{
    position: absolute;
    right: 40px;
    top: 5px;
}
.deliverydetails{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../image/approval.png);
    background-position: 0 0;
    background-size: 20px 40px;
    cursor: pointer;
}
.add_submitted{
    background-position: 0 -20px;
}
.invoicelinkiconholder{
    position: relative;
    float: left;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    background-color: #e87556;
    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.invoicelinkicon{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../image/invoice.png);
    background-position: 0 0;
    background-size: 20px 20px;
    cursor: pointer;
}
.pendingcourierbookingholder:empty {
    display: none;
}
.pendingcourierbookingholder{
    position: relative;
    float: left;
    width: calc(100% - 2px);
    height: 80px;
    font-size: 14px;
    background-color: #C42D27;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}



.courierbookingbutton{
    position: absolute;
    right: 30px;
    bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
.kkloginpagelogoholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}

.showPass{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 24px;
    right: 5px;
}
.showPass .eye-close{
    cursor: pointer;
    visibility: visible;
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/hideandshow.png");
    background-position: 0 0;
}
.showPass .eye-open{
    cursor: pointer;
    visibility: visible;
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/hideandshow.png");
    background-position: 0 -30px;
}
#variation-holder{
    position: relative;
    float: left;
    width: 100%;
    padding-inline-start: 0;

}
#variation-holder li{
    position: relative;
    float: left;
    width: 100%;
    list-style: none;
    margin-bottom: 20px;
}
#variation-holder li:nth-last-child(1){
    margin-bottom: 0px;
}
.onlineordersettingholder{
    position: relative;
    float: left;
    width: 100%;
    padding-top: 40px;
}

.onlineordersettingbox{
    position: relative;
    float: left;
    width: 100%;
}
.onlineordersettingtitle{
    position: relative;
    float: left;
    width: 100%;
    font-weight: bold;
}
.onlineordersettingboxinner{
    position: relative;
    float: left;
    width: 100%;
}
.onlineordersettinglabel{
    position: relative;
    float: left;
    font-weight: normal;
}
.onlineordersettingdsc{
    position: relative;
    float: left;
    width: fit-content;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
    background-color: #eee;
    border: 1px solid rgb(204 204 204);
}

.errorpagemsgholder{
    position: relative;
    width: 100%;
    max-width: 1024px;
    height: 100%;
    margin: 0 auto;
}
.errorpagemsgbox{
    position: relative;
    float: left;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.errorpagemsgtitle{
    position: relative;
    float: left;
    font-size: 30px;
    line-height: 100%;
    font-weight: bold;
    color: #f6921e;
}
.errorpagemsg{
    position: relative;
    float: left;
    margin-top: 20px;
    font-size: 14px;
    line-height: 100%;
    font-weight: normal;
    color: #000000;
}

.copytackingurliocn{
    position: absolute;
    top: 6.5px;
    right: 38px;
    width: 24px;
    height: 24px;
    background-image: url(../image/copy.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
}

.newproductpickerpopup{
    position: absolute;
    display: none;
    top: 45px;
    left: 0;
    width: calc(100% - 20px);
    height: 300px;
    background-color: #202124;
    border-radius: 10px;
    padding: 10px;
    padding-bottom: 40px;
    z-index: 1;
    overflow: hidden;
}
.newproductpickerproductboxholderinner{
    position: relative;
    float: left;
    width: calc(100% - 4px);
    padding: 0 2px;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.newproductpickerproductboxholder{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.newproductpickerproductbox{
    cursor: pointer;
    position: relative;
    float: left;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 10px;
    background-color: #222;
    overflow: hidden;
    transition: box-shadow .3s;
    aspect-ratio: 1;
}
.newproductpickerproductbox img{
    width: 100%;
    height: auto;
}
.newproductpickerproductstock{
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 5px;
    font-size: 10px;
    color: #fff;
    background-color: #000;
    opacity: .6;
}
.newproductpickerproductname{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 5px;
    font-size: 10px;
    color: #fff;
    background-color: #000;
    opacity: .6;
}
.newproductpickerproductboxcattitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    color: #e87556;
    grid-column-start: 1;
    grid-column-end: -1;
}
.productcontentdetailsdescriptioncopy{

}
.newproductpickerproductboxtitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    color:#FFFFFF;
    grid-column-start: 1;
    grid-column-end: -1;
}
.newproductpickerproductboxselected{
    box-shadow: 0 0 0 2px #ff0000;

}
.newproductpickerproductselectedstockholdr{
    display: none;
}

.newproductpickerproductboxselected .newproductpickerproductselectedstockholdr{
    position: absolute;
    top: 5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 20px;
    color: #fff;
    border-radius: 3px;
    display: flex;
    justify-content: space-around;
    background-color: rgb(0 0 0 / 70%);
}
.newproductpickerproductselectedstockminus{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.newproductpickerproductselectedstockplus{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.newproductpickerproductselectedqty{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: unset;
}

.pageholder{
    position: relative;
    float: left;
    width: 100%;
}

.pagetitleholder{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.pagetitle{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-right: auto;
    display: flex;
    align-items: center;
    color: #75342A;
    border-bottom: 1px solid #75342A;
}
.pagetab{
    position: relative;
    float: left;
    color: #666;
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    padding: 7px 12px;
    border-bottom: 1px solid #CCC;
}
.addnewresellerholder{
    position: relative;
    float: left;
    width: 100%;
}
.addnewresellerbutton{
    position: relative;
    float: right;
    color:#000000;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.addnewresellerbutton:hover{
    text-decoration: underline;
}
.addnewresellerpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.addnewresellerpopupholder{
    position: fixed;
    width: 100%;
    height: calc(100% - 100px);
    left: 0;
    top: 100px;
    background-color: rgb(0 0 0 / 80%);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.addnewresellerpopup{
    position: relative;
    float: left;
    width: calc(100% - 60px);
    padding: 20px;
    max-width: 400px;
    max-height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}
.addnewresellerpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.addnewresellerpopuptitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.addnewresellerpopupclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.addnewresellerdetailsbox{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
    display: flex;
    grid-gap: 10px;
    flex-direction: column;
}
.addnewresellername, .addnewresellerphone, .addnewresellerref{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;
    border-radius: 10px;
}
.addnewreselleraddress{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;
    border-radius: 10px;
    resize: none;
}
.addnewresellername::placeholder, .addnewresellerphone::placeholder, .addnewreselleraddress::placeholder, .addnewresellerref::placeholder{
    color: #777777;
}
.addnewresellerdetailssavebutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    background-image: linear-gradient(to right, #e53512 0%, #F09819 51%, #e53512 100%);
    align-items: center;
    justify-content: center;
}
.addnewresellerdetailssavebutton:hover{
    background-position: right center;
}
.resellerdataboxholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.resellerdatabox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #a0bacf;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.resellerdataboxtopbar{
    position: relative;
    float: left;
    width: 100%;
}
.resellerdataboxresellerid, .resellerdataboxresellerref{
    position: relative;
    float: left;
    font-size: 12px;
    color:#000000;
    white-space: pre;
}

.resellerdataboxtitle{
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
}
.resellerdataboxtext{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000
}
.resellerdataboxname{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}
.resellerdataboxtotaldue{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #e53512;
    font-size: 14px;
    font-weight: bold;
}
.resellerdataboxexpand{
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    background-image: url(../image/down.png);
    background-size: 30px 30px;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s;
}
.approvdtransactions, .pendingtransactions{
    position: relative;
    float: left;
    width: 100%;
}
.resellerdataboxtransactionbox{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
}
.resellerdataboxtransactionboxtitlebar{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    align-items: center;
}
.resellerdataboxtransactionboxtitlebardate, .resellerdataboxtransactionboxtitlebardetails, .resellerdataboxtransactionboxtitlebaramount{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #444;
}
.resellerdataboxtransactionboxdetails{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: start;
    border-bottom: 1px solid #000000;
}
.resellerdataboxtransactionboxdetailsbar{
    position: relative;
    float: left;
    font-size: 14px;
}
.resellerdataboxtransactionboxdetailsbar a{
    text-decoration: none;
    color: #000000;
}
.resellerdataboxtransactionboxdetailsbar a:hover{
    text-decoration: underline;
}
.resellerdataboxtransactionboxdetailsbar:nth-last-child(1){
    justify-self: end;
}


.resellerdataboxbottombar{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.resellerdataboxbottombarnewpaymentbutton{
    position: absolute;
    top: 36px;
    right: 10px;
    color: #000000;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
.resellerdataboxbottombarnewpaymentbutton:hover{
    text-decoration: underline;
}
.resellerdataboxbottombarnewpaymentpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
    /*top: 0;*/
}
.resellerdataboxbottombarnewpaymentpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.resellerdataboxbottombarnewpaymentpopuptitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.resellerdataboxbottombarnewpaymentpopupclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.resellerdataboxbottombarnewpaymentpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 220px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;
}
.resellerdataboxbottombarnewpaymentdetailsbox{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-items: end;
}
.resellerdataboxbottombarnewpaymentdetailsboxdate{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    text-align: right;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid transparent;
    grid-column-start: 2;
    grid-column-end: -1;
}
.resellerdataboxbottombarnewpaymentdetailsboxamount{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
    grid-column-start: 1;
}
.resellerdataboxbottombarnewpaymentdetailsboxamountaccount{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
.resellerdataboxbottombarnewpaymentdetailsboxdate ::placeholder, .resellerdataboxbottombarnewpaymentdetailsboxamount::placeholder{
    color: #ccc;
}
.resellerdataboxbottombarnewpaymentdetailsboxsave{
    position: relative;
    float: left;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #93151f;
    border: 1px solid #780b14;
    cursor: pointer;
    grid-column-start: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resellerdataboxbottombarnewpaymentdetailsboxresellername{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    color: #f6921e;
    display: flex;
    align-items: center;
}
.loantabbutton{
    position: relative;
    float: right;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.sharetabbutton{
    position: relative;
    float: right;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.accountsboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 10px;
    margin-bottom: 20px;
}
.accountsbox{
    position: relative;
    float: left;
    width: 100%;
    height: 100px;
    background-color: #eeeeee;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accountsboxname{
    position: absolute;
    left: 10px;
    top: 0;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.accountsboxamount{
    position: relative;
    float: left;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.accountsboxaction{
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    background-image: url("../image/transfer.png");
    background-position: 0 0;
    background-size: 20px 20px;
    cursor: pointer;
}
.accountsboxupdate{
    position: absolute;
    left: 50px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    background-image: url("../image/edit.png");
    background-position: 0 0;
    background-size: 20px 20px;
    cursor: pointer;
}
.dueaccountsboxaction{
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    background-image: url("../image/plus-minus.png");
    background-position: 0 0;
    background-size: 20px 20px;
    cursor: pointer;
}
.addnewtransactionholder{
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.addnewtransactionbutton{
    position: relative;
    float: right;
    color:#000000;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.addnewtransactionpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
}
.transactionupdatepopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: 0;
}
.addnewtransactionpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 420px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;

}
.transactionupdatepopup{
    position: absolute;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 420px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;

}
.addnewtransactionpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.transactionupdatepopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.addnewtransactionpotitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.transactionupdatepotitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.addnewtransactionpoclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.transactionupdatepoclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.addnewtransactionpopupdetailsbox{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-items: end;
    align-items: center;
}
.transactionupdatepopupdetailsbox{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-items: end;
    align-items: center;
}
.approvalpopupaccountselect_dr{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
.approvalpopupaccountselect_drwrapper{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 15px;
}
.approvalpopupaccountselect_drwrapper::before{
    content: "DR Account";
    position: absolute;
    top: -20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
}
.addnewtransactionpopupdetailsboxdate{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
    grid-column-start: 2;
    grid-column-end: -1;
}
.addnewtransactionpopupdetailsboxdate::placeholder{
    color: #dddddd;
}
.transactionupdatepopupdetailsboxdate{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
    grid-column-start: 2;
    grid-column-end: -1;
}
.transactionupdatepopupdetailsboxdate::placeholder{
    color: #dddddd;
}
.addnewtransactionpopupdetailsboxdetails{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    resize: none;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
    grid-column-start: 1;
    grid-column-end: -1;
}
.transactionupdatepopupdetailsboxdetails{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    resize: none;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
    grid-column-start: 1;
    grid-column-end: -1;
}
.addnewtransactionpopupdetailsboxamount{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.transactionupdatepopupdetailsboxamount{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.addnewtransactionpopupdetailsboxcharge{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.addnewtransactionpopupdetailsboxdue{
    display: block;
    justify-self: start;
    margin-top: 0;
}
.approvalpopupaccountselect_crwrapper{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 15px;
}
.approvalpopupaccountselect_crwrapper::before {
    content: "CR Account";
    position: absolute;
    top: -20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
}
.approvalpopupaccountselect_cr{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
.addnewtransactionpopupdetailsboxdetails::placeholder, .addnewtransactionpopupdetailsboxamount::placeholder, .addnewtransactionpopupdetailsboxcharge::placeholder{
    color: #ccc;
}
.transactionupdatepopupdetailsboxdetails::placeholder, .transactionupdatepopupdetailsboxamount::placeholder, .transactionupdatepopupdetailsboxcharge::placeholder{
    color: #ccc;
}
.addnewtransactionpopupdetailsboxsave{
    position: relative;
    float: left;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #93151f;
    border: 1px solid #780b14;
    cursor: pointer;
    grid-column-start: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.transactionupdatepopupdetailsboxsave{
    position: relative;
    float: left;
    width: 90px;
    height: 38px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #93151f;
    border: 1px solid #780b14;
    cursor: pointer;
    grid-column-start: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accountsboxactiondpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
}
.accountsboxactiondpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 220px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;
}
.accountsboxactiondpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.accountsboxactiondpopuptoptitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.accountsboxactiondpopuptopclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.accountsboxactiondpopupdetails{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-items: end;
}
.accountsboxactiondpopupdetailsfrom{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    color: #f6921e;
    display: flex;
    align-items: center;
}
.accountsboxactiondpopupdetailsfrom:before{
    content: "Transfer From";
    position: absolute;
    top: -20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
}
.accountsboxactiondpopupdetailsto{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
.accountsboxactiondpopupdetailstowrapper{
    position: relative;
    float: left;
    width: 100%;
}
.accountsboxactiondpopupdetailstowrapper:before{
    content: "Transfer To";
    position: absolute;
    top: -20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
}
.accountsboxactiondpopupdetailsamount, .accountsboxactiondpopupdetailscharge{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}
.accountsboxactiondpopupdetailsamount::placeholder, .accountsboxactiondpopupdetailscharge::placeholder{
    color: #ccc;
}
.accountsboxactiondpopupdetailssave{
    position: relative;
    float: left;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #93151f;
    border: 1px solid #780b14;
    cursor: pointer;
    grid-column-start: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alltransactionboxholder{
    position: relative;
    float: left;
    width: 100%;
}
.alltransactionbox{
    position: relative;
    float: left;
    width: 100%;
}
.transactionbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    padding-bottom: 30px;
    background-color: #a0bacf;
    border-radius: 10px;
    margin-bottom: 10px;
}
.transactionboxpending{
    background-color: #FAED7D;
}
.transactionboxtop{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.transactionboxtopid{
    position: relative;
    float: left;
    font-size: 14px;
    color: #e53512;
    cursor: pointer;
}
.transactionboxtoppointer{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #555555;
    cursor: pointer;
    padding-left: 40px;
    margin-right: auto;
    display: none;
}
.transactionboxtopneedapproval{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #93151f;
    cursor: pointer;
    margin-right: auto;
    display: none;
}
.transactionboxtopid:hover{
    text-decoration: underline;
}
.transactionboxtopid:hover ~ .transactionboxtopblame{
    display: block;

}
.transactionboxtopblame{
    display: none;
    position: absolute;
    top: 20px;
    left: -5px;
    background-color: #012e40;
    padding: 10px;
    z-index: 1;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
}
.transactionboxtopDate{
    position: relative;
    float: left;
    font-size: 14px;
    color: #000000;
}
.transactionboxdetails{
    position: relative;
    float: left;
    margin: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}
.transactionboxamont{
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
}
.transactionboxapproved .transactionboxamont{
    /*display: none;*/
    color: #008000;
}
.transactionboxcharge{
    position: absolute;
    right: 120px;
    bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #BD1000;
}
.transactionaccountlist{
    position: relative;
    float: left;
    width: 100%;
}
.transactionaccountlistrow{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    align-items: center;
    border-bottom: 1px solid #75342A;
}
.transactionaccountlistrow:nth-child(1){
    border-top: 1px solid #75342A;

}
.transactionaccountname{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: normal;
    color:#000000;
    grid-column-start: 1;
    grid-column-end: 3;
}
.transactionaccountdramount{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #03a64b;
    justify-self: end;
}
.transactionaccountcramount{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #d92526;
    justify-self: end;
}
.transactionapprovalpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
}
.transactionapprovalpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 40px);
    max-height: 340px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;
}
.transactionapprovalpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.transactionapprovalpopuptoptitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.transactionapprovalpopuptopclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.transactionapprovalpopupdetails{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-items: end;
    align-items: center;
}
.transactionapprovalpopupdetailssum{
    position: relative;
    float: left;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: -1;
    display: flex;
    gap: 10px;
}
.transactionapprovalpopupdetailsdate{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #fff;
}
.transactionapprovalpopupdetailsref{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    color: #999;
}
.transactionapprovalpopupdetailstext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    grid-column-start: 1;
    grid-column-end: -1;
}
.transactionapprovalpopupdetailsamount{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    grid-column-start: 1;
    grid-column-end: -1;
    font-size: 16px;
    color: #BD1000;
    font-weight: bold;
    margin-bottom: 5px;
}
.transactionapprovalpopupdetailssave{
    position: relative;
    float: left;
    width: 70px;
    font-size: 14px;
    padding: 6px 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #93151f;
    border: 1px solid #780b14;
    cursor: pointer;
    grid-column-start: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addnewtransactionotheroptionholder_invest, .addnewtransactionotheroptionholder_loan{
    position: relative;
    float: left;
    width: 100%;
    /*display: flex;*/
    gap: 10px;
    grid-column-start: 1;
    grid-column-end: -1;
    align-items: center;
    display: none;
}
.addnewinvestmentsharetitle{
    position: relative;
    float: left;
    flex: none;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
}
.addnewtransactionotheroptionloan{
    display: block;
    flex: none;
}
.addnewtransactionotheroptionnewshare{
    display: block;
    flex: none;
}
.addnewinvestmentfor{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    padding: 8px 5px;
    border-radius: 5px;
    background-color: #383838;
    color: #999;
    border: 1px solid #333;
}
.addnewinvestmentshareamount{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 14px;
    font-weight: normal;
    padding: 9px 5px;
    border-radius: 5px;
    color: #fff;
    background-color:#000000;
    border: 1px solid #333;
}

.indexshopbannerholder{
    position: relative;
    float: left;
    width: 100%;
    height: 200px;
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
}
.indexshopitemboxcontaainer{
    position: relative;
    float: left;
    width: 100%;
}
.indexshoptitle{
    position: relative;
    float: left;
    width: fit-content;
    height: 40px;
    margin: 30px 0;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;
}

.indexshopitemboxholder{
    position: relative;
    float: left;
    width: 100%;
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(173px, 1fr));
    grid-gap: 20px;
}
.indexshopitembox{
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}


.indexshopitemboximage{
    position: relative;
    float: left;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
}

.indexshopitemboxdetails{
    position: relative;
    width: 100%;
    margin-top: 5px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    pointer-events: none;


}
.indexshopitemtitle{
    display: -webkit-box;
    position: relative;
    float: left;
    max-width: 100%;
    font-size: 12px;
    color: #000000;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.indexshopitemprice{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    white-space: nowrap;
}

.indexshopitemboxholdersinglecolumns{
    grid-auto-flow: column;
    overflow-x: auto;
    grid-auto-columns: max-content;
    grid-template-rows: 196px;
    grid-template-columns: none;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
}

.indexshopitemboxholdersinglecolumns::-webkit-scrollbar {
    display: none;
}
.indexshopitemboxholdersinglecolumns .indexshopitembox{
    scroll-snap-align: start;
}
.pagefootercontainer{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 0 10px;
    margin-top: 20px;
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background-color: #22736a;
}
.copyrighttext{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding-bottom: 20px;
    color: #000000;
}
.indexshopcategoryholder{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.indexshopcategory{
    position: relative;
    float: left;
    font-size: 12px;
    color: #fff;
    padding: 8px 16px;
    background-color: #85AEBA;
    cursor: pointer;
    transition: .3s;
}
.indexshopcategory:hover{
    box-shadow: #8098A0 4px 4px 0;
}
.indexshopcategoryselected{
    background-color: #000000;
    color: #fff;
}
.indexshopcategoryselected:hover{
    background-color: #555;
}
.productcontent{
    position: relative;
    float: left;
    width: 100%;
    padding: 50px 0;
    min-height: 300px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    align-items: start;

}

.productcontentimagesliderholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    flex-direction: column;
    gap: 10px;
}

.productcontentimageslider{
    position: relative;
    float: left;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
.productcontentimagebox{
    position: absolute;
    width: 100%;
    left: 100%;
    top: 0;
}
.productimg_active{
    left: 0;
}
.productcontentimages{
    width: 100%;
    height: auto;
}

.productcontentdetailsholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.productcontentdetailscategory{
    position: relative;
    float: left;
    font-size: 12px;
    color: #222;
}
.productcontentdetailsname{
    position: relative;
    float: left;
    width: fit-content;
    font-size: 16px;
    font-weight: bold;
    line-height: 150%;
    color: #222;

}
.productcontentdetailsprice{
    position: relative;
    float: left;
    font-size: 22px;
    font-weight: bold;
    color: #e53512;
}
.productcontentdetailsdescription{
    position: relative;
    float: left;
    width: 100%;
    line-height: 150%;
    white-space: pre-line;
    font-size: 14px;
    color: #000000;
}
.addtocartbatoonholder{
    position: relative;
    float: left;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.productcontentdetailsproductstock{
    position: relative;
    float: left;
    font-size: 12px;
    color: #ff0000;
}
#successcanvas{
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
}
.addtocartbatoon{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
}

.addtocartbatooninner{
    position: relative;
    float: left;
    width: 100%;
    transition: transform 0.1s cubic-bezier(0.39, 1.86, 0.64, 1) 0.1s;
}
.add-to-cart{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.added{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes loading {
    0% {
        cy: 10;
    }
    25% {
        cy: 3;
    }
    50% {
        cy: 10;
    }
}

.loading .loadingMessage {
    opacity: 1;
}
.loading .loadingCircle {
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-name: loading;
    cy: 10;
}

.loadingMessage {
    opacity: 0;
    width: 100%;
    height: 40px;
    transition: opacity 0.1s linear 0.1s, top 0.4s cubic-bezier(0.22, 0, 0.41, -0.57);
    display: flex;
    justify-content: center;
    align-items: center;
}
.loadingMessage svg {
    fill: #FFF;
    margin: 0;
    width: 22px;
}
.loadingCircle:nth-child(2) {
    animation-delay: 0.1s;
}

.loadingCircle:nth-child(3) {
    animation-delay: 0.2s;
}











.productcontentimagessliderconrol{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: space-between;
}
.productcontentimagessliderconrolarrowleft{
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
.productcontentimagessliderconrolarrowright{
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}
.sliderconrolarrowlefticon{
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    background-image: url(../image/right-arrow.png);
    transform: rotate(180deg);
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    box-shadow: rgb(255 255 255 / 40%) 0 1px 3px 0, rgb(255 255 255 / 5%) 0 0 0 1px;
    opacity: .3;
    transition: .5s;
}
.sliderconrolarrowrighticon{
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    background-image: url(../image/right-arrow.png);
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    padding: unset;
    box-shadow: rgb(255 255 255 / 40%) 0 1px 3px 0, rgb(255 255 255 / 5%) 0 0 0 1px;
    opacity: .3;
    transition: .5s;
}
.productcontentimagesliderholder:hover .sliderconrolarrowlefticon{
    opacity: .7;
}
.productcontentimagesliderholder:hover .sliderconrolarrowrighticon{
    opacity: .7;
}
.accountloginbutton, .accountloginname{
    position: relative;
    float: left;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;

}
.kkloginformpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.kkloginformpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../image/bggrin.png);
    backdrop-filter: brightness(0.5);
    background-size: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.kkloginformpopup{
    position: relative;
    float: left;
    width: calc(100% - 60px);
    padding: 40px 20px;
    max-width: 400px;
    max-height: calc(100% - 40px);
    background-color: #FFF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    box-shadow: #e53512 0px 0px 0px 2px inset;
}
.loginerrormsg{
    position: relative;
    width: 100%;
    bottom: 0;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #e53512;
}
.accountcreatebutton{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #000;
    text-align: center;
}
.accountcreatebutton a{
    color: #e53512;
    text-decoration: none;
}
.loginformlabel{
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 12px;
    color: #777;
}
.kkloginformpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.kkloginformpopuptoptitle{
    position: relative;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
.kkloginformpopuptoptitleholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    /*padding-bottom: 30px;*/
}
.kkminloginseparatorholder{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kkminloginseparator{
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ccc;
}
.kkminloginseparatortext{
    position: relative;
    float: left;
    padding: 0 10px;
    font-size: 14px;
    font-weight: normal;
    color: #000;
    background-color: #FFF;
}
.kkmingoogleloginbutton{
    position: relative;
    width: 260px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50px;
    cursor: pointer;
    transition: .3s;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.kkmingoogleloginbutton:hover{
    box-shadow: rgba(0, 0, 0, 0.10) 1.95px 1.95px 2.6px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.kkmingoogleloginicon{
    position: relative;
    width: 24px;
    height: 24px;
    background-image: url(../image/google.png);
    background-size: 24px 24px;
    background-position: 0 0;
    cursor: pointer;
}
.kkmingooglelogintext{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
    color: #444;
}
.kkloginformpopuptopsubtitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: normal;
    color: #444;
}
.kkloginformpopuptopclose{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.topbarrightpart{
    position: relative;
    float: left;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.topbarcartholder{
    position: relative;
    float: left;

}
.topbarcartbutton{
    position: relative;
    float: left;
    height: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.topbarcartholder:before{
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    right: -12px;
    border-right: 2px solid #e53512;

}
.topbarcartvalue{
    display: none;
    position: relative;
    float: left;
    font-size: 14px;
    color: #000000;
    font-weight: normal;
}
.topbarcartvalue:before{
    content: "৳";
    position: absolute;
    font-size: 14px;
    color: #000000;
    font-weight: normal;
    left: -15px;
}
.productcontentdetailsvariant{
    position: relative;
    float: left;
    font-size: 12px;
    color: #222;
    font-weight: normal;
    cursor: pointer;
}
.productcontentdetailsvariant:hover{
    text-decoration: underline;
}
.topbarcarticon{
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    background-image: url(../image/tote-bag.png);
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    padding: unset;
    cursor: pointer;
}
.topbarcarticon_animation{
    animation-duration: .3s;
    animation-iteration-count: infinite;
    animation-name: tilt-shaking;
}
@keyframes tilt-shaking {
    0% { transform: rotate(0deg) translateY(-7px); }
    25% { transform: rotate(10deg) translateY(-7px); }
    50% { transform: rotate(0deg) translateY(-7px); }
    75% { transform: rotate(-10deg) translateY(-7px); }
    100% { transform: rotate(0deg) translateY(-7px); }
}
.productcontentdetailsvariantsholder{
    position: relative;
    float: left;
}
.productcontentdetailsvariantpopupbg{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.productcontentdetailsvariantpopupholder{
    position: fixed;
    width: 100%;
    height: calc(100% - 100px);
    left: 0;
    top: 100px;
    background-color: rgb(0 0 0 / 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.productcontentdetailsvariantpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 800px;
    min-height: 300px;
    max-height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}
.productcontentdetailsvariantpopuptop{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.productcontentdetailsvariantpopuptoptitle{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}
.productcontentdetailsvariantpopuptopclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.productcontentdetailsvariantpopupdetails{
    position: relative;
    float: left;
    width: 100%;
    max-height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
    overflow: auto;
}
.productcontentdetailsvariantpopupdetailsimages{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-gap: 10px;
}
.productcontentdetailsvariantpopupdetailsname{
    position: absolute;
    left: 0;
    bottom: -25px;
    font-size: 13px;
}
.productvariantthumb{
    position: relative;
    float: left;
    width: 100%;
    background-color: #EEEEEE;
    border-radius: 5px;
    cursor: pointer;
    aspect-ratio: 1;
}
.productvariantthumbselected{
    outline: 2px solid #f6921e;
    outline-offset: 2px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}
.productvariantthumbselected:before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
}
.relatedproductstitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    padding: 20px 0;
    grid-column-start: 1;
    grid-column-end: -1;
}
.relatedproductsholder{
    position: relative;
    float: left;
    width: 100%;
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(173px, 1fr));
    grid-gap: 20px;
}
.relatedproductscontainer{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    grid-column-start: 1;
    grid-column-end: -1;
    flex-direction: column;
}
.newsellandorderrecodentryicon{
    position: fixed;
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 10px;
    background-color: #e87556;
    background-image: url(../image/add.png);
    background-position: 0 0;
    background-size: 40px 40px;
    cursor: pointer;
    z-index: 1;
}
.newsellandorderrecodentryholder{
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px;
    z-index: 3;
    background-color: #222;
}
.newsellandorderrecodentryholdertop{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}
.newsellandorderrecodentryholdertoptitle{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
}
.newsellandorderrecodentryholdertopicons{
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    gap: 10px;
}
.newsellandorderrecodentryholdertoptitlereset{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/reset.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.newsellandorderrecodentryholdertoptitleclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.newsellandorderrecodentrydetails{
    position: relative;
    float: left;
    width: 100%;
    height: calc(100% - 30px);
    display: grid;
    gap: 10px;
    margin-top: 10px;
    grid-template-columns: repeat(3, 1fr);
}
.newsellandorderrecodentrydetailssesectedproducts{
    position: relative;
    float: left;
    width: 100%;
    overflow: auto;
}


.newsellandorderrecodentrydetailscustomardetails{
    position: relative;
    float: left;
    width: 100%;
}
.selecteditemstock, .selecteditemweight{
    display: none;
}
.newsellandorderrecodentrydetailscustomardetailspaymentsummary{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 90px;
    padding: 10px;
    background-color: #859f71;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #222;
    flex-wrap: wrap;
}
.newpaymentsummarytotalpayable{
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 20px;
    font-weight: bold;
}
.newsellandorderrecodentryholdertopiconsweightholder{
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    gap: 5px;
}
.newsellandorderrecodentryholdertopiconsweight{
    position: relative;
    float: left;
    font-size: 12px;
    color: #999;
}
.newsellandorderrecodentryholdertopiconsweighticon{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../image/weight-scale.png);
    background-size: 20px 20px;
    background-position: 0 0;
}
.newsellandorderrecodentrydetailscustomardetailsselltypeholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 30px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
}
.newsellandordertypebutton{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    background-color: #444;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.newsellandordertypebuttonSelected{
    background-color: #999;
    color: #FFF;
}
.selltypecustomardetailsholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
}
.selltypecustomardetails_outlet{
    display: block;
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_online, .selltypecustomardetails_bulk{
    display: none;
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_outletpayment{
    position: relative;
    float: left;
    width: 100%;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.selltypecustomardetails_outletpaymentdiscountwrapper{
    position: relative;
    float: right;
    width: 100%;
    max-width: calc(50% - 5px);
}
.selltypecustomardetails_outletpaymentdiscountwrapper:before{
    content: "Reduction";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_outletpaymentdiscount{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    padding-right: 50px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #444;
}
.selltypecustomardetails_outletpaymentmethodwrapper, .selltypecustomardetails_onlinepaymentmethodwrapper{
    position: relative;
    float: left;
    width: 100%;
    grid-column-start: 2;
}
.selltypecustomardetails_outletpaymentmethodwrapper:before{
    content: "Payment Method";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_onlinepaymentmethodwrapper:before{
    content: "Payment Method";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_outletpaymentmethod, .selltypecustomardetails_onlinepaymentmethod{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: #333;
}
.selltypecustomardetails_outletcontact{
    position: relative;
    float: left;
    width: 100%;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.selltypecustomardetails_outletcontactnamewrapper{
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_outletcontactnamewrapper:before{
    content: "Customer's Name";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_outletcontactphonewrapper{
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_outletcontactphonewrapper:before{
    content: "Customer's Phone";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}

.selltypecustomardetails_outletmoneyreceivedwrapper{
    display: none;
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_outletmoneyreceivedwrapper:before{
    content: "Received";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_outletmoneyreturnwrapper{
    display: none;
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_outletmoneyreturnwrapper:before{
    content: "Return";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}


.selltypecustomardetails_outletcontactname, .selltypecustomardetails_outletcontactphone, .selltypecustomardetails_outletmoneyreceived, .selltypecustomardetails_outletmoneyreturn{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #444;
}
.selltypecustomardetails_outletsavebutton, .selltypecustomardetails_onlinesavebutton, .selltypebulkresellersave{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #e87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50px;
    grid-column-start: 2;
    justify-self: end;
}

.createaccountformholder{
    position: relative;
    float: right;
    width: calc(100% - 40px);
    padding: 40px 20px;
    max-width: 460px;
    height: calc(100% - 80px);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: #e53512 0px 0px 0px 2px inset;
}
.createaccounttitleholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 30px;
}
.createaccounttitle{
    position: relative;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
.createaccountsubtitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: normal;
    color: #444;
}
.createaccountform{
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}
.createaccountforminputholder{
    position: relative;
    float: left;
    width: 100%;
    padding: 20px 0;
}
.createaccountforminputholder label{
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 12px;
    color: #777;
}
.createaccountforminput{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;
}

.createaccountformbutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.createaccountformbutton:disabled{
    opacity: .7;
    cursor: auto;
}
.phoneverificationholder{
    position: relative;
    float: left;
    width: 100%;
    max-width: 400px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.sendotpbutton{
    position: relative;
    float: left;
    width: 100px;
    height: 41px;
    font-size: 14px;
    font-weight: bold;
    background-color: #f6921e;
    color: #FFF;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.createaccountforminputotp{
    position: relative;
    float: left;
    width: 120px;
    padding: 9px;
    border: 1px solid #DDD;
    border-radius: 10px;
    color: #000000;
    font-size: 14px;
    font-weight: normal;
}
.phoneverifiedicon{
    position: relative;
    float: left;
    width: 24px;
    height: 24px;
    background-image: url("../image/right.png");
    background-position: 0 0 ;
}
.ouletdiscounttypepercentage{
    position: absolute;
    font-size: 12px;
    top: 4px;
    right: 4px;
    color: #FFFFFF;
    width: 30px;
    height: 30px;
    background-image: url(../image/percentage.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
    text-indent: -99999px;
    opacity: .4;
    z-index: 1;
}
.ouletdiscounttypepercentageSelected{
    opacity: 1;
}
.selltypecustomardetails_outletinner, .selltypecustomardetails_onlineinner, .selltypecustomardetails_bulkinner{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 10px;
    margin-top: 20px;
}
.sellchargeanddiscountholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    margin-top: 30px;
    gap: 10px;
    justify-content: flex-end;
}
.selectdeliverychargewrapper{
    display: none;
    position: relative;
    float: left;
    width: 100%;
}
.selectdeliverychargewrapper:before{
    content: "Delivery Fee";
    position: absolute;
    top: -20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
}

.selectdeliverycharge{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: #333;
}
.customdeliverycharge{
    position: relative;
    float: left;
    width: 100px;
    font-size: 12px;
    font-weight: normal;
    padding: 7px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #444;
}

.selltypecustomardetails_onlinecontactnamewrapper{
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_onlinecontactnamewrapper:before{
    content: "Customer's Name";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_onlinecontactname{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #555;
}
.selltypecustomardetails_onlineplateformwrapper{
    position: relative;
    float: left;
    width: 100%;
}
.selltypecustomardetails_onlineplateformwrapper:before{
    content: "Platform";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypecustomardetails_onlineplateform{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: #333;
}
.newtextbillholder{
    position: relative;
    float: left;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: -1;

}
#newtextbill{
    position: fixed;
    left: -100%;
    width: 100px;
    height: 100px;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    background-color: #222;
    color: #ccc;
    white-space: pre-line;
    overflow: auto;
    border-radius: 10px;
    resize: none;
}
.newtextbill:focus{
    outline: none;
}
.newtextbilltopbar{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.importbillicon{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url("../image/import.png");
    background-size: 20px 20px;
    cursor: pointer;
}
.newtextbillcopyicon{
    position: relative;
    float: left;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
.newtextbillcodoption{
    position: relative;
    float: left;
    font-size: 12px;
    color: #f6921e;
    font-weight: bold;
    cursor: pointer;
}
.disabled{
    color: #444;
}
.addcutomproducticon{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    flex: none;
    background-image: url(../image/add-package.png);
    background-size: 20px 20px;
    cursor: pointer;
    aspect-ratio: 1;
}
.addcutomproductdropdown{
    display: none;
    position: absolute;
    right: 2px;
    top: 50px;
    padding: 20px;
    width: 260px;
    background-color: #fff;
    z-index: 1;
}
.addcutomproductdropdownitemname, .addcutomproductdropdownitemrate{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 14px;
    padding: 8.5px 10px;
    margin-bottom: 20px;
    background-color: transparent;
    border: 1px solid #ddd;
}

.addcutomproductdropdownadditem{
    position: relative;
    float: right;
    width: 120px;
    height: 40px;
    background-color: #e87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50px;
}
.importbilldropdown{
    display: none;
    position: absolute;
    right: 0;
    bottom: 40px;
    padding: 10px;
    width: 300px;
    background-color: #fff;
    z-index: 1;
}
.importbilltext{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 170px;
    resize: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    background-color: transparent;
    border: 1px solid #ddd;
    color: #000000;
}
.importbilldropdownbuttonholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
}
.importbilldropdownpaste, .importbilldropdownsplit{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #e87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50px;
    grid-column-start: 2;
    justify-self: end;
}

.selltypeonlinecheckoutllinkwrapper{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000000cc;
}
.onlinecheckoutlurlbg{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selltypeonlinecheckoutllinkholder{
    position: relative;
    float: left;
    width: 300px;
    height: 150px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #FFF;
    border-radius: 10px;
}
.selltypeonlinecheckoutllink{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    text-overflow: ellipsis;
    font-size: 12px;
    color: #000000;
}
.selltypeonlinecheckoutllink::selection{
    background-color: #EEE;
}
.selltypeonlinecheckoutllinkcopy{
    position: relative;
    float: left;
    width: 80px;
    height: 30px;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
}
.selltypebulkresellernamewrapper{
    position: relative;
    float: left;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: -1;
}
.selltypebulkresellernamewrapper:before {
    content: "Select Seller";
    position: absolute;
    top: -22px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #999;
}
.selltypebulkresellername{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: #333;
}
.accountactivationdropdownwrapper{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}
.accountactivationdropdownholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../image/bggrin.png);
    backdrop-filter: brightness(0.5);
    background-size: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.accountactivationdropdown{
    position: sticky;
    float: left;
    top: 110px;
    width: calc(100% - 40px);
    max-width: 500px;
    height: 200px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #D0AA53;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.accountactivationskip{
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}
.accountactivationstep1, .accountactivationstep2{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.accountactivationstep2{
    display: none;
}
.accountactivationtitle{
    position: relative;
    float: left;
    font-size: 14px;
    color: #FFF;
}
.accountactivationphonetxt{
    position: relative;
    float: left;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
}
.accountactivationphonewrapper, .accountactivationcodewrapper{
    position: relative;
    float: left;
    height: 40px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.accountactivationphonewrapper::before{
    content: "+88";
    position: absolute;
    top: 0;
    left: 10px;
    width: 30px;
    height: 40px;
    font-size: 14px;
    color: #555;
    line-height: normal;
    font-weight: bold;
    display: flex;
    align-items: center;
    z-index: 1;
}
.accountactivationphone{
    position: relative;
    float: left;
    width: 160px;
    height: 40px;
    padding: 0 10px;
    padding-left: 40px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    line-height: normal;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    background-color: #f3da80;
}

.accountactivationcode{
    position: relative;
    float: left;
    width: 160px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    line-height: normal;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    background-color: rgb(255 255 255 / 50%);
    box-shadow: inset rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.accountactivationgetbutton, .accountactivationbutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.productnametitleholder{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.producteditbutton{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
}
.productadvicedeactive{
    position: relative;
    float: left;
    width: 120px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    color:#000000;
    background-color: #ddd;
}
.dashboardstatisticsholder{
    position: relative;
    float: left;
    width: 100%;
    height: 300px;
    display: flex;
    gap: 10px;
}
.dashboardstatisticssummary{
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: 10px;
}
.dashboardstatisticssummarybox{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    background-color: #66ABC4;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboardstatisticschartholder{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    height: 280px;
    padding: 10px;
    background-color: #FFF;
    overflow: hidden;
    display: flex;
    gap: 10px;
}
.dashboardstatisticschartdaily{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 2px;
}
.dashboardstatisticscharttop{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dashboardstatisticscharttop select{
    position: relative;
    float: left;
    width: 60px;
    height: 30px;
    color: #AAA;
    background-color: transparent;
}
#chartContainer{
    position: relative;
    float: left;
    width: 100%;
    height: 268px;
}
.canvasjs-chart-toolbar, .canvasjs-chart-credit{
    display: none!important;
}
.canvasjs-chart-tooltip{
    z-index: 0!important;
}
.dashboardstatisticscharttoptitle{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.dashboardstatisticscharttopmonthselector{
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    gap: 10px;
}
.newsellandorderrecodentryslider{
    display: none;
    position: relative;
    float: left;
    width: 26px;
    height: 26px;
    background-image: url(../image/double-arrows.png);
    background-size: 26px 26px;
    background-position: 0 0;
    cursor: pointer;
    margin-left: auto;
}
.settingpagetabholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.settingpagetab{
    position: relative;
    float: left;
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.settingpagetabSelected{
    color: #f6921e;
    border-bottom: 2px solid #f6921e;
}
.settingpagecontent{
    position: relative;
    float: left;
    width: 100%;
    display: none;
}
#settingpagecontent_products{
    display: block;
}
.setdeliverychargeholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
}
.setdcformtitle{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 1px solid #DDD;

}
.setdcformtitle > div {
    width: 120px;
}
.setdcformtitle > .setdcformweight{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    text-align: center;
}
.setdcformtitle > .setdcformcharge{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    text-align: center;
}
.setdcformfield{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
    align-items: center;
}
.setdcformfield > input {
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.setdcformholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    padding-top: 0;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #EEE;
    border-radius: 10px;
}
.setdcformchargesave{
    position: relative;
    width: 100px;
    height: 34px;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;
    align-self: end;
}
.indexproductviewmax{
    display: none;
    position: fixed;
    left: 0;
    top: 100px;
    width: 100%;
    height: calc(100% - 100px);
    background-color: #FFF;
    z-index: 2;
    overflow: auto;
    justify-content: center;
}

.indexproductviewmax .productcontentholder{
    width: calc(100% - 20px);
    min-height: 100%;
    height: fit-content;
    padding: 0 10px;
    background-color: #FFF;
    align-items: center;
    padding-bottom: 100px;
}
.indexproductviewmax .productcontent{
    max-width: 1024px;
}
.allduesellbutton{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    color:#000000;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.allduesellpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3;
    top: -100%;
    /*top: 0;*/
}
.allduesellpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 600px;
    height: calc(100% - 200px);
    min-height: 400px;
    background-color: #000000;
    border-radius: 10px;
    overflow: auto;
}
.allduesellpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.allduesellpopuptoptitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.allduesellpopuptopclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.allduesellpopupdetails{
    position: relative;
    float: left;
    width: 100%;
    height: calc(100% - 70px);
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}
.allduesellpopupdetailslist{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #222;
    display: flex;
    gap: 5px;
    align-items: flex-end;
    flex-direction: column;
    border-radius: 10px;
}
.allduesellpopuporderno{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.allduesellpopupnamedetails{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #ccc;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.allduesellpopupamount{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    color: #b40000;
    font-weight: bold;
}
.allduesellpopuppaymentholder{
    position: relative;
    float: left;
    width: 200px;
    display: flex;
    gap: 10px;
}
.allduesellpopuppaidby{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    font-size: 12px;
    font-weight: normal;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #555;
}
.allduesellpaymentupdate{
    position: relative;
    float: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background-color: #f6921e;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}
.topbarcartdropdownholder{
    position: fixed;
    right: -410px;
    bottom: 10px;
    width: calc(100% - 20px);
    max-width: 400px;
    height: calc(100% - 120px);
    background-color: #ffffff;
    z-index: 2;
    overflow: hidden;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    transition: right .75s cubic-bezier(.5,0,.5,1);

}
.footerpageholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
}
.footerpagetitleholder{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    justify-items: end;
    align-items: center;
}
.footerpagetitletext{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-column-start: 1;
    grid-column-end: 4;
}
.footerpagetitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}
.footerpagesuvtitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    color: #000000;
}
.footerpagetitleimage{
    position: relative;
    float: left;
    width: 256px;
    height: 256px;
    /*background-image: url("../image/policy.png");*/
    /*background-position: 0 0;*/
    grid-column-end: -1;
}
.footerpagebodytextholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
}
.footerpagebodytext{
    overflow: revert;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #000000;
}
.footerpagelinkholder{
    position: relative;
    float: left;
    width: 100%;
    max-width: 1024px;
    margin-bottom: 50px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    justify-items: center;
}
.footerpagelink{
    position: relative;
    float: left;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
}
.topbarcartdropdown{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    max-height: calc(100% - 90px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}
.topbarcartdropdowntitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}
.topbarcartdropdowncartitems{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkoutpagecartitemdetails>.topbarcartdropdowncartitems{
    gap: 20px;
}

.topbarcartdropdowncartitemlist{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 5px;
    align-items: center;

}
.topbarcartdropdowncartitemimage{
    position: relative;
    float: left;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
}
.topbarcartdropdowncartitemimage img{
    width: 100%;
    height: auto;
}
.topbarcartdropdowncartitemdetails{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
.topbarcartdropdowncartitempriceandqty{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbarcartdropdowncartitemname{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.topbarcartdropdowncartitemprice{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #e53512;
}
.topbarcartdropdowncartitemremove{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/trash.png);
    background-size: 30px 30px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 10px;
}
.topbarcartdropdowncartitemqtyselector{
    position: relative;
    float: left;
    display: flex;
    gap: 5px;
    align-items: center;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
}
.cartqtyfield{
    position: relative;
    float: left;
    width: 40px;
    height: 26px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: transparent;
}
.cartqtyminus, .cartqtyplus{
    position: relative;
    float: left;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #e53512;
    cursor: pointer;
}
.topbarcartdropdownfooter{
    position: absolute;
    width: calc(100% - 20px);
    left: 0;
    bottom: 0;
    padding: 10px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #85AEBA;
    align-items: center;
    gap: 10px;
}
.topbarcartdropdownfooterpricebox{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cartdropdownfooterlabelwrapper{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.cartdropdownfooterlabel{
    position: relative;
    float: left;
    font-size: 12px;
    color: #FFF;
}
.cartdropdowndeliverycharge, .cartdropdowntotalprice{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
}
.topbarcartdropdownfootercheckout{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.investorname, .investorphone, .investornid, .investormail, .investordisplayname{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;
    border-radius: 10px;
}

.investorname::placeholder, .investorphone::placeholder, .investornid::placeholder, .investormail::placeholder, .addnewinvestmentshareamount::placeholder, .investordisplayname::placeholder{
    color: #777777;
}
.investordetailssavebutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    background-image: linear-gradient(to right, #e53512 0%, #F09819 51%, #e53512 100%);
    align-items: center;
    justify-content: center;
}
.investordetailssavebutton:hover{
    background-position: right center;
}
.investordetailsboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.investordetailsbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 10px;
    background-color: #a0bacf;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.investordetailsboxname{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}
.investordetailsboxphone{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    color: #000000;
}
.investordetailsboxemail{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    color: #000000;
}
.investordetailsboxtotalshare{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #e53512;
    font-size: 14px;
    font-weight: bold;
}
.pagecontent{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.ledgerholderwrapper, .balancesheetwrapper{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
}
.ledgerholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ledgertitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    border-bottom: 2px solid #000000;
}
.ledgeraccountholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.ledgertable{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    border: 1px solid #000000;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ledgertable:before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 1px;
    background-color: #000000;
}
.ledgertabletitlerow{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid transparent;
    padding-bottom: 10px;
}
.ledgertabletitlerow:before{
    content: "";
    position: absolute;
    bottom: -1px;
    left: -10px;
    height: 1px;
    width: calc(100% + 20px);
    background-color: #000000;
}
.ledgertablerow{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
}
.ledgertabletitlerowhalf, .ledgertablerowhalf{
    position: relative;
    float: left;
    flex: 50%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
}
.ledgertabletitletext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.ledgertabletext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
.ledgertabletitletext:nth-child(2), .ledgertabletext:nth-child(2){
    grid-column-start: 2;
    grid-column-end: 4;
}
.ledgertabletitletext:before, .ledgertabletext:before{
    content: "";
    position: absolute;
    top: -10px;
    left: calc(100% + 5px);
    height: calc(100% + 20px);
    width: 1px;
    background-color: #000000;
}
.ledgertabletitletext:nth-last-child(1):before, .ledgertabletext:nth-last-child(1):before{
    content: none;
}
.ledgertabletext:nth-child(2){
    text-align: left;
}
.ledgertabletext:nth-last-child(1){
    text-align: right;
}
.ledgertablecollDr, .ledgertablecollCr{
    position: relative;
    float: left;
    flex: 50%;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.ledgertabletotal{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    display: flex;
    grid-column-end: -1;
    justify-content: flex-end;
    text-decoration: underline;
    text-decoration-style: double;
    font-weight: bold;
}
.ledgertablerow:nth-last-child(1){
    padding-top: 10px;
}
.ledgertablerow:nth-last-child(1):before{
    content: "";
    position: absolute;
    top: -1px;
    left: -10px;
    height: 1px;
    width: calc(100% + 20px);
    background-color: #000000;
}
.bstable{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    max-width: 600px;
    border: 1px solid #000000;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bstabletitlerow, .bstablerow{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    border-bottom: 1px solid transparent;
    padding-bottom: 8px;
}
.bstabletitlerow:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -10px;
    height: 1px;
    width: calc(100% + 20px);
    background-color: #000000;
}
.bstabletitletext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.bstablerow:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -10px;
    height: 1px;
    width: calc(100% + 20px);
    background-color: #000000;
}
.bstabletext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
.bstabletitletext:nth-child(2), .bstabletext:nth-child(2){
    grid-column-start: 2;
    grid-column-end: 4;
}
.bstabletitletext:before, .bstabletext:before{
    content: "";
    position: absolute;
    top: -10px;
    left: calc(100% + 5px);
    height: calc(100% + 20px);
    width: 1px;
    background-color: #000000;
}
.bstabletitletext:nth-last-child(1):before, .bstabletext:nth-last-child(1):before{
    content: none;
}
.bstablerow:nth-last-child(1):before {
    content: "";
    position: absolute;
    top: -11px;
    left: -10px;
    height: 1px;
    width: calc(100% + 20px);
    background-color: #000000;
}
.bstabletext:nth-child(2) {
    text-align: left;
}
.bstabletext:nth-child(3), .bstabletext:nth-child(4) {
    text-align: right;
}
.bstablerow:nth-last-child(1){
    padding-bottom: 0;
}
.bstabletotalamount{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    grid-column-start: 4;
    text-align: right;
    text-decoration: underline;
    text-decoration-style: double;
    font-weight: bold;
}
.bstabletotalamount:nth-child(2){
    grid-column-start: 5;
}
.invoiceholder{
    position: relative;
    float: left;
    width: 100%;
    margin: -10px;
    min-height: 995px;
    padding: 10px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #FFF;
}
.invoicetitleholder{
    position: relative;
    float: left;
    width: 100%;
    height: 200px;
    background-color: #EEE;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.invoicelogo{
    position: relative;
    float: left;
    margin-left: 20px;
    flex: none;
    width: 100px;
}
.invoicelogo img{
    width: 100%;
    height: auto;
}
.kkcontact{
    position: relative;
    float: left;
    margin-right: auto;
    margin-left: 20px;
    font-size: 12px;
}
.invoicetitletext{
    position: relative;
    float: left;
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
}
.invoicetitle{
    position: relative;
    float: left;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: bold;
}
.invoiceid, .invoicedate{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
}
.invoiceid:before{
    content: "Invoice Number";
    position: absolute;
    top: -20px;
    font-weight: bold;
}
.invoicedate:before{
    content: "Date";
    position: absolute;
    top: -20px;
    font-weight: bold;
}
.invoicecustmardetails{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
}
.invoiceitemdetails{
    position: relative;
    float: left;
    width: 100%;
}
.invoiceitemdetailsrow{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 40px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    justify-items: start;
    align-items: center;
}
.invoiceitemdetailsrow:nth-child(1){
    background-color: #EEE;
}
.invoiceitemdetailscoltitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
}
.invoiceitemdetailscol{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
}
.invoiceitemdetailscoltitle:nth-child(1), .invoiceitemdetailscol:nth-child(1){
    display: -webkit-box;
    line-height: normal;
    grid-column-start: 1;
    grid-column-end: 4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invoiceitemdetailscoltitle:nth-last-child(1), .invoiceitemdetailscol:nth-last-child(1){
    text-align: right;
}
.invoicesummaryholder{
    position: relative;
    float: right;
    width: 50%;

}
.invoicesubtotal, .invoicediscount, .invoiceshipping{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding-right: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.invoicesubtotal{
    border-top: 1px solid #000;
}
.invoicesubtotallabel, .invoicediscountlabel, .invoiceshippinglabel, .invoicetotallabel{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: normal;
}
.invoicesubtotalamount, .invoicediscountamount, .invoiceshippingamount, .invoicetotalamount{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.invoicetotal{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding-right: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #000;
}
.invoicecustmardetailstitle{
    font-weight: bold;
}
.invoicepaymentholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}
.invoicepaymenttitle{
    position: relative;
    float: left;
    font-size: 14px;
}
.invoicepayment{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;
}
.invoicefooternote{
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 12px;
}
.savedaddressholder, .checkoutpagecartitemdetails{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.savedaddresstitle, .checkoutpagecartitemtitle{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.savedaddressboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.savedaddressbox{
    position: relative;
    float: left;
    width: calc(100% - 24px);
    padding: 10px;
    border: 2px dashed #8A6A47;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}
.savedaddressboxsekected{
    background-color: #ffd472;
}
.savedreceiverdetails{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
    user-select: text;
}
.savedreceiverareadetails{
    position: relative;
    float: left;
    margin-top: 5px;
    width: fit-content;
    padding: 5px 10px;
    background-color: #D0AA53;
    font-size: 14px;
    line-height: 150%;
    color: #fff;
    display: flex;
    align-items: center;
    user-select: text;
}
.websiteorderboxshippingdetails .savedreceiverareadetails{
    background-image: none;
    background-color: #8098A0;
}
.rightarrow{
    position: relative;
    float: left;
    width: 10px;
    height: 10px;
    margin: 6px;
    background-image: url(../image/right-arrow.png);
    background-position: 0 0;
    background-size: 10px 10px;
}
.savedreceiverdetailschangebutton{
    position: relative;
    float: left;
    margin-left: auto;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
    cursor: pointer;
}
.savedreceiverdetailschangebutton:hover{
    text-decoration: underline;
}
.checkoutordersummaryholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.emptydatabox{
    position: relative;
    float: left;
    width: 100%;
    height: 60px;
    margin: 10px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    color: #666;
    font-size: 12px;
    font-style: italic;
}
.checkoutpagetotalordervalue, .checkoutpagevaucherholder, .checkoutpagediscountvalue, .checkoutpageshippingvalue, .checkoutpagetotalpayablevalue{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    max-width: 500px;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;
}

.checkoutpagevaucherholder{
    justify-content: flex-start;
    gap: 10px;
}
.checkoutpagetotalpayablevalue{
    padding-top: 10px;
    border-top: 1px solid #383838;
}
.checkoutpagevauchercode{
    position: relative;
    float: left;
    width: 160px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: #f3da80;
}
.checkoutpagevauchercodeapplybutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;

}

.emptycartmsg{
    position: relative;
    float: left;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #ccc;
    font-size: 12px;
    font-style: italic;
}
.checkoutpageorderplacebutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.shippingaddressdetailsholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shippingaddressdetailsnameholder, .shippingaddressdetailsphoneholder, .shippingaddressdetailsaddressholder, .shippingaddressdetailsdeliveryareaholder, .shippingaddressdetailsinstructionsholder {
    position: relative;
    float: left;
    width: 100%;
}
.shippingaddressdetailsname, .shippingaddressdetailsphone, .shippingaddressdetailsdeliveryarea {
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 14px;
    color: #000000;
    padding: 10px 0;
    border-bottom: 1px solid #CCCCCC;
}
.shippingaddressdetailsdeliveryarea{
    caret-color: transparent
}
.selecteddeliveryareaholder .rightarrow{
    position: relative;
    float: left;
    width: 8px;
    height: 8px;
    margin: 6px;
    background-image: url(../image/right-arrow-black-triangle.png);
    background-position: 0 0;
    background-size: 8px 8px;
}

.shippingaddressdetailslabel {
    position: absolute;
    width: 100%;
    top: 9px;
    left: 0;
    font-size: 14px;
    color: #999;
    pointer-events: none;
    transition: all .3s;
}
.shippingaddressdetailslabelafterfocus {
    top: -10px;
    font-size: 12px;
}
.addressholder{
    display: none;
    position: absolute;
    width: calc(100% - 2px);
    height: 209px;
    top: 45px;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.addressholderinner {
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 100%;
    padding: 0 10px;
    overflow: auto;
}
.cityholder, .zoneholder, .areaholder {
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}
.city, .zone, .area {
    position: relative;
    float: left;
    width: 100%;
    list-style: none;
}
.title {
    position: relative;
    float: left;
    width: 100%;
    padding-top: 10px;
    font-size: 12px;
    color: #888;
    pointer-events: none;
}
.cityname, .zonename, .areaname {
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #000;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid #EEEEEE;
}
.addresspickerloading{
    display: none;
    position: absolute;
    width: 80px;
    height: 60px;
    left: calc(50% - 40px);
    top: calc(50% - 30px);
    background-image: url(../image/loader.gif);
}
.selecteddeliveryareaholder {
    display: none;
    position: absolute;
    width: calc(100% - 10px);
    padding: 10px 0;
    top: 0;
    left: 0;
}
.cleararea {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-image: url(../image/cancel.png);
    background-position: 0 0;
    cursor: pointer;
}
.scity, .szone, .sarea {
    position: relative;
    float: left;
    font-size: 14px;
    color: #000;
}
.shippingaddressdetailsaddress {
    position: relative;
    float: left;
    width: calc(100% - 50px);
    min-height: 42px;
    resize: none;
    padding: 10px 0;
    padding-right: 40px;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #CCCCCC;
}
.shippingaddressdetailssubmit{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    border: none;
}
.shippingaddressdetailssubmit:disabled{
    opacity: .7;
    cursor: unset;
}


.feedbackholder{
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    right: 10px;
    top: 6px;
}
.feedbackicon{
    margin: 5px;
}

.angry {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 20px;
    height: 20px;
    color: #cd0a0a;
    border: 2px solid;
    border-radius: 100px
}

.angry::after,
.angry::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 4px
}

.angry::before {
    background: currentColor;
    box-shadow: 6px 0 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    top: 5px
}

.angry::after {
    width: 8px;
    height: 4px;
    border-radius: 150px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 2px solid;
    border-top-color: transparent;
    top: 9px;
    transform: scaleY(-1)
}



.fine {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 20px;
    height: 20px;
    color: #008140;
    border: 2px solid;
    border-radius: 100px
}

.fine::after,
.fine::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 4px
}

.fine::before {
    background: currentColor;
    box-shadow: 6px 0 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    top: 5px
}

.fine::after {
    width: 8px;
    height: 4px;
    border-radius: 150px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 2px solid;
    border-top-color: transparent;
    top: 9px
}

.feedbacktext{
    position: absolute;
    font-size: 14px;
    color: rgb(255 255 255);
    white-space: nowrap;
    right: -5px;
    top: 35px;
    z-index: 1;
    padding: 10px 20px;
    background: rgb(193,0,0);
    background: linear-gradient(45deg, rgb(255 7 7) 0%, rgb(59 59 59) 25%, rgb(37 37 37) 100%);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}
.checkoutpagenewaddressbutton{
    position: relative;
    float: left;
    width: calc(100% - 4px);
    height: 58px;
    border: 2px dashed #85AEBA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
}
.checkoutaddresspickerpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}
.checkoutaddresspickerpopupholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../image/bggrin.png);
    backdrop-filter: brightness(0.5);
    background-size: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.checkoutaddresspickerpopup{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 10px;
    max-width: 800px;
    min-height: 400px;
    max-height: calc(100% - 40px);
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    box-shadow: #e53512 0px 0px 0px 2px inset;
}
.checkoutaddresspickerpopuptop{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.checkoutaddresspickerpopuptitle{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}
.checkoutaddresspickerpopupclose{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.pageholdertopbar{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.yearmonthselector{
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ledgeryearselectorbutton{
    position: relative;
    float: left;
    width: 80px;
    height: 40px;
    padding: 0 10px;
    background-color: #ccc;
    border-radius: 10px;
}
.ledgermonthselectorbutton{
    position: relative;
    float: left;
    width: 130px;
    height: 40px;
    padding: 0 10px;
    background-color: #ccc;
    border-radius: 10px;
}
#updateBalanceCdButton{
    position: relative;
    float: left;
    width: 80px;
    height: 40px;
    background-color: #f6921e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}
.addresspickerfooter{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.addresslabel{
    position: relative;
    float: left;
    font-size: 14px;
    color: #000000;
}
.addresslabelbutton{
    position: relative;
    float: left;
    padding: 0 10px;
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #999999;
    border-radius: 10px;
    cursor: pointer;
}
.addresslabelbuttonselected{
    border: 1px solid #E77253;
    color: #E77253;
}





.indexnewarrivalboxholder{
    position: relative;
    float: left;
    width: 100%;
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}


.indexnewarrivalbox a{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.indexnewarrivalbox:nth-child(1){
    background-color: #E77253;
}
.indexnewarrivalbox:nth-child(2){
    background-color: #D0AA53;
}
.indexnewarrivalbox:nth-child(3){
    background-color: #66ABC4;
}
.indexnewarrivalbox{
    position: relative;
    float: left;
    width: 100%;
    background-color: #fff3e5;
    overflow: hidden;

}

.indexnewarrivalimage{
    position: relative;
    float: left;
    aspect-ratio: 1;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    overflow: hidden;
}

.indexnewarrivaldetails{
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding: 20px 0;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.indexnewarrivaltitle{
    position: relative;
    float: left;
    max-width: 100%;
    font-size: 12px;
    color: #FFF;
    cursor: pointer;
}
.indexnewarrivalprice{
    position: relative;
    float: left;
    margin-left: auto;
    padding-right: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    white-space: nowrap;
}
.checkoutpageorderdetailsholder{
    position: relative;
    float: left;
    margin: 0 auto;
    width: 100%;
    max-width: 420px;
    min-height: 300px;
    display: flex;
    grid-gap: 10px;
    flex-direction: column;
}
.checkoutpageorderdetails{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #85AEBA;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
.checkoutpageorderno{
    position: relative;
    float: left;
    margin-left: auto;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
}
.checkoutpageordertitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
}
.checkoutpageorderlistholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.checkoutpageorderlist{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000000;
}
.checkoutpageordervalue{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #e53512;
    padding-top: 10px;
    margin-top: 10px;
}
.checkoutpagepaymentselector{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.checkoutpagepaymentselectortitle{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}
.checkoutpagepaymentoptionholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.checkoutpagepaymentoptions{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.checkoutconfirmationpopup{
    position: absolute;
    left: 0;
    bottom: 55px;
    padding: 10px;
    width: calc(100% - 20px);
    display: none;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.checkoutconfirmationpopuptext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
}
.checkoutconfirmationpopupbuttons{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
.checkoutconfirmationpopupcancelbutton{
    position: relative;
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
}
.checkoutconfirmationpopupconfirmbutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.checkoutpagewarningtext{
    position: relative;
    float: left;
    margin: 0 auto;
    width: calc(100% - 44px);
    max-width: 376px;
    padding: 20px;
    font-size: 14px;
    background-color: #85AEBA;
    border: 2px dashed #e53512;
}
.checkoutpagewarningtext a{
    font-weight: bold;
    color: #e53512;
    text-decoration: none;
}
.checkoutpagewarningtext a:hover{
    text-decoration: underline;
}
.websiteorderboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.websiteorderbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #a0bacf;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.websiteordertitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.websiteorderboxexpand{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-image: url(../image/down.png);
    background-size: 20px 20px;
    cursor: pointer;
    z-index: 1;
    transition: transform .3s;
}
.websiteorderboxtoporderno{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000;
    user-select: text;
}
.websiteorderboxtopdate{
    position: relative;
    float: left;
    margin-left: auto;
    font-size: 12px;
    color: #e53512;
}
.websiteorderboxtopname{
    position: relative;
    float: left;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}
.websiteorderboxtopordervalue{
    position: relative;
    float: left;
    font-size: 12px;
    color: #e53512;
    font-weight: bold;
    text-transform: uppercase;
}
.websiteorderboxbodyholder{
    display: none;
    position: relative;
    float: left;
    width: 100%;
}
.websiteorderboxbody{
    position: relative;
    float: left;
    margin-top: 10px;
    width: 100%;
    display: flex;
    grid-gap: 10px;
    align-items: start;
    flex-wrap: wrap;
    justify-content: space-between;
}
.websiteorderboxbodyorderdetails{
    position: relative;
    float: left;
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;

}
.websiteorderboxbodyorderitemli{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 10px;
}
.websiteorderboxbodyorderitem{
    position: relative;
    float: left;
}
.websiteorderboxbodyorderqty{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #75342A;
    color: #FFF;
    border-radius: 50%;
}
.websiteorderboxbodyordervaluedetails{
    position: relative;
    float: left;
    width: 100%;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;

}
.websiteorderboxordervalueholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    font-size: 14px;
}
.websiteorderboxshippingdetails{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    border-top: 1px solid #75342A;
}
.websiteorderboxadminactionholder{
    position: relative;
    float: left;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #75342A;
    display: flex;
    align-items: center;
    gap: 20px;
}
.websiteorderboxadminactionapprovebutton{
    position: relative;
    float: left;
    width: 90px;
    height: 33px;
    background-image: linear-gradient(to right, #16222A 0%, #2d5569 51%, #16222A 100%);
    background-size: 200% auto;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;
}
.websiteorderboxadminactionotherbutton{
    position: relative;
    float: left;
    width: 22px;
    height: 22px;
    background-image: url(../image/gamer.png);
    background-position: 0 0;
    background-size: 22px 22px;
    cursor: pointer;
}
.websiteorderboxadminactionmessageholder{
    position: relative;
    float: left;
    display: none;
    align-items: center;
    gap: 10px;
}
.websiteorderboxadminactionmessage{
    position: relative;
    float: left;
    width: 200px;
    font-size: 12px;
    padding: 8px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #75342A;
}
.websiteorderboxadminactionrejectbutton{
    position: relative;
    float: left;
    width: 90px;
    height: 33px;
    background-image: linear-gradient(to right, #e53935 0%, #d94e4c 51%, #e53935 100%);
    background-size: 200% auto;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;
}
.savedaddressboxlabel{
    position: absolute;
    top: 10px;
    right: 2px;
    padding: 6px 10px;
    background-color: #8a6a47;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    color: #FFF;
}
.myorderboxholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.myorderbox{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #85AEBA;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.myorderboxrow{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.weborderstatusholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}
.weborderstatus{
    position: relative;
    float: left;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    background-color: #75342A;
    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.myorderboxdateholder{
    position: relative;
    float: left;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.myorderboxdatelabel{
    position: relative;
    float: left;
    font-size: 12px;
}
.myorderboxdate{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.myorderboxordernoholder{
    position: relative;
    float: left;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.boxmyoderno{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.boxmyorderinvoiceurl{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../image/invoice.png);
    background-position: 0 0;
    background-size: 20px 20px;
    cursor: pointer;
}

.myorderboxroworderstatusholder{
    position: relative;
    float: left;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.myorderboxroworderstatuslabel{
    position: relative;
    float: left;
    font-size: 12px;
}
.myorderboxroworderstatus{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.myorderboxrowtrackingholder{
    position: relative;
    float: left;
}

.myorderboxrowtrackingurl {
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
    color: #364d61;
    text-decoration: none;
}

.myorderboxrowtrackingurl:hover {
    text-decoration: underline;
}
.myorderboxrowdeleverydate{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
}
.myorderboxrowpaymentmethodholder{
    position: relative;
    float: left;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.myorderboxrowpaymentmethodlabel{
    position: relative;
    float: left;
    font-size: 12px;
}
.myorderboxrowpaymentmethod{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    text-transform: uppercase;
}
.myorderboxrowpaymentamount{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #e53512;
    text-decoration: none;
}
.myorderboxfooterbuttonholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}
.myorderboxfooterbutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.myorderboxdetails{
    position: relative;
    float: left;
    width: 100%;
    display: none;
}
.vieworderdetailsbutton{
    position: relative;
    float: left;
    margin-right: auto;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.ordercancelconfirmationdropdown{
    position: absolute;
    right: 0;
    top: 45px;
    width: 280px;
    min-height: 140px;
    padding: 10px;
    background-color: rgb(255 255 255 / 40%);
    backdrop-filter: blur(5px);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ordercancelconfirmationdropdowntitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
}
.dropdowncancellationreason{
    position: relative;
    float: left;
    width: calc(100% - 16px);
    font-size: 12px;
    padding: 10px 8px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
}
.myorderboxcancelorderback{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.orderdetailswrapper{
    position: relative;
    float: left;
    margin: 0 auto;
    width: 100%;
    max-width: 420px;
    min-height: 300px;
    display: flex;
    grid-gap: 10px;
    flex-direction: column;
}
.orderdetailsholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #85AEBA;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
.orderdetailsorderno{
    position: relative;
    float: left;
    margin-left: auto;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
}
.orderdetailstitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
}
.orderdetailsitemholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.orderdetailsitemname{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000000;
}
.orderdetailssummary{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #e53512;
    padding-top: 10px;
    margin-top: 10px;
}
.orderdetailspaymentdetails{
    position: relative;
    float: left;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.orderdetailspaymentstatustitle{
    position: relative;
    float: left;
    font-size: 12px;
}
.orderdetailspaymentstatus{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.manualorderaddressbox {
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    border-bottom: 1px solid #75342A;
}
.savedshippingaddressdetailstitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #e53512;
}
.manualorderaddressbox .savedreceiverareadetails{
    background-image: none;
    background-color: #75342A;
}
.savedestdateholder{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
}
.saveddeliverypartner{
    position: relative;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    color: #000;
    justify-content: flex-end;
    align-items: center;
}
.successmessageholder{
    position: fixed;
    display: none;
    z-index: 3;
}
.successmessagebg{
    position: fixed;
    width: 100%;
    height: calc(100% - 100px);
    left: 0;
    top: 100px;
    background-color: rgb(0 0 0 / 80%);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.successmessage{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    max-width: 300px;
    line-height: 200%;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    padding: 30px 15px;
    text-align: center;
}
.successmessageclose{
    position: absolute;
    top: 6px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.checkoutpagefooter{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
}
.estdeliverydate{

}
.deliverypartner{
    position: relative;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    color: #000;
    justify-content: flex-end;
    align-items: center;
}
.createaccountpagebackgound{
    position: relative;
    float: left;
    width: 100%;
    background-image: url(../image/almondblossom.jpg);
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
}
.signupaggrementcheckholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.signupaggrementchecklabel{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: normal;
    color: #444;
    line-height: 110%;
}
.signupaggrementchecklabel a{
    text-decoration: none;
    color: #e53512;
}
.imagemanagerpagetabholder{
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}
.imagemanagerpagetab{
    position: relative;
    float: left;
    padding: 0 10px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.imagemanagerpagetabselected{
    color: #e53512;
    box-shadow: inset #e53512 0px -2px 0px;
}
.imagemanageruploadholdr{
    position: relative;
    float: left;
}
.imagemanagerupload{
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    background-image: url(../image/image.png);
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    padding: unset;
    cursor: pointer;
}
.imagemanagergallery{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #FFF;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.imagemanagergallerybox{
    background: #4d90fe29;
    aspect-ratio: 1;
}


.imagemanageruploadpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.imagemanageruploadpopupholder{
    position: fixed;
    width: 100%;
    height: calc(100% - 100px);
    left: 0;
    top: 100px;
    background-color: rgb(0 0 0 / 80%);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.imagemanageruploadpopup{
    position: relative;
    float: left;
    width: calc(100% - 60px);
    padding: 40px 20px;
    max-width: 600px;
    max-height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}
.imagemanageruploadpopuptop{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.imagemanageruploadpopuptitle{
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.imagemanageruploadpopupclose{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.imagemanageruploadpopupbody{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
    display: flex;
    grid-gap: 10px;
    flex-direction: column;
}
.imagemanageruploadpopupuploadderbutton input[type="file"] {
    display: none;
}
.imagemanageruploadpopupuploadderbutton{
    position: relative;
    float: left;
    margin: 0 auto;
    width: calc(100% - 2px);
    max-width: 300px;
    height: 38px;
    border: 1px dashed #f6921e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
}
.imagemanageruploadpopupuploadedimageboxholder{
    position: relative;
    float: left;
    width: 100%;
    min-height: 170px;
    max-height: 260px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    overflow: auto;
}
.imagemanageruploadpopupuploadedimagebox{
    position: relative;
    float: left;
    width: 100%;
    min-height: 200px;
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 10px;
    align-items: center;
}
.manageruploadpopupuploadedimage{
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    aspect-ratio: 1;
    background-color: #000;
}
.manageruploadpopupuploadedimagename{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    height: 40px;
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;
    border-radius: 10px;
}
.imagemanagerpopupimagesize{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.imagemanagerpopupimagesize label{
    cursor: pointer;
}
.imagemanageruploadconfirm{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    background-image: linear-gradient(to right, #e53512 0%, #F09819 51%, #e53512 100%);
    align-items: center;
    justify-content: center;
}
.imagemanageruploadconfirm:hover{
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.myorderboxemptyimg{
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    background-image: url(../image/document.png);
    background-size: 80px 80px;
}
.myorderboxempty{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    gap: 10px;
}
.admincashboxvalue{
    position: relative;
    float: left;
    margin-left: auto;
    width: 140px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #FFF;
    overflow: hidden;
}
.admincashboxicon{
    position: relative;
    float: left;
    width: 26px;
    height: 26px;
    background-image: url(../image/coin.png);
    background-position: 0 0;
    background-size: 26px 26px;
    cursor: pointer;
}
.admincashboxamount{
    position: relative;
    float: left;
    width: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #E87556;
    letter-spacing: 1px;
}
.admincashboxcover{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #66ABC4;
    color: #FFF;
    display: flex;
    align-items: center;
    transition: .5s;
    justify-content: space-evenly;
}
.admincashboxreloadicon{
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../image/reset.png);
    background-position: 0 0;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.adminexpenceentryholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
}
.adminexpenceentryformholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    display: flex;
    gap: 10px;
    background-color: #D0AA53;
    flex-direction: column;
}
.adminexpenceentryformtitle{
    position: relative;
    float: left;
    height: 30px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.adminexpenceentryform{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}
.adminexpenceentrytypewrapper, .adminexpenceentryfromwrapper, .adminexpenceentrydescwrapper, .adminexpenceentryamountwrapper{
    position: relative;
    float: left;
    width: 100%;
    padding-top: 20px;
}
.adminexpenceentrytypewrapper{
    display: none;
}
.adminexpenceentrytypewrapper::before{
    content: "Type";
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 12px;
    color: #999;
}
.adminexpenceentryfromwrapper::before{
    content: "From";
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 12px;
    color: #FFF;
}
.adminexpenceentrydescwrapper::before{
    content: "Description";
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 12px;
    color: #FFF;
}
.adminexpenceentryamountwrapper::before{
    content: "Amount";
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 12px;
    color: #FFF;
}
.adminexpenceentrytype, .adminexpenceentryfrom{
    position: relative;
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    padding: 11px;
    color: #000;
    background-color: #f3d978;
}

.adminexpenceentrydesc, .adminexpenceentryamount{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #f3da80;
}

.adminexpenceentrysave{
    position: relative;
    float: left;
    margin-left: auto;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    background-color: #e87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.adminexpenceentrylistholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    display: flex;
    gap: 10px;
    background-color: #fff;
    flex-direction: column;
}
.adminexpenceentrylisttitle{
    position: relative;
    float: left;
    height: 30px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.adminexpenceentrylist{
    position: relative;
    float: left;
    width: 100%;
    height: 145px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: auto;
}
.adminexpenceentrylistrow{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 26px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 20px;
    font-size: 12px;
    justify-items: start;
    align-items: center;
}
.adminexpenceentrylistrow:nth-child(even){
    background-color: #eeeeee;
}
.adminexpenceentrylistblame{

}
.adminexpenceentrylistposticon{
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    background-image: url(../image/checkmark.png);
    background-position: 0 0;
    background-size: 20px 40px;
    cursor: pointer;
}
.posted{
    background-position: 0 -20px;
}
.adminexpenceentrylistcol{
    position: relative;
    float: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adminexpenceentrylistamount{
    position: relative;
    float: left;
    width: 100%;
    color: #e53512;
    display: flex;
    justify-content: flex-end;
}
.adminexpenceentrylistamount .adminexpenceentrylistblame{
    position: absolute;
    top: 0;
    left: -200px;
    height: 24px;
    padding: 0 10px;
    background-color: #75342A;
    color: #fff;
    border-radius: 3px;
    visibility: hidden;
}
.adminexpenceentrylistamount:hover .adminexpenceentrylistblame {
    visibility: visible;
}
.adminexpenceentrylistamount .adminexpenceentrylistblame::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #75342A;
}


.topbarsearchbarholder{
    position: relative;
    float: left;
    width: 100%;
    max-width: 400px;
}
.topbarsearchbar{
    position: relative;
    float: left;
    width: calc(100% - 60px);
    padding-left: 50px;
    padding-right: 10px;
    height: 50px;
    font-size: 14px;
    color: #FFF;
    background-color: #75342A;
    border-radius: 50px;
}
.topbarsearchicon{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    background-image: url(../image/magnifier.png);
    background-position: 0 0;
    background-size: 20px 20px;
    cursor: pointer;
}
.topbarsearchbardropdownholder{
    display:none;
    position: absolute;
    top: 25px;
    width: 100%;
    padding: 25px 0;
    background-color: #75342A;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px -10px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.topbarsearchbardropdown{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dropdownsearchprimary{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    background-color: #5d261c;
}
.topbarsearchiconinner{
    position: relative;
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background-image: url(../image/magnifier.png);
    background-position: 0 0;
    background-size: 20px 20px;
    opacity: .6;
    aspect-ratio: 1;
}
.dropdownsearchprimarytype{
    position: relative;
    float: left;
    margin-left: auto;
    font-size: 12px;
    color: #000000;
}
.topbarsearchbardropdownsuggestions{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}
.dropdownsearch{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 0 10px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    transition: background-color .5s;
}
.dropdownsearch:hover{
    background-color: #6b2e23;
}
.topbarsearchiconcategory{
    position: relative;
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background-image: url(../image/catesearch.png);
    background-position: 0 0;
    background-size: 20px 20px;
    opacity: .6;
    aspect-ratio: 1;
}
.dropdownsearchtext{
    position: relative;
    float: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdownsearchtype{
    position: relative;
    float: left;
    margin-left: auto;
    font-size: 12px;
    color: #000000;
    white-space: nowrap;
}
.topbarsearchthumb{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    aspect-ratio: 1;
}

.productdeliveryoptionholder{
    position: relative;
    float: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: normal;
}
.productdeliveryicon{
    flex: none;
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    background-image: url(../image/fast-delivery.png);
    background-position: 0 0;
    background-size: 20px 20px;
}
.productdeliveryoption{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: bold;
}
.productdeliverydesc{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: normal;
}
.productdeliveryrate {
    flex: none;
}

.profilepagecontent{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profilepageheader{
    position: relative;
    float: left;
    width: 100%;
    height: 100px;
    background-image: url("../image/profilebanner.png");
    background-size: cover;

}
.profilepageuserimage{
    position: relative;
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: rgb(255 255 255) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    background-image: url(../image/userfallback.png);
    background-size: 60px 60px;
}

.profilepageuserfullnameholder{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.profilepageuserfullname{
    position: relative;
    float: left;
    font-size: 16px;
    font-weight: bold;
}

.topbarsearchbarback, .topbarsearchiconformobile {
    display: none;
}
.profilepageuserverified{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/phone.png);
    background-position: 0 0;
    background-size: 30px 30px;
}
.admincashboxcovertext{
    position: relative;
    float: left;
    font-size: 12px;
    font-weight: bold;
}
.profilepageprofiledetails{
    position: relative;
    float: left;
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profilepageprofiledetailstitle{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    box-shadow: #75342A 0 1px 0 0;
}
.profilepageuserdetailsname, .profilepageuserdetailsuserid, .profilepageuserdetailsemail, .profilepageuserdetailsmobile, .profilepageuserdetailsgender, .profilepageuserdetailsdob{
    position: relative;
    float: left;
    width: 100%;
    max-width: 500px;
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    gap: 10px;
    align-items: center;
}
.profilepageuserdetailslabel{
    position: relative;
    float: left;
    font-size: 12px;
}
.profilepageuserdetails{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    max-width: 320px;
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #f3da80;
}
.profilepageuserdetailsgender select{
    width: 100%;
}
.profilepageuserdetails:disabled{
    background-color: transparent;
    cursor: unset;
    user-select: none;
    caret-color: transparent;
}
select.profilepageuserdetails:disabled{
    -webkit-appearance: none;
    -moz-appearance: none;
    opacity: 1;
}
.profilepageprofiledetailsedit{
    position: absolute;
    right: 0;
    font-size: 14px;
    color: #e53512;
    font-weight: bold;
    cursor: pointer;
}
.profilepageuserdetailsupdate{
    display: none;
    position: relative;
    float: left;
    margin-left: auto;
    width: 120px;
    height: 40px;
    background-color: #f6921e;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-size: 200% auto;
    transition: .5s;
    background-image: linear-gradient(to right, #e53512 0%, #F09819 51%, #e53512 100%);
}
.profilepageuserdetailsupdate:hover{
    background-position: right center;

}
.profilepageuserdetailsedit{
    position: relative;
    margin-left: auto;
    font-size: 14px;
    color: #e53512;
    font-weight: bold;
    cursor: pointer;
}
.profilepageuserdetailssave{
    position: relative;
    float: left;
    width: 80px;
    height: 40px;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.pagefootertitlerow{
    position: relative;
    float: left;
    width: 100%;
    height: 120px;
    font-size: 22px;
    line-height: normal;
    font-weight: normal;
    color: #FFF;
    display: flex;
    align-items: flex-end;
}
.pagefooterrow{
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 30px;
    align-items: center;
    align-items: end;
}
.pagefooterlogo{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pagefooterlogo img{
    width: 80px;
    height: auto;
}
.pagefootercopytighttext{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #FFF;
}
.pagefooterlink{
    position: relative;
    float: left;
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 30px);
    align-items: center;
    gap: 10px;
    justify-items: start;
}
.pagefootername{
    position: relative;
    float: left;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
}
.pagefootersubscriberow{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pagefooterhotline{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}
.pagefooterhotlinetext{
    position: relative;
    float: left;
    font-size: 14px;
    color: #FFF;
}
.pagefooterhotlinemobile{
    position: relative;
    float: left;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
}
.pagefootersubscriberowinner{
    position: relative;
    float: left;
    width: 100%;
    max-width: 480px;
    align-self: flex-start;
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 10px;
}
.pagefootersubscribetext{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    grid-column-start: 1;
    grid-column-end: -1;
    font-size: 14px;
    color: #FFF;
}
.pagefootersubscribemobile{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    padding: 0 20px;
    height: 40px;
    font-size: 14px;
    color: #000;
    background-color: #f3da80;
    border-radius: 50px;
}
.pagefootersubscribemobile::placeholder{
    color: #c09c68;
}
.pagefootersubscribe{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}

.pagefootersociallink{
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    grid-column-start: 2;
    border-top: 2px solid #204f49;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.pagefootersocialtext{
    position: relative;
    float: left;
    font-size: 14px;
    color: #FFF;
}
.pagefootersocialiconfb{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/socialicons.png");
    background-size: 30px 90px;
    background-position: 0 0;
}
.pagefootersocialiconinsta{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/socialicons.png");
    background-size: 30px 90px;
    background-position: 0 -30px;
}
.pagefootersocialiconyt{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url("../image/socialicons.png");
    background-size: 30px 90px;
    background-position: 0 -60px;
}
.popupresetpasswordlink{
    position: relative;
    margin-left: auto;
    top: -10px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}

.resetpasswordstep1, .resetpasswordstep2, .resetpasswordstep3{
    position: relative;
    float: left;
    width: calc(100% - 60px);
    max-width: 400px;
    background-color: #FFF;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: #e53512 0px 0px 0px 2px inset;
}


.resetpasswordsteplabel{
    position: absolute;
    font-size: 10px;
    line-height: normal;
    top: 10px;
    right: 10px;
    color: #666;
}
.resetpasswordtitleholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.resetpasswordtitle{
    position: relative;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
.resetpasswordsubtitle{
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: normal;
    color: #444;
}
.resetpasswordform{
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}
.resetpasswordforminputholder{
    position: relative;
    float: left;
    width: 100%;
    padding: 20px 0;
}
.resetpasswordforminputholder label{
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 12px;
    color: #777;
}
.passwordholder label{
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 12px;
    color: #777;
}
.resetpasswordforminput{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #EEE;
}
.resetpasswordformbutton{
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    margin-left: auto;
    background-color: #E87556;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    background-size: 200% auto;
    transition: .5s;
    align-items: center;
    justify-content: center;
}
.resetpasswordformbutton:disabled{
    opacity: .7;
    cursor: auto;
}
.indexpromoholder{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.indexpromoimage{
    position: relative;
    float: left;
    flex: none;
    width: 180px;
    height: 104px;
    background-image: url("../image/promo.png");
    background-size: cover;
}
.indexpromotext{
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    top: -20px;
}
.adminnewusersholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #fff;
}
.adminnewuserstitle{
    position: relative;
    float: left;
    height: 30px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.adminnewusersbox{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}
.adminnewusersbox a{
    position: relative;
    float: left;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: inset #e0e0e0 0px 0px 0px 2px;
}
.adminnewusersname{
    position: relative;
    float: left;
    font-size: 12px;
    color: #000;
    text-decoration: none;
}
.adminnewusersverified{
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    background-image: url(../image/checkmark.png);
    background-position: 0 -20px;
    background-size: 20px 40px;
    cursor: pointer;
}













/*CHECKBOX*/
.checkbox-wrapper-1 *,
.checkbox-wrapper-1 ::after,
.checkbox-wrapper-1 ::before {
    box-sizing: border-box;
}
.checkbox-wrapper-1 [type=checkbox].substituted {
    margin: 0;
    width: 0;
    height: 0;
    display: inline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.checkbox-wrapper-1 [type=checkbox].substituted + label:before {
    content: "";
    display: inline-block;
    vertical-align: top;
    height: 1.15em;
    width: 1.15em;
    margin-right: 0.6em;
    color: rgba(0, 0, 0, 0.275);
    border: solid 0.06em;
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em inset, 0 0 0 0.07em transparent inset;
    border-radius: 0.2em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center, white;
    background-size: 0;
    will-change: color, border, background, background-size, box-shadow;
    transform: translate3d(0, 0, 0);
    transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s;
}
.checkbox-wrapper-1 [type=checkbox].substituted:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted:enabled + label:active:before {
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset;
    background-color: #f0f0f0;
}
.checkbox-wrapper-1 [type=checkbox].substituted:checked + label:before {
    background-color: #3B99FC;
    background-size: 0.75em;
    color: rgba(0, 0, 0, 0.075);
}
.checkbox-wrapper-1 [type=checkbox].substituted:checked:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted:checked:enabled + label:active:before {
    background-color: #0a7ffb;
    color: rgba(0, 0, 0, 0.275);
}
.checkbox-wrapper-1 [type=checkbox].substituted:focus + label:before {
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);
}
.checkbox-wrapper-1 [type=checkbox].substituted:focus:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted:focus + label:active:before {
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);
}
.checkbox-wrapper-1 [type=checkbox].substituted:disabled + label:before {
    opacity: 0.5;
}

.checkbox-wrapper-1 [type=checkbox].substituted.dark + label:before {
    color: rgba(255, 255, 255, 0.275);
    background-color: #222;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34, 34, 34, 0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>');
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted.dark:enabled + label:active:before {
    background-color: #444;
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(255, 255, 255, 0.1) inset;
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark:checked + label:before {
    background-color: #a97035;
    color: rgba(255, 255, 255, 0.075);
}
.checkbox-wrapper-1 [type=checkbox].substituted.dark:checked:enabled:active + label:before,
.checkbox-wrapper-1 [type=checkbox].substituted.dark:checked:enabled + label:active:before {
    background-color: #c68035;
    color: rgba(0, 0, 0, 0.275);
}

/*SCROLL BAR*/
/* width */
::-webkit-scrollbar {
    width: 0px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #13547a;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #13547a;
}




.productpickertopbar{
    position: sticky;
    float: left;
    top: 0px;
    width: 100%;
    height: 50px;
    background-color: #222222;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.scannerbutton{
    display: none;
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url(../image/scan.png);
    background-size: 20px 40px;
    background-position: 0 0;
    cursor: pointer;
    aspect-ratio: 1;
}
.activescanner{
    background-position: 0 -20px;
}
.scannedcodeinput{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #444;
}
.searchitemtoadd{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #444;
}
.productpickercatbar{
    position: sticky;
    float: left;
    top: 50px;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 5px;
    background-color: #222222;
    border-bottom: 1px solid #444;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}
.productpickercatitem{
    position: relative;
    float: left;
    font-size: 14px;
    color: #ccc;
    text-decoration: none;
}
.printqricon{
    position: relative;
    float: left;
    width: 32px;
    height: 32px;
    background-image: url(../image/receipt.png);
    background-size: 32px 32px;
    background-position: 0 0;
    cursor: pointer;
    aspect-ratio: 1;
}


.productqrlabelholder{
    position: relative;
    float: left;
    width: 21.044cm;
     height: 28.87cm;
    margin: 0.33in 0 0 0.21in;
}
.productqrlabelpage{
    position: relative;
    float: left;
    width: 100%
}
.productqrlabel{
    position: relative;
    float: left;
    width: 1.46in;
    height: 0.506in;
    padding: 0.07in;
    display: flex;
    align-items: center;
    /*box-shadow: rgb(0 0 0) 0px 0px 0px 0.5px;*/
}
/*.productqrlabel:before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: calc(100% + 16px);*/
/*    height: calc(100% + 17px);*/
/*    left: -8px;*/
/*    top: -8px;*/
/*    outline: 1px solid #ccc;*/
/*    border-radius: 10px;*/
/*}*/

@media print{
    .productqrlabel:before{
        content: none;
    }
    .hidethis{
        display: none;
    }
}

.hidethis{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background-image: url(../image/block.png);
    background-size: 30px 30px;
    background-position: 0 0;
    cursor: pointer;
}
.productqrlabeltext{
    position: relative;
    float: left;
    width: calc(100% - 1.2cm);
    margin-left: 0.2cm;
    display: flex;
    /* grid-column-start: 2; */
    /* grid-column-end: -1; */
    flex-direction: column;
}
.productqrlabelproductname{
    position: relative;
    float: left;
    font-size: 6px;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
}
.productqrlabelstyle{
    position: relative;
    float: left;
    font-size: 6px;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
}
.productqrlabelcode{
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
#productqrlabelqrcode{
    position: relative;
    float: left;
    width: 1cm;
}
#productqrlabelqrcode img{
    width: 100%;
    height: auto;
    aspect-ratio: 1;

}
.productqrlabelprice{
    position: relative;
    float: left;
    width: 100%;
    line-height: normal;
    font-size: 10px;
    font-weight: bold;
}
.scanrelatedmessage{
    display: none;
    position: fixed;
    width: 200px;
    left: calc(50% - 100px);
    top: calc(50% - 50px);
    background-color: #e87556;
    opacity: .5;
    border-radius: 10px;
    color: #FFF;
    text-align: center;
    padding: 38px 0;
}
.bkashpaymentcheckerholder{
    position: relative;
}
.bkashpaymentchecker{
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-image: url(../image/checkbkash.png);
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.adminbkashsearch{
    position: absolute;
    width: 210px;
    height: 180px;
    right: 0;
    top: 40px;
    padding: 20px;
    z-index: 1;
    background-color: #e2136e;
    color: #FFF;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.adminbkashsearchinput{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 14px;
    color: #000000;
    background-color: #ff4a99;
}
.adminbkashsearchinput::placeholder{
    color: #333;
}
.adminbkashsearchbutton{
    position: relative;
    float: left;
    margin-left: auto;
    width: 100%;
    height: 40px;
    background-color: #000000;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.adminbkashsearchresult{
    display: block;
    position: relative;
    float: left;
    font-size: 16px;
    color: #FFF;
    font-weight: bold;
}

.inventorypagecatbar{
    position: sticky;
    float: left;
    top: 100px;
    z-index: 1;
    padding: 15px;
    background-color: #22736a;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.inventorypagecatitem{
    position: relative;
    float: left;
    font-size: 14px;
    color: #ccc;
    text-decoration: none;
}











@media only screen and (max-width: 1050px){
    .newsellandorderrecodentrydetails{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .newsellandorderrecodentrydetailssesectedproducts{
        grid-column-start: 1;
    }
    .newsellandorderrecodentrydetailscustomardetails{
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 2;
    }
}

@media only screen and (max-width: 750px){
    .newsellandorderrecodentryslider {
        display: block;
    }
    .newsellandorderrecodentrydetails{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 90px;
    }
    .newsellandorderrecodentrydetailscustomardetailspaymentsummary{
        height: 60px;
    }
    .newsellandorderrecodentrydetailsAlt{
        grid-template-rows: 0px 1fr 1fr;
    }
    .newsellandorderrecodentrydetailscustomardetails {
        grid-row-start: unset;
        grid-row-end: unset;
        grid-column-start: unset;
        padding-bottom: 10px;
    }
    .dashboardstatisticsholder{
        flex-direction: column;
    }

    .addtocartbatoonholder{
        position: fixed;
        width: calc(100% - 20px);
        right: 0;
        bottom: 0;
        padding: 10px;
        background-color: #66ABC4;
        z-index: 2;
    }
    .dashboardstatisticssummarybox{
        height: 60px;
        display: flex;
        align-items: flex-end;
        padding-bottom: 10px;
    }
    .adminexpenceentryholder{
        flex-direction: column;
    }
}

@media only screen and (max-width: 570px){


    .invoiceholder{
        zoom: 68%;
    }



    .orderboxproductholder{
        width: 100%;
    }
    .orderboxdetailsupdate{
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-top: 10px;
    }
    .orderboxdetailsupdatepackedselect, .orderboxdetailsupdateshippedselect, .orderboxdetailsupdatedeliveredselect{
        width: calc(33% - 6px);
    }



    .topbarstatementnavsub{
        display: none;
        background-color: transparent;
        position: relative;
        float: left;
        width: 1100%;
        right: unset;
        top: 10px;
        padding: 0;
        margin-left: 10px;
    }
    .indexoutletsalescustomarproducts{
        width: 100%;
    }
    .indexoutletsalesamountdetailsholder{
        width: 100%;
        margin-top: 10px;
    }
    .indexoutletsalesrecordsnewpopupcustomardetails{
        width: calc(100% - 150px);
    }
    .indexoutletsalesrecordsnewpopupsaveboxholder{
        width: 120px;
    }

    .indexoutletsalesrecordsnewpopupsaveboxpaidby{
        margin-top: 50px;
        width: 90px;
    }
    .billsummarydisplay{
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    .indexnewenrtybuttonholdertitle{
        line-height: 22px;
    }
    #chartContainer{
        height: 180px;
    }
    .dashboardstatisticschartholder{
        width: 100%;
        height: 190px;
    }
    .indexoverviewgridbox{
        height: 60px;
        display: flex;
        align-items: flex-end;
        padding-bottom: 10px;
    }

    .selltypecustomardetailsholder{
        height: 180px;
    }
    .relatedproductsholder{
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .topbarsearchbarholder{
        position: fixed;
        width: calc(100% - 20px);
        padding: 0 10px;
        height: 100px;
        left: 0;
        top: 0;
        max-width: unset;
        display: flex;
        align-items: center;
        background-color: #FFF;
        z-index: 1;
        transition: visibility .3s;
        visibility: hidden;
    }
    .topbarsearchbar{
        margin-left: 50px;
    }
    .topbarsearchicon{
        top: 40px;
        left: 75px;
    }
    .topbarsearchbardropdownholder{
        top: 50px;
        left: 60px;
        width: calc(100% - 70px);
    }
    .topbarsearchbarback{
        display: block;
        position: absolute;
        margin-left: 10px;
        width: 24px;
        height: 24px;
        background-image: url(../image/left.png);
        background-position: 0 0;
        background-size: 24px 24px;
        cursor: pointer;
    }
    .topbarsearchiconformobile{
        display: block;
        position: relative;
        margin-right: auto;
        margin-left: 10px;
        float: left;
        width: 24px;
        height: 24px;
        background-color: #a97f00;
        background-image: url(../image/magnifier.png);
        background-position: 0 0;
        background-size: 24px 24px;
        cursor: pointer;
    }
    .newtextbillholder{
        display: flex;
        grid-column-start: 1;
        grid-column-end: 2;
        justify-content: flex-start;
        align-items: center;
    }

    .indexshopitemboxholder{
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .pagefootersubscriberow{
        flex-direction: column;
        gap: 20px;
    }
    .pagefooterrow{
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }
    .pagefootersociallink{
        justify-content: flex-start;
    }
    .profilepageuserdetailsname, .profilepageuserdetailsuserid, .profilepageuserdetailsemail, .profilepageuserdetailsmobile, .profilepageuserdetailsgender, .profilepageuserdetailsdob{
        grid-template-columns: 80px 1fr 80px;
    }
    .websiteorderboxbodyordervaluedetails{
        max-width: unset;
    }
    .profilepageheader{
        width: calc(100% + 20px);
        left: -10px;
    }

    .importbilldropdown{
        position: fixed;
        width: calc(100% - 20px);
        bottom: 60px;
    }
    .productpickertopbar{
        position: relative;
        top: unset;
    }
    .productpickercatbar{
        top: 0;
    }


}

.transactionupdatepopupdetailsboxsave:disabled,
.transactionupdatepopupdetailsboxsave[disabled]{
    cursor: not-allowed;
}

#preview img {
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
}









/*Banner*/
.fouryearsbannerholder{
    position: relative;
    width: calc(100% - 20px);
    max-width: 1024px;
    margin: 0 auto;
}
.fouryearsbannerholder img{
    width: 100%;
    height: auto;
}




#pagination-controls {
    margin-top: 20px;
}

.pagination-btn {
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    cursor: pointer;
}

.pagination-btn.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border-color: #007bff;
}

.campaignDiscount {
    background-color: burlywood;
}
.campaignDiscountPlusDiscount {
    background-color: chocolate;
}